From f75fb3b3499c8a886b81d5a84e86596c5659b918 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 27 May 2021 15:51:25 +0100 Subject: [PATCH 1/9] Add footer and privacy note to the start dm dialog --- res/css/views/dialogs/_InviteDialog.scss | 61 ++++++++++++++++++- src/components/views/dialogs/InviteDialog.tsx | 58 ++++++++++++++++-- src/i18n/strings/en_EN.json | 3 + 3 files changed, 116 insertions(+), 6 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index d8ff56663a..a33871eca5 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -82,6 +82,14 @@ limitations under the License. text-transform: uppercase; } + > p { + margin: 0; + } + + > span { + color: $primary-fg-color; + } + .mx_InviteDialog_subname { margin-bottom: 10px; margin-top: -10px; // HACK: Positioning with margins is bad @@ -90,6 +98,49 @@ limitations under the License. } } +.mx_InviteDialog_footer { + border-top: 1px solid $input-border-color; + + > h3 { + margin: 8px 0; + font-size: $font-12px; + color: $muted-fg-color; + font-weight: bold; + text-transform: uppercase; + } + + .mx_InviteDialog_footer_link { + display: flex; + justify-content: space-between; + border-radius: 4px; + border: solid 1px $input-border-color; + padding: 8px; + + > a { + text-decoration: none; + flex-shrink: 1; + overflow: hidden; + 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 { cursor: pointer; padding: 5px 10px; @@ -212,15 +263,21 @@ limitations under the License. .mx_InviteDialog { // Prevent the dialog from jumping around randomly when elements change. - height: 590px; + height: 600px; padding-left: 20px; // the design wants some padding on the left + display: flex; + flex-direction: column; + + .mx_InviteDialog_content { + overflow: hidden; + } } .mx_InviteDialog_userSections { margin-top: 10px; overflow-y: auto; padding-right: 45px; - height: 455px; // mx_InviteDialog's height minus some for the upper elements + height: calc(100% - 190px); // mx_InviteDialog's height minus some for the upper elements } // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index ec9c71ccbe..22763ceda2 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -47,6 +47,11 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import {mediaFromMxc} from "../../../customisations/Media"; import {getAddressType} from "../../../UserAddress"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import {copyPlaintext, selectText} from "../../../utils/strings"; +import * as ContextMenu from "../../structures/ContextMenu"; +import {toRightOf} from "../../structures/ContextMenu"; +import GenericTextContextMenu from "../context_menus/GenericTextContextMenu"; // we have a number of types defined from the Matrix spec which can't reasonably be altered here. /* eslint-disable camelcase */ @@ -349,6 +354,7 @@ export default class InviteDialog extends React.PureComponent void; _debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser _editorRef: any = null; @@ -400,6 +406,12 @@ export default class InviteDialog extends React.PureComponent { this.setState({consultFirst: ev.target.checked}); } @@ -1232,6 +1244,25 @@ export default class InviteDialog extends React.PureComponent; } - let title; let helpText; let buttonText; let goButtonFn; - let consultSection; + let extraSection; + let footer; let keySharingWarning = ; const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer); @@ -1310,6 +1341,24 @@ export default class InviteDialog extends React.PureComponent + { _t("Some results may be hidden for privacy.") } +

{ _t("If you can’t see who you’re looking for, send them your invite link below.") }

+ ; + const link = makeUserPermalink(MatrixClientPeg.get().getUserId()); + footer =
+

{ _t("Or send invite link") }

+ +
} else if (this.props.kind === KIND_INVITE) { const room = MatrixClientPeg.get()?.getRoom(this.props.roomId); const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom(); @@ -1371,7 +1420,7 @@ export default class InviteDialog extends React.PureComponent + footer =
- {consultSection} + {footer} ); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1b04ae3b89..9767d7ac76 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2246,6 +2246,9 @@ "Start a conversation with someone using their name or username (like ).": "Start a conversation with someone using their name or username (like ).", "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here": "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here", "Go": "Go", + "Some results may be hidden for privacy.": "Some results may be hidden for privacy.", + "If you can’t see who you’re looking for, send them your invite link below.": "If you can’t see who you’re looking for, send them your invite link below.", + "Or send invite link": "Or send invite link", "Unnamed Space": "Unnamed Space", "Invite to %(roomName)s": "Invite to %(roomName)s", "Invite someone using their name, email address, username (like ) or share this space.": "Invite someone using their name, email address, username (like ) or share this space.", From 2c750fcb7a3bc7317b4b8b0e6013aa3f43e584a8 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 28 May 2021 12:48:12 +0100 Subject: [PATCH 2/9] Fix overflow issue in suggestion tiles --- res/css/views/dialogs/_InviteDialog.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a33871eca5..4016e7d2e3 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -193,6 +193,7 @@ limitations under the License. .mx_InviteDialog_roomTile_nameStack { display: inline-block; + overflow: hidden; } .mx_InviteDialog_roomTile_name { @@ -208,6 +209,13 @@ limitations under the License. margin-left: 7px; } + .mx_InviteDialog_roomTile_name, + .mx_InviteDialog_roomTile_userId { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .mx_InviteDialog_roomTile_time { text-align: right; font-size: $font-12px; From ea263937095053bf10ded22c2e0a7ec3da8e7cb5 Mon Sep 17 00:00:00 2001 From: Nique Woodhouse Date: Fri, 28 May 2021 13:00:18 +0100 Subject: [PATCH 3/9] Styling amends to accommodate the invite dialog footer --- res/css/views/dialogs/_InviteDialog.scss | 34 ++++++++++++++----- src/components/views/dialogs/InviteDialog.tsx | 4 +-- src/i18n/strings/en_EN.json | 2 +- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a33871eca5..bda576c44e 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -73,7 +73,7 @@ limitations under the License. } .mx_InviteDialog_section { - padding-bottom: 10px; + padding-bottom: 4px; h3 { font-size: $font-12px; @@ -98,11 +98,25 @@ limitations under the License. } } +.mx_InviteDialog_section_hidden_suggestions_disclaimer { + padding: 8px 0 16px 0; + font-size: $font-14px; + + > span { + color: $primary-fg-color; + font-weight: 600; + } + + > p { + margin:0; + } +} + .mx_InviteDialog_footer { border-top: 1px solid $input-border-color; > h3 { - margin: 8px 0; + margin: 12px 0; font-size: $font-12px; color: $muted-fg-color; font-weight: bold; @@ -113,7 +127,7 @@ limitations under the License. display: flex; justify-content: space-between; border-radius: 4px; - border: solid 1px $input-border-color; + border: solid 1px $light-fg-color; padding: 8px; > a { @@ -274,17 +288,21 @@ limitations under the License. } .mx_InviteDialog_userSections { - margin-top: 10px; + margin-top: 4px; overflow-y: auto; - padding-right: 45px; - height: calc(100% - 190px); // mx_InviteDialog's height minus some for the upper elements + padding: 0px 45px 4px 0px; + height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper and lower elements } + // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar // for the user section gets weird. -.mx_InviteDialog_helpText, .mx_InviteDialog_addressBar { - margin-right: 45px; + margin: 8px 45px 0px 0px; +} + +.mx_InviteDialog_helpText { + margin:0px; } .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link { diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 22763ceda2..081004fa74 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -1341,8 +1341,8 @@ export default class InviteDialog extends React.PureComponent - { _t("Some results may be hidden for privacy.") } + extraSection =
+ { _t("Some suggestions may be hidden for privacy.") }

{ _t("If you can’t see who you’re looking for, send them your invite link below.") }

; const link = makeUserPermalink(MatrixClientPeg.get().getUserId()); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9767d7ac76..8f5082e88a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2246,7 +2246,7 @@ "Start a conversation with someone using their name or username (like ).": "Start a conversation with someone using their name or username (like ).", "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here": "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here", "Go": "Go", - "Some results may be hidden for privacy.": "Some results may be hidden for privacy.", + "Some suggestions may be hidden for privacy.": "Some suggestions may be hidden for privacy.", "If you can’t see who you’re looking for, send them your invite link below.": "If you can’t see who you’re looking for, send them your invite link below.", "Or send invite link": "Or send invite link", "Unnamed Space": "Unnamed Space", From 36e43270ca6acd79ad5244ec83b96344fd766592 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 28 May 2021 13:08:05 +0100 Subject: [PATCH 4/9] Apply suggestions from code review --- res/css/views/dialogs/_InviteDialog.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 0d78589db2..bae086c7d5 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -108,7 +108,7 @@ limitations under the License. } > p { - margin:0; + margin: 0; } } @@ -298,7 +298,7 @@ limitations under the License. .mx_InviteDialog_userSections { margin-top: 4px; overflow-y: auto; - padding: 0px 45px 4px 0px; + padding: 0 45px 4px 0; height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper and lower elements } @@ -306,11 +306,11 @@ limitations under the License. // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar // for the user section gets weird. .mx_InviteDialog_addressBar { - margin: 8px 45px 0px 0px; + margin: 8px 45px 0 0; } .mx_InviteDialog_helpText { - margin:0px; + margin: 0; } .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link { From caaef630776a07c69654393a37bd62bb56398566 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 28 May 2021 13:11:48 +0100 Subject: [PATCH 5/9] delint1 --- res/css/views/dialogs/_InviteDialog.scss | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index bae086c7d5..8c0421b989 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -17,6 +17,9 @@ limitations under the License. .mx_InviteDialog_addressBar { display: flex; flex-direction: row; + // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar + // for the user section gets weird. + margin: 8px 45px 0 0; .mx_InviteDialog_editor { flex: 1; @@ -127,7 +130,7 @@ limitations under the License. display: flex; justify-content: space-between; border-radius: 4px; - border: solid 1px $light-fg-color; + border: solid 1px $light-fg-color; padding: 8px; > a { @@ -302,13 +305,6 @@ limitations under the License. height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper and lower elements } - -// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar -// for the user section gets weird. -.mx_InviteDialog_addressBar { - margin: 8px 45px 0 0; -} - .mx_InviteDialog_helpText { margin: 0; } From 91b7f2551312c405257421221b4d237a3bd96682 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 28 May 2021 13:51:54 +0100 Subject: [PATCH 6/9] delint2 --- src/components/views/dialogs/InviteDialog.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 7cee61d579..ef7a31a177 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -408,9 +408,6 @@ export default class InviteDialog extends React.PureComponent Date: Thu, 3 Jun 2021 16:44:28 +0100 Subject: [PATCH 7/9] Iterate PR based on feedback --- res/css/views/dialogs/_InviteDialog.scss | 6 +++++- src/components/views/dialogs/InviteDialog.tsx | 16 +++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 8c0421b989..2e48b5d8e9 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -302,7 +302,11 @@ limitations under the License. margin-top: 4px; overflow-y: auto; padding: 0 45px 4px 0; - height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper and lower elements + height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements +} + +.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections { + height: calc(100% - 175px); } .mx_InviteDialog_helpText { diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 5cbcb12c4f..557ea416a8 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef} from 'react'; +import React, { createRef } from 'react'; +import classNames from 'classnames'; + import {_t, _td} from "../../../languageHandler"; import * as sdk from "../../../index"; import {MatrixClientPeg} from "../../../MatrixClientPeg"; @@ -1252,7 +1254,7 @@ export default class InviteDialog extends React.PureComponent { e.preventDefault(); const target = e.target; // copy target before we go async and React throws it away @@ -1264,7 +1266,7 @@ export default class InviteDialog extends React.PureComponent + > +
+
} else if (this.props.kind === KIND_INVITE) { @@ -1437,7 +1441,9 @@ export default class InviteDialog extends React.PureComponent Date: Tue, 8 Jun 2021 16:42:58 +0100 Subject: [PATCH 8/9] iterate PR based on feedback --- src/components/views/dialogs/InviteDialog.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 557ea416a8..d7f1644d80 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -1249,12 +1249,12 @@ export default class InviteDialog extends React.PureComponent { + private onCopyClick = async e => { e.preventDefault(); const target = e.target; // copy target before we go async and React throws it away @@ -1348,7 +1348,7 @@ export default class InviteDialog extends React.PureComponent { _t("Some suggestions may be hidden for privacy.") } -

{ _t("If you can’t see who you’re looking for, send them your invite link below.") }

+

{ _t("If you can't see who you’re looking for, send them your invite link below.") }

; const link = makeUserPermalink(MatrixClientPeg.get().getUserId()); footer =
From 2b99afc741a4b4b9c71f9bc454cf1d433b93f564 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 8 Jun 2021 17:05:56 +0100 Subject: [PATCH 9/9] i18n --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2e8e2b39d4..a5107cba70 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2256,7 +2256,7 @@ "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here": "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here", "Go": "Go", "Some suggestions may be hidden for privacy.": "Some suggestions may be hidden for privacy.", - "If you can’t see who you’re looking for, send them your invite link below.": "If you can’t see who you’re looking for, send them your invite link below.", + "If you can't see who you’re looking for, send them your invite link below.": "If you can't see who you’re looking for, send them your invite link below.", "Or send invite link": "Or send invite link", "Unnamed Space": "Unnamed Space", "Invite to %(roomName)s": "Invite to %(roomName)s",