OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

add 3 flex-shrink categories + make it work with overflow indicators

pull/21833/head
Bruno Windels 2018-11-26 14:50:29 +01:00
parent 8e77a6716c
commit 61d9fe95e9
1 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
res/css/structures/_RoomSubList.scss
View File

@ -14,15 +14,51 @@ See the License for the specific language governing permissions and
limitations under the License. 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 { .mx_RoomSubList {
min-height: 31px; min-height: 31px;
flex: 0 1 auto; flex: 0 100000000 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mx_RoomSubList_nonEmpty { .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 { .mx_RoomSubList_labelContainer {
@ -105,13 +141,16 @@ limitations under the License.
} }
.mx_RoomSubList_scroll { .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; flex: 0 1 auto;
padding: 0 8px; padding: 0 8px;
} }
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before, // overflow indicators
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after { .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
&.mx_IndicatorScrollbar_topOverflow::before,
&.mx_IndicatorScrollbar_bottomOverflow::after {
position: sticky; position: sticky;
left: 0; left: 0;
right: 0; right: 0;
@ -120,24 +159,24 @@ limitations under the License.
display: block; display: block;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
} }
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -40px; margin-top: -40px;
} }
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset { &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -40px; margin-bottom: -40px;
} }
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before { &.mx_IndicatorScrollbar_topOverflow::before {
top: 0; top: 0;
background: linear-gradient($secondary-accent-color, transparent); background: linear-gradient($secondary-accent-color, transparent);
} }
.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after { &.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0; bottom: 0;
background: linear-gradient(transparent, $secondary-accent-color); background: linear-gradient(transparent, $secondary-accent-color);
}
} }
.collapsed { .collapsed {