feat(Dialog): Make dialog close button more mobile friendly.
* Remove pointless custom headers, fall back to ModalHeader instead.
This commit is contained in:
parent
7c90f75ec9
commit
4aab5e2054
|
@ -20,10 +20,25 @@
|
|||
* Override @atlaskit/modal-dialog header styling
|
||||
*/
|
||||
.atlaskit-portal [role="dialog"] header {
|
||||
.jitsi-icon svg {
|
||||
fill: #B8C7E0;
|
||||
.jitsi-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jitsi-icon svg {
|
||||
fill: #B8C7E0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Make header close button more easily tappable on mobile.
|
||||
*/
|
||||
.mobile-browser .atlaskit-portal [role="dialog"] header .jitsi-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background: #2a3a4b;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -113,8 +113,11 @@
|
|||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
|
||||
.jitsi-icon > svg {
|
||||
.jitsi-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jitsi-icon > svg {
|
||||
fill: #A4B8D1;
|
||||
}
|
||||
}
|
||||
|
@ -387,6 +390,7 @@
|
|||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 16px 16px 24px;
|
||||
width: calc(100% - 32px);
|
||||
box-sizing: border-box;
|
||||
|
@ -395,8 +399,11 @@
|
|||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
|
||||
.jitsi-icon > svg {
|
||||
.jitsi-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jitsi-icon > svg {
|
||||
fill: #A4B8D1;
|
||||
}
|
||||
}
|
||||
|
@ -405,3 +412,15 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Make header close button more easily tappable on mobile.
|
||||
*/
|
||||
.mobile-browser .chat-dialog-header .jitsi-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background: #2a3a4b;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
|
@ -2,22 +2,6 @@
|
|||
&-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 16px 24px;
|
||||
width: calc(100% - 32px);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
|
||||
& > div > svg {
|
||||
cursor: pointer;
|
||||
fill: #A4B8D1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-copy {
|
||||
|
|
|
@ -47,22 +47,6 @@
|
|||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
|
||||
&.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 16px 24px;
|
||||
width: calc(100% - 32px);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
|
||||
& > div > svg {
|
||||
cursor: pointer;
|
||||
fill: #A4B8D1;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator {
|
||||
margin: 24px 0 24px -20px;
|
||||
padding: 0 20px;
|
||||
|
|
|
@ -8,8 +8,6 @@ import { getInviteURL } from '../../base/connection';
|
|||
import { Dialog } from '../../base/dialog';
|
||||
import { translate } from '../../base/i18n';
|
||||
|
||||
import Header from './Header';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
|
@ -40,9 +38,9 @@ function EmbedMeeting({ t, url }: Props) {
|
|||
|
||||
return (
|
||||
<Dialog
|
||||
customHeader = { Header }
|
||||
hideCancelButton = { true }
|
||||
submitDisabled = { true }
|
||||
titleKey = { 'embedMeeting.title' }
|
||||
width = 'small'>
|
||||
<div className = 'embed-meeting-dialog'>
|
||||
<textarea
|
||||
|
|
|
@ -1,38 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { translate } from '../../base/i18n';
|
||||
import { Icon, IconClose } from '../../base/icons';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The {@link ModalDialog} closing function.
|
||||
*/
|
||||
onClose: Function,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
t: Function
|
||||
};
|
||||
|
||||
/**
|
||||
* Custom header of the {@code EmbedMeetingDialog}.
|
||||
*
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
function Header({ onClose, t }: Props) {
|
||||
return (
|
||||
<div
|
||||
className = 'embed-meeting-dialog-header'>
|
||||
{ t('embedMeeting.title') }
|
||||
<Icon
|
||||
onClick = { onClose }
|
||||
src = { IconClose } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default translate(Header);
|
|
@ -18,7 +18,6 @@ import { _getDefaultPhoneNumber, getInviteText, isAddPeopleEnabled, isDialOutEna
|
|||
|
||||
import CopyMeetingLinkSection from './CopyMeetingLinkSection';
|
||||
import DialInSection from './DialInSection';
|
||||
import Header from './Header';
|
||||
import InviteByEmailSection from './InviteByEmailSection';
|
||||
import InviteContactsSection from './InviteContactsSection';
|
||||
import LiveStreamSection from './LiveStreamSection';
|
||||
|
@ -148,7 +147,6 @@ function AddPeopleDialog({
|
|||
return (
|
||||
<Dialog
|
||||
cancelKey = { 'dialog.close' }
|
||||
customHeader = { Header }
|
||||
hideCancelButton = { true }
|
||||
submitDisabled = { true }
|
||||
titleKey = 'addPeople.inviteMorePrompt'
|
||||
|
|
|
@ -1,38 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { translate } from '../../../../base/i18n';
|
||||
import { Icon, IconClose } from '../../../../base/icons';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The {@link ModalDialog} closing function.
|
||||
*/
|
||||
onClose: Function,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
t: Function
|
||||
};
|
||||
|
||||
/**
|
||||
* Custom header of the {@code AddPeopleDialog}.
|
||||
*
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
function Header({ onClose, t }: Props) {
|
||||
return (
|
||||
<div
|
||||
className = 'invite-more-dialog header'>
|
||||
{ t('addPeople.inviteMorePrompt') }
|
||||
<Icon
|
||||
onClick = { onClose }
|
||||
src = { IconClose } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default translate(Header);
|
|
@ -1,38 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { translate } from '../../../base/i18n';
|
||||
import { Icon, IconClose } from '../../../base/icons';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The {@link ModalDialog} closing function.
|
||||
*/
|
||||
onClose: Function,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
t: Function
|
||||
};
|
||||
|
||||
/**
|
||||
* Custom header of the {@code SecurityDialog}.
|
||||
*
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
function Header({ onClose, t }: Props) {
|
||||
return (
|
||||
<div
|
||||
className = 'invite-more-dialog header'>
|
||||
{ t('security.securityOptions') }
|
||||
<Icon
|
||||
onClick = { onClose }
|
||||
src = { IconClose } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default translate(Header);
|
|
@ -10,7 +10,6 @@ import { connect } from '../../../base/redux';
|
|||
import { E2EESection } from '../../../e2ee/components';
|
||||
import { LobbySection } from '../../../lobby';
|
||||
|
||||
import Header from './Header';
|
||||
import PasswordSection from './PasswordSection';
|
||||
|
||||
type Props = {
|
||||
|
@ -82,7 +81,6 @@ function SecurityDialog({
|
|||
|
||||
return (
|
||||
<Dialog
|
||||
customHeader = { Header }
|
||||
hideCancelButton = { true }
|
||||
submitDisabled = { true }
|
||||
titleKey = 'security.securityOptions'
|
||||
|
|
Loading…
Reference in New Issue