Merge pull request #2210 from matrix-org/bwindels/resizehandles

Redesign: resizeable/collapsible sections
matrix-org · Oct 19, 2018 · 9330281 · 9330281
2 parents 6878ce3 + 7ece134
commit 9330281
Show file tree

Hide file tree

Showing 18 changed files with 671 additions and 159 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -57,6 +57,7 @@
 @import "./views/elements/_MemberEventListSummary.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_ReplyThread.scss";
+@import "./views/elements/_ResizeHandle.scss";
 @import "./views/elements/_RichText.scss";
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_Spinner.scss";

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -15,32 +15,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LeftPanel {
-    position: relative;
-
-    display: flex;
-    flex-direction: column;
-
-    border-right: 1px solid $panel-divider-color;
-}
-
 .mx_LeftPanel_container {
     display: flex;
     /* LeftPanel 260px */
-    flex: 0 0 260px;
+    min-width: 260px;
+    flex: 0 0 auto;
 }
 
-.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
-    /* TagPanel 70px + LeftPanel 260px */
-    flex: 0 0 330px;
-}
-
-.mx_LeftPanel_container_collapsed {
+.mx_LeftPanel_container.collapsed {
+    min-width: unset;
     /* Collapsed LeftPanel 70px */
     flex: 0 0 70px;
 }
 
-.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
+.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
     /* TagPanel 70px + Collapsed LeftPanel 70px */
     flex: 0 0 140px;
 }
@@ -57,6 +45,15 @@ limitations under the License.
 
 }
 
+.mx_LeftPanel {
+    background-color: $secondary-accent-color;
+    flex: 1;
+    position: relative;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
 .mx_LeftPanel .mx_AppTile_mini {
     height: 132px;
 }
@@ -70,7 +67,7 @@ limitations under the License.
     z-index: 6;
 }
 
-.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
    flex: 0 0 160px;
    margin-bottom: 9px;
 }
@@ -93,7 +90,7 @@ limitations under the License.
     pointer-events: none;
 }
 
-.collapsed .mx_RoleButton {
+.mx_LeftPanel_container.collapsed .mx_RoleButton {
     margin-right: 0px ! important;
     padding-top: 3px ! important;
     padding-bottom: 3px ! important;
@@ -117,7 +114,7 @@ limitations under the License.
     margin-right: 0px;
 }
 
-.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
     float: none;
 }
 
@@ -126,7 +123,7 @@ limitations under the License.
         flex: 0 0 50px;
     }
 
-    .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+    .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
         flex: 0 0 160px;
     }
 

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
@@ -68,19 +68,7 @@ limitations under the License.
     transform: translateX(-50%);
 }
 
-.mx_MatrixChat .mx_LeftPanel {
-    order: 1;
-    background-color: $secondary-accent-color;
-    flex: 0 0 260px;
-}
-
-.mx_MatrixChat .mx_LeftPanel.collapsed {
-    flex: 0 0 60px;
-}
-
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
-    order: 2;
-
     background-color: $primary-bg-color;
 
     flex: 1;
@@ -100,13 +88,3 @@ limitations under the License.
     */
     height: 100%;
 }
-
-.mx_MatrixChat .mx_RightPanel {
-    order: 3;
-
-    flex: 0 0 235px;
-}
-
-.mx_MatrixChat .mx_RightPanel.collapsed {
-    flex: 0 0 122px;
-}
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
@@ -15,8 +15,10 @@ limitations under the License.
 */
 
 .mx_RightPanel {
+    overflow-x: hidden;
+    flex: 0 0 auto;
     position: relative;
-
+    min-width: 250px;
     display: flex;
     flex-direction: column;
 }

diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
@@ -29,7 +29,6 @@ limitations under the License.
 
 .mx_RoomSubList_labelContainer {
     height: 31px; /* mx_RoomSubList_label height including border */
-    width: 235px; /* LHS Panel width */
     position: relative;
 }
 
@@ -39,7 +38,6 @@ limitations under the License.
     color: $roomsublist-label-fg-color;
     font-weight: 700;
     font-size: 12px;
-    width: 203px; /* padding + width = LHS Panel width */
     height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
     margin-left: 16px;
     padding-left: 16px; /* gutter */
@@ -57,15 +55,6 @@ limitations under the License.
     /* pointer-events: none; */
 }
 
-.collapsed .mx_RoomSubList_label {
-    height: 17px;
-    width: 28px; /* collapsed LHS Panel width */
-}
-
-.collapsed .mx_RoomSubList_labelContainer {
-    width: 28px; /* collapsed LHS Panel width */
-}
-
 .mx_RoomSubList_roomCount {
     display: inline-block;
     font-size: 12px;
@@ -75,10 +64,6 @@ limitations under the License.
     text-transform: none;
 }
 
-.collapsed .mx_RoomSubList_roomCount {
-    display: none;
-}
-
 .mx_RoomSubList_badge {
     display: inline-block;
     min-width: 15px;
@@ -101,12 +86,6 @@ limitations under the License.
     filter: brightness($focus-brightness);
 }
 
-/*
-.collapsed .mx_RoomSubList_badge {
-    display: none;
-}
-*/
-
 .mx_RoomSubList_badgeHighlight {
     background-color: $warning-color;
 }
@@ -123,11 +102,6 @@ limitations under the License.
     border-right: 7px solid transparent;
 }
 
-/* Hide the bottom of speech bubble */
-.collapsed .mx_RoomSubList_badgeHighlight:after {
-    display: none;
-}
-
 .mx_RoomSubList_chevron {
     left: 0px;
     pointer-events: none;
@@ -165,21 +139,13 @@ limitations under the License.
     background-color: $secondary-accent-color;
 }
 
-.collapsed .mx_RoomSubList_ellipsis {
-    height: 20px;
-}
-
 .mx_RoomSubList_line {
     display: inline-block;
     width: 159px;
     border-top: dotted 2px $accent-color;
     vertical-align: middle;
 }
 
-.collapsed .mx_RoomSubList_line {
-    display: none;
-}
-
 .mx_RoomSubList_more {
     display: inline-block;
     text-transform: uppercase;
@@ -193,10 +159,6 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.collapsed .mx_RoomSubList_more {
-    display: none;
-}
-
 .mx_RoomSubList_moreBadge {
     display: inline-block;
     min-width: 15px;
@@ -233,16 +195,47 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.collapsed .mx_RoomSubList_moreBadge {
-    position: static;
-    margin-left: 16px;
-    margin-top: 2px;
-}
-
 .mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
     position: relative;
     top: 4px;
     left: 2px;
 }
 
 
+.collapsed {
+    .mx_RoomSubList_label {
+        height: 17px;
+        width: 28px; /* collapsed LHS Panel width */
+    }
+
+    .mx_RoomSubList_labelContainer {
+        width: 28px; /* collapsed LHS Panel width */
+    }
+
+    .mx_RoomSubList_roomCount {
+        display: none;
+    }
+
+    /* Hide the bottom of speech bubble */
+    .mx_RoomSubList_badgeHighlight:after {
+        display: none;
+    }
+
+    .mx_RoomSubList_line {
+        display: none;
+    }
+
+    .mx_RoomSubList_moreBadge {
+        position: static;
+        margin-left: 16px;
+        margin-top: 2px;
+    }
+
+    .mx_RoomSubList_ellipsis {
+        height: 20px;
+    }
+
+    .mx_RoomSubList_more {
+        display: none;
+    }
+}
diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss
@@ -0,0 +1,32 @@
+/*
+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_ResizeHandle {
+    cursor: row-resize;
+    flex: 0 0 auto;
+    background: $panel-divider-color;
+    padding: 1px
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_horizontal {
+    width: 1px;
+    cursor: col-resize;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_vertical {
+    height: 1px;
+    cursor: row-resize;
+}