From 5f1cf07543479bbc7e4648e2c3d3c4fce801c0d2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 13:29:44 +0200 Subject: [PATCH 1/9] rename TopLeftMenu to TopLeftMenuButton so the former can be the actual menu --- ...pLeftMenu.scss => _TopLeftMenuButton.scss} | 10 +-- src/components/structures/LeftPanel.js | 4 +- .../structures/TopLeftMenuButton.js | 77 +++++++++++++++++++ 3 files changed, 84 insertions(+), 7 deletions(-) rename res/css/structures/{_TopLeftMenu.scss => _TopLeftMenuButton.scss} (87%) create mode 100644 src/components/structures/TopLeftMenuButton.js diff --git a/res/css/structures/_TopLeftMenu.scss b/res/css/structures/_TopLeftMenuButton.scss similarity index 87% rename from res/css/structures/_TopLeftMenu.scss rename to res/css/structures/_TopLeftMenuButton.scss index 86f88448a09..822edc7889e 100644 --- a/res/css/structures/_TopLeftMenu.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_TopLeftMenu { +.mx_TopLeftMenuButton { height: 52px; border-bottom: 1px solid $panel-divider-color; color: $topleftmenu-color; @@ -22,20 +22,20 @@ limitations under the License. display: flex; } -.mx_TopLeftMenu_avatar { +.mx_TopLeftMenuButton_avatar { position: relative; // to get avatar in the right place margin-left: 15px; margin-right: 15px; margin-top: 14px; } -.mx_TopLeftMenu_name { +.mx_TopLeftMenuButton_name { margin-top: 15px; - margin-right: 9px; + margin-right: 9px; font-size: 18px; font-weight: 600; } -.mx_TopLeftMenu_chevron { +.mx_TopLeftMenuButton_chevron { margin-top: 24px; } diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index ab491cc65eb..2adb3dda34e 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -178,11 +178,11 @@ var LeftPanel = React.createClass({ render: function() { const RoomList = sdk.getComponent('rooms.RoomList'); const TagPanel = sdk.getComponent('structures.TagPanel'); - const TopLeftMenu = sdk.getComponent('structures.TopLeftMenu'); + const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton'); const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); const CallPreview = sdk.getComponent('voip.CallPreview'); - let topBox = ; + let topBox = ; /* if (this.context.matrixClient.isGuest()) { const LoginBox = sdk.getComponent('structures.LoginBox'); diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js new file mode 100644 index 00000000000..534dc86d546 --- /dev/null +++ b/src/components/structures/TopLeftMenuButton.js @@ -0,0 +1,77 @@ +/* +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. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import sdk from '../../index'; +import * as ContextualMenu from './ContextualMenu'; +import {TopLeftMenu} from './TopLeftMenu'; + +export class TopLeftMenuButton extends React.Component { + + static propTypes = { + collapsed: PropTypes.bool.isRequired, + }; + + static displayName = 'TopLeftMenuButton'; + + constructor() { + super(); + this.state = { + menuDisplayed: false, + }; + } + + render() { + const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); + const avatarHeight = 28; + const name = "My stuff"; + + return ( +
+ +
+ { name } +
+ +
+ ); + } + + onToggleMenu(e) { + e.preventDefault(); + e.stopPropagation(); + + const elementRect = e.target.parentElement.getBoundingClientRect(); + const x = elementRect.left; + const y = elementRect.top + elementRect.height; + + ContextualMenu.createMenu(TopLeftMenu, { + chevronFace: "none", + left: x, + top: y, + onFinished: () => { + this.setState({ menuDisplayed: false }); + }, + }); + this.setState({ menuDisplayed: true }); + } +} From 7b8e96723e61a82a86fc53446b1351c6cb692a1b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:21:30 +0200 Subject: [PATCH 2/9] support contextual menus without chevron --- src/components/structures/ContextualMenu.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index 7295fd45d38..2dfc1eeb34f 100644 --- a/src/components/structures/ContextualMenu.js +++ b/src/components/structures/ContextualMenu.js @@ -49,7 +49,7 @@ export default class ContextualMenu extends React.Component { menuHeight: PropTypes.number, chevronOffset: PropTypes.number, menuColour: PropTypes.string, - chevronFace: PropTypes.string, // top, bottom, left, right + chevronFace: PropTypes.string, // top, bottom, left, right or none // Function to be called on menu close onFinished: PropTypes.func, menuPaddingTop: PropTypes.number, @@ -113,7 +113,6 @@ export default class ContextualMenu extends React.Component { render() { const position = {}; let chevronFace = null; - const props = this.props; if (props.top) { @@ -137,6 +136,8 @@ export default class ContextualMenu extends React.Component { if (props.chevronFace) { chevronFace = props.chevronFace; } + const hasChevron = chevronFace && chevronFace !== "none"; + if (chevronFace === 'top' || chevronFace === 'bottom') { chevronOffset.left = props.chevronOffset; } else { @@ -174,11 +175,12 @@ export default class ContextualMenu extends React.Component { `; } - const chevron =
; + const chevron = hasChevron ?
: undefined; const className = 'mx_ContextualMenu_wrapper'; const menuClasses = classNames({ 'mx_ContextualMenu': true, + 'mx_ContextualMenu_noChevron': chevronFace === 'none', 'mx_ContextualMenu_left': chevronFace === 'left', 'mx_ContextualMenu_right': chevronFace === 'right', 'mx_ContextualMenu_top': chevronFace === 'top', From 3f6175527c1d26c4431181a993f02cab88f3b02c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:22:41 +0200 Subject: [PATCH 3/9] move menu padding from wrapper so menu can have full-width elements --- res/css/structures/_ContextualMenu.scss | 1 - res/css/views/context_menus/_MessageContextMenu.scss | 4 ++++ res/css/views/context_menus/_RoomTileContextMenu.scss | 4 ++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 7474c3d1075..647e1e00aaf 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -35,7 +35,6 @@ limitations under the License. background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; - padding: 6px; font-size: 14px; z-index: 5001; } diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss index 85e8080c880..d15d566bdbe 100644 --- a/res/css/views/context_menus/_MessageContextMenu.scss +++ b/res/css/views/context_menus/_MessageContextMenu.scss @@ -14,6 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_MessageContextMenu { + padding: 6px; +} + .mx_MessageContextMenu_field { padding: 3px 6px 3px 6px; cursor: pointer; diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index 598f8ac249d..f832691be4c 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -14,6 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_RoomTileContextMenu { + padding: 6px; +} + .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave { padding-top: 8px; padding-right: 20px; From eba91d3edc18c7efa007a5ab24f22ef585aeccae Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:23:59 +0200 Subject: [PATCH 4/9] initial restyle of context menus with drop shadow --- res/css/structures/_ContextualMenu.scss | 16 ++++++++++------ res/css/views/rooms/_RoomTooltip.scss | 4 ++-- res/themes/dark/css/_dark.scss | 4 +++- res/themes/dharma/css/_dharma.scss | 5 +++-- res/themes/light/css/_base.scss | 1 + .../views/context_menus/MessageContextMenu.js | 2 +- .../views/context_menus/RoomTileContextMenu.js | 2 +- 7 files changed, 21 insertions(+), 13 deletions(-) diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 647e1e00aaf..fa69c6fb907 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -30,8 +30,8 @@ limitations under the License. } .mx_ContextualMenu { - border: solid 1px $menu-border-color; - border-radius: 4px; + border-radius: 2px; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21); background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; @@ -43,6 +43,10 @@ limitations under the License. right: 8px; } +.mx_ContextualMenu_noChevron { + border-radius: unset !important; +} + .mx_ContextualMenu_chevron_right { position: absolute; right: -8px; @@ -50,7 +54,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-left: 8px solid $menu-border-color; + border-left: 8px solid $menu-bg-color; border-bottom: 8px solid transparent; } @@ -77,7 +81,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-right: 8px solid $menu-border-color; + border-right: 8px solid $menu-bg-color; border-bottom: 8px solid transparent; } @@ -104,7 +108,7 @@ limitations under the License. width: 0; height: 0; border-left: 8px solid transparent; - border-bottom: 8px solid $menu-border-color; + border-bottom: 8px solid $menu-bg-color; border-right: 8px solid transparent; } @@ -131,7 +135,7 @@ limitations under the License. width: 0; height: 0; border-left: 8px solid transparent; - border-top: 8px solid $menu-border-color; + border-top: 8px solid $menu-bg-color; border-right: 8px solid transparent; } diff --git a/res/css/views/rooms/_RoomTooltip.scss b/res/css/views/rooms/_RoomTooltip.scss index 9988425b8f4..295786d2d3c 100644 --- a/res/css/views/rooms/_RoomTooltip.scss +++ b/res/css/views/rooms/_RoomTooltip.scss @@ -21,7 +21,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-right: 8px solid $menu-border-color; + border-right: 8px solid $menu-bg-color; border-bottom: 8px solid transparent; } @@ -40,8 +40,8 @@ limitations under the License. .mx_RoomTooltip { display: none; position: fixed; - border: 1px solid $menu-border-color; border-radius: 5px; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21); background-color: $primary-bg-color; z-index: 2000; padding: 5px; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8ab338790e2..e5a059f22c0 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -1,6 +1,6 @@ // typical text (dark-on-white in light skin) -$primary-fg-color: #dddddd; +$primary-fg-color: #212121; $primary-bg-color: #2d2d2d; // used for focusing form controls @@ -72,9 +72,11 @@ $input-fg-color: $primary-fg-color; // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #373737; +$menu-selected-color: #f5f8fa; $avatar-initial-color: #2d2d2d; $avatar-bg-color: #ffffff; +$menu-selected-color: #f5f8fa; $h3-color: $primary-fg-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 4e4b2cd66f0..f84844d6d24 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -76,8 +76,9 @@ $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); // context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #f6f6f6; +$menu-border-color: #ebedf8; +$menu-bg-color: #fff; +$menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; $avatar-bg-color: #ffffff; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index c17eba53983..a468b3e3f39 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -77,6 +77,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9); // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #f6f6f6; +$menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; $avatar-bg-color: #ffffff; diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index be718050c1c..c990b5705dd 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -333,7 +333,7 @@ module.exports = React.createClass({ } return ( -
+
{ resendButton } { redactButton } { cancelButton } diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js index ce9895447e4..8e56c055f99 100644 --- a/src/components/views/context_menus/RoomTileContextMenu.js +++ b/src/components/views/context_menus/RoomTileContextMenu.js @@ -243,7 +243,7 @@ module.exports = React.createClass({ }); return ( -
+
From 863d89f6fd63d258d9f879708d40d981ff14d8cc Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:24:44 +0200 Subject: [PATCH 5/9] show profile in topleftmenu button for now (will be current community) --- res/css/_components.scss | 1 + res/css/structures/_TopLeftMenuButton.scss | 19 +++--- .../structures/TopLeftMenuButton.js | 60 +++++++++++++++---- 3 files changed, 59 insertions(+), 21 deletions(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index c43d9edc169..a735c3151f2 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -19,6 +19,7 @@ @import "./structures/_SearchBox.scss"; @import "./structures/_TagPanel.scss"; @import "./structures/_TopLeftMenu.scss"; +@import "./structures/_TopLeftMenuButton.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_UserSettings.scss"; @import "./structures/_ViewSource.scss"; diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss index 822edc7889e..a80e06c6206 100644 --- a/res/css/structures/_TopLeftMenuButton.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -20,22 +20,25 @@ limitations under the License. color: $topleftmenu-color; background-color: $primary-bg-color; display: flex; + align-items: center; + min-width: 0; + padding: 0 7px; + overflow: hidden; } -.mx_TopLeftMenuButton_avatar { - position: relative; // to get avatar in the right place - margin-left: 15px; - margin-right: 15px; - margin-top: 14px; +.mx_TopLeftMenuButton .mx_BaseAvatar { + margin: 0 7px; } .mx_TopLeftMenuButton_name { - margin-top: 15px; - margin-right: 9px; + margin: 0 7px; font-size: 18px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; font-weight: 600; } .mx_TopLeftMenuButton_chevron { - margin-top: 24px; + margin: 0 7px; } diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js index 534dc86d546..17f55b120c3 100644 --- a/src/components/structures/TopLeftMenuButton.js +++ b/src/components/structures/TopLeftMenuButton.js @@ -16,11 +16,16 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import sdk from '../../index'; import * as ContextualMenu from './ContextualMenu'; import {TopLeftMenu} from './TopLeftMenu'; +import AccessibleButton from '../views/elements/AccessibleButton'; +import BaseAvatar from '../views/avatars/BaseAvatar'; +import MatrixClientPeg from '../../MatrixClientPeg'; +import Avatar from '../../Avatar'; -export class TopLeftMenuButton extends React.Component { +const AVATAR_SIZE = 28; + +export default class TopLeftMenuButton extends React.Component { static propTypes = { collapsed: PropTypes.bool.isRequired, @@ -32,27 +37,56 @@ export class TopLeftMenuButton extends React.Component { super(); this.state = { menuDisplayed: false, + profileInfo: null, }; + + this.onToggleMenu = this.onToggleMenu.bind(this); } - render() { - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const avatarHeight = 28; - const name = "My stuff"; + async _getProfileInfo() { + const cli = MatrixClientPeg.get(); + const userId = cli.getUserId(); + const profileInfo = await cli.getProfileInfo(userId); + const avatarUrl = Avatar.avatarUrlForUser( + {avatarUrl: profileInfo.avatar_url}, + AVATAR_SIZE, AVATAR_SIZE, "crop"); + return { + userId, + name: profileInfo.displayname, + avatarUrl, + }; + } + + async componentDidMount() { + try { + const profileInfo = await this._getProfileInfo(); + this.setState({profileInfo}); + } catch(ex) { + console.log("could not fetch profile"); + console.error(ex); + } + } + + render() { + const fallbackUserId = MatrixClientPeg.get().getUserId(); + const profileInfo = this.state.profileInfo; + const name = profileInfo ? profileInfo.name : fallbackUserId; return ( -
+ -
+
{ name }
-
+ ); } @@ -60,7 +94,7 @@ export class TopLeftMenuButton extends React.Component { e.preventDefault(); e.stopPropagation(); - const elementRect = e.target.parentElement.getBoundingClientRect(); + const elementRect = e.currentTarget.getBoundingClientRect(); const x = elementRect.left; const y = elementRect.top + elementRect.height; From 8b38af856ac26c8c7615619ab0f76cda2073f3e7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:25:20 +0200 Subject: [PATCH 6/9] put settings and sign out in top left menu for now --- res/css/structures/_TopLeftMenu.scss | 39 ++++++++++++++++++ src/components/structures/TopLeftMenu.js | 51 +++++++++++------------- 2 files changed, 62 insertions(+), 28 deletions(-) create mode 100644 res/css/structures/_TopLeftMenu.scss diff --git a/res/css/structures/_TopLeftMenu.scss b/res/css/structures/_TopLeftMenu.scss new file mode 100644 index 00000000000..960e052a301 --- /dev/null +++ b/res/css/structures/_TopLeftMenu.scss @@ -0,0 +1,39 @@ +/* +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_TopLeftMenu { + min-width: 180px; + + .mx_TopLeftMenu_section:not(:last-child) { + border-bottom: 1px solid $menu-border-color; + } + + .mx_TopLeftMenu_section { + list-style: none; + margin: 5px 0; + padding: 0; + + li { + white-space: nowrap; + padding: 5px 20px; + } + + li:hover { + background-color: $menu-selected-color; + } + } + +} diff --git a/src/components/structures/TopLeftMenu.js b/src/components/structures/TopLeftMenu.js index 5dfa8ed1718..34a90c97ae1 100644 --- a/src/components/structures/TopLeftMenu.js +++ b/src/components/structures/TopLeftMenu.js @@ -15,37 +15,32 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; -import sdk from '../../index'; +import dis from '../../dispatcher'; +import { _t } from '../../languageHandler'; -class TopLeftMenu extends React.Component { +export class TopLeftMenu extends React.Component { + render() { + return
+
    +
  • {_t("Settings")}
    • +
+
    +
  • {_t("Sign out")}
    • +
+
; + } - static propTypes = { - collapsed: PropTypes.bool.isRequired, - }; + openSettings() { + dis.dispatch({action: 'view_user_settings'}); + this.closeMenu(); + } - static displayName = 'TopLeftMenu'; + signOut() { + dis.dispatch({action: 'logout'}); + this.closeMenu(); + } - render() { - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const avatarHeight = 28; - const name = "My stuff"; - - return ( -
- -
- { name } -
- -
- ); + closeMenu() { + if (this.props.onFinished) this.props.onFinished(); } } - -module.exports = TopLeftMenu; From 97789a8858fa65e22bfae4fcaf8914e24d8b111e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:33:24 +0200 Subject: [PATCH 7/9] event handlers need to be bound with es6 react classes --- src/components/structures/TopLeftMenu.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/structures/TopLeftMenu.js b/src/components/structures/TopLeftMenu.js index 34a90c97ae1..1fd12acac4b 100644 --- a/src/components/structures/TopLeftMenu.js +++ b/src/components/structures/TopLeftMenu.js @@ -19,6 +19,13 @@ import dis from '../../dispatcher'; import { _t } from '../../languageHandler'; export class TopLeftMenu extends React.Component { + + constructor() { + super(); + this.openSettings = this.openSettings.bind(this); + this.signOut = this.signOut.bind(this); + } + render() { return
    From cad0fa05e5b02b8892a8516e5afbff11a65653d1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:33:45 +0200 Subject: [PATCH 8/9] hide name when collapsed --- src/components/structures/TopLeftMenuButton.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js index 17f55b120c3..b2b375581dc 100644 --- a/src/components/structures/TopLeftMenuButton.js +++ b/src/components/structures/TopLeftMenuButton.js @@ -72,6 +72,13 @@ export default class TopLeftMenuButton extends React.Component { const fallbackUserId = MatrixClientPeg.get().getUserId(); const profileInfo = this.state.profileInfo; const name = profileInfo ? profileInfo.name : fallbackUserId; + let nameElement; + if (!this.props.collapsed) { + nameElement =
    + { name } +
    ; + } + return ( -
    - { name } -
    + { nameElement }     ); From 4b90fd5c11614d4a0f5f3edec056a484c9ef2348 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:42:28 +0200 Subject: [PATCH 9/9] move TopLeftMenu to context_menus folder --- res/css/_components.scss | 2 +- res/css/{structures => views/context_menus}/_TopLeftMenu.scss | 0 .../{structures => views/context_menus}/TopLeftMenu.js | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename res/css/{structures => views/context_menus}/_TopLeftMenu.scss (100%) rename src/components/{structures => views/context_menus}/TopLeftMenu.js (94%) diff --git a/res/css/_components.scss b/res/css/_components.scss index a735c3151f2..8fc1667fb59 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -18,7 +18,6 @@ @import "./structures/_RoomView.scss"; @import "./structures/_SearchBox.scss"; @import "./structures/_TagPanel.scss"; -@import "./structures/_TopLeftMenu.scss"; @import "./structures/_TopLeftMenuButton.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_UserSettings.scss"; @@ -28,6 +27,7 @@ @import "./views/context_menus/_MessageContextMenu.scss"; @import "./views/context_menus/_RoomTileContextMenu.scss"; @import "./views/context_menus/_TagTileContextMenu.scss"; +@import "./views/context_menus/_TopLeftMenu.scss"; @import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; diff --git a/res/css/structures/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss similarity index 100% rename from res/css/structures/_TopLeftMenu.scss rename to res/css/views/context_menus/_TopLeftMenu.scss diff --git a/src/components/structures/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js similarity index 94% rename from src/components/structures/TopLeftMenu.js rename to src/components/views/context_menus/TopLeftMenu.js index 1fd12acac4b..ec3120cfea5 100644 --- a/src/components/structures/TopLeftMenu.js +++ b/src/components/views/context_menus/TopLeftMenu.js @@ -15,8 +15,8 @@ limitations under the License. */ import React from 'react'; -import dis from '../../dispatcher'; -import { _t } from '../../languageHandler'; +import dis from '../../../dispatcher'; +import { _t } from '../../../languageHandler'; export class TopLeftMenu extends React.Component {