matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-31 13:44:28 +03:00
Code 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

35
res/css/structures/_LeftPanel.scss
View File

@ -101,8 +101,9 @@ $roomListCollapsedWidth: 68px;
}
.mx_LeftPanel_filterContainer {
margin-left: 12px;
margin-right: 12px;
margin: 0 12px;
padding: 12px 0 8px;
border-bottom: 1px solid $quinary-content;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
@ -110,7 +111,28 @@ $roomListCollapsedWidth: 68px;
display: flex;
align-items: center;
& + .mx_RoomListHeader {
margin-top: 12px;
}
.mx_RoomSearch_shortcutPrompt {
border-radius: 6px;
background-color: $panel-actions;
padding: 2px 4px;
user-select: none;
pointer-events: none;
font-size: $font-12px;
line-height: $font-15px;
font-weight: $font-semi-bold;
color: $light-fg-color;
margin-right: 6px;
}
.mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
.mx_RoomSearch_shortcutPrompt {
display: none;
}
& + .mx_LeftPanel_exploreButton {
// Cheaty way to return the occupied space to the filter input
flex-basis: 0;
@ -170,8 +192,12 @@ $roomListCollapsedWidth: 68px;
background: $secondary-content;
}
&.mx_LeftPanel_exploreButton_space::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
&:hover {
background-color: $tertiary-content;
&::before {
background-color: $background;
}
}
}
}
@ -234,7 +260,6 @@ $roomListCollapsedWidth: 68px;
.mx_LeftPanel_exploreButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
}
}

31
res/css/structures/_RoomSearch.scss
View File

@ -67,12 +67,22 @@ limitations under the License.
.mx_RoomSearch_clearButton {
width: 16px;
height: 16px;
mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
margin-right: 8px;
background-color: $quinary-content;
border-radius: 50%;
position: relative;
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
mask-image: url('$(res)/img/feather-customised/x.svg');
mask-position: center;
mask-size: 12px;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
}
@ -82,13 +92,20 @@ limitations under the License.
}
&.mx_RoomSearch_minimized {
border-radius: 32px;
height: auto;
width: auto;
padding: 8px;
padding: 5px;
.mx_RoomSearch_icon {
margin-left: 0;
}
&:hover {
background-color: $tertiary-content;
.mx_RoomSearch_icon {
background-color: $background;
}
}
}
}

73
res/css/structures/_SpacePanel.scss
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 {

5
res/css/structures/_ToastContainer.scss
View File

@ -85,6 +85,11 @@ limitations under the License.
background-color: $primary-content;
}
&.mx_Toast_icon_labs::after {
mask-image: url('$(res)/img/element-icons/flask.svg');
background-color: $secondary-content;
}
.mx_Toast_title, .mx_Toast_body {
grid-column: 2;
}

231
res/css/structures/_UserMenu.scss
View File

@ -15,141 +15,51 @@ limitations under the License.
*/
.mx_UserMenu {
// to make the menu button sort of aligned with the explore button below
padding-right: 6px;
padding: 0 2px 8px;
border-bottom: 1px solid $quinary-content;
margin-left: 18px;
margin-bottom: 4px;
box-sizing: border-box;
display: flex;
align-items: center;
width: max-content;
&.mx_UserMenu_prototype {
// The margin & padding combination between here and the ::after is to
// align the border line with the tag panel.
margin-bottom: 6px;
padding-right: 0; // make the right edge line up with the explore button
.mx_UserMenu_headerButtons {
// considering we've eliminated right padding on the menu itself, we need to
// push the chevron in slightly (roughly lining up with the center of the
// plus buttons)
margin-right: 2px;
}
// we cheat opacity on the theme colour with an after selector here
&::after {
content: '';
border-bottom: 1px solid $primary-content;
opacity: 0.2;
display: block;
padding-top: 8px;
}
.mx_UserMenu_userAvatar {
position: relative;
}
.mx_UserMenu_headerButtons {
.mx_UserMenu_name {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
margin-left: 10px;
}
&.mx_UserMenu_cutout .mx_BaseAvatar {
mask-image: url('$(res)/img/element-icons/roomlist/dnd-avatar-mask.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
.mx_UserMenu_dndBadge {
position: absolute;
bottom: -2px;
right: -7px;
width: 16px;
height: 16px;
position: relative;
display: block;
border-radius: 50%;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
}
.mx_UserMenu_row {
// Create a row-based flexbox to ensure items stay aligned correctly.
display: flex;
align-items: center;
.mx_UserMenu_userAvatarContainer {
position: relative; // to make default avatars work
margin-right: 8px;
height: 32px; // to remove the unknown 4px gap the browser puts below it
padding: 3px 0; // to align with and without using doubleName
.mx_UserMenu_userAvatar {
border-radius: 32px; // should match avatar size
object-fit: cover;
}
}
.mx_UserMenu_doubleName {
flex: 1;
min-width: 0; // make flexbox aware that it can crush this to a tiny width
.mx_UserMenu_userName,
.mx_UserMenu_subUserName {
display: block;
}
.mx_UserMenu_subUserName {
color: $muted-fg-color;
font-size: $font-13px;
line-height: $font-18px;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.mx_UserMenu_userName {
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_UserMenu_headerButtons {
// No special styles: the rest of the layout happens to make it work.
}
.mx_UserMenu_dnd {
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
&::before {
content: '';
position: absolute;
width: 24px;
height: 24px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $muted-fg-color;
}
&.mx_UserMenu_dnd_noisy::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
&.mx_UserMenu_dnd_muted::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
}
}
&.mx_UserMenu_minimized {
padding-right: 0px;
.mx_UserMenu_userAvatarContainer {
margin-right: 0px;
background-color: $alert;
mask-image: url('$(res)/img/element-icons/roomlist/dnd.svg');
}
}
}
@ -157,44 +67,6 @@ limitations under the License.
.mx_UserMenu_contextMenu {
width: 258px;
// These override the styles already present on the user menu rather than try to
// define a new menu. They are specifically for the stacked menu when a community
// is being represented as a prototype.
&.mx_UserMenu_contextMenu_prototype {
padding-bottom: 16px;
.mx_UserMenu_contextMenu_header {
padding-bottom: 0;
padding-top: 16px;
&:nth-child(n + 2) {
padding-top: 8px;
}
}
hr {
width: 85%;
opacity: 0.2;
border: none;
border-bottom: 1px solid $primary-content;
}
&.mx_IconizedContextMenu {
> .mx_IconizedContextMenu_optionList {
margin-top: 4px;
&::before {
border: none;
}
> .mx_AccessibleButton {
padding-top: 2px;
padding-bottom: 2px;
}
}
}
}
&.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
.mx_AccessibleButton {
padding-top: 16px;
@ -299,6 +171,15 @@ limitations under the License.
.mx_UserMenu_iconHome::before {
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
}
.mx_UserMenu_iconDnd::before {
mask-image: url('$(res)/img/element-icons/roomlist/dnd.svg');
}
.mx_UserMenu_iconDndOff::before {
mask-image: url('$(res)/img/element-icons/roomlist/dnd-cross.svg');
}
.mx_UserMenu_iconHosting::before {
mask-image: url('$(res)/img/element-icons/brands/element.svg');
}
@ -315,23 +196,37 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_UserMenu_iconArchive::before {
mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
}
.mx_UserMenu_iconMessage::before {
mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
mask-image: url('$(res)/img/element-icons/feedback.svg');
}
.mx_UserMenu_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
}
.mx_UserMenu_iconMembers::before {
mask-image: url('$(res)/img/element-icons/room/members.svg');
.mx_UserMenu_CustomStatusSection {
margin: 0 12px 8px;
.mx_UserMenu_CustomStatusSection_input {
position: relative;
display: flex;
> input {
border: 1px solid $accent;
border-radius: 8px;
width: 100%;
}
}
.mx_UserMenu_iconInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
> p {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
margin: 4px 0;
}
.mx_AccessibleButton_kind_primary_outline {
display: block;
}
}