From bdc79361302614584f3b77e71f5fc6d6cc0f1b59 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 5 Feb 2019 17:36:33 +0000 Subject: [PATCH] move help & communities button out of tag panel so we can shove the custom tag buttons between them in the next commit --- res/css/_components.scss | 1 + res/css/structures/_LeftPanel.scss | 5 ++ res/css/structures/_TagPanel.scss | 39 +------------ res/css/structures/_TagPanelButtons.scss | 56 +++++++++++++++++++ src/components/structures/LeftPanel.js | 12 +++- src/components/structures/TagPanel.js | 23 -------- src/components/structures/TagPanelButtons.js | 58 ++++++++++++++++++++ 7 files changed, 130 insertions(+), 64 deletions(-) create mode 100644 res/css/structures/_TagPanelButtons.scss create mode 100644 src/components/structures/TagPanelButtons.js diff --git a/res/css/_components.scss b/res/css/_components.scss index ee55c000ff..3affbb628e 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -19,6 +19,7 @@ @import "./structures/_SearchBox.scss"; @import "./structures/_TabbedView.scss"; @import "./structures/_TagPanel.scss"; +@import "./structures/_TagPanelButtons.scss"; @import "./structures/_TopLeftMenuButton.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_UserSettings.scss"; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 941417eccc..9dbfe696a5 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -33,6 +33,11 @@ limitations under the License. flex: 0 0 140px; } +.mx_LeftPanel_tagPanelContainer { + flex: 0 0 70px; + height: 100%; +} + .mx_LeftPanel_hideButton { position: absolute; top: 10px; diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index bf1746bd0e..559bdbcf5f 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_TagPanel { - flex: 0 0 70px; + flex: 1; background-color: $tagpanel-bg-color; cursor: pointer; @@ -123,40 +123,3 @@ limitations under the License. padding-left: 4px; padding-right: 4px; } - -.mx_TagPanel_groupsButton { - flex: 0; - margin: 17px 0 3px 0; -} - -.mx_TagPanel_groupsButton > .mx_GroupsButton:before { - mask: url('$(res)/img/feather-icons/users.svg'); - mask-position: center 11px; -} - -.mx_TagPanel_groupsButton > .mx_TagPanel_report:before { - mask: url('$(res)/img/feather-icons/life-buoy.svg'); - mask-position: center 9px; -} - -.mx_TagPanel_groupsButton > .mx_AccessibleButton { - margin-bottom: 12px; - height: 40px; - width: 40px; - border-radius: 20px; - background-color: $roomheader-addroom-color; - position: relative; - /* overwrite mx_RoleButton inline-block */ - display: block !important; - - &:before { - background-color: $tagpanel-bg-color; - mask-repeat: no-repeat; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } -} diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss new file mode 100644 index 0000000000..309c50fb3e --- /dev/null +++ b/res/css/structures/_TagPanelButtons.scss @@ -0,0 +1,56 @@ +/* +Copyright 2017 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_TagPanelButtons { + background-color: $tagpanel-bg-color; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 17px 0 3px 0; +} + +.mx_TagPanelButtons > .mx_GroupsButton:before { + mask: url('$(res)/img/feather-icons/users.svg'); + mask-position: center 11px; +} + +.mx_TagPanelButtons > .mx_TagPanelButtons_report:before { + mask: url('$(res)/img/feather-icons/life-buoy.svg'); + mask-position: center 9px; +} + +.mx_TagPanelButtons > .mx_AccessibleButton { + margin-bottom: 12px; + height: 40px; + width: 40px; + border-radius: 20px; + background-color: $roomheader-addroom-color; + position: relative; + /* overwrite mx_RoleButton inline-block */ + display: block !important; + + &:before { + background-color: $tagpanel-bg-color; + mask-repeat: no-repeat; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index cb374a02a3..4b87159c35 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -24,7 +24,7 @@ import { KeyCode } from '../../Keyboard'; import sdk from '../../index'; import dis from '../../dispatcher'; import VectorConferenceHandler from '../../VectorConferenceHandler'; - +import TagPanelButtons from './TagPanelButtons'; import SettingsStore from '../../settings/SettingsStore'; @@ -188,7 +188,13 @@ const LeftPanel = React.createClass({ const CallPreview = sdk.getComponent('voip.CallPreview'); const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel"); - const tagPanel = tagPanelEnabled ? :
; + let tagPanelContainer; + if (tagPanelEnabled) { + tagPanelContainer = (
+ + +
); + } const containerClasses = classNames( "mx_LeftPanel_container", "mx_fadable", @@ -206,7 +212,7 @@ const LeftPanel = React.createClass({ return (
- { tagPanel } + { tagPanelContainer }