Browse Source

fix(Safari): Fix mobile double tapping for toolbar and overflow.

* Create generic tooltip wrapper for mobile usability.
* Change overflow menu icon/font/padding sizes.
* Change overflow drawer expand icon.
j8
Mihai-Andrei Uscat 4 years ago
parent
commit
b69e93a900
No account linked to committer's email address

+ 25
- 15
css/_drawer.scss View File

7
 }
7
 }
8
 
8
 
9
 .drawer-menu {
9
 .drawer-menu {
10
-    padding: 12px 16px;
10
+    padding: 0 16px;
11
     max-height: 50vh;
11
     max-height: 50vh;
12
     background: #242528;
12
     background: #242528;
13
     border-radius: 16px 16px 0 0;
13
     border-radius: 16px 16px 0 0;
24
         height: 44px;
24
         height: 44px;
25
         cursor: pointer;
25
         cursor: pointer;
26
 
26
 
27
-        &:hover {
28
-            background-color: $overflowMenuItemHoverBG;
27
+        @media (hover: hover) and (pointer: fine) {
28
+            &:hover {
29
+                background-color: $overflowMenuItemHoverBG;
30
+            }
29
         }
31
         }
30
 
32
 
31
-        svg, path {
32
-            fill: #b8c7e0;
33
+        svg {
34
+            fill: none;
33
         }
35
         }
34
     }
36
     }
35
 
37
 
57
             color: $overflowMenuItemColor;
59
             color: $overflowMenuItemColor;
58
             cursor: pointer;
60
             cursor: pointer;
59
             display: flex;
61
             display: flex;
60
-            font-size: 14px;
62
+            font-size: 16px;
61
 
63
 
62
             div {
64
             div {
63
                 display: flex;
65
                 display: flex;
65
                 align-items: center;
67
                 align-items: center;
66
             }
68
             }
67
 
69
 
68
-            &:hover {
69
-                background-color: $overflowMenuItemHoverBG;
70
-                color: $overflowMenuItemHoverColor;
70
+            @media (hover: hover) and (pointer: fine) {
71
+                &:hover {
72
+                    background-color: $overflowMenuItemHoverBG;
73
+                    color: $overflowMenuItemHoverColor;
74
+                }
71
             }
75
             }
72
 
76
 
73
             &.unclickable {
77
             &.unclickable {
74
                 cursor: default;
78
                 cursor: default;
75
             }
79
             }
76
-            &.unclickable:hover {
77
-                background: inherit;
80
+            @media (hover: hover) and (pointer: fine) {
81
+                &.unclickable:hover {
82
+                    background: inherit;
83
+                }
78
             }
84
             }
79
             &.disabled {
85
             &.disabled {
80
                 cursor: initial;
86
                 cursor: initial;
93
         }
99
         }
94
 
100
 
95
         .overflow-menu-item-icon {
101
         .overflow-menu-item-icon {
96
-            margin-right: 10px;
102
+            margin-right: 16px;
97
 
103
 
98
             i {
104
             i {
99
                 display: inline;
105
                 display: inline;
100
                 font-size: 24px;
106
                 font-size: 24px;
101
             }
107
             }
102
 
108
 
103
-            i:hover {
104
-                background-color: initial;
109
+            @media (hover: hover) and (pointer: fine) {
110
+                i:hover {
111
+                    background-color: initial;
112
+                }
105
             }
113
             }
106
 
114
 
107
             img {
115
             img {
111
 
119
 
112
             svg {
120
             svg {
113
                 fill: #B8C7E0 !important;
121
                 fill: #B8C7E0 !important;
122
+                height: 20px;
123
+                width: 20px;
114
             }
124
             }
115
         }
125
         }
116
 
126
 
117
         .profile-text {
127
         .profile-text {
118
-            max-width: 150px;
128
+            max-width: 100%;
119
             text-overflow: ellipsis;
129
             text-overflow: ellipsis;
120
             overflow: hidden;
130
             overflow: hidden;
121
             white-space: nowrap;
131
             white-space: nowrap;

+ 38
- 17
css/_toolbars.scss View File

91
                     width: 38px;
91
                     width: 38px;
92
                     height: 38px;
92
                     height: 38px;
93
 
93
 
94
-                    &:hover {
95
-                        background-color: #daebfa;
96
-                        border: 1px solid #daebfa;
94
+                    @media (hover: hover) and (pointer: fine) {
95
+                        &:hover {
96
+                            background-color: #daebfa;
97
+                            border: 1px solid #daebfa;
98
+                        }
97
                     }
99
                     }
98
 
100
 
99
                     &.toggled {
101
                     &.toggled {
104
                             fill: #fff;
106
                             fill: #fff;
105
                         }
107
                         }
106
 
108
 
107
-                        &:hover {
108
-                            background-color: #5e6d7a;
109
+                        @media (hover: hover) and (pointer: fine) {
110
+                            &:hover {
111
+                                background-color: #5e6d7a;
112
+                            }
109
                         }
113
                         }
110
                     }
114
                     }
111
 
115
 
127
                         width: 40px;
131
                         width: 40px;
128
                         height: 40px;
132
                         height: 40px;
129
 
133
 
130
-                        &:hover {
131
-                            background-color: $hangupColor;
134
+                        @media (hover: hover) and (pointer: fine) {
135
+                            &:hover {
136
+                                background-color: $hangupColor;
137
+                            }
132
                         }
138
                         }
133
 
139
 
134
                         svg {
140
                         svg {
159
                 cursor: pointer;
165
                 cursor: pointer;
160
                 display: flex;
166
                 display: flex;
161
                 font-size: 14px;
167
                 font-size: 14px;
162
-                height: 22px;
168
+                height: 40px;
163
                 padding: 5px 12px;
169
                 padding: 5px 12px;
170
+                box-sizing: border-box;
164
 
171
 
165
                 div {
172
                 div {
166
                     display: flex;
173
                     display: flex;
168
                     align-items: center;
175
                     align-items: center;
169
                 }
176
                 }
170
 
177
 
171
-                &:hover {
172
-                    background-color: $overflowMenuItemHoverBG;
173
-                    color: $overflowMenuItemHoverColor;
178
+                @media (hover: hover) and (pointer: fine) {
179
+                    &:hover {
180
+                        background-color: $overflowMenuItemHoverBG;
181
+                        color: $overflowMenuItemHoverColor;
182
+                    }
174
                 }
183
                 }
175
 
184
 
176
                 &.unclickable {
185
                 &.unclickable {
177
                     cursor: default;
186
                     cursor: default;
178
                 }
187
                 }
179
-                &.unclickable:hover {
180
-                    background: inherit;
188
+                @media (hover: hover) and (pointer: fine) {
189
+                    &.unclickable:hover {
190
+                        background: inherit;
191
+                    }
181
                 }
192
                 }
182
                 &.disabled {
193
                 &.disabled {
183
                     cursor: initial;
194
                     cursor: initial;
196
             }
207
             }
197
 
208
 
198
             .overflow-menu-item-icon {
209
             .overflow-menu-item-icon {
199
-                margin-right: 10px;
210
+                margin-right: 16px;
200
 
211
 
201
                 i {
212
                 i {
202
                     display: inline;
213
                     display: inline;
203
                     font-size: 24px;
214
                     font-size: 24px;
204
                 }
215
                 }
205
 
216
 
206
-                i:hover {
207
-                    background-color: initial;
217
+                @media (hover: hover) and (pointer: fine) {
218
+                    i:hover {
219
+                        background-color: initial;
220
+                    }
208
                 }
221
                 }
209
 
222
 
210
                 img {
223
                 img {
214
 
227
 
215
                 svg {
228
                 svg {
216
                     fill: #B8C7E0 !important;
229
                     fill: #B8C7E0 !important;
230
+                    height: 20px;
231
+                    width: 20px;
217
                 }
232
                 }
218
             }
233
             }
219
 
234
 
261
             justify-content: center;
276
             justify-content: center;
262
             width: $newToolbarSize;
277
             width: $newToolbarSize;
263
 
278
 
264
-            &:hover, &.toggled {
279
+            @media (hover: hover) and (pointer: fine) {
280
+                &:hover {
281
+                    background: $newToolbarButtonHoverColor;
282
+                }
283
+            }
284
+
285
+            &.toggled {
265
                 background: $newToolbarButtonHoverColor;
286
                 background: $newToolbarButtonHoverColor;
266
             }
287
             }
267
 
288
 

+ 4
- 2
css/modals/invite/_invite_more.scss View File

32
         line-height: 24px;
32
         line-height: 24px;
33
         cursor: pointer;
33
         cursor: pointer;
34
 
34
 
35
-        &:hover {
36
-            background: #278ADF;
35
+        @media (hover: hover) and (pointer: fine) {
36
+            &:hover {
37
+                background: #278ADF;
38
+            }
37
         }
39
         }
38
 
40
 
39
         &-text {
41
         &-text {

+ 3
- 0
react/features/base/icons/svg/icon-arrow-down-wide.svg View File

1
+<svg width="29" height="12" viewBox="0 0 29 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M2.5 2L14.2616 10L26.5 2" stroke="#929292" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
3
+</svg>

+ 3
- 0
react/features/base/icons/svg/icon-arrow-up-wide.svg View File

1
+<svg width="29" height="12" viewBox="0 0 29 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M2.5 10L14.2616 2L26.5 10" stroke="#929292" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
3
+</svg>

+ 2
- 0
react/features/base/icons/svg/index.js View File

6
 export { default as IconArrowDown } from './arrow_down.svg';
6
 export { default as IconArrowDown } from './arrow_down.svg';
7
 export { default as IconArrowDownLarge } from './arrow_down_large.svg';
7
 export { default as IconArrowDownLarge } from './arrow_down_large.svg';
8
 export { default as IconArrowDownSmall } from './arrow-down-small.svg';
8
 export { default as IconArrowDownSmall } from './arrow-down-small.svg';
9
+export { default as IconArrowDownWide } from './icon-arrow-down-wide.svg';
9
 export { default as IconArrowUp } from './arrow_up.svg';
10
 export { default as IconArrowUp } from './arrow_up.svg';
10
 export { default as IconArrowUpLarge } from './arrow_up_large.svg';
11
 export { default as IconArrowUpLarge } from './arrow_up_large.svg';
12
+export { default as IconArrowUpWide } from './icon-arrow-up-wide.svg';
11
 export { default as IconArrowLeft } from './arrow-left.svg';
13
 export { default as IconArrowLeft } from './arrow-left.svg';
12
 export { default as IconAudioOnly } from './visibility.svg';
14
 export { default as IconAudioOnly } from './visibility.svg';
13
 export { default as IconAudioOnlyOff } from './visibility-off.svg';
15
 export { default as IconAudioOnlyOff } from './visibility-off.svg';

+ 1
- 1
react/features/base/react/components/web/BaseIndicator.js View File

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { translate } from '../../../i18n';
5
 import { translate } from '../../../i18n';
7
 import { Icon } from '../../../icons';
6
 import { Icon } from '../../../icons';
7
+import { Tooltip } from '../../../tooltip';
8
 
8
 
9
 /**
9
 /**
10
  * The type of the React {@code Component} props of {@link BaseIndicator}.
10
  * The type of the React {@code Component} props of {@link BaseIndicator}.

+ 1
- 1
react/features/base/toolbox/components/OverflowMenuItem.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { Icon } from '../../icons';
5
 import { Icon } from '../../icons';
6
+import { Tooltip } from '../../tooltip';
7
 
7
 
8
 /**
8
 /**
9
  * The type of the React {@code Component} props of {@link OverflowMenuItem}.
9
  * The type of the React {@code Component} props of {@link OverflowMenuItem}.

+ 1
- 1
react/features/base/toolbox/components/ToolboxItem.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Fragment } from 'react';
3
 import React, { Fragment } from 'react';
5
 
4
 
6
 import { Icon } from '../../icons';
5
 import { Icon } from '../../icons';
6
+import { Tooltip } from '../../tooltip';
7
 
7
 
8
 import AbstractToolboxItem from './AbstractToolboxItem';
8
 import AbstractToolboxItem from './AbstractToolboxItem';
9
 import type { Props } from './AbstractToolboxItem';
9
 import type { Props } from './AbstractToolboxItem';

+ 50
- 0
react/features/base/tooltip/components/TooltipWrapper.js View File

1
+// @flow
2
+
3
+import Tooltip from '@atlaskit/tooltip';
4
+import React from 'react';
5
+
6
+import { isMobileBrowser } from '../../environment/utils';
7
+
8
+type Props = {
9
+
10
+    /**
11
+     * Children of the component.
12
+     */
13
+    children: React$Node,
14
+
15
+    /**
16
+     * The text to be displayed in the tooltip.
17
+     */
18
+    content?: string | null,
19
+
20
+    /**
21
+     * The position of the tooltip relative to the element it contains.
22
+     */
23
+    position?: string
24
+
25
+}
26
+
27
+/**
28
+ * Wrapper of AtlasKit Tooltip that doesn't render the actual tooltip in mobile browsers.
29
+ *
30
+ * @returns {ReactElement}
31
+ */
32
+function TooltipWrapper({
33
+    children,
34
+    content,
35
+    position
36
+}: Props) {
37
+    if (isMobileBrowser()) {
38
+        return children;
39
+    }
40
+
41
+    return (
42
+        <Tooltip
43
+            content = { content }
44
+            position = { position }>
45
+            {children}
46
+        </Tooltip>
47
+    );
48
+}
49
+
50
+export default TooltipWrapper;

+ 3
- 0
react/features/base/tooltip/components/index.js View File

1
+// @flow
2
+
3
+export { default as Tooltip } from './TooltipWrapper';

+ 3
- 0
react/features/base/tooltip/index.js View File

1
+// @flow
2
+
3
+export * from './components';

+ 1
- 1
react/features/calendar-sync/components/AddMeetingUrlButton.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 import type { Dispatch } from 'redux';
4
 import type { Dispatch } from 'redux';
6
 
5
 
11
 import { translate } from '../../base/i18n';
10
 import { translate } from '../../base/i18n';
12
 import { Icon, IconAdd } from '../../base/icons';
11
 import { Icon, IconAdd } from '../../base/icons';
13
 import { connect } from '../../base/redux';
12
 import { connect } from '../../base/redux';
13
+import { Tooltip } from '../../base/tooltip';
14
 import { updateCalendarEvent } from '../actions';
14
 import { updateCalendarEvent } from '../actions';
15
 
15
 
16
 /**
16
 /**

+ 1
- 1
react/features/calendar-sync/components/JoinButton.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { translate } from '../../base/i18n';
5
 import { translate } from '../../base/i18n';
7
 import { Icon, IconAdd } from '../../base/icons';
6
 import { Icon, IconAdd } from '../../base/icons';
7
+import { Tooltip } from '../../base/tooltip';
8
 
8
 
9
 /**
9
 /**
10
  * The type of the React {@code Component} props of {@link JoinButton}.
10
  * The type of the React {@code Component} props of {@link JoinButton}.

+ 1
- 1
react/features/e2ee/components/E2EELabel.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { translate } from '../../base/i18n';
5
 import { translate } from '../../base/i18n';
7
 import { IconE2EE } from '../../base/icons';
6
 import { IconE2EE } from '../../base/icons';
8
 import { CircularLabel } from '../../base/label';
7
 import { CircularLabel } from '../../base/label';
9
 import { connect } from '../../base/redux';
8
 import { connect } from '../../base/redux';
9
+import { Tooltip } from '../../base/tooltip';
10
 
10
 
11
 import { _mapStateToProps, type Props } from './AbstractE2EELabel';
11
 import { _mapStateToProps, type Props } from './AbstractE2EELabel';
12
 
12
 

+ 1
- 1
react/features/invite/components/add-people-dialog/web/InviteByEmailSection.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { useState } from 'react';
3
 import React, { useState } from 'react';
5
 
4
 
6
 import { translate } from '../../../../base/i18n';
5
 import { translate } from '../../../../base/i18n';
13
     IconOutlook,
12
     IconOutlook,
14
     IconYahoo
13
     IconYahoo
15
 } from '../../../../base/icons';
14
 } from '../../../../base/icons';
15
+import { Tooltip } from '../../../../base/tooltip';
16
 import { copyText, openURLInBrowser } from '../../../../base/util';
16
 import { copyText, openURLInBrowser } from '../../../../base/util';
17
 
17
 
18
 type Props = {
18
 type Props = {

+ 1
- 1
react/features/local-recording/components/LocalRecordingLabel.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { translate } from '../../base/i18n/index';
5
 import { translate } from '../../base/i18n/index';
7
 import { CircularLabel } from '../../base/label/index';
6
 import { CircularLabel } from '../../base/label/index';
8
 import { connect } from '../../base/redux';
7
 import { connect } from '../../base/redux';
8
+import { Tooltip } from '../../base/tooltip';
9
 
9
 
10
 
10
 
11
 /**
11
 /**

+ 2
- 2
react/features/toolbox/components/web/Drawer.js View File

2
 
2
 
3
 import React, { useEffect, useRef, useState } from 'react';
3
 import React, { useEffect, useRef, useState } from 'react';
4
 
4
 
5
-import { Icon, IconArrowUp, IconArrowDown } from '../../../base/icons';
5
+import { Icon, IconArrowUpWide, IconArrowDownWide } from '../../../base/icons';
6
 
6
 
7
 type Props = {
7
 type Props = {
8
 
8
 
78
                     <div
78
                     <div
79
                         className = 'drawer-toggle'
79
                         className = 'drawer-toggle'
80
                         onClick = { toggleExpanded }>
80
                         onClick = { toggleExpanded }>
81
-                        <Icon src = { expanded ? IconArrowDown : IconArrowUp } />
81
+                        <Icon src = { expanded ? IconArrowDownWide : IconArrowUpWide } />
82
                     </div>
82
                     </div>
83
                 )}
83
                 )}
84
                 {children}
84
                 {children}

+ 1
- 1
react/features/toolbox/components/web/OverflowMenuProfileItem.js View File

83
                 <span className = 'overflow-menu-item-icon'>
83
                 <span className = 'overflow-menu-item-icon'>
84
                     <Avatar
84
                     <Avatar
85
                         participantId = { _localParticipant.id }
85
                         participantId = { _localParticipant.id }
86
-                        size = { 24 } />
86
+                        size = { 20 } />
87
                 </span>
87
                 </span>
88
                 <span className = 'profile-text'>
88
                 <span className = 'profile-text'>
89
                     { displayName }
89
                     { displayName }

+ 1
- 1
react/features/toolbox/components/web/ToolbarButton.js View File

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React from 'react';
3
 import React from 'react';
5
 
4
 
6
 import { Icon } from '../../../base/icons';
5
 import { Icon } from '../../../base/icons';
6
+import { Tooltip } from '../../../base/tooltip';
7
 import AbstractToolbarButton from '../AbstractToolbarButton';
7
 import AbstractToolbarButton from '../AbstractToolbarButton';
8
 import type { Props as AbstractToolbarButtonProps }
8
 import type { Props as AbstractToolbarButtonProps }
9
     from '../AbstractToolbarButton';
9
     from '../AbstractToolbarButton';

+ 1
- 1
react/features/transcribing/components/TranscribingLabel.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { translate } from '../../base/i18n';
5
 import { translate } from '../../base/i18n';
7
 import { CircularLabel } from '../../base/label';
6
 import { CircularLabel } from '../../base/label';
8
 import { connect } from '../../base/redux';
7
 import { connect } from '../../base/redux';
8
+import { Tooltip } from '../../base/tooltip';
9
 
9
 
10
 import { _mapStateToProps, type Props } from './AbstractTranscribingLabel';
10
 import { _mapStateToProps, type Props } from './AbstractTranscribingLabel';
11
 
11
 

+ 1
- 1
react/features/video-quality/components/VideoQualityLabel.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import Tooltip from '@atlaskit/tooltip';
4
 import React from 'react';
3
 import React from 'react';
5
 
4
 
6
 import { translate } from '../../base/i18n';
5
 import { translate } from '../../base/i18n';
7
 import { CircularLabel } from '../../base/label';
6
 import { CircularLabel } from '../../base/label';
8
 import { MEDIA_TYPE } from '../../base/media';
7
 import { MEDIA_TYPE } from '../../base/media';
9
 import { connect } from '../../base/redux';
8
 import { connect } from '../../base/redux';
9
+import { Tooltip } from '../../base/tooltip';
10
 import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
10
 import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
11
 
11
 
12
 import AbstractVideoQualityLabel, {
12
 import AbstractVideoQualityLabel, {

Loading…
Cancel
Save