Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 8fe582b

Browse files
t3chguyt3chguy
authored
Tweaks to informational architecture 1.1 (#7052)
* Move user avatar to Space panel * Add room list header for 'Home' or 'Space Name' to room list Add existing Space context menus to room list header * Re-add pending room join spinner * Iterate RoomListHeader plus context menu * Iterate space context menu * Iterate room list + interactions * Move DND to new iA model * Replace composer custom status management with usermenu one * Cull Quick Actions * Iterate minimized room list state * delint * Merge the RoomListNumResults into the RoomListHeader * Make the search shortcut prompt semi-bold * Iterate RoomListHeader based on design review * Iterate UserMenu based on feedback * Add name to expanded spacepanel usermenu button * i18n * Make room sub list aux button components more generic * Change left panel explore button to only refer to room directory * Iterate RoomListHeader * Fix custom user status input field width in Chrome * Bring back Notification settings button * delint * i18n * post-merge fix * iterate pr * Remove unused state * update copy * Apply suggestions from PR review * delint * Update invite iconography * Iterate Space context menu to match Figma * Fix chevron alignment * Fix edge case for RoomListHeader on metaspaces * Wire up general rageshake-driven feedback mechanism * Add IA1.1 info toast * add missing alt attribute * delint * delint * tweak ia toast priority * e2e test account for new toast * autofocus feedback field and remove old subheading * tweak copy * Iterate space panel colours to match Figma * Iterate PR * delint * Fix feedback submission with object setting values * iterate based on review * Tweak colours and update splash image * Tweaks based on review * Remove room list prompt, made redundant by the big fat `+` * Fix edge cases around User Menu positioning and dnd * Add missing import, bad merge? * Update aria label in e2e test * Fix room list space rooms context menu explore button behaviour * Tweak copy * Revert order of options in the UserMenu * Tweak copy * i18n
1 parent c09e0ef commit 8fe582b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1435
-1485
lines changed

‎res/css/_common.scss

+9
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
482482
overflow-y: hidden;
483483
}
484484

485+
.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
486+
max-width: 636px; // match splash image width
487+
488+
.mx_AccessibleButton_kind_link {
489+
font-size: inherit;
490+
padding: 0;
491+
}
492+
}
493+
485494
// TODO: Review mx_GeneralButton usage to see if it can use a different class
486495
// These classes were brought in from the old UserSettings and are included here to avoid
487496
// breaking the app.

‎res/css/_components.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,11 @@
6060
@import "./views/auth/_Welcome.scss";
6161
@import "./views/avatars/_BaseAvatar.scss";
6262
@import "./views/avatars/_DecoratedRoomAvatar.scss";
63-
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
6463
@import "./views/avatars/_WidgetAvatar.scss";
6564
@import "./views/beta/_BetaCard.scss";
6665
@import "./views/context_menus/_CallContextMenu.scss";
6766
@import "./views/context_menus/_IconizedContextMenu.scss";
6867
@import "./views/context_menus/_MessageContextMenu.scss";
69-
@import "./views/context_menus/_StatusMessageContextMenu.scss";
7068
@import "./views/context_menus/_TagTileContextMenu.scss";
7169
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
7270
@import "./views/dialogs/_AddressPickerDialog.scss";
@@ -237,6 +235,7 @@
237235
@import "./views/rooms/_RoomBreadcrumbs.scss";
238236
@import "./views/rooms/_RoomHeader.scss";
239237
@import "./views/rooms/_RoomList.scss";
238+
@import "./views/rooms/_RoomListHeader.scss";
240239
@import "./views/rooms/_RoomPreviewBar.scss";
241240
@import "./views/rooms/_RoomSublist.scss";
242241
@import "./views/rooms/_RoomTile.scss";

‎res/css/structures/_LeftPanel.scss

+30-5
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,38 @@ $roomListCollapsedWidth: 68px;
101101
}
102102

103103
.mx_LeftPanel_filterContainer {
104-
margin-left: 12px;
105-
margin-right: 12px;
104+
margin: 0 12px;
105+
padding: 12px 0 8px;
106+
border-bottom: 1px solid $quinary-content;
106107

107108
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
108109

109110
// Create a flexbox to organize the inputs
110111
display: flex;
111112
align-items: center;
112113

114+
& + .mx_RoomListHeader {
115+
margin-top: 12px;
116+
}
117+
118+
.mx_RoomSearch_shortcutPrompt {
119+
border-radius: 6px;
120+
background-color: $panel-actions;
121+
padding: 2px 4px;
122+
user-select: none;
123+
pointer-events: none;
124+
font-size: $font-12px;
125+
line-height: $font-15px;
126+
font-weight: $font-semi-bold;
127+
color: $light-fg-color;
128+
margin-right: 6px;
129+
}
130+
113131
.mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
132+
.mx_RoomSearch_shortcutPrompt {
133+
display: none;
134+
}
135+
114136
& + .mx_LeftPanel_exploreButton {
115137
// Cheaty way to return the occupied space to the filter input
116138
flex-basis: 0;
@@ -170,8 +192,12 @@ $roomListCollapsedWidth: 68px;
170192
background: $secondary-content;
171193
}
172194

173-
&.mx_LeftPanel_exploreButton_space::before {
174-
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
195+
&:hover {
196+
background-color: $tertiary-content;
197+
198+
&::before {
199+
background-color: $background;
200+
}
175201
}
176202
}
177203
}
@@ -234,7 +260,6 @@ $roomListCollapsedWidth: 68px;
234260
.mx_LeftPanel_exploreButton {
235261
margin-left: 0;
236262
margin-top: 8px;
237-
background-color: transparent;
238263
}
239264
}
240265
}

‎res/css/structures/_RoomSearch.scss

+24-7
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,22 @@ limitations under the License.
6767
.mx_RoomSearch_clearButton {
6868
width: 16px;
6969
height: 16px;
70-
mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg');
71-
mask-position: center;
72-
mask-size: contain;
73-
mask-repeat: no-repeat;
74-
background-color: $secondary-content;
7570
margin-right: 8px;
71+
background-color: $quinary-content;
72+
border-radius: 50%;
73+
position: relative;
74+
75+
&::before {
76+
content: "";
77+
position: absolute;
78+
width: inherit;
79+
height: inherit;
80+
mask-image: url('$(res)/img/feather-customised/x.svg');
81+
mask-position: center;
82+
mask-size: 12px;
83+
mask-repeat: no-repeat;
84+
background-color: $secondary-content;
85+
}
7686
}
7787
}
7888

@@ -82,13 +92,20 @@ limitations under the License.
8292
}
8393

8494
&.mx_RoomSearch_minimized {
85-
border-radius: 32px;
8695
height: auto;
8796
width: auto;
88-
padding: 8px;
97+
padding: 5px;
8998

9099
.mx_RoomSearch_icon {
91100
margin-left: 0;
92101
}
102+
103+
&:hover {
104+
background-color: $tertiary-content;
105+
106+
.mx_RoomSearch_icon {
107+
background-color: $background;
108+
}
109+
}
93110
}
94111
}

‎res/css/structures/_SpacePanel.scss

+46-27
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $gutterSize: 16px;
2020
$activeBorderTransparentGap: 1px;
2121

2222
$activeBackgroundColor: $panel-actions;
23-
$activeBorderColor: $secondary-content;
23+
$activeBorderColor: $primary-content;
2424

2525
.mx_SpacePanel {
2626
background-color: $groupFilterPanel-bg-color;
@@ -37,7 +37,7 @@ $activeBorderColor: $secondary-content;
3737

3838
.mx_SpacePanel_spaceTreeWrapper {
3939
flex: 1;
40-
padding: 8px 8px 16px 0;
40+
padding: 12px 8px 16px 0;
4141
}
4242

4343
.mx_SpacePanel_toggleCollapse {
@@ -92,13 +92,6 @@ $activeBorderColor: $secondary-content;
9292
}
9393
}
9494

95-
.mx_SpaceTreeLevel {
96-
display: flex;
97-
flex-direction: column;
98-
max-width: 250px;
99-
flex-grow: 1;
100-
}
101-
10295
.mx_SpaceItem {
10396
display: inline-flex;
10497
flex-flow: wrap;
@@ -209,10 +202,10 @@ $activeBorderColor: $secondary-content;
209202
&.mx_SpaceButton_people,
210203
&.mx_SpaceButton_orphans {
211204
.mx_SpaceButton_icon {
212-
background-color: #ffffff;
205+
background-color: $panel-actions;
213206

214207
&::before {
215-
background-color: #3f3d3d;
208+
background-color: $secondary-content;
216209
}
217210
}
218211
}
@@ -234,8 +227,6 @@ $activeBorderColor: $secondary-content;
234227
}
235228

236229
&.mx_SpaceButton_new .mx_SpaceButton_icon {
237-
background-color: $panel-actions;
238-
239230
&::before {
240231
background-color: $primary-content;
241232
mask-image: url('$(res)/img/element-icons/plus.svg');
@@ -261,7 +252,7 @@ $activeBorderColor: $secondary-content;
261252
position: relative;
262253

263254
&::before {
264-
top: 2px;
255+
top: 3px;
265256
left: 2px;
266257
content: '';
267258
width: 16px;
@@ -276,6 +267,35 @@ $activeBorderColor: $secondary-content;
276267
}
277268
}
278269

270+
.mx_SpaceTreeLevel {
271+
display: flex;
272+
flex-direction: column;
273+
max-width: 250px;
274+
flex-grow: 1;
275+
276+
.mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
277+
color: $secondary-content;
278+
width: 32px;
279+
height: 32px;
280+
border-radius: 8px;
281+
background-color: $panel-actions;
282+
font-size: $font-15px !important; // override inline style
283+
font-weight: $font-semi-bold;
284+
line-height: $font-18px;
285+
286+
& + .mx_BaseAvatar_image {
287+
visibility: hidden;
288+
}
289+
}
290+
291+
.mx_SpaceTreeLevel {
292+
.mx_BaseAvatar_initial {
293+
width: 24px;
294+
height: 24px;
295+
}
296+
}
297+
}
298+
279299
.mx_SpaceButton_avatarWrapper {
280300
position: relative;
281301
}
@@ -338,13 +358,8 @@ $activeBorderColor: $secondary-content;
338358
line-height: $font-18px;
339359
}
340360

341-
.mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
342-
color: $accent;
343-
344-
.mx_SpacePanel_iconInvite::before {
345-
background-color: $accent;
346-
mask-image: url('$(res)/img/element-icons/room/invite.svg');
347-
}
361+
.mx_SpacePanel_iconInvite::before {
362+
mask-image: url('$(res)/img/element-icons/room/invite.svg');
348363
}
349364

350365
.mx_SpacePanel_iconSettings::before {
@@ -360,15 +375,11 @@ $activeBorderColor: $secondary-content;
360375
}
361376

362377
.mx_SpacePanel_iconPlus::before {
363-
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
364-
}
365-
366-
.mx_SpacePanel_iconHash::before {
367-
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
378+
mask-image: url('$(res)/img/element-icons/plus.svg');
368379
}
369380

370381
.mx_SpacePanel_iconExplore::before {
371-
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
382+
mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
372383
}
373384

374385
.mx_SpacePanel_noIcon {
@@ -378,6 +389,14 @@ $activeBorderColor: $secondary-content;
378389
padding-left: 5px !important; // override default iconized label style to align with header
379390
}
380391
}
392+
393+
.mx_SpacePanel_contextMenu_separatorLabel {
394+
color: $tertiary-content;
395+
font-size: $font-10px;
396+
line-height: $font-12px;
397+
font-weight: $font-semi-bold;
398+
//margin-left: 8px;
399+
}
381400
}
382401

383402
.mx_SpacePanel_sharePublicSpace {

‎res/css/structures/_ToastContainer.scss

+5
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@ limitations under the License.
8585
background-color: $primary-content;
8686
}
8787

88+
&.mx_Toast_icon_labs::after {
89+
mask-image: url('$(res)/img/element-icons/flask.svg');
90+
background-color: $secondary-content;
91+
}
92+
8893
.mx_Toast_title, .mx_Toast_body {
8994
grid-column: 2;
9095
}

0 commit comments

Comments
 (0)