PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

switch room explorer list to css grid

Browse source 
Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
This commit is contained in:
Michael Weimann 2021-01-17 17:49:00 +01:00
parent 0fe54deab1
commit f0f6e4678e
No known key found for this signature in database
GPG key ID: 34F0524D4DA694A1
2 changed files with 62 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
res/css/structures/_RoomDirectory.scss
View file

@ -64,28 +64,23 @@ limitations under the License.
} }
.mx_RoomDirectory_table { .mx_RoomDirectory_table {
font-size: $font-12px;
color: $primary-fg-color; color: $primary-fg-color;
width: 100%; display: grid;
font-size: $font-12px;
grid-template-columns: max-content auto max-content max-content max-content;
row-gap: 24px;
text-align: left; text-align: left;
table-layout: fixed; width: 100%;
} }
.mx_RoomDirectory_roomAvatar { .mx_RoomDirectory_roomAvatar {
width: 32px; padding: 2px 14px 0 0;
padding-right: 14px;
vertical-align: top;
}
.mx_RoomDirectory_roomDescription {
padding-bottom: 16px;
} }
.mx_RoomDirectory_roomMemberCount { .mx_RoomDirectory_roomMemberCount {
align-self: center;
color: $light-fg-color; color: $light-fg-color;
width: 60px; padding: 3px 10px 0;
padding: 0 10px;
text-align: center;
&::before { &::before {
background-color: $light-fg-color; background-color: $light-fg-color;
@ -105,8 +100,7 @@ limitations under the License.
} }
.mx_RoomDirectory_join, .mx_RoomDirectory_preview { .mx_RoomDirectory_join, .mx_RoomDirectory_preview {
width: 80px; align-self: center;
text-align: center;
white-space: nowrap; white-space: nowrap;
} }

82
src/components/structures/RoomDirectory.js
View file

@ -477,7 +477,7 @@ export default class RoomDirectory extends React.Component {
dis.dispatch(payload); dis.dispatch(payload);
} }
getRow(room) { createRoomCells(room) {
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
const clientRoom = client.getRoom(room.room_id); const clientRoom = client.getRoom(room.room_id);
const hasJoinedRoom = clientRoom && clientRoom.getMyMembership() === "join"; const hasJoinedRoom = clientRoom && clientRoom.getMyMembership() === "join";
@ -523,31 +523,56 @@ export default class RoomDirectory extends React.Component {
MatrixClientPeg.get().getHomeserverUrl(), MatrixClientPeg.get().getHomeserverUrl(),
room.avatar_url, 32, 32, "crop", room.avatar_url, 32, 32, "crop",
); );
return ( return [
<tr key={ room.room_id } <div key={ `${room.room_id}_avatar` }
onClick={(ev) => this.onRoomClicked(room, ev)} onClick={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text // cancel onMouseDown otherwise shift-clicking highlights text
onMouseDown={(ev) => {ev.preventDefault();}} onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_roomAvatar"
> >
<td className="mx_RoomDirectory_roomAvatar"> <BaseAvatar width={32} height={32} resizeMethod='crop'
<BaseAvatar width={32} height={32} resizeMethod='crop' name={ name } idName={ name }
name={ name } idName={ name } url={ avatarUrl }
url={ avatarUrl } /> />
</td> </div>,
<td className="mx_RoomDirectory_roomDescription"> <div key={ `${room.room_id}_description` }
<div className="mx_RoomDirectory_name">{ name }</div>&nbsp; onClick={(ev) => this.onRoomClicked(room, ev)}
<div className="mx_RoomDirectory_topic" // cancel onMouseDown otherwise shift-clicking highlights text
onClick={ (ev) => { ev.stopPropagation(); } } onMouseDown={(ev) => {ev.preventDefault();}}
dangerouslySetInnerHTML={{ __html: topic }} /> className="mx_RoomDirectory_roomDescription"
<div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(room) }</div> >
</td> <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
<td className="mx_RoomDirectory_roomMemberCount"> <div className="mx_RoomDirectory_topic"
{ room.num_joined_members } onClick={ (ev) => { ev.stopPropagation(); } }
</td> dangerouslySetInnerHTML={{ __html: topic }}
<td className="mx_RoomDirectory_preview">{previewButton}</td> />
<td className="mx_RoomDirectory_join">{joinOrViewButton}</td> <div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(room) }</div>
</tr> </div>,
); <div key={ `${room.room_id}_memberCount` }
onClick={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_roomMemberCount"
>
{ room.num_joined_members }
</div>,
<div key={ `${room.room_id}_preview` }
onClick={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_preview"
>
{previewButton}
</div>,
<div key={ `${room.room_id}_join` }
onClick={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_join"
>
{joinOrViewButton}
</div>,
];
} }
collectScrollPanel = (element) => { collectScrollPanel = (element) => {
@ -606,7 +631,8 @@ export default class RoomDirectory extends React.Component {
} else if (this.state.protocolsLoading) { } else if (this.state.protocolsLoading) {
content = <Loader />; content = <Loader />;
} else { } else {
const rows = (this.state.publicRooms || []).map(room => this.getRow(room)); const cells = (this.state.publicRooms || [])
.reduce((cells, room) => cells.concat(this.createRoomCells(room)), [],);
// we still show the scrollpanel, at least for now, because // we still show the scrollpanel, at least for now, because
// otherwise we don't fetch more because we don't get a fill // otherwise we don't fetch more because we don't get a fill
// request from the scrollpanel because there isn't one // request from the scrollpanel because there isn't one
@ -617,14 +643,12 @@ export default class RoomDirectory extends React.Component {
} }
let scrollpanel_content; let scrollpanel_content;
if (rows.length === 0 && !this.state.loading) { if (cells.length === 0 && !this.state.loading) {
scrollpanel_content = <i>{ _t('No rooms to show') }</i>; scrollpanel_content = <i>{ _t('No rooms to show') }</i>;
} else { } else {
scrollpanel_content = <table className="mx_RoomDirectory_table"> scrollpanel_content = <div className="mx_RoomDirectory_table">
<tbody> { cells }
{ rows } </div>;
</tbody>
</table>;
} }
const ScrollPanel = sdk.getComponent("structures.ScrollPanel"); const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
content = <ScrollPanel ref={this.collectScrollPanel} content = <ScrollPanel ref={this.collectScrollPanel}