add 3 flex-shrink categories + make it work with overflow indicators
This commit is contained in:
parent
8e77a6716c
commit
61d9fe95e9
1 changed files with 67 additions and 28 deletions
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue