diff --git a/res/css/_components.scss b/res/css/_components.scss index c43d9edc16..8fc1667fb5 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -18,7 +18,7 @@ @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"; @import "./structures/_ViewSource.scss"; @@ -27,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/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 7474c3d107..fa69c6fb90 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -30,12 +30,11 @@ 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; - padding: 6px; font-size: 14px; z-index: 5001; } @@ -44,6 +43,10 @@ limitations under the License. right: 8px; } +.mx_ContextualMenu_noChevron { + border-radius: unset !important; +} + .mx_ContextualMenu_chevron_right { position: absolute; right: -8px; @@ -51,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; } @@ -78,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; } @@ -105,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; } @@ -132,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/structures/_TopLeftMenu.scss b/res/css/structures/_TopLeftMenuButton.scss similarity index 69% rename from res/css/structures/_TopLeftMenu.scss rename to res/css/structures/_TopLeftMenuButton.scss index 86f88448a0..a80e06c620 100644 --- a/res/css/structures/_TopLeftMenu.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -14,28 +14,31 @@ 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; background-color: $primary-bg-color; display: flex; + align-items: center; + min-width: 0; + padding: 0 7px; + overflow: hidden; } -.mx_TopLeftMenu_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_TopLeftMenu_name { - margin-top: 15px; - margin-right: 9px; +.mx_TopLeftMenuButton_name { + margin: 0 7px; font-size: 18px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; font-weight: 600; } -.mx_TopLeftMenu_chevron { - margin-top: 24px; +.mx_TopLeftMenuButton_chevron { + margin: 0 7px; } diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss index 85e8080c88..d15d566bdb 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 598f8ac249..f832691be4 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; diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss new file mode 100644 index 0000000000..960e052a30 --- /dev/null +++ b/res/css/views/context_menus/_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/res/css/views/rooms/_RoomTooltip.scss b/res/css/views/rooms/_RoomTooltip.scss index 9988425b8f..295786d2d3 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 0cfc479a47..f571f6b0c2 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 46c66968fa..aed8dfa60f 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 aac1391721..9ece0363b3 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/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index 7295fd45d3..2dfc1eeb34 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', diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index ab491cc65e..2adb3dda34 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/TopLeftMenu.js b/src/components/structures/TopLeftMenu.js deleted file mode 100644 index 5dfa8ed171..0000000000 --- a/src/components/structures/TopLeftMenu.js +++ /dev/null @@ -1,51 +0,0 @@ -/* -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'; - -class TopLeftMenu extends React.Component { - - static propTypes = { - collapsed: PropTypes.bool.isRequired, - }; - - static displayName = 'TopLeftMenu'; - - render() { - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const avatarHeight = 28; - const name = "My stuff"; - - return ( -
- -
- { name } -
- -
- ); - } -} - -module.exports = TopLeftMenu; diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js new file mode 100644 index 0000000000..b2b375581d --- /dev/null +++ b/src/components/structures/TopLeftMenuButton.js @@ -0,0 +1,116 @@ +/* +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 * 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'; + +const AVATAR_SIZE = 28; + +export default class TopLeftMenuButton extends React.Component { + + static propTypes = { + collapsed: PropTypes.bool.isRequired, + }; + + static displayName = 'TopLeftMenuButton'; + + constructor() { + super(); + this.state = { + menuDisplayed: false, + profileInfo: null, + }; + + this.onToggleMenu = this.onToggleMenu.bind(this); + } + + 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; + let nameElement; + if (!this.props.collapsed) { + nameElement =
+ { name } +
; + } + + return ( + + + { nameElement } + + + ); + } + + onToggleMenu(e) { + e.preventDefault(); + e.stopPropagation(); + + const elementRect = e.currentTarget.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 }); + } +} diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index be718050c1..c990b5705d 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 ce9895447e..8e56c055f9 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 ( -
+
diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js new file mode 100644 index 0000000000..ec3120cfea --- /dev/null +++ b/src/components/views/context_menus/TopLeftMenu.js @@ -0,0 +1,53 @@ +/* +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 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
+
    +
  • {_t("Settings")}
    • +
+
    +
  • {_t("Sign out")}
    • +
+
; + } + + openSettings() { + dis.dispatch({action: 'view_user_settings'}); + this.closeMenu(); + } + + signOut() { + dis.dispatch({action: 'logout'}); + this.closeMenu(); + } + + closeMenu() { + if (this.props.onFinished) this.props.onFinished(); + } +}