From 7da9e0582f3887f3dab030d5279c200ce97f1ce8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 16 Jan 2020 13:42:34 -0700 Subject: [PATCH] Rename DMInviteDialog to be a generic Invite Dialog --- res/css/_components.scss | 2 +- ...DMInviteDialog.scss => _InviteDialog.scss} | 40 ++++++++--------- src/RoomInvite.js | 4 +- .../{DMInviteDialog.js => InviteDialog.js} | 44 +++++++++---------- 4 files changed, 45 insertions(+), 45 deletions(-) rename res/css/views/dialogs/{_DMInviteDialog.scss => _InviteDialog.scss} (86%) rename src/components/views/dialogs/{DMInviteDialog.js => InviteDialog.js} (94%) diff --git a/res/css/_components.scss b/res/css/_components.scss index a9a114a4cf..60f749de9c 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -57,13 +57,13 @@ @import "./views/dialogs/_ConfirmUserActionDialog.scss"; @import "./views/dialogs/_CreateGroupDialog.scss"; @import "./views/dialogs/_CreateRoomDialog.scss"; -@import "./views/dialogs/_DMInviteDialog.scss"; @import "./views/dialogs/_DeactivateAccountDialog.scss"; @import "./views/dialogs/_DeviceVerifyDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; @import "./views/dialogs/_IncomingSasDialog.scss"; +@import "./views/dialogs/_InviteDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; diff --git a/res/css/views/dialogs/_DMInviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss similarity index 86% rename from res/css/views/dialogs/_DMInviteDialog.scss rename to res/css/views/dialogs/_InviteDialog.scss index 5d58f3ae8b..d0b53b7766 100644 --- a/res/css/views/dialogs/_DMInviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_DMInviteDialog_addressBar { +.mx_InviteDialog_addressBar { display: flex; flex-direction: row; - .mx_DMInviteDialog_editor { + .mx_InviteDialog_editor { flex: 1; width: 100%; // Needed to make the Field inside grow background-color: $user-tile-hover-bg-color; @@ -28,7 +28,7 @@ limitations under the License. overflow-x: hidden; overflow-y: auto; - .mx_DMInviteDialog_userTile { + .mx_InviteDialog_userTile { display: inline-block; float: left; position: relative; @@ -61,14 +61,14 @@ limitations under the License. } } - .mx_DMInviteDialog_goButton { + .mx_InviteDialog_goButton { width: 48px; margin-left: 10px; height: 25px; line-height: 25px; } - .mx_DMInviteDialog_buttonAndSpinner { + .mx_InviteDialog_buttonAndSpinner { .mx_Spinner { // Width and height are required to trick the layout engine. width: 20px; @@ -80,7 +80,7 @@ limitations under the License. } } -.mx_DMInviteDialog_section { +.mx_InviteDialog_section { padding-bottom: 10px; h3 { @@ -91,7 +91,7 @@ limitations under the License. } } -.mx_DMInviteDialog_roomTile { +.mx_InviteDialog_roomTile { cursor: pointer; padding: 5px 10px; @@ -104,7 +104,7 @@ limitations under the License. vertical-align: middle; } - .mx_DMInviteDialog_roomTile_avatarStack { + .mx_InviteDialog_roomTile_avatarStack { display: inline-block; position: relative; width: 36px; @@ -117,7 +117,7 @@ limitations under the License. } } - .mx_DMInviteDialog_roomTile_selected { + .mx_InviteDialog_roomTile_selected { width: 36px; height: 36px; border-radius: 36px; @@ -141,20 +141,20 @@ limitations under the License. } } - .mx_DMInviteDialog_roomTile_name { + .mx_InviteDialog_roomTile_name { font-weight: 600; font-size: 14px; color: $primary-fg-color; margin-left: 7px; } - .mx_DMInviteDialog_roomTile_userId { + .mx_InviteDialog_roomTile_userId { font-size: 12px; color: $muted-fg-color; margin-left: 7px; } - .mx_DMInviteDialog_roomTile_time { + .mx_InviteDialog_roomTile_time { text-align: right; font-size: 12px; color: $muted-fg-color; @@ -162,16 +162,16 @@ limitations under the License. line-height: 36px; // Height of the avatar to keep the time vertically aligned } - .mx_DMInviteDialog_roomTile_highlight { + .mx_InviteDialog_roomTile_highlight { font-weight: 900; } } // Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. -.mx_DMInviteDialog_userTile { +.mx_InviteDialog_userTile { margin-right: 8px; - .mx_DMInviteDialog_userTile_pill { + .mx_InviteDialog_userTile_pill { background-color: $username-variant1-color; border-radius: 12px; display: inline-block; @@ -181,27 +181,27 @@ limitations under the License. padding-right: 8px; color: #ffffff; // this is fine without a var because it's for both themes - .mx_DMInviteDialog_userTile_avatar { + .mx_InviteDialog_userTile_avatar { border-radius: 20px; position: relative; left: -5px; top: 2px; } - img.mx_DMInviteDialog_userTile_avatar { + img.mx_InviteDialog_userTile_avatar { vertical-align: top; } - .mx_DMInviteDialog_userTile_name { + .mx_InviteDialog_userTile_name { vertical-align: top; } - .mx_DMInviteDialog_userTile_threepidAvatar { + .mx_InviteDialog_userTile_threepidAvatar { background-color: #ffffff; // this is fine without a var because it's for both themes } } - .mx_DMInviteDialog_userTile_remove { + .mx_InviteDialog_userTile_remove { display: inline-block; margin-left: 4px; } diff --git a/src/RoomInvite.js b/src/RoomInvite.js index 8b7324d4f5..aaddd58d0b 100644 --- a/src/RoomInvite.js +++ b/src/RoomInvite.js @@ -44,9 +44,9 @@ export function inviteMultipleToRoom(roomId, addrs) { export function showStartChatInviteDialog() { if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) { // This new dialog handles the room creation internally - we don't need to worry about it. - const DMInviteDialog = sdk.getComponent("dialogs.DMInviteDialog"); + const InviteDialog = sdk.getComponent("dialogs.InviteDialog"); Modal.createTrackedDialog( - 'Start DM', '', DMInviteDialog, {}, + 'Start DM', '', InviteDialog, {}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true, ); return; diff --git a/src/components/views/dialogs/DMInviteDialog.js b/src/components/views/dialogs/InviteDialog.js similarity index 94% rename from src/components/views/dialogs/DMInviteDialog.js rename to src/components/views/dialogs/InviteDialog.js index 2a5c896a75..6b8e532854 100644 --- a/src/components/views/dialogs/DMInviteDialog.js +++ b/src/components/views/dialogs/InviteDialog.js @@ -140,11 +140,11 @@ class DMUserTile extends React.PureComponent { const avatarSize = 20; const avatar = this.props.member.isEmail ? : ; return ( - - + + {avatar} - {this.props.member.name} + {this.props.member.name} {_t('Remove')} @@ -211,7 +211,7 @@ class DMRoomTile extends React.PureComponent { // Highlight the word the user entered const substr = str.substring(i, filterStr.length + i); - result.push({substr}); + result.push({substr}); i += substr.length; } @@ -229,7 +229,7 @@ class DMRoomTile extends React.PureComponent { let timestamp = null; if (this.props.lastActiveTs) { const humanTs = humanizeTime(this.props.lastActiveTs); - timestamp = {humanTs}; + timestamp = {humanTs}; } const avatarSize = 36; @@ -249,30 +249,30 @@ class DMRoomTile extends React.PureComponent { let checkmark = null; if (this.props.isSelected) { // To reduce flickering we put the 'selected' room tile above the real avatar - checkmark =
; + checkmark =
; } // To reduce flickering we put the checkmark on top of the actual avatar (prevents // the browser from reloading the image source when the avatar remounts). const stackedAvatar = ( - + {avatar} {checkmark} ); return ( -
+
{stackedAvatar} - {this._highlightName(this.props.member.name)} - {this._highlightName(this.props.member.userId)} + {this._highlightName(this.props.member.name)} + {this._highlightName(this.props.member.userId)} {timestamp}
); } } -export default class DMInviteDialog extends React.PureComponent { +export default class InviteDialog extends React.PureComponent { static propTypes = { // Takes an array of user IDs/emails to invite. onFinished: PropTypes.func.isRequired, @@ -690,7 +690,7 @@ export default class DMInviteDialog extends React.PureComponent { if (sourceMembers.length === 0 && additionalMembers.length === 0) { return ( -
+

{sectionName}

{_t("No results")}

@@ -731,7 +731,7 @@ export default class DMInviteDialog extends React.PureComponent { /> )); return ( -
+

{sectionName}

{tiles} {showMore} @@ -754,7 +754,7 @@ export default class DMInviteDialog extends React.PureComponent { /> ); return ( -
+
{targets} {input}
@@ -808,12 +808,12 @@ export default class DMInviteDialog extends React.PureComponent { const userId = MatrixClientPeg.get().getUserId(); return ( -
+

{_t( "If you can't find someone, ask them for their username, or share your " + @@ -822,13 +822,13 @@ export default class DMInviteDialog extends React.PureComponent { {a: (sub) => {sub}}, )}

-
+
{this._renderEditor()} -
+
{_t("Go")}