Merge pull request #5723 from vector-im/luke/feature-tag-panel

CSS for new TagPanel

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";

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;
 }
 

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;
+}

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;

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; /* height + padding = 31px = mx_RoomSubList_label height */
     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 {