Skip to content

Commit e91a108

Browse files
ara4nara4n
committed
Merge pull request element-hq#972 from vector-im/matthew/room-directory
Skin RoomDirectory almost as per design
2 parents 3910877 + 2ca5529 commit e91a108

9 files changed

Lines changed: 98 additions & 64 deletions

File tree

‎src/components/structures/RoomDirectory.js‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,18 @@ limitations under the License.
1919
var React = require('react');
2020

2121
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
22+
var ContentRepo = require("matrix-js-sdk").ContentRepo;
2223
var Modal = require('matrix-react-sdk/lib/Modal');
2324
var sdk = require('matrix-react-sdk')
2425
var dis = require('matrix-react-sdk/lib/dispatcher');
2526

27+
var linkify = require('linkifyjs');
28+
var linkifyString = require('linkifyjs/string');
29+
var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
30+
var sanitizeHtml = require('sanitize-html');
31+
32+
linkifyMatrix(linkify);
33+
2634
module.exports = React.createClass({
2735
displayName: 'RoomDirectory',
2836

@@ -64,6 +72,8 @@ module.exports = React.createClass({
6472
},
6573

6674
getRows: function(filter) {
75+
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
76+
6777
if (!this.state.publicRooms) return [];
6878

6979
var rooms = this.state.publicRooms.filter(function(a) {
@@ -83,36 +93,44 @@ module.exports = React.createClass({
8393

8494
if (rooms[i].world_readable) {
8595
guestRead = (
86-
<span>[world readable]</span>
96+
<div className="mx_RoomDirectory_perm">World readable</div>
8797
);
88-
// <img src="img/members.svg"
89-
// alt="World Readable" title="World Readable" width="12" height="12" />
9098
}
9199
if (rooms[i].guest_can_join) {
92100
guestJoin = (
93-
<span>[guests allowed]</span>
101+
<div className="mx_RoomDirectory_perm">Guests can join</div>
94102
);
95-
// <img src="img/leave.svg"
96-
// alt="Guests can join" title="Guests can join" width="12" height="12" />
97103
}
98104

99105
perms = null;
100106
if (guestRead || guestJoin) {
101-
perms = <div>{guestRead} {guestJoin}</div>;
107+
perms = <div className="mx_RoomDirectory_perms">{guestRead} {guestJoin}</div>;
102108
}
103109

104-
// <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
110+
var topic = rooms[i].topic || '';
111+
topic = linkifyString(sanitizeHtml(topic));
112+
105113
rows.unshift(
106-
<tbody key={ rooms[i].room_id }>
107-
<tr onClick={self.showRoom.bind(null, rooms[i].room_id)}>
108-
<td className="mx_RoomDirectory_name">{ name }</td>
109-
<td>{ rooms[i].aliases[0] }</td>
110-
<td>{ rooms[i].num_joined_members }</td>
111-
</tr>
112-
<tr onClick={self.showRoom.bind(null, rooms[i].room_id)}>
113-
<td className="mx_RoomDirectory_topic" colSpan="3">{perms} { rooms[i].topic }</td>
114-
</tr>
115-
</tbody>
114+
<tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id)}>
115+
<td className="mx_RoomDirectory_roomAvatar">
116+
<BaseAvatar width={24} height={24} resizeMethod='crop'
117+
name={ name } idName={ name }
118+
url={ ContentRepo.getHttpUriForMxc(
119+
MatrixClientPeg.get().getHomeserverUrl(),
120+
rooms[i].avatar_url, 24, 24, "crop") } />
121+
</td>
122+
<td className="mx_RoomDirectory_roomDescription">
123+
<div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
124+
{ perms }
125+
<div className="mx_RoomDirectory_topic"
126+
onClick={ function(e) { e.stopPropagation() } }
127+
dangerouslySetInnerHTML={{ __html: topic }}/>
128+
<div className="mx_RoomDirectory_alias">{ rooms[i].aliases[0] }</div>
129+
</td>
130+
<td className="mx_RoomDirectory_roomMemberCount">
131+
{ rooms[i].num_joined_members }
132+
</td>
133+
</tr>
116134
);
117135
}
118136
return rows;
@@ -139,15 +157,14 @@ module.exports = React.createClass({
139157
var RoomHeader = sdk.getComponent('rooms.RoomHeader');
140158
return (
141159
<div className="mx_RoomDirectory">
142-
<RoomHeader simpleHeader="Public Rooms" />
160+
<RoomHeader simpleHeader="Directory" />
143161
<div className="mx_RoomDirectory_list">
144162
<input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
145163
<div className="mx_RoomDirectory_tableWrapper">
146-
<table className="mx_RoomDirectory_table">
147-
<thead>
148-
<tr><th width="45%">Room</th><th width="45%">Alias</th><th width="10%">Members</th></tr>
149-
</thead>
150-
{ this.getRows(this.state.roomAlias) }
164+
<table ref="directory_table" className="mx_RoomDirectory_table">
165+
<tbody>
166+
{ this.getRows(this.state.roomAlias) }
167+
</tbody>
151168
</table>
152169
</div>
153170
</div>

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

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -64,36 +64,61 @@ limitations under the License.
6464
}
6565

6666
.mx_RoomDirectory_table {
67+
font-size: 14px;
68+
color: #4a4a4a;
6769
width: 100%;
6870
text-align: left;
6971
table-layout: fixed;
7072
}
7173

72-
.mx_RoomDirectory_table th {
73-
font-weight: 400;
74-
font-size: 11px;
74+
.mx_RoomDirectory_roomAvatar {
75+
width: 24px;
76+
padding-left: 12px;
77+
padding-right: 24px;
78+
vertical-align: top;
7579
}
7680

77-
.mx_RoomDirectory_table tbody {
78-
cursor: pointer;
81+
.mx_RoomDirectory_roomDescription {
82+
padding-bottom: 16px;
7983
}
8084

81-
.mx_RoomDirectory_table td {
82-
font-weight: 300;
83-
overflow-x: hidden;
84-
text-overflow: ellipsis;
85+
.mx_RoomDirectory_name {
86+
display: inline-block;
87+
font-weight: 600;
8588
}
8689

87-
.mx_RoomDirectory_table .mx_RoomDirectory_name {
88-
font-weight: 400;
90+
.mx_RoomDirectory_perms {
91+
display: inline-block;
8992
}
9093

91-
.mx_RoomDirectory_table .mx_RoomDirectory_topic {
92-
font-weight: 400;
94+
.mx_RoomDirectory_perm {
95+
display: inline;
96+
padding-left: 5px;
97+
padding-right: 5px;
98+
height: 15px;
99+
border-radius: 11px;
100+
background-color: #eaf5f0;
101+
text-transform: uppercase;
102+
font-weight: 600;
93103
font-size: 11px;
104+
color: #61c295;
105+
}
106+
107+
.mx_RoomDirectory_topic {
108+
cursor: initial;
94109
}
95110

96-
.mx_RoomDirectory_table td,
97-
.mx_RoomDirectory_table th, {
98-
padding: 6px;
99-
}
111+
.mx_RoomDirectory_alias {
112+
font-size: 12px;
113+
color: #b3b3b3;
114+
}
115+
116+
.mx_RoomDirectory_roomMemberCount {
117+
text-align: right;
118+
width: 100px;
119+
}
120+
121+
.mx_RoomDirectory_table tr {
122+
padding-bottom: 10px;
123+
cursor: pointer;
124+
}

‎src/skins/vector/fonts/MyriadPro-Bold.woff‎

-59.2 KB
Binary file not shown.

‎src/skins/vector/fonts/MyriadPro-BoldIt.woff‎

-63.2 KB
Binary file not shown.

‎src/skins/vector/fonts/MyriadPro-It.woff‎

-61.5 KB
Binary file not shown.

‎src/skins/vector/fonts/MyriadPro-Regular.woff‎

-58.5 KB
Binary file not shown.

‎src/skins/vector/fonts/MyriadPro-SemiBold.woff‎

-51.6 KB
Binary file not shown.

‎src/skins/vector/fonts/MyriadPro.css‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/skins/vector/fonts/OpenSans.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
1+
/* latin */
12
@font-face {
23
font-family: 'Open Sans';
34
font-style: normal;
45
font-weight: 400;
5-
src: local('Open Sans'), local('OpenSans'), url(u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
6+
src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
7+
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;
68
}
9+
/* latin */
710
@font-face {
811
font-family: 'Open Sans';
912
font-style: normal;
10-
font-weight: 700;
11-
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
13+
font-weight: 600;
14+
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
15+
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;
1216
}
17+
/* latin */
18+
@font-face {
19+
font-family: 'Open Sans';
20+
font-style: normal;
21+
font-weight: 700;
22+
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
23+
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;
24+
}

0 commit comments

Comments
 (0)