haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Mihai-Andrei Uscat 2021-02-04 15:24:25 +02:00 committed by GitHub
parent d2568b874b
commit b69e93a900
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 145 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/_drawer.scss
View File

@ -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,7 +59,7 @@
color: $overflowMenuItemColor;
cursor: pointer;
display: flex;
font-size: 14px;
font-size: 16px;
div {
display: flex;
@ -65,16 +67,20 @@
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;

55
css/_toolbars.scss
View File

@ -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,8 +165,9 @@
cursor: pointer;
display: flex;
font-size: 14px;
height: 22px;
height: 40px;
padding: 5px 12px;
box-sizing: border-box;
div {
display: flex;
@ -168,16 +175,20 @@
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;
}

6
css/modals/invite/_invite_more.scss
View File

@ -32,8 +32,10 @@
line-height: 24px;
cursor: pointer;
&:hover {
background: #278ADF;
@media (hover: hover) and (pointer: fine) {
&:hover {
background: #278ADF;
}
}
&-text {

3
react/features/base/icons/svg/icon-arrow-down-wide.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 223 B

3
react/features/base/icons/svg/icon-arrow-up-wide.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 224 B

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

@ -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';

2
react/features/base/react/components/web/BaseIndicator.js
View File

@ -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}.

2
react/features/base/toolbox/components/OverflowMenuItem.web.js
View File

@ -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}.

2
react/features/base/toolbox/components/ToolboxItem.web.js
View File

@ -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';

50
react/features/base/tooltip/components/TooltipWrapper.js Normal file
View File

@ -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;

3
react/features/base/tooltip/components/index.js Normal file
View File

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

3
react/features/base/tooltip/index.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
export * from './components';

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

@ -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';
/**

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

@ -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}.

2
react/features/e2ee/components/E2EELabel.js
View File

@ -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';

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

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

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

@ -1,11 +1,11 @@
// @flow
import Tooltip from '@atlaskit/tooltip';
import React, { Component } from 'react';
import { translate } from '../../base/i18n/index';
import { CircularLabel } from '../../base/label/index';
import { connect } from '../../base/redux';
import { Tooltip } from '../../base/tooltip';
/**

4
react/features/toolbox/components/web/Drawer.js
View File

@ -2,7 +2,7 @@
import React, { useEffect, useRef, useState } from 'react';
import { Icon, IconArrowUp, IconArrowDown } from '../../../base/icons';
import { Icon, IconArrowUpWide, IconArrowDownWide } from '../../../base/icons';
type Props = {
@ -78,7 +78,7 @@ function Drawer({
<div
className = 'drawer-toggle'
onClick = { toggleExpanded }>
<Icon src = { expanded ? IconArrowDown : IconArrowUp } />
<Icon src = { expanded ? IconArrowDownWide : IconArrowUpWide } />
</div>
)}
{children}

2
react/features/toolbox/components/web/OverflowMenuProfileItem.js
View File

@ -83,7 +83,7 @@ class OverflowMenuProfileItem extends Component<Props> {
<span className = 'overflow-menu-item-icon'>
<Avatar
participantId = { _localParticipant.id }
size = { 24 } />
size = { 20 } />
</span>
<span className = 'profile-text'>
{ displayName }

2
react/features/toolbox/components/web/ToolbarButton.js
View File

@ -1,9 +1,9 @@
/* @flow */
import Tooltip from '@atlaskit/tooltip';
import React from 'react';
import { Icon } from '../../../base/icons';
import { Tooltip } from '../../../base/tooltip';
import AbstractToolbarButton from '../AbstractToolbarButton';
import type { Props as AbstractToolbarButtonProps }
from '../AbstractToolbarButton';

2
react/features/transcribing/components/TranscribingLabel.web.js
View File

@ -1,11 +1,11 @@
// @flow
import Tooltip from '@atlaskit/tooltip';
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
import { CircularLabel } from '../../base/label';
import { connect } from '../../base/redux';
import { Tooltip } from '../../base/tooltip';
import { _mapStateToProps, type Props } from './AbstractTranscribingLabel';

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

@ -1,12 +1,12 @@
// @flow
import Tooltip from '@atlaskit/tooltip';
import React from 'react';
import { translate } from '../../base/i18n';
import { CircularLabel } from '../../base/label';
import { MEDIA_TYPE } from '../../base/media';
import { connect } from '../../base/redux';
import { Tooltip } from '../../base/tooltip';
import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
import AbstractVideoQualityLabel, {