From ea61b18c1877173cd206734c2926fca04447f0c1 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 1 Mar 2021 17:02:02 +0000 Subject: [PATCH] Iterate Space Panel alignments --- res/css/structures/_SpacePanel.scss | 99 +++++++++++-------- src/components/views/spaces/SpacePanel.tsx | 21 ++-- .../views/spaces/SpaceTreeLevel.tsx | 15 ++- 3 files changed, 81 insertions(+), 54 deletions(-) diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 8de85f95ef..324757648f 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -2,8 +2,6 @@ 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 @@ -18,8 +16,12 @@ limitations under the License. $topLevelHeight: 32px; $nestedHeight: 24px; -$gutterSize: 21px; +$gutterSize: 17px; $activeStripeSize: 4px; +$activeBorderTransparentGap: 2px; + +$activeBackgroundColor: $roomtile-selected-bg-color; +$activeBorderColor: $secondary-fg-color; .mx_SpacePanel { flex: 0 0 auto; @@ -68,11 +70,14 @@ $activeStripeSize: 4px; cursor: pointer; } - .mx_SpaceItem { - position: relative; - } - .mx_SpaceItem.collapsed { + .mx_SpaceButton { + .mx_NotificationBadge { + right: -4px; + top: -4px; + } + } + & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse { transform: rotate(-90deg); } @@ -84,20 +89,35 @@ $activeStripeSize: 4px; .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton { margin-left: $gutterSize; - - &.mx_SpaceButton_active { - &::before { - left: -$gutterSize; - } - } } .mx_SpaceButton { border-radius: 8px; position: relative; - margin-bottom: 16px; + margin-bottom: 2px; display: flex; align-items: center; + padding: 4px; + + &.mx_SpaceButton_active { + &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper { + background-color: $activeBackgroundColor; + border-radius: 8px; + } + + &.mx_SpaceButton_narrow { + .mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder { + border: 2px $activeBorderColor solid; + border-radius: 11px; + } + } + } + + .mx_SpaceButton_selectionWrapper { + display: flex; + flex: 1; + align-items: center; + } .mx_SpaceButton_name { flex: 1; @@ -107,7 +127,7 @@ $activeStripeSize: 4px; max-width: 150px; text-overflow: ellipsis; overflow: hidden; - + padding-right: 8px; font-size: $font-14px; line-height: $font-18px; } @@ -123,24 +143,12 @@ $activeStripeSize: 4px; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } - &.mx_SpaceButton_active { - &::before { - position: absolute; - content: ''; - width: $activeStripeSize; - top: 0; - left: 0; - bottom: 0; - background-color: $accent-color; - border-radius: 0 4px 4px 0; - } - } - - .mx_SpaceButton_avatarPlaceholder { + .mx_SpaceButton_icon { width: $topLevelHeight; min-width: $topLevelHeight; height: $topLevelHeight; border-radius: 8px; + position: relative; &::before { position: absolute; @@ -155,7 +163,7 @@ $activeStripeSize: 4px; } } - &.mx_SpaceButton_home .mx_SpaceButton_avatarPlaceholder { + &.mx_SpaceButton_home .mx_SpaceButton_icon { background-color: #ffffff; &::before { @@ -164,19 +172,28 @@ $activeStripeSize: 4px; } } - &.mx_SpaceButton_newCancel .mx_SpaceButton_avatarPlaceholder { - background-color: $icon-button-color; + .mx_SpaceButton_avatarPlaceholder { + border: $activeBorderTransparentGap transparent solid; + padding: $activeBorderTransparentGap; + } - &::before { - transform: rotate(45deg); + .mx_BaseAvatar { + /* moving the border-radius to this element from _image + element so we can add a border to it without the initials being displaced */ + overflow: hidden; + border: 2px transparent solid; + padding: $activeBorderTransparentGap; + + .mx_BaseAvatar_initial { + top: $activeBorderTransparentGap; + left: $activeBorderTransparentGap; + } + + .mx_BaseAvatar_image { + border-radius: 8px; } } - .mx_BaseAvatar_image { - border-radius: 8px; - } - } - .mx_SpacePanel_badgeContainer { height: 16px; // don't set width so that it takes no space when there is no badge to show @@ -201,8 +218,8 @@ $activeStripeSize: 4px; .mx_SpaceButton { .mx_SpacePanel_badgeContainer { position: absolute; - right: -8px; - top: -4px; + right: 0px; + top: 2px; } } } diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index bc9cd5c9fd..760181e0e0 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -56,9 +56,10 @@ const SpaceButton: React.FC = ({ }) => { const classes = classNames("mx_SpaceButton", className, { mx_SpaceButton_active: selected, + mx_SpaceButton_narrow: isNarrow, }); - let avatar =
; + let avatar =
; if (space) { avatar = ; } @@ -74,18 +75,22 @@ const SpaceButton: React.FC = ({ if (isNarrow) { button = ( - { avatar } - { notifBadge } - { children } +
+ { avatar } + { notifBadge } + { children } +
); } else { button = ( - { avatar } - { tooltip } - { notifBadge } - { children } +
+ { avatar } + { tooltip } + { notifBadge } + { children } +
); } diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index 14fe68ff66..f94798433f 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -95,6 +95,7 @@ export class SpaceItem extends React.PureComponent { const classes = classNames("mx_SpaceButton", { mx_SpaceButton_active: isActive, mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition, + mx_SpaceButton_narrow: isNarrow, }); const notificationState = SpaceStore.instance.getNotificationState(space.roomId); const childItems = childSpaces && !collapsed ? { role="treeitem" > { toggleCollapseButton } - - { notifBadge } +
+ + { notifBadge } +
); } else { @@ -142,9 +145,11 @@ export class SpaceItem extends React.PureComponent { role="treeitem" > { toggleCollapseButton } - - { space.name } - { notifBadge } +
+ + { space.name } + { notifBadge } +
); }