imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1433 additions and 1483 deletions
Download patch file Download diff file Expand all files Collapse all files

9
res/css/_common.scss
View file

@ -482,6 +482,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
overflow-y: hidden;
}
.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
max-width: 636px; // match splash image width
.mx_AccessibleButton_kind_link {
font-size: inherit;
padding: 0;
}
}
// TODO: Review mx_GeneralButton usage to see if it can use a different class
// These classes were brought in from the old UserSettings and are included here to avoid
// breaking the app.

3
res/css/_components.scss
View file

@ -60,13 +60,11 @@
@import "./views/auth/_Welcome.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_WidgetAvatar.scss";
@import "./views/beta/_BetaCard.scss";
@import "./views/context_menus/_CallContextMenu.scss";
@import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@ -237,6 +235,7 @@
@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomListHeader.scss";
@import "./views/rooms/_RoomPreviewBar.scss";
@import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss";

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;
}
}

29
res/css/views/avatars/_MemberStatusMessageAvatar.scss
View file

@ -1,29 +0,0 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MessageComposer_avatar .mx_BaseAvatar {
padding: 2px;
border: 1px solid transparent;
border-radius: 100%;
}
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
left: 2px;
}
.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
border-color: $accent;
}

5
res/css/views/context_menus/_IconizedContextMenu.scss
View file

@ -59,6 +59,11 @@ limitations under the License.
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
}
// round all corners of the only button for the hover effect to be bounded
&:first-child:last-child .mx_AccessibleButton:first-child:last-child {
border-radius: 8px; // radius matches .mx_ContextualMenu
}
.mx_AccessibleButton {
// pad the inside of the button so that the hover background is padded too
padding-top: 12px;

65
res/css/views/context_menus/_StatusMessageContextMenu.scss
View file

@ -1,65 +0,0 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_StatusMessageContextMenu {
padding: 10px;
}
.mx_StatusMessageContextMenu_form {
display: flex;
flex-direction: column;
}
input.mx_StatusMessageContextMenu_message {
border-radius: 4px;
border: 1px solid $input-border-color;
padding: 6.5px 11px;
background-color: $background;
font-weight: normal;
margin: 0 0 10px;
}
.mx_StatusMessageContextMenu_message::placeholder {
color: $tertiary-content;
}
.mx_StatusMessageContextMenu_actionContainer {
display: flex;
}
.mx_StatusMessageContextMenu_submit,
.mx_StatusMessageContextMenu_clear {
@mixin mx_DialogButton;
align-self: start;
font-size: $font-12px;
padding: 6px 1em;
border: 1px solid transparent;
margin-right: 10px;
}
.mx_StatusMessageContextMenu_submit[disabled] {
opacity: 0.49;
}
.mx_StatusMessageContextMenu_clear {
color: $alert;
background-color: transparent;
border: 1px solid $alert;
}
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
justify-content: flex-start;
}

32
res/css/views/dialogs/_FeedbackDialog.scss
View file

@ -30,10 +30,32 @@ limitations under the License.
.mx_FeedbackDialog_section {
position: relative;
padding-left: 52px;
padding: 12px 52px 12px 68px;
border-radius: 8px;
border: 1px solid $quinary-content;
& + .mx_FeedbackDialog_section {
margin-top: 16px;
}
> h3 {
margin-top: 0;
margin-bottom: 8px;
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
}
> p {
color: $tertiary-content;
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
margin: 8px 0 0;
}
.mx_FeedbackDialog_section_microcopy {
font-size: $font-12px;
line-height: $font-15px;
}
.mx_AccessibleButton_kind_link {
@ -51,13 +73,13 @@ limitations under the License.
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
left: 16px;
top: 12px;
}
&::before {
background-color: $icon-button-color;
border-radius: 20px;
border-radius: 8px;
}
&::after {

4
res/css/views/rooms/_MessageComposer.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
margin: auto;
border-top: 1px solid $primary-hairline-color;
position: relative;
padding-left: 82px;
padding-left: 42px;
padding-right: 6px;
}
@ -74,7 +74,7 @@ limitations under the License.
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 60px;
left: 20px;
margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class
width: 12px;

1
res/css/views/rooms/_RoomBreadcrumbs.scss
View file

@ -21,6 +21,7 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: flex-start;
margin-bottom: 12px;
.mx_RoomBreadcrumbs_crumb {
margin-right: 8px;

26
res/css/views/rooms/_RoomList.scss
View file

@ -21,18 +21,24 @@ limitations under the License.
.mx_RoomList_iconPlus::before {
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
}
.mx_RoomList_iconHash::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
.mx_RoomList_iconCreateNewRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomList_iconAddExistingRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');
}
.mx_RoomList_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
.mx_RoomList_iconBrowse::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
}
.mx_RoomList_iconDialpad::before {
mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
}
.mx_RoomList_iconStartChat {
mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg');
}
.mx_RoomList_iconInvite {
mask-image: url('$(res)/img/element-icons/room/share.svg');
}
.mx_RoomList_explorePrompt {
margin: 4px 12px 4px;
@ -77,13 +83,5 @@ limitations under the License.
&.mx_RoomList_explorePrompt_explore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
&.mx_RoomList_explorePrompt_spaceInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
&.mx_RoomList_explorePrompt_spaceExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
}
}
}

111
res/css/views/rooms/_RoomListHeader.scss Normal file
View file

@ -0,0 +1,111 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomListHeader {
display: flex;
align-items: center;
.mx_RoomListHeader_contextLessTitle,
.mx_RoomListHeader_contextMenuButton {
font-size: $font-15px;
line-height: $font-24px;
font-weight: $font-semi-bold;
padding: 1px 24px 1px 4px;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 8px;
margin-right: auto;
user-select: none;
}
.mx_RoomListHeader_contextMenuButton {
border-radius: 6px;
&:hover {
background-color: $quinary-content;
}
&::before {
content: '';
width: 20px;
height: 20px;
top: 3px;
right: 0;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&[aria-expanded=true] {
background-color: $quinary-content;
&::before {
transform: rotate(180deg);
}
}
}
.mx_RoomListHeader_plusButton {
width: 32px;
height: 32px;
border-radius: 8px;
position: relative;
padding: 8px;
margin-left: 8px;
margin-right: 12px;
background-color: $panel-actions;
box-sizing: border-box;
flex-shrink: 0;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
}
&:hover {
background-color: $tertiary-content;
&::before {
background-color: $background;
}
}
}
}
.mx_RoomListHeader_iconInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
.mx_RoomListHeader_iconStartChat::before {
mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg');
}
.mx_RoomListHeader_iconCreateRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomListHeader_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
}