diff --git a/css/modals/invite/_info.scss b/css/modals/invite/_info.scss index bc8aa5bb19..a33b1b963a 100644 --- a/css/modals/invite/_info.scss +++ b/css/modals/invite/_info.scss @@ -63,6 +63,8 @@ width: -webkit-max-content; word-break: break-all; max-width: 400px; + display: flex; + align-items: center; } .info-dialog-dial-in { @@ -86,6 +88,15 @@ cursor: inherit; } + .info-dialog-url-icon { + display: inline-block; + margin-left: 5px; + + svg { + cursor: pointer; + } + } + .info-dialog-title { font-weight: bold; margin-bottom: 10px; @@ -214,4 +225,10 @@ -moz-user-select: text; -webkit-user-select: text; } + + .info-dialog-url-text-unselectable { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + } } diff --git a/react/features/base/icons/components/Icon.js b/react/features/base/icons/components/Icon.js index 4609090066..21811a9258 100644 --- a/react/features/base/icons/components/Icon.js +++ b/react/features/base/icons/components/Icon.js @@ -23,6 +23,11 @@ type Props = { */ id?: string, + /** + * Function to invoke on click. + */ + onClick?: Function, + /** * The size of the icon (if not provided by the style object). */ @@ -53,6 +58,7 @@ export default function Icon(props: Props) { className, color, id, + onClick, size, src: IconComponent, style @@ -69,6 +75,7 @@ export default function Icon(props: Props) { return ( + + diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index ebcb4c4eac..1e87c245ee 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -18,6 +18,7 @@ export { default as IconClose } from './close.svg'; export { default as IconClosedCaption } from './closed_caption.svg'; export { default as IconConnectionActive } from './gsm-bars.svg'; export { default as IconConnectionInactive } from './ninja.svg'; +export { default as IconCopy } from './copy.svg'; export { default as IconDeviceBluetooth } from './bluetooth.svg'; export { default as IconDeviceEarpiece } from './phone-talk.svg'; export { default as IconDeviceHeadphone } from './headset.svg'; diff --git a/react/features/invite/components/info-dialog/web/InfoDialog.js b/react/features/invite/components/info-dialog/web/InfoDialog.js index 9131edb78b..6f9bdae2c7 100644 --- a/react/features/invite/components/info-dialog/web/InfoDialog.js +++ b/react/features/invite/components/info-dialog/web/InfoDialog.js @@ -7,7 +7,7 @@ import { setPassword } from '../../../../base/conference'; import { getInviteURL } from '../../../../base/connection'; import { Dialog } from '../../../../base/dialog'; import { translate } from '../../../../base/i18n'; -import { Icon, IconInfo } from '../../../../base/icons'; +import { Icon, IconInfo, IconCopy } from '../../../../base/icons'; import { connect } from '../../../../base/redux'; import { isLocalParticipantModerator, @@ -136,6 +136,7 @@ type State = { */ class InfoDialog extends Component { _copyElement: ?Object; + _copyUrlElement: ?Object; /** * Implements React's {@link Component#getDerivedStateFromProps()}. @@ -197,12 +198,14 @@ class InfoDialog extends Component { // Bind event handlers so they are only bound once for every instance. this._onClickURLText = this._onClickURLText.bind(this); - this._onCopyInviteURL = this._onCopyInviteURL.bind(this); + this._onCopyInviteInfo = this._onCopyInviteInfo.bind(this); + this._onCopyInviteUrl = this._onCopyInviteUrl.bind(this); this._onPasswordRemove = this._onPasswordRemove.bind(this); this._onPasswordSubmit = this._onPasswordSubmit.bind(this); this._onTogglePasswordEditState = this._onTogglePasswordEditState.bind(this); this._setCopyElement = this._setCopyElement.bind(this); + this._setCopyUrlElement = this._setCopyUrlElement.bind(this); } /** @@ -239,12 +242,18 @@ class InfoDialog extends Component {   { decodeURI(this._getURLToDisplay()) } + + +
{ this._renderDialInDisplay() } @@ -262,7 +271,7 @@ class InfoDialog extends Component { @@ -275,6 +284,12 @@ class InfoDialog extends Component { ref = { this._setCopyElement } tabIndex = '-1' value = { this._getTextToCopy() } /> +