From 0c43edb629ad945320665b486cce3ad1d6b895b7 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 29 Nov 2017 16:41:00 +0000 Subject: [PATCH 1/2] CSS for new TagPanel --- src/skins/vector/css/_components.scss | 1 + .../structures/_SearchBox.scss | 2 + .../structures/_TagPanel.scss | 77 +++++++++++++++++++ src/skins/vector/css/themes/_base.scss | 1 + .../vector-web/structures/_RoomSubList.scss | 5 +- 5 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 67ca096608..0dd6a1b1b7 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -11,6 +11,7 @@ @import "./matrix-react-sdk/structures/_RoomStatusBar.scss"; @import "./matrix-react-sdk/structures/_RoomView.scss"; @import "./matrix-react-sdk/structures/_SearchBox.scss"; +@import "./matrix-react-sdk/structures/_TagPanel.scss"; @import "./matrix-react-sdk/structures/_UploadBar.scss"; @import "./matrix-react-sdk/structures/_UserSettings.scss"; @import "./matrix-react-sdk/structures/login/_Login.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 64dec8260a..6f08fd47b2 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -21,6 +21,8 @@ limitations under the License. padding-top: 24px; padding-bottom: 22px; + border-bottom: 1px solid $panel-divider-color; + display: flex; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss new file mode 100644 index 0000000000..6c8f7197d7 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss @@ -0,0 +1,77 @@ +/* +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_TagPanel { + width: 60px; + background-color: $tertiary-accent-color; + cursor: pointer; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +.mx_TagPanel .mx_TagPanel_tagTileContainer { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 65px; +} + +.mx_TagPanel .mx_TagTile { + margin: 6px 0px; + opacity: 0.5; +} +.mx_TagPanel .mx_TagTile:focus, +.mx_TagPanel .mx_TagTile:hover, +.mx_TagPanel .mx_TagTile.mx_TagTile_selected { + opacity: 1; +} + +.mx_TagPanel .mx_TagTile.mx_TagTile_selected { + /* To offset border of mx_TagTile_avatar */ + margin: 3px 0px; +} + +.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar { + border: 3px solid $accent-color; + border-radius: 60px; +} + +.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { + filter: none; +} + +.mx_TagTile_tooltip { + position: relative; + top: -30px; + left: 5px; +} + +.mx_TagPanel_createGroupButton { + cursor: pointer; + opacity: 0.5; + margin-bottom: 12px; +} + +.mx_TagPanel_createGroupButton:hover { + opacity: 1; +} + +.mx_TagPanel_createGroupButton object { + pointer-events: none; +} diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 62d7af0640..327f2e4a28 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -40,6 +40,7 @@ $preview-bar-bg-color: #f7f7f7; // left-panel style muted accent color $secondary-accent-color: #eaf5f0; +$tertiary-accent-color: #d3efe1; // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index 1a78e51731..bc04abcae0 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -33,14 +33,13 @@ limitations under the License. font-weight: 600; font-size: 12px; width: 203px; /* padding + width = LHS Panel width */ - height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */ + height: 19px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */ padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ padding-top: 6px; padding-bottom: 6px; cursor: pointer; - background-color: $roomsublist-label-bg-color; - border-top: solid 2px $secondary-accent-color; + background-color: $secondary-accent-color; } .mx_RoomSubList_label.mx_RoomSubList_fixed { From 28132eaf36daf17139e6034cac0e4cf32933673e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 29 Nov 2017 17:17:09 +0000 Subject: [PATCH 2/2] Correct comment --- src/skins/vector/css/vector-web/structures/_RoomSubList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index bc04abcae0..db1fb170e5 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -33,7 +33,7 @@ limitations under the License. font-weight: 600; font-size: 12px; width: 203px; /* padding + width = LHS Panel width */ - height: 19px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */ + height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */ padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ padding-top: 6px;