OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Skin RoomDirectory almost as per design
pull/993/head
Matthew Hodgson 2016-02-20 23:59:02 +00:00
parent 3910877f8f 2ca5529faa
commit e91a108738
9 changed files with 105 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/structures/RoomDirectory.js
View File

@ -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>

73
src/skins/vector/css/vector-web/structures/RoomDirectory.css
View File

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

BIN
src/skins/vector/fonts/MyriadPro-Bold.woff
View File

Binary file not shown.

BIN
src/skins/vector/fonts/MyriadPro-BoldIt.woff
View File

Binary file not shown.

BIN
src/skins/vector/fonts/MyriadPro-It.woff
View File

Binary file not shown.

BIN
src/skins/vector/fonts/MyriadPro-Regular.woff
View File

Binary file not shown.

BIN
src/skins/vector/fonts/MyriadPro-SemiBold.woff
View File

Binary file not shown.

20
src/skins/vector/fonts/MyriadPro.css
View File

@ -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');
}

18
src/skins/vector/fonts/OpenSans.css
View File

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