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

feat(Dialog): Make dialog close button more mobile friendly. 

* Remove pointless custom headers, fall back to ModalHeader instead.
This commit is contained in:
Mihai-Andrei Uscat 2021-01-29 12:22:43 +02:00 committed by GitHub
parent 7c90f75ec9
commit 4aab5e2054
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 39 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/_atlaskit_overrides.scss
View File

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

23
css/_chat.scss
View File

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

16
css/modals/embed-meeting/_embed-meeting.scss
View File

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

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

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

4
react/features/embed-meeting/components/EmbedMeetingDialog.js
View File

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

38
react/features/embed-meeting/components/Header.js
View File

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

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

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

38
react/features/invite/components/add-people-dialog/web/Header.js
View File

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

38
react/features/security/components/security-dialog/Header.js
View File

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

2
react/features/security/components/security-dialog/SecurityDialog.js
View File

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