Skip to content

Commit faf7a4b

Browse files
t3chguyt3chguy
committed
Initial Space room directory view
1 parent 4e93452 commit faf7a4b

File tree

5 files changed

+827
-4
lines changed

5 files changed

+827
-4
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
@import "./structures/_ScrollPanel.scss";
2929
@import "./structures/_SearchBox.scss";
3030
@import "./structures/_SpacePanel.scss";
31+
@import "./structures/_SpaceRoomDirectory.scss";
3132
@import "./structures/_SpaceRoomView.scss";
3233
@import "./structures/_TabbedView.scss";
3334
@import "./structures/_ToastContainer.scss";

‎res/css/structures/_SpaceRoomDirectory.scss‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
/*
2+
Copyright 2021 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
18+
max-width: 960px;
19+
height: 100%;
20+
}
21+
22+
.mx_SpaceRoomDirectory {
23+
height: 100%;
24+
margin-bottom: 12px;
25+
color: $primary-fg-color;
26+
word-break: break-word;
27+
display: flex;
28+
flex-direction: column;
29+
30+
.mx_Dialog_title {
31+
display: flex;
32+
33+
.mx_BaseAvatar {
34+
margin-right: 16px;
35+
}
36+
37+
.mx_BaseAvatar_image {
38+
border-radius: 8px;
39+
}
40+
41+
> div {
42+
> h1 {
43+
font-weight: $font-semi-bold;
44+
font-size: $font-18px;
45+
line-height: $font-22px;
46+
margin: 0;
47+
}
48+
49+
> div {
50+
color: $secondary-fg-color;
51+
font-size: $font-15px;
52+
line-height: $font-24px;
53+
}
54+
}
55+
}
56+
57+
.mx_Dialog_content {
58+
// TODO fix scrollbar
59+
//display: flex;
60+
//flex-direction: column;
61+
//height: calc(100% - 80px);
62+
63+
.mx_AccessibleButton_kind_link {
64+
padding: 0;
65+
}
66+
67+
.mx_SearchBox {
68+
margin: 24px 0 28px;
69+
}
70+
71+
.mx_SpaceRoomDirectory_listHeader {
72+
display: flex;
73+
font-size: $font-12px;
74+
line-height: $font-15px;
75+
color: $secondary-fg-color;
76+
77+
.mx_FormButton {
78+
margin-bottom: 8px;
79+
}
80+
81+
> span {
82+
margin: auto 0 0 auto;
83+
}
84+
}
85+
}
86+
}
87+
88+
.mx_SpaceRoomDirectory_list {
89+
margin-top: 8px;
90+
91+
.mx_SpaceRoomDirectory_roomCount {
92+
> h3 {
93+
display: inline;
94+
font-weight: $font-semi-bold;
95+
font-size: $font-18px;
96+
line-height: $font-22px;
97+
color: $primary-fg-color;
98+
}
99+
100+
> span {
101+
margin-left: 8px;
102+
font-size: $font-15px;
103+
line-height: $font-24px;
104+
color: $secondary-fg-color;
105+
}
106+
}
107+
108+
.mx_SpaceRoomDirectory_subspace {
109+
margin-top: 8px;
110+
111+
.mx_SpaceRoomDirectory_subspace_info {
112+
display: flex;
113+
flex-direction: row;
114+
align-items: center;
115+
margin-bottom: 8px;
116+
color: $secondary-fg-color;
117+
font-weight: $font-semi-bold;
118+
font-size: $font-12px;
119+
line-height: $font-15px;
120+
121+
.mx_BaseAvatar {
122+
margin-right: 12px;
123+
vertical-align: middle;
124+
}
125+
126+
.mx_BaseAvatar_image {
127+
border-radius: 8px;
128+
}
129+
130+
.mx_SpaceRoomDirectory_actions {
131+
text-align: right;
132+
height: min-content;
133+
margin-left: auto;
134+
margin-right: 16px;
135+
}
136+
}
137+
138+
.mx_SpaceRoomDirectory_subspace_children {
139+
margin-left: 12px;
140+
border-left: 2px solid $space-button-outline-color;
141+
padding-left: 24px;
142+
}
143+
}
144+
145+
.mx_SpaceRoomDirectory_roomTile {
146+
padding: 16px;
147+
border-radius: 8px;
148+
border: 1px solid $space-button-outline-color;
149+
margin: 8px 0 16px;
150+
display: flex;
151+
min-height: 76px;
152+
box-sizing: border-box;
153+
154+
&.mx_AccessibleButton:hover {
155+
background-color: rgba(141, 151, 165, 0.1);
156+
}
157+
158+
.mx_BaseAvatar {
159+
margin-right: 16px;
160+
margin-top: 6px;
161+
}
162+
163+
.mx_SpaceRoomDirectory_roomTile_info {
164+
display: inline-block;
165+
font-size: $font-15px;
166+
flex-grow: 1;
167+
height: min-content;
168+
margin: auto 0;
169+
170+
.mx_SpaceRoomDirectory_roomTile_name {
171+
font-weight: $font-semi-bold;
172+
line-height: $font-18px;
173+
}
174+
.mx_SpaceRoomDirectory_roomTile_topic {
175+
line-height: $font-24px;
176+
color: $secondary-fg-color;
177+
}
178+
}
179+
180+
.mx_SpaceRoomDirectory_roomTile_memberCount {
181+
position: relative;
182+
margin: auto 0 auto 24px;
183+
padding: 0 0 0 28px;
184+
line-height: $font-24px;
185+
display: inline-block;
186+
width: 32px;
187+
188+
&::before {
189+
position: absolute;
190+
content: '';
191+
width: 24px;
192+
height: 24px;
193+
top: 0;
194+
left: 0;
195+
mask-position: center;
196+
mask-repeat: no-repeat;
197+
mask-size: contain;
198+
background-color: $secondary-fg-color;
199+
mask-image: url('$(res)/img/element-icons/community-members.svg');
200+
}
201+
}
202+
203+
.mx_SpaceRoomDirectory_actions {
204+
width: 180px;
205+
text-align: right;
206+
height: min-content;
207+
margin: auto 0 auto 28px;
208+
209+
.mx_AccessibleButton {
210+
vertical-align: middle;
211+
212+
& + .mx_AccessibleButton {
213+
margin-left: 24px;
214+
}
215+
}
216+
}
217+
}
218+
219+
.mx_SpaceRoomDirectory_actions {
220+
.mx_SpaceRoomDirectory_actionsText {
221+
font-weight: normal;
222+
font-size: $font-12px;
223+
line-height: $font-15px;
224+
color: $secondary-fg-color;
225+
}
226+
227+
.mx_Checkbox {
228+
display: inline-block;
229+
}
230+
}
231+
}

‎src/components/structures/MatrixChat.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ import {UIFeature} from "../../settings/UIFeature";
8282
import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
8383
import DialPadModal from "../views/voip/DialPadModal";
8484
import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
85+
import SpaceStore from "../../stores/SpaceStore";
86+
import SpaceRoomDirectory from "./SpaceRoomDirectory";
8587

8688
/** constants for MatrixChat.state.view */
8789
export enum Views {
@@ -691,10 +693,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
691693
break;
692694
}
693695
case Action.ViewRoomDirectory: {
694-
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
695-
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
696-
initialText: payload.initialText,
697-
}, 'mx_RoomDirectory_dialogWrapper', false, true);
696+
if (SpaceStore.instance.activeSpace) {
697+
Modal.createTrackedDialog("Space room directory", "", SpaceRoomDirectory, {
698+
space: SpaceStore.instance.activeSpace,
699+
initialText: payload.initialText,
700+
}, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
701+
} else {
702+
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
703+
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
704+
initialText: payload.initialText,
705+
}, 'mx_RoomDirectory_dialogWrapper', false, true);
706+
}
698707

699708
// View the welcome or home page if we need something to look at
700709
this.viewSomethingBehindModal();

0 commit comments

Comments
 (0)