From 61d9fe95e90d734a8bb537e098fc3802268eb160 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 26 Nov 2018 14:50:29 +0100
Subject: [PATCH] add 3 flex-shrink categories + make it work with overflow
indicators
---
res/css/structures/_RoomSubList.scss | 95 ++++++++++++++++++++--------
1 file changed, 67 insertions(+), 28 deletions(-)
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index c156f1f07e..8db0d4b836 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -14,15 +14,51 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+/* a word of explanation about the flex-shrink values employed here:
+ there are 3 priotized categories of screen real-estate grabbing,
+ each with a flex-shrink difference of 4 order of magnitude,
+ so they ideally wouldn't affect each other.
+ lowest category: .mx_RoomSubList
+ flex:-shrink: 10000000
+ distribute size of items within the same categery by their size
+ middle category: .mx_RoomSubList.resized-sized
+ flex:-shrink: 1000
+ applied when using the resizer, will have a max-height set to it,
+ to limit the size
+ highest category: .mx_RoomSubList.resized-all
+ flex:-shrink: 1
+ small flex-shrink value (1), is only added if you can drag the resizer so far
+ so in practice you can only assign this category if there is enough space.
+*/
+
.mx_RoomSubList {
min-height: 31px;
- flex: 0 1 auto;
+ flex: 0 100000000 auto;
display: flex;
flex-direction: column;
}
.mx_RoomSubList_nonEmpty {
- margin-bottom: 4px;
+ min-height: 76px;
+
+ .mx_AutoHideScrollbar_offset {
+ padding-bottom: 4px;
+ }
+}
+
+.mx_RoomSubList_hidden {
+ flex: none !important;
+}
+
+.mx_RoomSubList.resized-all {
+ flex: 0 1 auto;
+}
+
+.mx_RoomSubList.resized-sized {
+ /* resizer set max-height on resized-sized,
+ so that limits the height and hence
+ needs a very small flex-shrink */
+ flex: 0 10000 auto;
}
.mx_RoomSubList_labelContainer {
@@ -105,39 +141,42 @@ limitations under the License.
}
.mx_RoomSubList_scroll {
- /* let rooms list grab all available space */
+ /* let rooms list grab as much space as it needs (auto),
+ potentially overflowing and showing a scrollbar */
flex: 0 1 auto;
padding: 0 8px;
}
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before,
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
- position: sticky;
- left: 0;
- right: 0;
- height: 40px;
- content: "";
- display: block;
- z-index: 100;
- pointer-events: none;
-}
+// overflow indicators
+.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
+ &.mx_IndicatorScrollbar_topOverflow::before,
+ &.mx_IndicatorScrollbar_bottomOverflow::after {
+ position: sticky;
+ left: 0;
+ right: 0;
+ height: 40px;
+ content: "";
+ display: block;
+ z-index: 100;
+ pointer-events: none;
+ }
+ &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
+ margin-top: -40px;
+ }
+ &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
+ margin-bottom: -40px;
+ }
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
- margin-top: -40px;
-}
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
- margin-bottom: -40px;
-}
+ &.mx_IndicatorScrollbar_topOverflow::before {
+ top: 0;
+ background: linear-gradient($secondary-accent-color, transparent);
+ }
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before {
- top: 0;
- background: linear-gradient($secondary-accent-color, transparent);
-}
-
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
- bottom: 0;
- background: linear-gradient(transparent, $secondary-accent-color);
+ &.mx_IndicatorScrollbar_bottomOverflow::after {
+ bottom: 0;
+ background: linear-gradient(transparent, $secondary-accent-color);
+ }
}
.collapsed {