From b67a2492b319452e0eb75d2923bf192dfc5f51e2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 11 Sep 2019 15:36:29 +0200 Subject: [PATCH] adapt design of room list in directory --- res/css/structures/_RoomDirectory.scss | 82 +++++++++++----------- src/components/structures/RoomDirectory.js | 26 +++++-- src/i18n/strings/en_EN.json | 6 +- 3 files changed, 65 insertions(+), 49 deletions(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 6989c3b0b0..6b7a4ff0c7 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_RoomDirectory_dialogWrapper > .mx_Dialog { max-width: 960px; height: 100%; - padding: 20px; } .mx_RoomDirectory_dialog { @@ -35,17 +34,6 @@ limitations under the License. flex: 1; } -.mx_RoomDirectory_createRoom { - background-color: $button-bg-color; - border-radius: 4px; - padding: 8px; - color: $button-fg-color; - font-weight: 600; - position: absolute; - top: 0; - left: 0; -} - .mx_RoomDirectory_list { flex: 1; display: flex; @@ -84,9 +72,8 @@ limitations under the License. } .mx_RoomDirectory_roomAvatar { - width: 24px; - padding-left: 12px; - padding-right: 24px; + width: 32px; + padding-right: 14px; vertical-align: top; } @@ -94,6 +81,34 @@ limitations under the License. padding-bottom: 16px; } +.mx_RoomDirectory_roomMemberCount { + color: $light-fg-color; + width: 60px; + padding: 0 10px; + text-align: center; + + &::before { + background-color: $light-fg-color; + display: inline-block; + vertical-align: text-top; + margin-right: 2px; + content: ""; + mask: url('$(res)/img/feather-customised/user.svg'); + mask-repeat: no-repeat; + mask-position: center; + // scale it down and make the size slightly bigger (16 instead of 14px) + // to avoid rendering artifacts + mask-size: 80%; + width: 16px; + height: 16px; + } +} + +.mx_RoomDirectory_join, .mx_RoomDirectory_preview { + width: 80px; + text-align: center; +} + .mx_RoomDirectory_name { display: inline-block; font-weight: 600; @@ -103,22 +118,9 @@ limitations under the License. display: inline-block; } -.mx_RoomDirectory_perm { - display: inline; - padding-left: 5px; - padding-right: 5px; - margin-right: 5px; - height: 15px; - border-radius: 11px; - background-color: $plinth-bg-color; - text-transform: uppercase; - font-weight: 600; - font-size: 11px; - color: $accent-color; -} - .mx_RoomDirectory_topic { cursor: initial; + color: $light-fg-color; } .mx_RoomDirectory_alias { @@ -126,22 +128,20 @@ limitations under the License. color: $settings-grey-fg-color; } -.mx_RoomDirectory_roomMemberCount { - text-align: right; - width: 100px; - padding-right: 10px; -} - .mx_RoomDirectory_table tr { padding-bottom: 10px; cursor: pointer; +} - .mx_RoomDirectory_roomDescription { - width: 50%; - } +.mx_RoomDirectory .mx_RoomView_MessageList { + padding: 0; +} - .mx_RoomDirectory_join, .mx_RoomDirectory_preview { - width: 80px; - text-align: center; +.mx_RoomDirectory p { + font-size: 14px; + margin-top: 0; + + .mx_AccessibleButton { + padding: 0; } } diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index c62882d097..45e6a5b2b7 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -392,6 +392,11 @@ module.exports = React.createClass({ }); }, + onCreateRoomClick: function(room) { + this.props.onFinished(); + dis.dispatch({action: 'view_create_room'}); + }, + showRoomAlias: function(alias, autoJoin=false) { this.showRoom(null, alias, autoJoin); }, @@ -473,7 +478,7 @@ module.exports = React.createClass({ topic = linkifyAndSanitizeHtml(topic); const avatarUrl = ContentRepo.getHttpUriForMxc( MatrixClientPeg.get().getHomeserverUrl(), - room.avatar_url, 24, 24, "crop", + room.avatar_url, 32, 32, "crop", ); return ( {ev.preventDefault();}} > - @@ -596,10 +601,9 @@ module.exports = React.createClass({ instance_expected_field_type = this.protocols[protocolName].field_types[last_field]; } - - let placeholder = _t('Search for a room'); + let placeholder = _t('Find a room…'); if (!this.state.instanceId) { - placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer; + placeholder = _t("Find a room… (e.g. %(exampleRoom)s)", {exampleRoom: "#example:" + this.state.roomServer}); } else if (instance_expected_field_type) { placeholder = instance_expected_field_type.placeholder; } @@ -621,15 +625,25 @@ module.exports = React.createClass({ ; } + const explanation = + _t("If you can't find the room you're looking for, ask for an invite or Create a new room.", null, + {a: sub => { + return ({sub}); + }}, + ); return (
+

{explanation}

{listHeader} {content} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 02bf52a2a4..797a5327cf 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1514,8 +1514,10 @@ "Unable to look up room ID from server": "Unable to look up room ID from server", "Preview": "Preview", "View": "View", - "Search for a room": "Search for a room", - "Search for a room like #example": "Search for a room like #example", + "Find a room…": "Find a room…", + "Find a room… (e.g. %(exampleRoom)s)": "Find a room… (e.g. %(exampleRoom)s)", + "If you can't find the room you're looking for, ask for an invite or Create a new room.": "If you can't find the room you're looking for, ask for an invite or Create a new room.", + "Explore rooms": "Explore rooms", "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present", "Show devices, send anyway or cancel.": "Show devices, send anyway or cancel.", "You can't send any messages until you review and agree to our terms and conditions.": "You can't send any messages until you review and agree to our terms and conditions.",