From 64d53d529a7d4faa7d676c420a8d2ac5f5b9736a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Oct 2021 10:20:47 +0100 Subject: [PATCH 01/59] Move user avatar to Space panel --- res/css/structures/_LeftPanel.scss | 5 +- res/css/structures/_SpacePanel.scss | 2 +- res/css/structures/_UserMenu.scss | 146 ++------------------- src/components/structures/LeftPanel.tsx | 10 -- src/components/structures/UserMenu.tsx | 60 +++------ src/components/views/spaces/SpacePanel.tsx | 2 + 6 files changed, 31 insertions(+), 194 deletions(-) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index a6580058216..ce8ed82e4da 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -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 diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 4be9d49120a..ac8085578f5 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -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 { diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index c10e7f60df2..35b06a438a2 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -15,142 +15,16 @@ limitations under the License. */ .mx_UserMenu { - // to make the menu button sort of aligned with the explore button below - padding-right: 6px; - - &.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_headerButtons { - width: 16px; - height: 16px; - position: relative; - display: block; - - &::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; - } + padding: 0 2px 8px; + border-bottom: 1px solid $quinary-content; + margin-left: 18px; + margin-bottom: 8px; + width: 36px; + box-sizing: border-box; + + .mx_UserMenu_userAvatar { + border-radius: 32px; // should match avatar size + object-fit: cover; } } diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index f12b4cbcf5c..7fe87feac6f 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -25,7 +25,6 @@ import RoomList from "../views/rooms/RoomList"; import CallHandler from "../../CallHandler"; import { HEADER_HEIGHT } from "../views/rooms/RoomSublist"; import { Action } from "../../dispatcher/actions"; -import UserMenu from "./UserMenu"; import RoomSearch from "./RoomSearch"; import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore"; @@ -308,14 +307,6 @@ export default class LeftPanel extends React.Component { } }; - private renderHeader(): React.ReactNode { - return ( -
- -
- ); - } - private renderBreadcrumbs(): React.ReactNode { if (this.state.showBreadcrumbs && !this.props.isMinimized) { return ( @@ -397,7 +388,6 @@ export default class LeftPanel extends React.Component { return (