Merge pull request #972 from vector-im/matthew/room-directory

Skin RoomDirectory almost as per design

src/components/structures/RoomDirectory.js

@@ -19,10 +19,18 @@ limitations under the License.
 var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var ContentRepo = require("matrix-js-sdk").ContentRepo;
 var Modal = require('matrix-react-sdk/lib/Modal');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 
+var linkify = require('linkifyjs');
+var linkifyString = require('linkifyjs/string');
+var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
+var sanitizeHtml = require('sanitize-html');
+
+linkifyMatrix(linkify);
+
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
 
@@ -64,6 +72,8 @@ module.exports = React.createClass({
     },
 
     getRows: function(filter) {
+        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
         if (!this.state.publicRooms) return [];
 
         var rooms = this.state.publicRooms.filter(function(a) {
@@ -83,36 +93,44 @@ module.exports = React.createClass({
 
             if (rooms[i].world_readable) {
                 guestRead = (
-                    <span>[world readable]</span>
+                    <div className="mx_RoomDirectory_perm">World readable</div>
                 );
-                    // <img src="img/members.svg"
-                    //     alt="World Readable" title="World Readable" width="12" height="12" />
             }
             if (rooms[i].guest_can_join) {
                 guestJoin = (
-                    <span>[guests allowed]</span>
+                    <div className="mx_RoomDirectory_perm">Guests can join</div>
                 );
-                    // <img src="img/leave.svg"
-                    //     alt="Guests can join" title="Guests can join" width="12" height="12" />
             }
             
             perms = null;
             if (guestRead || guestJoin) {
-                perms = <div>{guestRead} {guestJoin}</div>;
+                perms = <div className="mx_RoomDirectory_perms">{guestRead} {guestJoin}</div>;
             }
 
-            // <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
+            var topic = rooms[i].topic || '';
+            topic = linkifyString(sanitizeHtml(topic));
+
             rows.unshift(
-                <tbody key={ rooms[i].room_id }>
-                    <tr onClick={self.showRoom.bind(null, rooms[i].room_id)}>
-                        <td className="mx_RoomDirectory_name">{ name }</td>
-                        <td>{ rooms[i].aliases[0] }</td>
-                        <td>{ rooms[i].num_joined_members }</td>
-                    </tr>
-                    <tr onClick={self.showRoom.bind(null, rooms[i].room_id)}>
-                        <td className="mx_RoomDirectory_topic" colSpan="3">{perms} { rooms[i].topic }</td>
-                    </tr>
-                </tbody>
+                <tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id)}>
+                    <td className="mx_RoomDirectory_roomAvatar">
+                        <BaseAvatar width={24} height={24} resizeMethod='crop'
+                            name={ name } idName={ name }
+                            url={ ContentRepo.getHttpUriForMxc(
+                                    MatrixClientPeg.get().getHomeserverUrl(),
+                                    rooms[i].avatar_url, 24, 24, "crop") } />
+                    </td>
+                    <td className="mx_RoomDirectory_roomDescription">
+                        <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
+                        { perms }
+                        <div className="mx_RoomDirectory_topic"
+                             onClick={ function(e) { e.stopPropagation() } }
+                             dangerouslySetInnerHTML={{ __html: topic }}/>
+                        <div className="mx_RoomDirectory_alias">{ rooms[i].aliases[0] }</div>
+                    </td>
+                    <td className="mx_RoomDirectory_roomMemberCount">
+                        { rooms[i].num_joined_members }
+                    </td>
+                </tr>
             );
         }
         return rows;
@@ -139,15 +157,14 @@ module.exports = React.createClass({
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         return (
             <div className="mx_RoomDirectory">
-                <RoomHeader simpleHeader="Public Rooms" />
+                <RoomHeader simpleHeader="Directory" />
                 <div className="mx_RoomDirectory_list">
                     <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
                     <div className="mx_RoomDirectory_tableWrapper">
-                        <table className="mx_RoomDirectory_table">
-                            <thead>
-                                <tr><th width="45%">Room</th><th width="45%">Alias</th><th width="10%">Members</th></tr>
-                            </thead>
-                            { this.getRows(this.state.roomAlias) }
+                        <table ref="directory_table" className="mx_RoomDirectory_table">
+                            <tbody>
+                                { this.getRows(this.state.roomAlias) }
+                            </tbody>
                         </table>
                     </div>
                 </div>

src/skins/vector/css/vector-web/structures/RoomDirectory.css

@@ -64,36 +64,61 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
+    font-size: 14px;
+    color: #4a4a4a;
     width: 100%;
     text-align: left;
     table-layout: fixed;
 }
 
-.mx_RoomDirectory_table th {
-    font-weight: 400;
-    font-size: 11px;
+.mx_RoomDirectory_roomAvatar {
+    width: 24px;
+    padding-left: 12px;
+    padding-right: 24px;
+    vertical-align: top;
 }
 
-.mx_RoomDirectory_table tbody {
+.mx_RoomDirectory_roomDescription {
+    padding-bottom: 16px;
+}
+
+.mx_RoomDirectory_name {
+    display: inline-block;
+    font-weight: 600;
+}
+
+.mx_RoomDirectory_perms {
+    display: inline-block;
+}
+
+.mx_RoomDirectory_perm {
+    display: inline;
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 15px;
+    border-radius: 11px;
+    background-color: #eaf5f0;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 11px;
+    color: #61c295;
+}
+
+.mx_RoomDirectory_topic {
+    cursor: initial;
+}
+
+.mx_RoomDirectory_alias {
+    font-size: 12px;
+    color: #b3b3b3;
+}
+
+.mx_RoomDirectory_roomMemberCount {
+    text-align: right;
+    width: 100px;
+}
+
+.mx_RoomDirectory_table tr {
+    padding-bottom: 10px;
     cursor: pointer;
 }
-
-.mx_RoomDirectory_table td {
-    font-weight: 300;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-}
-
-.mx_RoomDirectory_table .mx_RoomDirectory_name {
-    font-weight: 400;
-}
-
-.mx_RoomDirectory_table .mx_RoomDirectory_topic {
-    font-weight: 400;
-    font-size: 11px;
-}
-
-.mx_RoomDirectory_table td,
-.mx_RoomDirectory_table th, {
-    padding: 6px;
-}

src/skins/vector/fonts/MyriadPro.css

@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Myriad Pro';
-  font-style: normal;
-  font-weight: normal;
-  src: local('Myriad Pro'), local('MyriadPro'), url(MyriadPro-Regular.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Myriad Pro';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Myriad Pro SemiBold'), local('MyriadPro-SemiBold'), url(MyriadPro-SemiBold.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Myriad Pro';
-  font-style: normal;
-  font-weight: bold;
-  src: local('Myriad Pro Bold'), local('MyriadPro-Bold'), url(MyriadPro-Bold.woff) format('woff');
-}

src/skins/vector/fonts/OpenSans.css

@@ -1,12 +1,24 @@
+/* latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
+  src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
-}
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}