mirror of https://github.com/jitsi/jitsi-meet
ref(add-people-dialog) Update design (#12468)
Convert some files to TSpull/12478/head jitsi-meet_8011
Robert Pintilii
3 years ago
committed by
GitHub
parent
8e54a69160
commit
b321cf3639
|
Before Width: | Height: | Size: 374 B After Width: | Height: | Size: 797 B |
|
Before Width: | Height: | Size: 332 B After Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 605 B After Width: | Height: | Size: 607 B |
|
Before Width: | Height: | Size: 258 B After Width: | Height: | Size: 279 B |
|
Before Width: | Height: | Size: 215 B After Width: | Height: | Size: 218 B |
@ -1,44 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
|
||||
import CopyButton from '../../../../base/buttons/CopyButton.web'; |
||||
import { translate } from '../../../../base/i18n'; |
||||
import { getDecodedURI } from '../../../../base/util'; |
||||
|
||||
|
||||
type Props = { |
||||
|
||||
/** |
||||
* Invoked to obtain translated strings. |
||||
*/ |
||||
t: Function, |
||||
|
||||
/** |
||||
* The URL of the conference. |
||||
*/ |
||||
url: string |
||||
}; |
||||
|
||||
/** |
||||
* Component meant to enable users to copy the conference URL. |
||||
* |
||||
* @returns {React$Element<any>} |
||||
*/ |
||||
function CopyMeetingLinkSection({ t, url }: Props) { |
||||
return ( |
||||
<> |
||||
<label htmlFor = { 'copy-button-id' }>{t('addPeople.shareLink')}</label> |
||||
<CopyButton |
||||
aria-label = { t('addPeople.copyLink') } |
||||
className = 'invite-more-dialog-conference-url' |
||||
displayedText = { getDecodedURI(url) } |
||||
id = 'copy-button-id' |
||||
textOnCopySuccess = { t('addPeople.linkCopied') } |
||||
textOnHover = { t('addPeople.copyLink') } |
||||
textToCopy = { url } /> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default translate(CopyMeetingLinkSection); |
||||
@ -0,0 +1,53 @@ |
||||
import { Theme } from '@mui/material'; |
||||
import React from 'react'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import { makeStyles } from 'tss-react/mui'; |
||||
|
||||
import CopyButton from '../../../../base/buttons/CopyButton.web'; |
||||
import { getDecodedURI } from '../../../../base/util/uri'; |
||||
|
||||
|
||||
interface IProps { |
||||
|
||||
/** |
||||
* The URL of the conference. |
||||
*/ |
||||
url: string; |
||||
} |
||||
|
||||
const useStyles = makeStyles()((theme: Theme) => { |
||||
return { |
||||
label: { |
||||
display: 'block', |
||||
marginBottom: theme.spacing(2) |
||||
} |
||||
}; |
||||
}); |
||||
|
||||
/** |
||||
* Component meant to enable users to copy the conference URL. |
||||
* |
||||
* @returns {React$Element<any>} |
||||
*/ |
||||
function CopyMeetingLinkSection({ url }: IProps) { |
||||
const { classes } = useStyles(); |
||||
const { t } = useTranslation(); |
||||
|
||||
return ( |
||||
<> |
||||
<label |
||||
className = { classes.label } |
||||
htmlFor = { 'copy-button-id' }>{t('addPeople.shareLink')}</label> |
||||
<CopyButton |
||||
aria-label = { t('addPeople.copyLink') } |
||||
className = 'invite-more-dialog-conference-url' |
||||
displayedText = { getDecodedURI(url) } |
||||
id = 'copy-button-id' |
||||
textOnCopySuccess = { t('addPeople.linkCopied') } |
||||
textOnHover = { t('addPeople.copyLink') } |
||||
textToCopy = { url } /> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default CopyMeetingLinkSection; |
||||
@ -1,91 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
|
||||
import { translate } from '../../../../base/i18n'; |
||||
import { connect } from '../../../../base/redux'; |
||||
import { getDialInfoPageURL, hasMultipleNumbers } from '../../../functions'; |
||||
|
||||
import DialInNumber from './DialInNumber'; |
||||
|
||||
type Props = { |
||||
|
||||
/** |
||||
* The numeric identifier for the current conference, used after dialing a |
||||
* the number to join the conference. |
||||
*/ |
||||
_conferenceID: number, |
||||
|
||||
/** |
||||
* The url of the page containing the dial-in numbers list. |
||||
*/ |
||||
_dialInfoPageUrl: string, |
||||
|
||||
/** |
||||
* If multiple dial-in numbers are available. |
||||
*/ |
||||
_hasMultipleNumbers: boolean; |
||||
|
||||
/** |
||||
* The phone number to dial to begin the process of dialing into a |
||||
* conference. |
||||
*/ |
||||
phoneNumber: string, |
||||
|
||||
/** |
||||
* Invoked to obtain translated strings. |
||||
*/ |
||||
t: Function |
||||
|
||||
}; |
||||
|
||||
/** |
||||
* Returns a ReactElement for showing how to dial into the conference, if |
||||
* dialing in is available. |
||||
* |
||||
* @private |
||||
* @returns {null|ReactElement} |
||||
*/ |
||||
function DialInSection({ |
||||
_conferenceID, |
||||
_dialInfoPageUrl, |
||||
_hasMultipleNumbers, |
||||
phoneNumber, |
||||
t |
||||
}: Props) { |
||||
return ( |
||||
<div className = 'invite-more-dialog dial-in-display'> |
||||
<DialInNumber |
||||
conferenceID = { _conferenceID } |
||||
phoneNumber = { phoneNumber } /> |
||||
{_hasMultipleNumbers ? <a |
||||
className = 'more-numbers' |
||||
href = { _dialInfoPageUrl } |
||||
rel = 'noopener noreferrer' |
||||
target = '_blank'> |
||||
{ t('info.moreNumbers') } |
||||
</a> : null} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Maps (parts of) the Redux state to the associated props for the |
||||
* {@code DialInLink} component. |
||||
* |
||||
* @param {Object} state - The Redux state. |
||||
* @private |
||||
* @returns {Props} |
||||
*/ |
||||
function _mapStateToProps(state) { |
||||
const dialIn = state['features/invite']; |
||||
|
||||
return { |
||||
_conferenceID: dialIn.conferenceID, |
||||
_dialInfoPageUrl: getDialInfoPageURL(state), |
||||
_hasMultipleNumbers: hasMultipleNumbers(dialIn.numbers) |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(DialInSection)); |
||||
@ -0,0 +1,75 @@ |
||||
import { Theme } from '@mui/material'; |
||||
import React from 'react'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import { useSelector } from 'react-redux'; |
||||
import { makeStyles } from 'tss-react/mui'; |
||||
|
||||
import { IReduxState } from '../../../../app/types'; |
||||
import { withPixelLineHeight } from '../../../../base/styles/functions.web'; |
||||
// eslint-disable-next-line lines-around-comment
|
||||
// @ts-ignore
|
||||
import { getDialInfoPageURL, hasMultipleNumbers } from '../../../functions'; |
||||
|
||||
import DialInNumber from './DialInNumber'; |
||||
|
||||
interface IProps { |
||||
|
||||
/** |
||||
* The phone number to dial to begin the process of dialing into a |
||||
* conference. |
||||
*/ |
||||
phoneNumber: string; |
||||
} |
||||
|
||||
const useStyles = makeStyles()((theme: Theme) => { |
||||
return { |
||||
container: { |
||||
'& .info-label': { |
||||
...withPixelLineHeight(theme.typography.bodyLongBold) |
||||
} |
||||
}, |
||||
|
||||
link: { |
||||
...withPixelLineHeight(theme.typography.bodyLongRegular), |
||||
color: theme.palette.link01, |
||||
|
||||
'&:hover': { |
||||
color: theme.palette.link01Hover |
||||
} |
||||
} |
||||
}; |
||||
}); |
||||
|
||||
/** |
||||
* Returns a ReactElement for showing how to dial into the conference, if |
||||
* dialing in is available. |
||||
* |
||||
* @private |
||||
* @returns {null|ReactElement} |
||||
*/ |
||||
function DialInSection({ |
||||
phoneNumber |
||||
}: IProps) { |
||||
const { classes, cx } = useStyles(); |
||||
const conferenceID = useSelector((state: IReduxState) => state['features/invite'].conferenceID); |
||||
const dialInfoPageUrl: string = useSelector(getDialInfoPageURL); |
||||
const showMoreNumbers = useSelector((state: IReduxState) => hasMultipleNumbers(state['features/invite'].numbers)); |
||||
const { t } = useTranslation(); |
||||
|
||||
return ( |
||||
<div className = { classes.container }> |
||||
<DialInNumber |
||||
conferenceID = { conferenceID ?? '' } |
||||
phoneNumber = { phoneNumber } /> |
||||
{showMoreNumbers ? <a |
||||
className = { cx('more-numbers', classes.link) } |
||||
href = { dialInfoPageUrl } |
||||
rel = 'noopener noreferrer' |
||||
target = '_blank'> |
||||
{ t('info.moreNumbers') } |
||||
</a> : null} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default DialInSection; |
||||
Loading…
Reference in new issue