experiments in dharma

res/css/structures/_LeftPanel.scss

@@ -19,27 +19,29 @@ limitations under the License.
 
     display: flex;
     flex-direction: column;
+
+    border-right: 1px solid $panel-divider-color;
 }
 
 .mx_LeftPanel_container {
     display: flex;
-    /* LeftPanel 235px */
-    flex: 0 0 235px;
+    /* LeftPanel 260px */
+    flex: 0 0 260px;
 }
 
 .mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
-    /* TagPanel 60px + LeftPanel 235px */
-    flex: 0 0 295px;
+    /* TagPanel 70px + LeftPanel 260px */
+    flex: 0 0 330px;
 }
 
 .mx_LeftPanel_container_collapsed {
-    /* Collapsed LeftPanel 60px */
-    flex: 0 0 60px;
+    /* Collapsed LeftPanel 70px */
+    flex: 0 0 70px;
 }
 
 .mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
-    /* TagPanel 60px + Collapsed LeftPanel 60px */
-    flex: 0 0 120px;
+    /* TagPanel 70px + Collapsed LeftPanel 70px */
+    flex: 0 0 140px;
 }
 
 .mx_LeftPanel_hideButton {

res/css/structures/_MatrixChat.scss

@@ -58,10 +58,8 @@ limitations under the License.
 
 .mx_MatrixChat .mx_LeftPanel {
     order: 1;
-
     background-color: $secondary-accent-color;
-
-    flex: 0 0 235px;
+    flex: 0 0 260px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
@@ -71,8 +69,6 @@ limitations under the License.
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
     order: 2;
 
-    padding-left: 20px;
-    padding-right: 22px;
     background-color: $primary-bg-color;
 
     flex: 1;

res/css/structures/_RoomView.scss

@@ -27,12 +27,11 @@ limitations under the License.
 .mx_RoomView .mx_RoomHeader {
     order: 1;
 
-    flex: 0 0 70px;
+    flex: 0 0 52px;
 }
 
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
-    max-width: 960px;
     width: 100%;
     font-size: 18px;
     text-align: center;
@@ -50,7 +49,7 @@ limitations under the License.
     border: 2px #e1dddd solid;
     border-bottom: none;
     position: absolute;
-    top: 70px;
+    top: 52px;
     bottom: 0px;
     z-index: 3000;
 }
@@ -66,7 +65,6 @@ limitations under the License.
     order: 2;
 
     min-width: 0px;
-    max-width: 960px;
     width: 100%;
     margin: 0px auto;
 
@@ -115,7 +113,6 @@ limitations under the License.
 }
 
 .mx_RoomView_messageListWrapper {
-    max-width: 960px;
     margin: auto;
 
     min-height: 100%;
@@ -187,7 +184,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_statusAreaBox {
-    max-width: 960px;
     margin: auto;
     min-height: 50px;
 }

res/css/structures/_TagPanel.scss

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_TagPanel {
-    flex: 0 0 60px;
-    background-color: $tertiary-accent-color;
+    flex: 0 0 70px;
+    background-color: $tagpanel-bg-color;
     cursor: pointer;
 
     display: flex;
@@ -35,6 +35,8 @@ limitations under the License.
     display: flex;
     justify-content: center;
     align-items: flex-start;
+
+    display: none;
 }
 
 .mx_TagPanel .mx_TagPanel_clearButton object {
@@ -47,6 +49,7 @@ limitations under the License.
     height: 0px;
     width: 42px;
     border-bottom: 1px solid $panel-divider-color;
+    display: none;
 }
 
 .mx_TagPanel .mx_TagPanel_scroller {
@@ -57,19 +60,21 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 5px;
 
     height: 100%;
 }
 
 .mx_TagPanel .mx_TagTile {
-    padding: 6px 3px;
-    opacity: 0.5;
+    padding-top: 9px;
+    padding-bottom: 9px;
+//  opacity: 0.5;
     position: relative;
 }
 .mx_TagPanel .mx_TagTile:focus,
 .mx_TagPanel .mx_TagTile:hover,
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
-    opacity: 1;
+//    opacity: 1;
 }
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
@@ -80,12 +85,12 @@ limitations under the License.
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
     border: 3px solid $accent-color;
     background-color: $accent-color;
-    border-radius: 60px;
+    border-radius: 40px;
 
     /* In case this is a "initial" avatar */
     display: block;
-    height: 35px;
-    width: 35px;
+    height: 40px;
+    width: 40px;
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
@@ -119,6 +124,7 @@ limitations under the License.
     margin-bottom: 17px;
     margin-top: 18px;
     height: 25px;
+    display: none;
 }
 
 .mx_TagPanel_groupsButton object {

res/css/structures/_TopLeftMenu.scss

@@ -0,0 +1,41 @@
+/*
+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 {
+    height: 52px;
+    border-bottom: 1px solid $panel-divider-color;
+    color: $topleftmenu-color;
+    background-color: $primary-bg-color;
+    display: flex;
+}
+
+.mx_TopLeftMenu_avatar {
+    position: relative; // to get avatar in the right place
+    margin-left: 15px;
+    margin-right: 15px;
+    margin-top: 14px;
+}
+
+.mx_TopLeftMenu_name {
+    margin-top: 15px;
+    margin-right: 9px;   
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.mx_TopLeftMenu_chevron {
+    margin-top: 26px;
+}