From 01b0acbe62c2ad2d3113df7d92957ce33b55cb9c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 16:14:08 -0600 Subject: [PATCH] Make the UserMenu echo the current community name --- res/css/structures/_UserMenu.scss | 46 ++++++++++++++++++++++++++ src/components/structures/UserMenu.tsx | 35 +++++++++++++++++++- src/i18n/strings/en_EN.json | 1 + 3 files changed, 81 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index b4e3a08e18..08fb1f49f0 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -19,6 +19,30 @@ limitations under the License. // 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 $roomsublist-divider-color; + opacity: 0.2; + display: block; + padding-top: 8px; + } + } + .mx_UserMenu_headerButtons { width: 16px; height: 16px; @@ -56,6 +80,28 @@ limitations under the License. } } + .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; diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 30be71abcb..a1039f23b9 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -42,6 +42,9 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../views/context_menus/IconizedContextMenu"; +import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore"; +import * as fbEmitter from "fbemitter"; +import TagOrderStore from "../../stores/TagOrderStore"; interface IProps { isMinimized: boolean; @@ -58,6 +61,7 @@ export default class UserMenu extends React.Component { private dispatcherRef: string; private themeWatcherRef: string; private buttonRef: React.RefObject = createRef(); + private tagStoreRef: fbEmitter.EventSubscription; constructor(props: IProps) { super(props); @@ -77,14 +81,20 @@ export default class UserMenu extends React.Component { public componentDidMount() { this.dispatcherRef = defaultDispatcher.register(this.onAction); this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged); + this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate); } public componentWillUnmount() { if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef); if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef); OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate); + this.tagStoreRef.remove(); } + private onTagStoreUpdate = () => { + this.forceUpdate(); // we don't have anything useful in state to update + }; + private isUserOnDarkTheme(): boolean { const theme = SettingsStore.getValue("theme"); if (theme.startsWith("custom-")) { @@ -298,12 +308,34 @@ export default class UserMenu extends React.Component { const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId(); const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); + const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName(); + + let isPrototype = false; + let menuName = _t("User menu"); let name = {displayName}; let buttons = ( {/* masked image in CSS */} ); + if (prototypeCommunityName) { + name = ( +
+ {prototypeCommunityName} + {displayName} +
+ ); + menuName = _t("Community and user menu"); + isPrototype = true; + } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) { + name = ( +
+ {_t("Home")} + {displayName} +
+ ); + isPrototype = true; + } if (this.props.isMinimized) { name = null; buttons = null; @@ -312,6 +344,7 @@ export default class UserMenu extends React.Component { const classes = classNames({ 'mx_UserMenu': true, 'mx_UserMenu_minimized': this.props.isMinimized, + 'mx_UserMenu_prototype': isPrototype, }); return ( @@ -320,7 +353,7 @@ export default class UserMenu extends React.Component { className={classes} onClick={this.onOpenMenuClick} inputRef={this.buttonRef} - label={_t("User menu")} + label={menuName} isExpanded={!!this.state.contextMenuPosition} onContextMenu={this.onContextMenu} > diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0d01fd47c8..3589c2ba76 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2129,6 +2129,7 @@ "All settings": "All settings", "Feedback": "Feedback", "User menu": "User menu", + "Community and user menu": "Community and user menu", "Could not load user profile": "Could not load user profile", "Verify this login": "Verify this login", "Session verified": "Session verified",