From 7e09d50e68eda2aeb303cdedb3666b63a89fc06f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 09:33:22 +0200 Subject: [PATCH 01/15] add padding to timeline --- res/css/structures/_RoomView.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index e83f802012..1b73576246 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -139,9 +139,8 @@ limitations under the License. } .mx_RoomView_MessageList { - width: 100%; list-style-type: none; - padding: 0px; + padding: 18px; } .mx_RoomView_MessageList li { From f3ae9fe9817820a11080df17f751e616c8d580e3 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 09:33:35 +0200 Subject: [PATCH 02/15] align avatar in composer with avatar in timeline not part of design but temporarily make it prettier --- res/css/views/rooms/_MessageComposer.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 1cd368860f..af9837c9bf 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -62,8 +62,7 @@ limitations under the License. } .mx_MessageComposer .mx_MessageComposer_avatar { - padding-left: 10px; - padding-right: 28px; + padding: 0 28px; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { @@ -76,7 +75,7 @@ limitations under the License. .mx_MessageComposer_e2eIcon { position: absolute; - left: 44px; + left: 60px; } .mx_MessageComposer_noperm_error { From bf6486ac4f2b4637499fb6ea4380968cd21d74f2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 09:34:08 +0200 Subject: [PATCH 03/15] align avatar in room header with avatars in timeline (equally not part of design but making it prettier for now) --- res/css/views/rooms/_RoomHeader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 7e2e5683d9..acf7cc69c7 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_RoomHeader_leftRow { display: flex; - margin-left: 15px; + margin-left: 26px; order: 1; flex: 1; overflow: hidden; From 2a264f36b787b9cd6aff3ca693cfb05545977bf0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 10:25:04 +0200 Subject: [PATCH 04/15] style date separator --- res/css/views/messages/_DateSeparator.scss | 21 ++++++++++++++----- .../views/messages/DateSeparator.js | 2 +- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index f676d24bef..f8738f10e3 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -16,10 +16,21 @@ limitations under the License. .mx_DateSeparator { clear: both; - margin-top: 32px; - margin-bottom: 8px; - margin-left: 63px; - padding-bottom: 6px; - border-bottom: 1px solid $primary-hairline-color; + margin: 4px 0; + display: flex; + align-items: center; + font-size: 14px; + color: $roomtopic-color; } +.mx_DateSeparator > hr { + flex: 1 1 0; + height: 0; + border: none; + border-bottom: 1px solid $panel-divider-color; +} + +.mx_DateSeparator > date { + margin: 0 25px; + flex: 0 0 auto; +} diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js index a0ea704502..c72ed2517a 100644 --- a/src/components/views/messages/DateSeparator.js +++ b/src/components/views/messages/DateSeparator.js @@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component { } render() { - return

{ this.getLabel() }

; + return

{ this.getLabel() }

; } } From f2efbc15f4335eaa4d7f88011dabf971a082c368 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 10:49:44 +0200 Subject: [PATCH 05/15] apply color categories to sender profile name --- res/css/views/messages/_SenderProfile.scss | 38 +++++++++++++++++++ res/css/views/rooms/_EventTile.scss | 5 --- src/PhasedRollOut.js | 16 +------- .../views/messages/SenderProfile.js | 4 +- src/utils/FormattingUtils.js | 21 ++++++++++ 5 files changed, 63 insertions(+), 21 deletions(-) diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss index 060709b82e..a8ebcedc2b 100644 --- a/res/css/views/messages/_SenderProfile.scss +++ b/res/css/views/messages/_SenderProfile.scss @@ -13,3 +13,41 @@ 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_SenderProfile_name { + font-weight: 600; +} + +.mx_SenderProfile_color1 { + color: #1e7ddc; +} + +.mx_SenderProfile_color2 { + color: #a756a8; +} + +.mx_SenderProfile_color3 { + color: #7ac9a1; +} + +.mx_SenderProfile_color4 { + color: #f2809d; +} + +.mx_SenderProfile_color5 { + color: #ffc666; +} + +.mx_SenderProfile_color6 { + color: #76ddd7; +} + +.mx_SenderProfile_color7 { + color: #45529b; +} + +.mx_SenderProfile_color8 { + color: #bfd251; +} + + diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f74e2e0850..52074563f6 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -55,11 +55,6 @@ limitations under the License. line-height: 22px; } -.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name, -.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux { - opacity: 0.5; -} - .mx_EventTile .mx_SenderProfile .mx_Flair { opacity: 0.7; margin-left: 5px; diff --git a/src/PhasedRollOut.js b/src/PhasedRollOut.js index a9029d07e6..b17ed37974 100644 --- a/src/PhasedRollOut.js +++ b/src/PhasedRollOut.js @@ -15,21 +15,7 @@ limitations under the License. */ import SdkConfig from './SdkConfig'; - -function hashCode(str) { - let hash = 0; - let i; - let chr; - if (str.length === 0) { - return hash; - } - for (i = 0; i < str.length; i++) { - chr = str.charCodeAt(i); - hash = ((hash << 5) - hash) + chr; - hash |= 0; - } - return Math.abs(hash); -} +import {hashCode} from './utils/FormattingUtils'; export function phasedRollOutExpiredForUser(username, feature, now, rollOutConfig = SdkConfig.get().phasedRollOut) { if (!rollOutConfig) { diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js index 0f767675e2..a40addf0d1 100644 --- a/src/components/views/messages/SenderProfile.js +++ b/src/components/views/messages/SenderProfile.js @@ -23,6 +23,7 @@ import sdk from '../../../index'; import Flair from '../elements/Flair.js'; import FlairStore from '../../../stores/FlairStore'; import { _t } from '../../../languageHandler'; +import {hashCode} from '../../../utils/FormattingUtils'; export default React.createClass({ displayName: 'SenderProfile', @@ -96,6 +97,7 @@ export default React.createClass({ render() { const EmojiText = sdk.getComponent('elements.EmojiText'); const {mxEvent} = this.props; + const colorNumber = hashCode(mxEvent.getSender()) % 8; const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); const {msgtype} = mxEvent.getContent(); @@ -119,7 +121,7 @@ export default React.createClass({ // Name + flair const nameFlair = - + { nameElem } { flair } diff --git a/src/utils/FormattingUtils.js b/src/utils/FormattingUtils.js index a27851951f..435b33ac5d 100644 --- a/src/utils/FormattingUtils.js +++ b/src/utils/FormattingUtils.js @@ -37,3 +37,24 @@ export function formatCount(count) { export function formatCryptoKey(key) { return key.match(/.{1,4}/g).join(" "); } +/** + * calculates a numeric hash for a given string + * + * @param {string} str string to hash + * + * @return {number} + */ +export function hashCode(str) { + let hash = 0; + let i; + let chr; + if (str.length === 0) { + return hash; + } + for (i = 0; i < str.length; i++) { + chr = str.charCodeAt(i); + hash = ((hash << 5) - hash) + chr; + hash |= 0; + } + return Math.abs(hash); +} From 5f1cf07543479bbc7e4648e2c3d3c4fce801c0d2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 13:29:44 +0200 Subject: [PATCH 06/15] 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 86f88448a0..822edc7889 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 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/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js new file mode 100644 index 0000000000..534dc86d54 --- /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 07/15] 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 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', From 3f6175527c1d26c4431181a993f02cab88f3b02c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:22:41 +0200 Subject: [PATCH 08/15] 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 7474c3d107..647e1e00aa 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 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; From eba91d3edc18c7efa007a5ab24f22ef585aeccae Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:23:59 +0200 Subject: [PATCH 09/15] 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 647e1e00aa..fa69c6fb90 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 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 8ab338790e..e5a059f22c 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 4e4b2cd66f..f84844d6d2 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 c17eba5398..a468b3e3f3 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 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 ( -
+
From 863d89f6fd63d258d9f879708d40d981ff14d8cc Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:24:44 +0200 Subject: [PATCH 10/15] 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 c43d9edc16..a735c3151f 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 822edc7889..a80e06c620 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 534dc86d54..17f55b120c 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); + } + + 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, }; } - render() { - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const avatarHeight = 28; - const name = "My stuff"; + 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 11/15] put settings and sign out in top left menu for now --- res/css/structures/_TopLeftMenu.scss | 39 +++++++++++++++++ src/components/structures/TopLeftMenu.js | 53 +++++++++++------------- 2 files changed, 63 insertions(+), 29 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 0000000000..960e052a30 --- /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 5dfa8ed171..34a90c97ae 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'; - -class TopLeftMenu extends React.Component { - - static propTypes = { - collapsed: PropTypes.bool.isRequired, - }; - - static displayName = 'TopLeftMenu'; +import dis from '../../dispatcher'; +import { _t } from '../../languageHandler'; +export class TopLeftMenu extends React.Component { render() { - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const avatarHeight = 28; - const name = "My stuff"; + return
+
    +
  • {_t("Settings")}
    • +
+
    +
  • {_t("Sign out")}
    • +
+
; + } - return ( -
- -
- { name } -
- -
- ); + openSettings() { + dis.dispatch({action: 'view_user_settings'}); + this.closeMenu(); + } + + signOut() { + dis.dispatch({action: 'logout'}); + this.closeMenu(); + } + + 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 12/15] 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 34a90c97ae..1fd12acac4 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 13/15] 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 17f55b120c..b2b375581d 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 14/15] 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 a735c3151f..8fc1667fb5 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 1fd12acac4..ec3120cfea 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 { From b7ab2077787c34df80faa4f224e9413bca3cf798 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:48:44 +0200 Subject: [PATCH 15/15] move sendername colors to theme --- res/css/views/messages/_SenderProfile.scss | 16 ++++++++-------- res/themes/dark/css/_dark.scss | 9 +++++++++ res/themes/dharma/css/_dharma.scss | 9 +++++++++ res/themes/light/css/_base.scss | 9 +++++++++ 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss index a8ebcedc2b..a4a2aba11f 100644 --- a/res/css/views/messages/_SenderProfile.scss +++ b/res/css/views/messages/_SenderProfile.scss @@ -19,35 +19,35 @@ limitations under the License. } .mx_SenderProfile_color1 { - color: #1e7ddc; + color: $username-variant1-color; } .mx_SenderProfile_color2 { - color: #a756a8; + color: $username-variant2-color; } .mx_SenderProfile_color3 { - color: #7ac9a1; + color: $username-variant3-color; } .mx_SenderProfile_color4 { - color: #f2809d; + color: $username-variant4-color; } .mx_SenderProfile_color5 { - color: #ffc666; + color: $username-variant5-color; } .mx_SenderProfile_color6 { - color: #76ddd7; + color: $username-variant6-color; } .mx_SenderProfile_color7 { - color: #45529b; + color: $username-variant7-color; } .mx_SenderProfile_color8 { - color: #bfd251; + color: $username-variant8-color; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8ab338790e..0cfc479a47 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -105,6 +105,15 @@ $roomtile-name-color: rgba(186, 186, 186, 0.8); $roomtile-selected-bg-color: #333; $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2); +$username-variant1-color: #1e7ddc; +$username-variant2-color: #a756a8; +$username-variant3-color: #7ac9a1; +$username-variant4-color: #f2809d; +$username-variant5-color: #ffc666; +$username-variant6-color: #76ddd7; +$username-variant7-color: #45529b; +$username-variant8-color: #bfd251; + $roomsublist-background: rgba(0, 0, 0, 0.2); $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: $tertiary-accent-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index ea6b24dec4..11de443561 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -119,6 +119,15 @@ $roomtile-notified-color: #212121; $roomtile-selected-bg-color: #fff; $roomtile-focused-bg-color: #fff; +$username-variant1-color: #1e7ddc; +$username-variant2-color: #a756a8; +$username-variant3-color: #7ac9a1; +$username-variant4-color: #f2809d; +$username-variant5-color: #ffc666; +$username-variant6-color: #76ddd7; +$username-variant7-color: #45529b; +$username-variant8-color: #bfd251; + $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); $roomsublist-background: $secondary-accent-color; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 228f44fdef..a0de8f031f 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -118,6 +118,15 @@ $roomtile-notified-color: $roomtile-name-color; $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); +$username-variant1-color: #1e7ddc; +$username-variant2-color: #a756a8; +$username-variant3-color: #7ac9a1; +$username-variant4-color: #f2809d; +$username-variant5-color: #ffc666; +$username-variant6-color: #76ddd7; +$username-variant7-color: #45529b; +$username-variant8-color: #bfd251; + $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); $roomsublist-background: rgba(0, 0, 0, 0.05);