From 73b24914ad8ee794b26d66dffc51151c88a9b0ce Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 2 Feb 2022 09:51:53 +0000 Subject: [PATCH] Reuse CopyableTest component in all places it can be --- res/css/views/dialogs/_InviteDialog.scss | 24 +------- res/css/views/dialogs/_ShareDialog.scss | 48 ++++----------- res/css/views/elements/_CopyableText.scss | 1 + src/components/views/dialogs/InviteDialog.tsx | 32 ++-------- src/components/views/dialogs/ShareDialog.tsx | 58 +++---------------- 5 files changed, 27 insertions(+), 136 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index cca17899048..546327ff40a 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -130,12 +130,8 @@ limitations under the License. text-transform: uppercase; } - .mx_InviteDialog_footer_link { - display: flex; - justify-content: space-between; - border-radius: 4px; - border: solid 1px $light-fg-color; - padding: 8px; + .mx_CopyableText { + width: unset; // full width > a { text-decoration: none; @@ -144,22 +140,6 @@ limitations under the License. text-overflow: ellipsis; } } - - .mx_InviteDialog_footer_link_copy { - flex-shrink: 0; - cursor: pointer; - margin-left: 20px; - display: inherit; - - > div { - mask-image: url($copy-button-url); - background-color: $message-action-bar-fg-color; - margin-left: 5px; - width: 20px; - height: 20px; - background-repeat: no-repeat; - } - } } .mx_InviteDialog_roomTile { diff --git a/res/css/views/dialogs/_ShareDialog.scss b/res/css/views/dialogs/_ShareDialog.scss index 4d5e1409dbd..a55849ea080 100644 --- a/res/css/views/dialogs/_ShareDialog.scss +++ b/res/css/views/dialogs/_ShareDialog.scss @@ -20,44 +20,20 @@ limitations under the License. border-color: $light-fg-color; } -.mx_ShareDialog_content { +.mx_ShareDialog .mx_ShareDialog_content { margin: 10px 0; -} - -.mx_ShareDialog_matrixto { - display: flex; - justify-content: space-between; - border-radius: 5px; - border: solid 1px $light-fg-color; - margin-bottom: 10px; - margin-top: 30px; - padding: 10px; -} -.mx_ShareDialog_matrixto a { - text-decoration: none; -} - -.mx_ShareDialog_matrixto_link { - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; -} - -.mx_ShareDialog_matrixto_copy { - flex-shrink: 0; - cursor: pointer; - margin-left: 20px; - display: inherit; -} -.mx_ShareDialog_matrixto_copy::after { - content: ""; - mask-image: url($copy-button-url); - background-color: $message-action-bar-fg-color; - margin-left: 5px; - width: 20px; - height: 20px; - background-repeat: no-repeat; + .mx_CopyableText { + width: unset; // full width + + > a { + text-decoration: none; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } } .mx_ShareDialog_split { diff --git a/res/css/views/elements/_CopyableText.scss b/res/css/views/elements/_CopyableText.scss index 690db0e24c8..a08306b66a4 100644 --- a/res/css/views/elements/_CopyableText.scss +++ b/res/css/views/elements/_CopyableText.scss @@ -17,6 +17,7 @@ limitations under the License. .mx_CopyableText { display: flex; + justify-content: space-between; border-radius: 5px; border: solid 1px $light-fg-color; margin-bottom: 10px; diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 8cc04d8628c..ee82ae1bea0 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -58,11 +58,7 @@ import { mediaFromMxc } from "../../../customisations/Media"; import { getAddressType } from "../../../UserAddress"; import BaseAvatar from '../avatars/BaseAvatar'; import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton'; -import { compare, copyPlaintext, selectText } from '../../../utils/strings'; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; -import * as ContextMenu from "../../structures/ContextMenu"; -import { toRightOf } from "../../structures/ContextMenu"; -import GenericTextContextMenu from "../context_menus/GenericTextContextMenu"; +import { compare, selectText } from '../../../utils/strings'; import Field from '../elements/Field'; import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView'; import Dialpad from '../voip/DialPad'; @@ -73,6 +69,7 @@ import DialPadBackspaceButton from "../elements/DialPadBackspaceButton"; import SpaceStore from "../../../stores/spaces/SpaceStore"; import CallHandler from "../../../CallHandler"; import UserIdentifierCustomisations from '../../../customisations/UserIdentifier'; +import CopyableText from "../elements/CopyableText"; // we have a number of types defined from the Matrix spec which can't reasonably be altered here. /* eslint-disable camelcase */ @@ -1310,20 +1307,6 @@ export default class InviteDialog extends React.PureComponent { - e.preventDefault(); - const target = e.target; // copy target before we go async and React throws it away - - const successful = await copyPlaintext(makeUserPermalink(MatrixClientPeg.get().getUserId())); - const buttonRect = target.getBoundingClientRect(); - const { close } = ContextMenu.createMenu(GenericTextContextMenu, { - ...toRightOf(buttonRect, 2), - message: successful ? _t("Copied!") : _t("Failed to copy"), - }); - // Drop a reference to this close handler for componentWillUnmount - this.closeCopiedTooltip = target.onmouseleave = close; - }; - render() { let spinner = null; if (this.state.busy) { @@ -1409,18 +1392,11 @@ export default class InviteDialog extends React.PureComponent

{ _t("Or send invite link") }

-
+ makeUserPermalink(MatrixClientPeg.get().getUserId())}> { link } - -
- -
+
; } else if (this.props.kind === KIND_INVITE) { const room = MatrixClientPeg.get()?.getRoom(this.props.roomId); diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx index 09191630950..3262f61c73f 100644 --- a/src/components/views/dialogs/ShareDialog.tsx +++ b/src/components/views/dialogs/ShareDialog.tsx @@ -16,7 +16,6 @@ limitations under the License. */ import * as React from 'react'; -import * as PropTypes from 'prop-types'; import { Room } from "matrix-js-sdk/src/models/room"; import { User } from "matrix-js-sdk/src/models/user"; import { Group } from "matrix-js-sdk/src/models/group"; @@ -26,17 +25,14 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { _t } from '../../../languageHandler'; import QRCode from "../elements/QRCode"; import { RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks"; -import * as ContextMenu from "../../structures/ContextMenu"; -import { toRightOf } from "../../structures/ContextMenu"; -import { copyPlaintext, selectText } from "../../../utils/strings"; +import { selectText } from "../../../utils/strings"; import StyledCheckbox from '../elements/StyledCheckbox'; -import AccessibleTooltipButton from '../elements/AccessibleTooltipButton'; import { IDialogProps } from "./IDialogProps"; import SettingsStore from "../../../settings/SettingsStore"; import { UIFeature } from "../../../settings/UIFeature"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import BaseDialog from "./BaseDialog"; -import GenericTextContextMenu from "../context_menus/GenericTextContextMenu"; +import CopyableText from "../elements/CopyableText"; const socials = [ { @@ -78,25 +74,11 @@ interface IState { @replaceableComponent("views.dialogs.ShareDialog") export default class ShareDialog extends React.PureComponent { - static propTypes = { - onFinished: PropTypes.func.isRequired, - target: PropTypes.oneOfType([ - PropTypes.instanceOf(Room), - PropTypes.instanceOf(User), - PropTypes.instanceOf(Group), - PropTypes.instanceOf(RoomMember), - PropTypes.instanceOf(MatrixEvent), - ]).isRequired, - }; - protected closeCopiedTooltip: () => void; constructor(props) { super(props); - this.onCopyClick = this.onCopyClick.bind(this); - this.onLinkSpecificEventCheckboxClick = this.onLinkSpecificEventCheckboxClick.bind(this); - let permalinkCreator: RoomPermalinkCreator = null; if (props.target instanceof Room) { permalinkCreator = new RoomPermalinkCreator(props.target); @@ -115,25 +97,11 @@ export default class ShareDialog extends React.PureComponent { selectText(e.target); } - async onCopyClick(e) { - e.preventDefault(); - const target = e.target; // copy target before we go async and React throws it away - - const successful = await copyPlaintext(this.getUrl()); - const buttonRect = target.getBoundingClientRect(); - const { close } = ContextMenu.createMenu(GenericTextContextMenu, { - ...toRightOf(buttonRect, 2), - message: successful ? _t('Copied!') : _t('Failed to copy'), - }); - // Drop a reference to this close handler for componentWillUnmount - this.closeCopiedTooltip = target.onmouseleave = close; - } - - onLinkSpecificEventCheckboxClick() { + private onLinkSpecificEventCheckboxClick = () => { this.setState({ linkSpecificEvent: !this.state.linkSpecificEvent, }); - } + }; componentWillUnmount() { // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close @@ -141,7 +109,7 @@ export default class ShareDialog extends React.PureComponent { if (this.closeCopiedTooltip) this.closeCopiedTooltip(); } - getUrl() { + private getUrl() { let matrixToUrl; if (this.props.target instanceof Room) { @@ -238,21 +206,11 @@ export default class ShareDialog extends React.PureComponent { onFinished={this.props.onFinished} >
- + { checkbox } { qrSocialSection }