Ver código fonte

Welcome page calendar ui improvements (#3405)

* Welcome page calendar ui improvements

* Addressing PR review comments.
master
yanas 7 anos atrás
pai
commit
86caf52d08

+ 28
- 0
css/_atlaskit_overrides.scss Ver arquivo

@@ -10,3 +10,31 @@
10 10
     -ms-transform: translateX(0) translateY(100%) translateY(16px) !important;
11 11
     -webkit-transform: translateX(0) translateY(100%) translateY(16px) !important;
12 12
 }
13
+
14
+/**
15
+ * Welcome page tab color adjustments.
16
+ */
17
+.welcome {
18
+    /**
19
+     * The text color of the selected tab and hovered tabs.
20
+     */
21
+    li.bcVmZW,
22
+    li.bcVmZW:hover,
23
+    li.kheoEp:hover {
24
+        color: #172B4D;
25
+    }
26
+
27
+    /**
28
+     * The color of the inactive tab text.
29
+     */
30
+    li.kheoEp {
31
+        color: #FFFFFF;
32
+    }
33
+
34
+    /**
35
+     * The color of the underline of a selected tab.
36
+     */
37
+    li>span.kByArU {
38
+        background-color: #172B4D;
39
+    }
40
+}

+ 4
- 0
css/_navigate_section_list.scss Ver arquivo

@@ -30,6 +30,10 @@
30 30
     &.with-click-handler:hover {
31 31
         background-color: #1a5dbb;
32 32
     }
33
+
34
+    i {
35
+        cursor: inherit;
36
+    }
33 37
 }
34 38
 .navigate-section-tile-body {
35 39
     @extend %navigate-section-list-tile-text;

+ 0
- 15
react/features/base/react/components/web/NavigateSectionListItem.js Ver arquivo

@@ -12,21 +12,6 @@ import type { Item } from '../../Types';
12 12
  */
13 13
 type Props = {
14 14
 
15
-    /**
16
-     * The icon to use for the action button.
17
-     */
18
-    actionIconName: string,
19
-
20
-    /**
21
-     * The function to call when the action button is clicked.
22
-     */
23
-    actionOnClick: ?Function,
24
-
25
-    /**
26
-     * The tooltip to attach to the action button of this list item.
27
-     */
28
-    actionTooltip: string,
29
-
30 15
     /**
31 16
      * Function to be invoked when an item is pressed. The item's URL is passed.
32 17
      */

+ 9
- 6
react/features/calendar-sync/components/AddMeetingUrlButton.web.js Ver arquivo

@@ -3,6 +3,7 @@
3 3
 import Button from '@atlaskit/button';
4 4
 import React, { Component } from 'react';
5 5
 import { connect } from 'react-redux';
6
+import Tooltip from '@atlaskit/tooltip';
6 7
 
7 8
 import { translate } from '../../base/i18n';
8 9
 
@@ -59,12 +60,14 @@ class AddMeetingUrlButton extends Component<Props> {
59 60
      */
60 61
     render() {
61 62
         return (
62
-            <Button
63
-                appearance = 'primary'
64
-                onClick = { this._onClick }
65
-                type = 'button'>
66
-                { this.props.t('calendarSync.addMeetingURL') }
67
-            </Button>
63
+            <Tooltip content = { this.props.t('calendarSync.addMeetingURL') }>
64
+                <Button
65
+                    appearance = 'primary'
66
+                    onClick = { this._onClick }
67
+                    type = 'button'>
68
+                    <i className = { 'icon-add' } />
69
+                </Button>
70
+            </Tooltip>
68 71
         );
69 72
     }
70 73
 

react/features/calendar-sync/components/AbstractCalendarList.js → react/features/calendar-sync/components/BaseCalendarList.js Ver arquivo

@@ -8,13 +8,14 @@ import { getLocalizedDateFormatter, translate } from '../../base/i18n';
8 8
 import { NavigateSectionList } from '../../base/react';
9 9
 
10 10
 import { refreshCalendar } from '../actions';
11
+
11 12
 import { isCalendarEnabled } from '../functions';
12 13
 
13 14
 import AddMeetingUrlButton from './AddMeetingUrlButton';
14 15
 
15 16
 /**
16 17
  * The type of the React {@code Component} props of
17
- * {@link AbstractCalendarList}.
18
+ * {@link BaseCalendarList}.
18 19
  */
19 20
 type Props = {
20 21
 
@@ -47,7 +48,7 @@ type Props = {
47 48
 /**
48 49
  * Component to display a list of events from a connected calendar.
49 50
  */
50
-class AbstractCalendarList extends Component<Props> {
51
+class BaseCalendarList extends Component<Props> {
51 52
     /**
52 53
      * Default values for the component's props.
53 54
      */
@@ -75,7 +76,7 @@ class AbstractCalendarList extends Component<Props> {
75 76
     }
76 77
 
77 78
     /**
78
-     * Initializes a new {@code CalendarList} instance.
79
+     * Initializes a new {@code BaseCalendarList} instance.
79 80
      *
80 81
      * @inheritdoc
81 82
      */
@@ -260,5 +261,5 @@ function _mapStateToProps(state: Object) {
260 261
 }
261 262
 
262 263
 export default isCalendarEnabled()
263
-    ? translate(connect(_mapStateToProps)(AbstractCalendarList))
264
+    ? translate(connect(_mapStateToProps)(BaseCalendarList))
264 265
     : undefined;

+ 3
- 3
react/features/calendar-sync/components/CalendarList.native.js Ver arquivo

@@ -10,7 +10,7 @@ import { translate } from '../../base/i18n';
10 10
 import { isCalendarEnabled } from '../functions';
11 11
 import styles from './styles';
12 12
 
13
-import AbstractCalendarList from './AbstractCalendarList';
13
+import BaseCalendarList from './BaseCalendarList';
14 14
 
15 15
 /**
16 16
  * The tyoe of the React {@code Component} props of {@link CalendarList}.
@@ -59,8 +59,8 @@ class CalendarList extends Component<Props> {
59 59
         const { disabled } = this.props;
60 60
 
61 61
         return (
62
-            AbstractCalendarList
63
-                ? <AbstractCalendarList
62
+            BaseCalendarList
63
+                ? <BaseCalendarList
64 64
                     disabled = { disabled }
65 65
                     renderListEmptyComponent
66 66
                         = { this._getRenderListEmptyComponent() } />

+ 3
- 3
react/features/calendar-sync/components/CalendarList.web.js Ver arquivo

@@ -11,7 +11,7 @@ import { openSettingsDialog, SETTINGS_TABS } from '../../settings';
11 11
 import { refreshCalendar } from '../actions';
12 12
 import { isCalendarEnabled } from '../functions';
13 13
 
14
-import AbstractCalendarList from './AbstractCalendarList';
14
+import BaseCalendarList from './BaseCalendarList';
15 15
 
16 16
 declare var interfaceConfig: Object;
17 17
 
@@ -74,8 +74,8 @@ class CalendarList extends Component<Props> {
74 74
         const { disabled } = this.props;
75 75
 
76 76
         return (
77
-            AbstractCalendarList
78
-                ? <AbstractCalendarList
77
+            BaseCalendarList
78
+                ? <BaseCalendarList
79 79
                     disabled = { disabled }
80 80
                     renderListEmptyComponent
81 81
                         = { this._getRenderListEmptyComponent() } />

+ 10
- 2
react/features/settings/components/web/SettingsButton.js Ver arquivo

@@ -23,6 +23,11 @@ type Props = AbstractButtonProps & {
23 23
      */
24 24
     _filmstripOnly: boolean,
25 25
 
26
+    /**
27
+     * The default tab at which the settings dialog will be opened.
28
+     */
29
+    defaultTab: string,
30
+
26 31
     /**
27 32
      * The redux {@code dispatch} function.
28 33
      */
@@ -45,13 +50,16 @@ class SettingsButton extends AbstractButton<Props, *> {
45 50
      * @returns {void}
46 51
      */
47 52
     _handleClick() {
48
-        const { _filmstripOnly, dispatch } = this.props;
53
+        const {
54
+            _filmstripOnly,
55
+            defaultTab = SETTINGS_TABS.DEVICES,
56
+            dispatch } = this.props;
49 57
 
50 58
         sendAnalytics(createToolbarEvent('settings'));
51 59
         if (_filmstripOnly) {
52 60
             dispatch(openDeviceSelectionPopup());
53 61
         } else {
54
-            dispatch(openSettingsDialog(SETTINGS_TABS.DEVICES));
62
+            dispatch(openSettingsDialog(defaultTab));
55 63
         }
56 64
     }
57 65
 }

+ 2
- 2
react/features/welcome/components/WelcomePage.web.js Ver arquivo

@@ -12,7 +12,7 @@ import { translate } from '../../base/i18n';
12 12
 import { Platform, Watermarks } from '../../base/react';
13 13
 import { CalendarList } from '../../calendar-sync';
14 14
 import { RecentList } from '../../recent-list';
15
-import { SettingsButton } from '../../settings';
15
+import { SettingsButton, SETTINGS_TABS } from '../../settings';
16 16
 
17 17
 import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
18 18
 
@@ -237,7 +237,7 @@ class WelcomePage extends AbstractWelcomePage {
237 237
         return (
238 238
             <div className = 'tab-container' >
239 239
                 <div className = 'welcome-page-settings'>
240
-                    <SettingsButton />
240
+                    <SettingsButton defaultTab = { SETTINGS_TABS.CALENDAR } />
241 241
                 </div>
242 242
                 <Tabs tabs = { tabs } />
243 243
             </div>);

Carregando…
Cancelar
Salvar