From d679708058befe021f8fba23594180aa76ec4554 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 1 Mar 2021 15:40:46 +0000 Subject: [PATCH 1/5] Fix styling of disabled options in an Iconized menu --- res/css/views/context_menus/_IconizedContextMenu.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss index d911ac6dfe..204435995f 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.scss +++ b/res/css/views/context_menus/_IconizedContextMenu.scss @@ -75,6 +75,11 @@ limitations under the License. background-color: $menu-selected-color; } + &.mx_AccessibleButton_disabled { + opacity: 0.5; + cursor: not-allowed; + } + img, .mx_IconizedContextMenu_icon { // icons width: 16px; min-width: 16px; From ce648633266c53d80148a498b98617f88629a282 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 1 Mar 2021 15:53:16 +0000 Subject: [PATCH 2/5] Annotate User Menu handle with currently selected space --- res/css/structures/_UserMenu.scss | 1 + src/components/structures/UserMenu.tsx | 40 ++++++++++++++++++++------ 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index 2a4453df70..3badb0850c 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -72,6 +72,7 @@ limitations under the License. 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 diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 5ed6a00d74..b31a5f4b8e 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -15,13 +15,18 @@ limitations under the License. */ import React, { createRef } from "react"; +import { Room } from "matrix-js-sdk/src/models/room"; +import classNames from "classnames"; +import * as fbEmitter from "fbemitter"; + import { MatrixClientPeg } from "../../MatrixClientPeg"; import defaultDispatcher from "../../dispatcher/dispatcher"; +import dis from "../../dispatcher/dispatcher"; import { ActionPayload } from "../../dispatcher/payloads"; import { Action } from "../../dispatcher/actions"; import { _t } from "../../languageHandler"; import { ContextMenuButton } from "./ContextMenu"; -import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog"; +import { USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB } from "../views/dialogs/UserSettingsDialog"; import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload"; import FeedbackDialog from "../views/dialogs/FeedbackDialog"; import Modal from "../../Modal"; @@ -30,11 +35,10 @@ import SettingsStore from "../../settings/SettingsStore"; import {getCustomTheme} from "../../theme"; import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton"; import SdkConfig from "../../SdkConfig"; -import {getHomePageUrl} from "../../utils/pages"; +import { getHomePageUrl } from "../../utils/pages"; import { OwnProfileStore } from "../../stores/OwnProfileStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import BaseAvatar from '../views/avatars/BaseAvatar'; -import classNames from "classnames"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import { SettingLevel } from "../../settings/SettingLevel"; import IconizedContextMenu, { @@ -42,16 +46,16 @@ import IconizedContextMenu, { IconizedContextMenuOptionList, } from "../views/context_menus/IconizedContextMenu"; import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore"; -import * as fbEmitter from "fbemitter"; import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore"; import { showCommunityInviteDialog } from "../../RoomInvite"; -import dis from "../../dispatcher/dispatcher"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import ErrorDialog from "../views/dialogs/ErrorDialog"; import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototypeDialog"; -import {UIFeature} from "../../settings/UIFeature"; +import { UIFeature } from "../../settings/UIFeature"; import HostSignupAction from "./HostSignupAction"; -import {IHostSignupConfig} from "../views/dialogs/HostSignupDialogTypes"; +import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes"; +import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore"; +import RoomName from "../views/elements/RoomName"; interface IProps { isMinimized: boolean; @@ -62,6 +66,7 @@ type PartialDOMRect = Pick; interface IState { contextMenuPosition: PartialDOMRect; isDarkTheme: boolean; + selectedSpace?: Room; } export default class UserMenu extends React.Component { @@ -79,6 +84,9 @@ export default class UserMenu extends React.Component { }; OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate); + if (SettingsStore.getValue("feature_spaces")) { + SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate); + } } private get hasHomePage(): boolean { @@ -96,6 +104,9 @@ export default class UserMenu extends React.Component { if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef); OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate); this.tagStoreRef.remove(); + if (SettingsStore.getValue("feature_spaces")) { + SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate); + } } private onTagStoreUpdate = () => { @@ -120,6 +131,10 @@ export default class UserMenu extends React.Component { this.forceUpdate(); }; + private onSelectedSpaceUpdate = async (selectedSpace?: Room) => { + this.setState({ selectedSpace }); + }; + private onThemeChanged = () => { this.setState({isDarkTheme: this.isUserOnDarkTheme()}); }; @@ -517,7 +532,16 @@ export default class UserMenu extends React.Component { {/* masked image in CSS */} ); - if (prototypeCommunityName) { + if (this.state.selectedSpace) { + name = ( +
+ {displayName} + + {(roomName) => {roomName}} + +
+ ); + } else if (prototypeCommunityName) { name = (
{prototypeCommunityName} From 70f1303544c65d46ffb7233259ba33b2ac3d2fa5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 1 Mar 2021 16:48:35 +0000 Subject: [PATCH 3/5] Fix invite svg viewbox --- res/img/element-icons/room/invite.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/img/element-icons/room/invite.svg b/res/img/element-icons/room/invite.svg index 655f9f118a..d2ecb837b2 100644 --- a/res/img/element-icons/room/invite.svg +++ b/res/img/element-icons/room/invite.svg @@ -1,3 +1,3 @@ - + 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 4/5] 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 } +
); } From 89386b9b2ea5d9fc2ef1ff07d0becdc0ad9fc1ff Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 1 Mar 2021 17:06:56 +0000 Subject: [PATCH 5/5] fix missing closing brace --- res/css/structures/_SpacePanel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 324757648f..563c5eba58 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -193,6 +193,7 @@ $activeBorderColor: $secondary-fg-color; border-radius: 8px; } } + } .mx_SpacePanel_badgeContainer { height: 16px;