sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Tweaks to informational architecture 1.1 (#7052)

Browse Source 
* 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
This commit is contained in:
Michael Telatynski
2021-11-30 18:08:46 +00:00
committed by GitHub
parent c09e0efdb9
commit 8fe582b094
49 changed files with 1433 additions and 1483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/structures/_SpacePanel.scss
+46 -27
View File
@@ -20,7 +20,7 @@ $gutterSize: 16px;
$activeBorderTransparentGap: 1px;
$activeBackgroundColor: $panel-actions;
$activeBorderColor: $secondary-content;
$activeBorderColor: $primary-content;
.mx_SpacePanel {
background-color: $groupFilterPanel-bg-color;
@@ -37,7 +37,7 @@ $activeBorderColor: $secondary-content;
.mx_SpacePanel_spaceTreeWrapper {
flex: 1;
padding: 8px 8px 16px 0;
padding: 12px 8px 16px 0;
}
.mx_SpacePanel_toggleCollapse {
@@ -92,13 +92,6 @@ $activeBorderColor: $secondary-content;
}
}
.mx_SpaceTreeLevel {
display: flex;
flex-direction: column;
max-width: 250px;
flex-grow: 1;
}
.mx_SpaceItem {
display: inline-flex;
flex-flow: wrap;
@@ -209,10 +202,10 @@ $activeBorderColor: $secondary-content;
&.mx_SpaceButton_people,
&.mx_SpaceButton_orphans {
.mx_SpaceButton_icon {
background-color: #ffffff;
background-color: $panel-actions;
&::before {
background-color: #3f3d3d;
background-color: $secondary-content;
}
}
}
@@ -234,8 +227,6 @@ $activeBorderColor: $secondary-content;
}
&.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: $panel-actions;
&::before {
background-color: $primary-content;
mask-image: url('$(res)/img/element-icons/plus.svg');
@@ -261,7 +252,7 @@ $activeBorderColor: $secondary-content;
position: relative;
&::before {
top: 2px;
top: 3px;
left: 2px;
content: '';
width: 16px;
@@ -276,6 +267,35 @@ $activeBorderColor: $secondary-content;
}
}
.mx_SpaceTreeLevel {
display: flex;
flex-direction: column;
max-width: 250px;
flex-grow: 1;
.mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
color: $secondary-content;
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $panel-actions;
font-size: $font-15px !important; // override inline style
font-weight: $font-semi-bold;
line-height: $font-18px;
& + .mx_BaseAvatar_image {
visibility: hidden;
}
}
.mx_SpaceTreeLevel {
.mx_BaseAvatar_initial {
width: 24px;
height: 24px;
}
}
}
.mx_SpaceButton_avatarWrapper {
position: relative;
}
@@ -338,13 +358,8 @@ $activeBorderColor: $secondary-content;
line-height: $font-18px;
}
.mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
color: $accent;
.mx_SpacePanel_iconInvite::before {
background-color: $accent;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
.mx_SpacePanel_iconInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
.mx_SpacePanel_iconSettings::before {
@@ -360,15 +375,11 @@ $activeBorderColor: $secondary-content;
}
.mx_SpacePanel_iconPlus::before {
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
}
.mx_SpacePanel_iconHash::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
mask-image: url('$(res)/img/element-icons/plus.svg');
}
.mx_SpacePanel_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
}
.mx_SpacePanel_noIcon {
@@ -378,6 +389,14 @@ $activeBorderColor: $secondary-content;
padding-left: 5px !important; // override default iconized label style to align with header
}
}
.mx_SpacePanel_contextMenu_separatorLabel {
color: $tertiary-content;
font-size: $font-10px;
line-height: $font-12px;
font-weight: $font-semi-bold;
//margin-left: 8px;
}
}
.mx_SpacePanel_sharePublicSpace {