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.
roy-loomy · Feb 4, 2021 · b69e93a · b69e93a
1 parent d2568b8
commit b69e93a
Show file tree

Hide file tree

Showing 22 changed files with 145 additions and 48 deletions.
diff --git a/css/_drawer.scss b/css/_drawer.scss
@@ -7,7 +7,7 @@
 }
 
 .drawer-menu {
-    padding: 12px 16px;
+    padding: 0 16px;
     max-height: 50vh;
     background: #242528;
     border-radius: 16px 16px 0 0;
@@ -24,12 +24,14 @@
         height: 44px;
         cursor: pointer;
 
-        &:hover {
-            background-color: $overflowMenuItemHoverBG;
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                background-color: $overflowMenuItemHoverBG;
+            }
         }
 
-        svg, path {
-            fill: #b8c7e0;
+        svg {
+            fill: none;
         }
     }
 
@@ -57,24 +59,28 @@
             color: $overflowMenuItemColor;
             cursor: pointer;
             display: flex;
-            font-size: 14px;
+            font-size: 16px;
 
             div {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
             }
 
-            &:hover {
-                background-color: $overflowMenuItemHoverBG;
-                color: $overflowMenuItemHoverColor;
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    background-color: $overflowMenuItemHoverBG;
+                    color: $overflowMenuItemHoverColor;
+                }
             }
 
             &.unclickable {
                 cursor: default;
             }
-            &.unclickable:hover {
-                background: inherit;
+            @media (hover: hover) and (pointer: fine) {
+                &.unclickable:hover {
+                    background: inherit;
+                }
             }
             &.disabled {
                 cursor: initial;
@@ -93,15 +99,17 @@
         }
 
         .overflow-menu-item-icon {
-            margin-right: 10px;
+            margin-right: 16px;
 
             i {
                 display: inline;
                 font-size: 24px;
             }
 
-            i:hover {
-                background-color: initial;
+            @media (hover: hover) and (pointer: fine) {
+                i:hover {
+                    background-color: initial;
+                }
             }
 
             img {
@@ -111,11 +119,13 @@
 
             svg {
                 fill: #B8C7E0 !important;
+                height: 20px;
+                width: 20px;
             }
         }
 
         .profile-text {
-            max-width: 150px;
+            max-width: 100%;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
@@ -91,9 +91,11 @@
                     width: 38px;
                     height: 38px;
 
-                    &:hover {
-                        background-color: #daebfa;
-                        border: 1px solid #daebfa;
+                    @media (hover: hover) and (pointer: fine) {
+                        &:hover {
+                            background-color: #daebfa;
+                            border: 1px solid #daebfa;
+                        }
                     }
 
                     &.toggled {
@@ -104,8 +106,10 @@
                             fill: #fff;
                         }
 
-                        &:hover {
-                            background-color: #5e6d7a;
+                        @media (hover: hover) and (pointer: fine) {
+                            &:hover {
+                                background-color: #5e6d7a;
+                            }
                         }
                     }
 
@@ -127,8 +131,10 @@
                         width: 40px;
                         height: 40px;
 
-                        &:hover {
-                            background-color: $hangupColor;
+                        @media (hover: hover) and (pointer: fine) {
+                            &:hover {
+                                background-color: $hangupColor;
+                            }
                         }
 
                         svg {
@@ -159,25 +165,30 @@
                 cursor: pointer;
                 display: flex;
                 font-size: 14px;
-                height: 22px;
+                height: 40px;
                 padding: 5px 12px;
+                box-sizing: border-box;
 
                 div {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                 }
 
-                &:hover {
-                    background-color: $overflowMenuItemHoverBG;
-                    color: $overflowMenuItemHoverColor;
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        background-color: $overflowMenuItemHoverBG;
+                        color: $overflowMenuItemHoverColor;
+                    }
                 }
 
                 &.unclickable {
                     cursor: default;
                 }
-                &.unclickable:hover {
-                    background: inherit;
+                @media (hover: hover) and (pointer: fine) {
+                    &.unclickable:hover {
+                        background: inherit;
+                    }
                 }
                 &.disabled {
                     cursor: initial;
@@ -196,15 +207,17 @@
             }
 
             .overflow-menu-item-icon {
-                margin-right: 10px;
+                margin-right: 16px;
 
                 i {
                     display: inline;
                     font-size: 24px;
                 }
 
-                i:hover {
-                    background-color: initial;
+                @media (hover: hover) and (pointer: fine) {
+                    i:hover {
+                        background-color: initial;
+                    }
                 }
 
                 img {
@@ -214,6 +227,8 @@
 
                 svg {
                     fill: #B8C7E0 !important;
+                    height: 20px;
+                    width: 20px;
                 }
             }
 
@@ -261,7 +276,13 @@
             justify-content: center;
             width: $newToolbarSize;
 
-            &:hover, &.toggled {
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    background: $newToolbarButtonHoverColor;
+                }
+            }
+
+            &.toggled {
                 background: $newToolbarButtonHoverColor;
             }
 

diff --git a/css/modals/invite/_invite_more.scss b/css/modals/invite/_invite_more.scss
@@ -32,8 +32,10 @@
         line-height: 24px;
         cursor: pointer;
 
-        &:hover {
-            background: #278ADF;
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                background: #278ADF;
+            }
         }
 
         &-text {

diff --git a/react/features/base/icons/svg/icon-arrow-down-wide.svg b/react/features/base/icons/svg/icon-arrow-down-wide.svg
diff --git a/react/features/base/icons/svg/icon-arrow-up-wide.svg b/react/features/base/icons/svg/icon-arrow-up-wide.svg
diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js
@@ -6,8 +6,10 @@ export { default as IconArrowBack } from './arrow_back.svg';
 export { default as IconArrowDown } from './arrow_down.svg';
 export { default as IconArrowDownLarge } from './arrow_down_large.svg';
 export { default as IconArrowDownSmall } from './arrow-down-small.svg';
+export { default as IconArrowDownWide } from './icon-arrow-down-wide.svg';
 export { default as IconArrowUp } from './arrow_up.svg';
 export { default as IconArrowUpLarge } from './arrow_up_large.svg';
+export { default as IconArrowUpWide } from './icon-arrow-up-wide.svg';
 export { default as IconArrowLeft } from './arrow-left.svg';
 export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';

diff --git a/react/features/base/react/components/web/BaseIndicator.js b/react/features/base/react/components/web/BaseIndicator.js
@@ -1,10 +1,10 @@
 /* @flow */
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n';
 import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link BaseIndicator}.

diff --git a/react/features/base/toolbox/components/OverflowMenuItem.web.js b/react/features/base/toolbox/components/OverflowMenuItem.web.js
@@ -1,9 +1,9 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { Icon } from '../../icons';
+import { Tooltip } from '../../tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link OverflowMenuItem}.

diff --git a/react/features/base/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js
@@ -1,9 +1,9 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Fragment } from 'react';
 
 import { Icon } from '../../icons';
+import { Tooltip } from '../../tooltip';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props } from './AbstractToolboxItem';

diff --git a/react/features/base/tooltip/components/TooltipWrapper.js b/react/features/base/tooltip/components/TooltipWrapper.js
@@ -0,0 +1,50 @@
+// @flow
+
+import Tooltip from '@atlaskit/tooltip';
+import React from 'react';
+
+import { isMobileBrowser } from '../../environment/utils';
+
+type Props = {
+
+    /**
+     * Children of the component.
+     */
+    children: React$Node,
+
+    /**
+     * The text to be displayed in the tooltip.
+     */
+    content?: string | null,
+
+    /**
+     * The position of the tooltip relative to the element it contains.
+     */
+    position?: string
+
+}
+
+/**
+ * Wrapper of AtlasKit Tooltip that doesn't render the actual tooltip in mobile browsers.
+ *
+ * @returns {ReactElement}
+ */
+function TooltipWrapper({
+    children,
+    content,
+    position
+}: Props) {
+    if (isMobileBrowser()) {
+        return children;
+    }
+
+    return (
+        <Tooltip
+            content = { content }
+            position = { position }>
+            {children}
+        </Tooltip>
+    );
+}
+
+export default TooltipWrapper;
diff --git a/react/features/base/tooltip/components/index.js b/react/features/base/tooltip/components/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export { default as Tooltip } from './TooltipWrapper';
diff --git a/react/features/base/tooltip/index.js b/react/features/base/tooltip/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export * from './components';
diff --git a/react/features/calendar-sync/components/AddMeetingUrlButton.web.js b/react/features/calendar-sync/components/AddMeetingUrlButton.web.js
@@ -1,6 +1,5 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 
@@ -11,6 +10,7 @@ import {
 import { translate } from '../../base/i18n';
 import { Icon, IconAdd } from '../../base/icons';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 import { updateCalendarEvent } from '../actions';
 
 /**

diff --git a/react/features/calendar-sync/components/JoinButton.web.js b/react/features/calendar-sync/components/JoinButton.web.js
@@ -1,10 +1,10 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { Icon, IconAdd } from '../../base/icons';
+import { Tooltip } from '../../base/tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link JoinButton}.

diff --git a/react/features/e2ee/components/E2EELabel.js b/react/features/e2ee/components/E2EELabel.js
@@ -1,12 +1,12 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { IconE2EE } from '../../base/icons';
 import { CircularLabel } from '../../base/label';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 
 import { _mapStateToProps, type Props } from './AbstractE2EELabel';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		// @flow

		export { default as Tooltip } from './TooltipWrapper';