From af305ea540bf9880acb54850bdd54a06993c87eb Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 26 Apr 2017 19:00:07 +0100 Subject: [PATCH 01/10] Make left panel more friendly to new users https://github.com/vector-im/riot-web/issues/3609 --- src/components/structures/RoomSubList.js | 14 +++++++----- .../views/rooms/_RoomList.scss | 22 +++++++++++++++++++ 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 6490e4564c..ead4b4c609 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -83,6 +83,7 @@ var RoomSubList = React.createClass({ incomingCall: React.PropTypes.object, onShowMoreRooms: React.PropTypes.func, searchFilter: React.PropTypes.string, + emptyContent: React.PropTypes.node, // content shown if the list is empty }, getInitialState: function() { @@ -521,16 +522,18 @@ var RoomSubList = React.createClass({ render: function() { var connectDropTarget = this.props.connectDropTarget; - var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); var TruncatedList = sdk.getComponent('elements.TruncatedList'); var label = this.props.collapsed ? null : this.props.label; //console.log("render: " + JSON.stringify(this.state.sortedList)); - var target; - if (this.state.sortedList.length == 0 && this.props.editable) { - target = ; + let content; + if (this.state.sortedList.length == 0) { + //content = ; + content = this.props.emptyContent; + } else { + content = this.makeRoomTiles(); } if (this.state.sortedList.length > 0 || this.props.editable) { @@ -540,8 +543,7 @@ var RoomSubList = React.createClass({ if (!this.state.hidden) { subList = - { target } - { this.makeRoomTiles() } + { content } ; } else { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss index 110dcd5b6b..bc699ae792 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +Copyright 2107 Vector Creations Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -37,3 +38,24 @@ limitations under the License. .mx_RoomList_scrollbar .gm-scrollbar.-vertical { z-index: 6; } + +.mx_RoomList_greyedSubListLabel { + color: #a2a2a2; +} + +.mx_RoomList_emptySubListTip { + font-size: 13px; + margin-left: 18px; + margin-right: 18px; + margin-top: 8px; + margin-bottom: 7px; + padding: 5px; + border: 1px solid $accent-color; + color: $primary-fg-color; + background-color: $droptarget-bg-color; + border-radius: 4px; +} + +.mx_RoomList_butonPreview { + float: right; +} From d81f894a50898bc88b072b739bac9f543bdbce5f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 May 2017 13:58:17 +0100 Subject: [PATCH 02/10] Add buttons to room sub list headers Conflicts: src/components/structures/RoomSubList.js src/components/structures/RoomSubListHeader.js cherry-picking commit 095da68. --- src/components/structures/RoomSubList.js | 33 +++++++++++++++++-- src/skins/vector/css/_components.scss | 1 + .../views/elements/_RoleButton.scss | 26 +++++++++++++++ .../views/rooms/_RoomList.scss | 11 +++---- 4 files changed, 62 insertions(+), 9 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ead4b4c609..d3e6863755 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -1,4 +1,5 @@ /* +Copyright 2017 Vector Creations Ltd Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); @@ -84,6 +85,7 @@ var RoomSubList = React.createClass({ onShowMoreRooms: React.PropTypes.func, searchFilter: React.PropTypes.string, emptyContent: React.PropTypes.node, // content shown if the list is empty + headerItems: React.PropTypes.node, // content shown in the sublist header }, getInitialState: function() { @@ -553,7 +555,20 @@ var RoomSubList = React.createClass({ return connectDropTarget(
- { this._getHeaderJsx() } +
); @@ -562,7 +577,21 @@ var RoomSubList = React.createClass({ var Loader = sdk.getComponent("elements.Spinner"); return (
- { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined } + { this.props.alwaysShowHeader ? +
); diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 225fd35712..b1964dca04 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -27,6 +27,7 @@ @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss"; @import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; @import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/elements/_RoleButton.scss"; @import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss"; @import "./matrix-react-sdk/views/login/_ServerConfig.scss"; @import "./matrix-react-sdk/views/messages/_MEmoteBody.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss new file mode 100644 index 0000000000..04503346ff --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss @@ -0,0 +1,26 @@ +/* +Copyright 2107 Vector Creations 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_RoleButton { + margin-left: 4px; + margin-right: 4px; + cursor: pointer; + display: inline-block; +} + +.mx_RoleButton object { + pointer-events: none; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss index bc699ae792..77df1f8fda 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss @@ -39,10 +39,6 @@ limitations under the License. z-index: 6; } -.mx_RoomList_greyedSubListLabel { - color: #a2a2a2; -} - .mx_RoomList_emptySubListTip { font-size: 13px; margin-left: 18px; @@ -50,12 +46,13 @@ limitations under the License. margin-top: 8px; margin-bottom: 7px; padding: 5px; - border: 1px solid $accent-color; + border: 1px dashed $accent-color; color: $primary-fg-color; background-color: $droptarget-bg-color; border-radius: 4px; } -.mx_RoomList_butonPreview { - float: right; +.mx_RoomList_headerButtons { + position: absolute; + right: 60px; } From 67ecd94b4a57349b311b647ef6b504fbdd7065fa Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 May 2017 15:38:53 +0100 Subject: [PATCH 03/10] Make bottom left menu buttons use RoleButton too Conflicts: src/components/structures/BottomLeftMenu.js cherry-picking commit 2bf0074. --- src/components/structures/BottomLeftMenu.js | 126 +++--------------- .../views/elements/_RoleButton.scss | 7 + .../css/vector-web/structures/_LeftPanel.scss | 34 ++--- 3 files changed, 31 insertions(+), 136 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index f357bede96..237e7542f8 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -14,13 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; - -var React = require('react'); -var ReactDOM = require('react-dom'); -var sdk = require('matrix-react-sdk') -var dis = require('matrix-react-sdk/lib/dispatcher'); -var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); +import React from 'react'; +import sdk from 'matrix-react-sdk'; module.exports = React.createClass({ displayName: 'BottomLeftMenu', @@ -29,113 +24,24 @@ module.exports = React.createClass({ collapsed: React.PropTypes.bool.isRequired, }, - getInitialState: function() { - return({ - directoryHover : false, - roomsHover : false, - homeHover: false, - peopleHover : false, - settingsHover : false, - }); - }, - - // Room events - onDirectoryClick: function() { - dis.dispatch({ action: 'view_room_directory' }); - }, - - onDirectoryMouseEnter: function() { - this.setState({ directoryHover: true }); - }, - - onDirectoryMouseLeave: function() { - this.setState({ directoryHover: false }); - }, - - onRoomsClick: function() { - dis.dispatch({ action: 'view_create_room' }); - }, - - onRoomsMouseEnter: function() { - this.setState({ roomsHover: true }); - }, - - onRoomsMouseLeave: function() { - this.setState({ roomsHover: false }); - }, - - // Home button events - onHomeClick: function() { - dis.dispatch({ action: 'view_home_page' }); - }, - - onHomeMouseEnter: function() { - this.setState({ homeHover: true }); - }, - - onHomeMouseLeave: function() { - this.setState({ homeHover: false }); - }, - - // People events - onPeopleClick: function() { - dis.dispatch({ action: 'view_create_chat' }); - }, - - onPeopleMouseEnter: function() { - this.setState({ peopleHover: true }); - }, - - onPeopleMouseLeave: function() { - this.setState({ peopleHover: false }); - }, - - // Settings events - onSettingsClick: function() { - dis.dispatch({ action: 'view_user_settings' }); - }, - - onSettingsMouseEnter: function() { - this.setState({ settingsHover: true }); - }, - - onSettingsMouseLeave: function() { - this.setState({ settingsHover: false }); - }, - - // Get the label/tooltip to show - getLabel: function(label, show) { - if (show) { - var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; - } - }, - render: function() { - var TintableSvg = sdk.getComponent('elements.TintableSvg'); + const RoleButton = sdk.getComponent('elements.RoleButton'); + + var homeButton; + if (this.props.teamToken) { + homeButton = ; + } + return (
- - - { this.getLabel("Welcome page", this.state.homeHover) } - - - - { this.getLabel("Start chat", this.state.peopleHover) } - - - - { this.getLabel("Room directory", this.state.directoryHover) } - - - - { this.getLabel("Create new room", this.state.roomsHover) } - - - - { this.getLabel("Settings", this.state.settingsHover) } - + { homeButton } + + + + + +
); diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss index 04503346ff..094e0b9b1b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss @@ -24,3 +24,10 @@ limitations under the License. .mx_RoleButton object { pointer-events: none; } + +.mx_RoleButton_tooltip { + display: inline-block; + position: relative; + top: -25px; + left: 6px; +} diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index d3bbce1b19..f171591cd6 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -64,43 +64,25 @@ limitations under the License. pointer-events: none; } -.mx_LeftPanel .mx_BottomLeftMenu_homePage, -.mx_LeftPanel .mx_BottomLeftMenu_directory, -.mx_LeftPanel .mx_BottomLeftMenu_createRoom, -.mx_LeftPanel .mx_BottomLeftMenu_people, -.mx_LeftPanel .mx_BottomLeftMenu_settings { - display: inline-block; - cursor: pointer; -} - -.collapsed .mx_BottomLeftMenu_homePage, -.collapsed .mx_BottomLeftMenu_directory, -.collapsed .mx_BottomLeftMenu_createRoom, -.collapsed .mx_BottomLeftMenu_people, -.collapsed .mx_BottomLeftMenu_settings { +.collapsed .mx_RoleButton { margin-right: 0px ! important; padding-top: 3px ! important; padding-bottom: 3px ! important; } -.mx_LeftPanel .mx_BottomLeftMenu_homePage, -.mx_LeftPanel .mx_BottomLeftMenu_directory, -.mx_LeftPanel .mx_BottomLeftMenu_createRoom, -.mx_LeftPanel .mx_BottomLeftMenu_people { +.mx_BottomLeftMenu_options .mx_RoleButton { + margin-left: 0px; margin-right: 10px; } -.mx_LeftPanel .mx_BottomLeftMenu_settings { +.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings { float: right; } +.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton { + margin-right: 0px; +} + .mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings { float: none; } - -.mx_LeftPanel .mx_BottomLeftMenu_tooltip { - display: inline-block; - position: relative; - top: -25px; - left: 6px; -} From e3342e36c0f15e2c267bfd9512b423ae66f2df03 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 25 May 2017 12:07:39 +0100 Subject: [PATCH 04/10] Fix RoomSubList (RoomSubListHeader was removed) --- src/components/structures/RoomSubList.js | 31 ++---------------------- 1 file changed, 2 insertions(+), 29 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index d3e6863755..2adf63430b 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -555,20 +555,7 @@ var RoomSubList = React.createClass({ return connectDropTarget(
-
); @@ -577,21 +564,7 @@ var RoomSubList = React.createClass({ var Loader = sdk.getComponent("elements.Spinner"); return (
- { this.props.alwaysShowHeader ? -
); From a5ea19b9002f3d9bc0ca1a33afb9069d4941befd Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 May 2017 17:45:11 +0100 Subject: [PATCH 05/10] Remove commented code --- src/components/structures/RoomSubList.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 2adf63430b..b1c07d2888 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -528,8 +528,6 @@ var RoomSubList = React.createClass({ var label = this.props.collapsed ? null : this.props.label; - //console.log("render: " + JSON.stringify(this.state.sortedList)); - let content; if (this.state.sortedList.length == 0) { //content = ; From 9b1ffe6fda5c5d0e33b8db8ac2d2b4f4a1dad275 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 May 2017 17:46:44 +0100 Subject: [PATCH 06/10] Remove slightly misleading commented code --- src/components/structures/RoomSubList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index b1c07d2888..afd7b8b211 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -530,7 +530,6 @@ var RoomSubList = React.createClass({ let content; if (this.state.sortedList.length == 0) { - //content = ; content = this.props.emptyContent; } else { content = this.makeRoomTiles(); From fce1164b58cc2f70c2a2f9e9cb22bc1f26756538 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 May 2017 18:23:04 +0100 Subject: [PATCH 07/10] Align buttons better with the text --- .../vector/css/matrix-react-sdk/views/rooms/_RoomList.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss index 77df1f8fda..35787ca0c4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss @@ -52,6 +52,10 @@ limitations under the License. border-radius: 4px; } +.mx_RoomList_emptySubListTip .mx_RoleButton { + vertical-align: -3px; +} + .mx_RoomList_headerButtons { position: absolute; right: 60px; From bf716add999e9fe1cb5a11d72fa89679da76b65a Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 5 May 2017 14:26:13 +0100 Subject: [PATCH 08/10] Dedicated classes for the buttons --- src/components/structures/BottomLeftMenu.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 237e7542f8..3aa1ec336f 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 Vector Creations Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -25,22 +26,26 @@ module.exports = React.createClass({ }, render: function() { - const RoleButton = sdk.getComponent('elements.RoleButton'); + const HomeButton = sdk.getComponent('elements.HomeButton'); + const StartChatButton = sdk.getComponent('elements.StartChatButton'); + const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton'); + const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton'); + const SettingsButton = sdk.getComponent('elements.SettingsButton'); var homeButton; if (this.props.teamToken) { - homeButton = ; + homeButton = ; } return (
{ homeButton } - - - + + + - +
From 284aeeb43e7802d9915d62dc3054653513c7a232 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 26 Apr 2017 19:41:16 +0100 Subject: [PATCH 09/10] Call out icons on hover Conflicts: src/components/structures/BottomLeftMenu.js cherry-picking commit 39229c5. --- src/components/structures/BottomLeftMenu.js | 143 +++++++++++++++++++- 1 file changed, 140 insertions(+), 3 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 3aa1ec336f..924410f56a 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -16,7 +16,14 @@ limitations under the License. */ import React from 'react'; +import ReactDOM from 'react-dom'; import sdk from 'matrix-react-sdk'; +import dis from 'matrix-react-sdk/lib/dispatcher'; +import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; +import Velocity from 'velocity-vector'; +import 'velocity-vector/velocity.ui'; + +const CALLOUT_ANIM_DURATION = 1000; module.exports = React.createClass({ displayName: 'BottomLeftMenu', @@ -25,6 +32,136 @@ module.exports = React.createClass({ collapsed: React.PropTypes.bool.isRequired, }, + getInitialState: function() { + return({ + directoryHover : false, + roomsHover : false, + homeHover: false, + peopleHover : false, + settingsHover : false, + }); + }, + + componentWillMount: function() { + this._dispatcherRef = dis.register(this.onAction); + this._peopleButton = null; + this._directoryButton = null; + this._createRoomButton = null; + this._lastCallouts = {}; + }, + + componentWillUnmount: function() { + dis.unregister(this._dispatcherRef); + }, + + // Room events + onDirectoryClick: function() { + dis.dispatch({ action: 'view_room_directory' }); + }, + + onDirectoryMouseEnter: function() { + this.setState({ directoryHover: true }); + }, + + onDirectoryMouseLeave: function() { + this.setState({ directoryHover: false }); + }, + + onRoomsClick: function() { + dis.dispatch({ action: 'view_create_room' }); + }, + + onRoomsMouseEnter: function() { + this.setState({ roomsHover: true }); + }, + + onRoomsMouseLeave: function() { + this.setState({ roomsHover: false }); + }, + + // Home button events + onHomeClick: function() { + dis.dispatch({ action: 'view_home_page' }); + }, + + onHomeMouseEnter: function() { + this.setState({ homeHover: true }); + }, + + onHomeMouseLeave: function() { + this.setState({ homeHover: false }); + }, + + // People events + onPeopleClick: function() { + dis.dispatch({ action: 'view_create_chat' }); + }, + + onPeopleMouseEnter: function() { + this.setState({ peopleHover: true }); + }, + + onPeopleMouseLeave: function() { + this.setState({ peopleHover: false }); + }, + + // Settings events + onSettingsClick: function() { + dis.dispatch({ action: 'view_user_settings' }); + }, + + onSettingsMouseEnter: function() { + this.setState({ settingsHover: true }); + }, + + onSettingsMouseLeave: function() { + this.setState({ settingsHover: false }); + }, + + onAction: function(payload) { + let calloutElement; + switch (payload.action) { + // Incoming instruction: dance! + case 'callout_start_chat': + calloutElement = this._peopleButton; + break; + case 'callout_room_directory': + calloutElement = this._directoryButton; + break; + case 'callout_create_room': + calloutElement = this._createRoomButton; + break; + } + if (calloutElement) { + const lastCallout = this._lastCallouts[payload.action]; + const now = Date.now(); + if (lastCallout == undefined || lastCallout < now - CALLOUT_ANIM_DURATION) { + this._lastCallouts[payload.action] = now; + Velocity(ReactDOM.findDOMNode(calloutElement), "callout.bounce", CALLOUT_ANIM_DURATION); + } + } + }, + + // Get the label/tooltip to show + getLabel: function(label, show) { + if (show) { + var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); + return ; + } + }, + + _collectPeopleButton: function(e) { + this._peopleButton = e; + }, + + _collectDirectoryButton: function(e) { + this._directoryButton = e; + }, + + _collectCreateRoomButton: function(e) { + this._createRoomButton = e; + }, + render: function() { const HomeButton = sdk.getComponent('elements.HomeButton'); const StartChatButton = sdk.getComponent('elements.StartChatButton'); @@ -41,9 +178,9 @@ module.exports = React.createClass({
{ homeButton } - - - + + + From 9d28c8f577c8c38390f42cd3923b4248c701186a Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 25 May 2017 13:49:41 +0100 Subject: [PATCH 10/10] Move `ref` to outer div --- src/components/structures/BottomLeftMenu.js | 12 +++++++++--- .../vector/css/vector-web/structures/_LeftPanel.scss | 4 ++++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 924410f56a..9e7442cd90 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -178,9 +178,15 @@ module.exports = React.createClass({
{ homeButton } - - - +
+ +
+
+ +
+
+ +
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index f171591cd6..dbe745f799 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -70,6 +70,10 @@ limitations under the License. padding-bottom: 3px ! important; } +.mx_BottomLeftMenu_options > div { + display: inline-block; +} + .mx_BottomLeftMenu_options .mx_RoleButton { margin-left: 0px; margin-right: 10px;