Skip to content

Commit e479edd

Browse files
t3chguyt3chguy
committed
Add an add existing room to space CTA to Space View
1 parent a687b98 commit e479edd

File tree

7 files changed

+438
-2
lines changed

7 files changed

+438
-2
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
@import "./views/context_menus/_MessageContextMenu.scss";
5959
@import "./views/context_menus/_StatusMessageContextMenu.scss";
6060
@import "./views/context_menus/_TagTileContextMenu.scss";
61+
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
6162
@import "./views/dialogs/_AddressPickerDialog.scss";
6263
@import "./views/dialogs/_Analytics.scss";
6364
@import "./views/dialogs/_BugReportDialog.scss";

‎res/css/structures/_SpaceRoomView.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,16 @@ $SpaceRoomViewInnerWidth: 428px;
188188
}
189189
}
190190

191+
&.mx_SpaceRoomView_landing_addButton {
192+
&::before {
193+
background-color: #ac3ba8;
194+
}
195+
196+
&::after {
197+
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
198+
}
199+
}
200+
191201
&.mx_SpaceRoomView_landing_createButton {
192202
&::before {
193203
background-color: #368bd6;

‎res/css/views/dialogs/_AddExistingToSpaceDialog.scss‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
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_AddExistingToSpaceDialog_wrapper {
18+
.mx_Dialog {
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
}
23+
24+
.mx_AddExistingToSpaceDialog {
25+
width: 480px;
26+
color: $primary-fg-color;
27+
display: flex;
28+
flex-direction: column;
29+
flex-wrap: nowrap;
30+
min-height: 0;
31+
32+
.mx_Dialog_title {
33+
display: flex;
34+
35+
.mx_BaseAvatar {
36+
display: inline-flex;
37+
margin: 5px 16px 5px 5px;
38+
vertical-align: middle;
39+
}
40+
41+
.mx_BaseAvatar_image {
42+
border-radius: 8px;
43+
margin: 0;
44+
vertical-align: unset;
45+
}
46+
47+
> div {
48+
> h1 {
49+
font-weight: $font-semi-bold;
50+
font-size: $font-18px;
51+
line-height: $font-22px;
52+
margin: 0;
53+
}
54+
55+
.mx_AddExistingToSpaceDialog_onlySpace {
56+
color: $secondary-fg-color;
57+
font-size: $font-15px;
58+
line-height: $font-24px;
59+
}
60+
}
61+
62+
.mx_Dropdown_input {
63+
border: none;
64+
65+
> .mx_Dropdown_option {
66+
padding-left: 0;
67+
flex: unset;
68+
height: unset;
69+
color: $secondary-fg-color;
70+
font-size: $font-15px;
71+
line-height: $font-24px;
72+
73+
.mx_BaseAvatar {
74+
display: none;
75+
}
76+
}
77+
78+
.mx_Dropdown_menu {
79+
.mx_AddExistingToSpaceDialog_dropdownOptionActive {
80+
color: $accent-color;
81+
padding-right: 32px;
82+
position: relative;
83+
84+
&::before {
85+
content: '';
86+
width: 20px;
87+
height: 20px;
88+
top: 8px;
89+
right: 0;
90+
position: absolute;
91+
mask-position: center;
92+
mask-size: contain;
93+
mask-repeat: no-repeat;
94+
background-color: $accent-color;
95+
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
96+
}
97+
}
98+
}
99+
}
100+
}
101+
102+
.mx_SearchBox {
103+
margin: 0;
104+
}
105+
106+
.mx_AddExistingToSpaceDialog_errorText {
107+
font-weight: $font-semi-bold;
108+
font-size: $font-12px;
109+
line-height: $font-15px;
110+
color: $notice-primary-color;
111+
margin-bottom: 28px;
112+
}
113+
114+
.mx_AddExistingToSpaceDialog_content {
115+
.mx_AddExistingToSpaceDialog_noResults {
116+
margin-top: 24px;
117+
}
118+
}
119+
120+
.mx_AddExistingToSpaceDialog_section {
121+
margin-top: 24px;
122+
123+
> h3 {
124+
margin: 0;
125+
color: $secondary-fg-color;
126+
font-size: $font-12px;
127+
font-weight: $font-semi-bold;
128+
line-height: $font-15px;
129+
}
130+
131+
.mx_AddExistingToSpaceDialog_entry {
132+
display: flex;
133+
margin-top: 12px;
134+
135+
.mx_BaseAvatar {
136+
margin-right: 12px;
137+
}
138+
139+
.mx_AddExistingToSpaceDialog_entry_name {
140+
font-size: $font-15px;
141+
line-height: 30px;
142+
flex-grow: 1;
143+
}
144+
145+
.mx_FormButton {
146+
min-width: 92px;
147+
font-weight: normal;
148+
box-sizing: border-box;
149+
}
150+
}
151+
}
152+
153+
.mx_AddExistingToSpaceDialog_section_spaces {
154+
.mx_BaseAvatar_image {
155+
border-radius: 8px;
156+
}
157+
}
158+
159+
.mx_AddExistingToSpaceDialog_footer {
160+
display: flex;
161+
margin-top: 32px;
162+
163+
> span {
164+
flex-grow: 1;
165+
font-size: $font-12px;
166+
line-height: $font-15px;
167+
168+
> * {
169+
vertical-align: middle;
170+
}
171+
}
172+
173+
.mx_AccessibleButton {
174+
display: inline-block;
175+
}
176+
177+
.mx_AccessibleButton_kind_link {
178+
padding: 0;
179+
}
180+
}
181+
182+
.mx_FormButton {
183+
padding: 8px 22px;
184+
}
185+
}

‎src/components/structures/SpaceRoomView.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
4646
import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
4747
import {useStateArray} from "../../hooks/useStateArray";
4848
import SpacePublicShare from "../views/spaces/SpacePublicShare";
49-
import {showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
49+
import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
5050
import MemberAvatar from "../views/avatars/MemberAvatar";
5151

5252
interface IProps {
@@ -124,6 +124,14 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
124124
let addRoomButtons;
125125
if (canAddRooms) {
126126
addRoomButtons = <React.Fragment>
127+
<AccessibleButton className="mx_SpaceRoomView_landing_addButton" onClick={async () => {
128+
const [added] = await showAddExistingRooms(cli, space);
129+
if (added) {
130+
// TODO update rooms shown once we show hierarchy here
131+
}
132+
}}>
133+
{ _t("Add existing rooms & spaces") }
134+
</AccessibleButton>
127135
<AccessibleButton className="mx_SpaceRoomView_landing_createButton" onClick={() => {
128136
showCreateNewRoom(cli, space);
129137
}}>

0 commit comments

Comments
 (0)