imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a minimized view to the new room list

Browse source 
This covers everything except breadcrumbs, as those are somewhat undecided from a design perspective.
This commit is contained in:
Travis Ralston 2020-06-11 14:39:28 -06:00
parent 2e04414331
commit 2c04a56784
10 changed files with 243 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

34
res/css/structures/_LeftPanel2.scss
View file

@ -138,4 +138,38 @@ $roomListMinimizedWidth: 50px;
display: flex;
}
}
// These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel2_minimized {
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
width: calc(68px + $tagPanelWidth) !important;
.mx_LeftPanel2_roomListContainer {
width: 68px;
.mx_LeftPanel2_userHeader {
.mx_LeftPanel2_headerRow {
justify-content: center;
}
.mx_LeftPanel2_userAvatarContainer {
margin-right: 0;
}
}
.mx_LeftPanel2_filterContainer {
// Organize the flexbox into a centered column layout
flex-direction: column;
justify-content: center;
.mx_LeftPanel2_exploreButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
}
}
}
}

11
res/css/structures/_RoomSearch.scss
View file

@ -67,4 +67,15 @@ limitations under the License.
width: 0;
height: 0;
}
&.mx_RoomSearch_minimized {
border-radius: 32px;
height: auto;
width: auto;
padding: 8px;
.mx_RoomSearch_icon {
margin-left: 0;
}
}
}

82
res/css/views/rooms/_RoomSublist2.scss
View file

@ -51,6 +51,7 @@ limitations under the License.
margin: 0;
visibility: hidden;
position: relative;
border-radius: 32px;
&::before {
content: '';
@ -172,7 +173,7 @@ limitations under the License.
border: 2px solid $primary-fg-color;
}
.mx_RoomSublist2_headerContainer {
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer {
// If the header doesn't have an aux button we still need to hide the badge for
// the menu button.
.mx_RoomSublist2_badgeContainer {
@ -195,18 +196,89 @@ limitations under the License.
.mx_RoomSublist2_menuButton {
width: 24px;
height: 24px;
border-radius: 32px;
margin-left: 16px;
background-color: #fff; // TODO: Variable and theme
visibility: visible;
background-color: #fff; // TODO: Variable and theme
}
}
}
&.mx_RoomSublist2_minimized {
.mx_RoomSublist2_headerContainer {
height: auto;
flex-direction: column;
position: relative;
.mx_RoomSublist2_badgeContainer {
order: 1;
align-self: flex-end;
margin-right: 0;
}
.mx_RoomSublist2_headerText {
order: 2;
max-width: 100%;
}
.mx_RoomSublist2_auxButton {
order: 4;
visibility: visible;
width: 32px !important; // !important to override hover styles
height: 32px !important; // !important to override hover styles
margin-left: 0 !important; // !important to override hover styles
background-color: #fff; // TODO: Variable and theme
margin-top: 8px;
&::before {
top: 8px;
left: 8px;
}
}
}
.mx_RoomSublist2_resizeBox {
align-items: center;
.mx_RoomSublist2_showMoreButton {
.mx_RoomSublist2_showMoreButtonChevron {
margin-right: 12px; // to center
}
}
}
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.mx_RoomSublist2_menuButton {
visibility: visible;
position: absolute;
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
right: 0;
width: 16px;
height: 16px;
border-radius: 0;
z-index: 1; // occlude the list name
// This is the same color as the left panel background because it needs
// to occlude the sublist title
background-color: $header-panel-bg-color;
&::before {
top: 0;
left: 0;
}
}
.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
.mx_RoomSublist2_menuButton {
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
}
}
}
}
}
// We have a hover style on the room list with no specific list hovered, so account for that
.mx_RoomList2:hover .mx_RoomSublist2,
.mx_RoomSublist2_hasMenuOpen {
.mx_RoomList2:hover .mx_RoomSublist2:not(.mx_RoomSublist2_minimized),
.mx_RoomSublist2_hasMenuOpen:not(.mx_RoomSublist2_minimized) {
.mx_RoomSublist2_headerContainer_withAux {
.mx_RoomSublist2_badgeContainer {
// Completely hide the badge

39
res/css/views/rooms/_RoomTile2.scss
View file

@ -115,18 +115,37 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
&:hover, &.mx_RoomTile2_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
visibility: hidden;
&:not(.mx_RoomTile2_minimized) {
&:hover, &.mx_RoomTile2_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
visibility: hidden;
}
.mx_RoomTile2_menuButton {
width: 18px;
height: 32px;
visibility: visible;
}
}
}
&.mx_RoomTile2_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_RoomTile2_avatarContainer {
margin-right: 0;
}
.mx_RoomTile2_menuButton {
width: 18px;
height: 32px;
visibility: visible;
.mx_RoomTile2_badgeContainer {
position: absolute;
top: 0;
right: 0;
height: 18px;
}
}
}