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

ui: create reusable copy button

This commit is contained in:
Tudor-Ovidiu Avram 2020-07-16 16:59:26 +03:00 committed by Saúl Ibarra Corretgé
parent b831bb8350
commit 0fc748dc44
5 changed files with 172 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/buttons/copy.scss Normal file
View File

@ -0,0 +1,37 @@
.copy-button {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 8px 8px 16px;
margin-top: 8px;
width: calc(100% - 24px);
height: 24px;
background: #0376DA;
border-radius: 4px;
cursor: pointer;
&:hover {
background: #278ADF;
font-weight: 600;
}
&-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 292px;
&.selected {
font-weight: 600;
}
}
&.clicked {
background: #31B76A;
}
& > div > svg > path {
fill: #fff;
}
}

1
css/main.scss
View File

@ -33,6 +33,7 @@ $flagsImagePath: "../images/";
@import 'inlay';
@import 'reload_overlay/reload_overlay';
@import 'mini_toolbox';
@import 'buttons/copy.scss';
@import 'modals/desktop-picker/desktop-picker';
@import 'modals/device-selection/device-selection';
@import 'modals/dialog';

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

@ -67,44 +67,6 @@
}
}
&.copy-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 8px 8px 16px;
margin-top: 8px;
width: calc(100% - 24px);
height: 24px;
background: #0376DA;
border-radius: 4px;
cursor: pointer;
&:hover {
background: #278ADF;
font-weight: 600;
}
&-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 292px;
&.selected {
font-weight: 600;
}
}
&.clicked {
background: #31B76A;
}
& > div > svg > path {
fill: #fff;
}
}
&.separator {
margin: 24px 0 24px -20px;
padding: 0 20px;

125
react/features/base/buttons/CopyButton.js Normal file
View File

@ -0,0 +1,125 @@
// @flow
import React, { useState } from 'react';
import { translate } from '../../base/i18n';
import { Icon, IconCheck, IconCopy } from '../../base/icons';
import { copyText } from '../../base/util';
type Props = {
/**
* Css class to apply on container
*/
className: string,
/**
* The displayed text
*/
displayedText: string,
/**
* The text that needs to be copied (might differ from the displayedText)
*/
textToCopy: string,
/**
* The text displayed on mouse hover
*/
textOnHover: string,
/**
* The text displayed on copy success
*/
textOnCopySuccess: string
};
/**
* Component meant to enable users to copy the conference URL.
*
* @returns {React$Element<any>}
*/
function CopyButton({ className, displayedText, textToCopy, textOnHover, textOnCopySuccess }: Props) {
const [ isClicked, setIsClicked ] = useState(false);
const [ isHovered, setIsHovered ] = useState(false);
/**
* Click handler for the element.
*
* @returns {void}
*/
function onClick() {
setIsHovered(false);
if (copyText(textToCopy)) {
setIsClicked(true);
setTimeout(() => {
setIsClicked(false);
}, 2500);
}
}
/**
* Hover handler for the element.
*
* @returns {void}
*/
function onHoverIn() {
if (!isClicked) {
setIsHovered(true);
}
}
/**
* Hover handler for the element.
*
* @returns {void}
*/
function onHoverOut() {
setIsHovered(false);
}
/**
* Renders the content of the link based on the state.
*
* @returns {React$Element<any>}
*/
function renderContent() {
if (isClicked) {
return (
<>
<div className = 'copy-button-content selected'>
{textOnCopySuccess}
</div>
<Icon src = { IconCheck } />
</>
);
}
return (
<>
<div className = 'copy-button-content'>
{isHovered ? textOnHover : displayedText}
</div>
<Icon src = { IconCopy } />
</>
);
}
return (
<div
className = { `${className} copy-button${isClicked ? ' clicked' : ''}` }
onClick = { onClick }
onMouseOut = { onHoverOut }
onMouseOver = { onHoverIn }>
{ renderContent() }
</div>
);
}
CopyButton.defaultProps = {
className: ''
};
export default translate(CopyButton);

87
react/features/invite/components/add-people-dialog/web/CopyMeetingLinkSection.js
View File

@ -1,10 +1,10 @@
// @flow
import React, { useState } from 'react';
import React from 'react';
import CopyButton from '../../../../base/buttons/CopyButton';
import { translate } from '../../../../base/i18n';
import { Icon, IconCheck, IconCopy } from '../../../../base/icons';
import { copyText, getDecodedURI } from '../../../../base/util';
import { getDecodedURI } from '../../../../base/util';
type Props = {
@ -26,84 +26,15 @@ type Props = {
* @returns {React$Element<any>}
*/
function CopyMeetingLinkSection({ t, url }: Props) {
const [ isClicked, setIsClicked ] = useState(false);
const [ isHovered, setIsHovered ] = useState(false);
/**
* Click handler for the element.
*
* @returns {void}
*/
function onClick() {
setIsHovered(false);
if (copyText(url)) {
setIsClicked(true);
setTimeout(() => {
setIsClicked(false);
}, 2500);
}
}
/**
* Hover handler for the element.
*
* @returns {void}
*/
function onHoverIn() {
if (!isClicked) {
setIsHovered(true);
}
}
/**
* Hover handler for the element.
*
* @returns {void}
*/
function onHoverOut() {
setIsHovered(false);
}
/**
* Renders the content of the link based on the state.
*
* @returns {React$Element<any>}
*/
function renderLinkContent() {
if (isClicked) {
return (
<>
<div className = 'invite-more-dialog copy-link-text selected'>
{t('addPeople.linkCopied')}
</div>
<Icon src = { IconCheck } />
</>
);
}
const displayUrl = getDecodedURI(url);
return (
<>
<div className = 'invite-more-dialog invite-more-dialog-conference-url copy-link-text'>
{isHovered ? t('addPeople.copyLink') : displayUrl}
</div>
<Icon src = { IconCopy } />
</>
);
}
return (
<>
<span>{t('addPeople.shareLink')}</span>
<div
className = { `invite-more-dialog copy-link${isClicked ? ' clicked' : ''}` }
onClick = { onClick }
onMouseOut = { onHoverOut }
onMouseOver = { onHoverIn }>
{ renderLinkContent() }
</div>
<CopyButton
className = 'invite-more-dialog-conference-url'
displayedText = { getDecodedURI(url) }
textOnCopySuccess = { t('addPeople.linkCopied') }
textOnHover = { t('addPeople.copyLink') }
textToCopy = { url } />
</>
);
}