Merge pull request #3418 from matrix-org/bwindels/room-directory-design

Room directory: update design

res/css/_common.scss

@@ -330,7 +330,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_header {
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 .mx_Dialog_title {

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;
     }
 }

src/components/structures/RoomDirectory.js

@@ -391,6 +391,11 @@ module.exports = createReactClass({
         });
     },
 
+    onCreateRoomClick: function(room) {
+        this.props.onFinished();
+        dis.dispatch({action: 'view_create_room'});
+    },
+
     showRoomAlias: function(alias, autoJoin=false) {
         this.showRoom(null, alias, autoJoin);
     },
@@ -472,7 +477,7 @@ module.exports = createReactClass({
         topic = linkifyAndSanitizeHtml(topic);
         const avatarUrl = ContentRepo.getHttpUriForMxc(
                                 MatrixClientPeg.get().getHomeserverUrl(),
-                                room.avatar_url, 24, 24, "crop",
+                                room.avatar_url, 32, 32, "crop",
                             );
         return (
             <tr key={ room.room_id }
@@ -481,7 +486,7 @@ module.exports = createReactClass({
                 onMouseDown={(ev) => {ev.preventDefault();}}
             >
                 <td className="mx_RoomDirectory_roomAvatar">
-                    <BaseAvatar width={24} height={24} resizeMethod='crop'
+                    <BaseAvatar width={32} height={32} resizeMethod='crop'
                         name={ name } idName={ name }
                         url={ avatarUrl } />
                 </td>
@@ -595,10 +600,9 @@ module.exports = createReactClass({
                 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;
             }
@@ -620,15 +624,25 @@ module.exports = createReactClass({
                 <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
             </div>;
         }
+        const explanation =
+            _t("If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.", null,
+                {a: sub => {
+                    return (<AccessibleButton
+                        kind="secondary"
+                        onClick={this.onCreateRoomClick}
+                    >{sub}</AccessibleButton>);
+                }},
+            );
 
         return (
             <BaseDialog
                 className={'mx_RoomDirectory_dialog'}
                 hasCancel={true}
                 onFinished={this.props.onFinished}
-                title={_t("Room directory")}
+                title={_t("Explore rooms")}
             >
                 <div className="mx_RoomDirectory">
+                    <p>{explanation}</p>
                     <div className="mx_RoomDirectory_list">
                         {listHeader}
                         {content}

src/i18n/strings/en_EN.json

@@ -1600,8 +1600,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 <a>Create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.",
+    "Explore rooms": "Explore rooms",
     "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present",
     "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.": "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
     "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",