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

Fix various layout concerns with the new room list 

It had ~32px of overflow causing a horizontal scrollbar. Turns out the layout engine gets confused when hidden elements are at the end of a flexbox, so we just move them higher in the DOM (where they logically still make sense).

The remaining changes are all alignment and misc changes in that respect, and probably not obvious.
pull/21833/head
Travis Ralston 2020-06-10 15:05:17 -06:00
parent b63d73e3b6
commit be366bdd7f
5 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/structures/_LeftPanel2.scss
View File

@ -131,6 +131,11 @@ $roomListMinimizedWidth: 50px;
.mx_LeftPanel2_actualRoomListContainer { .mx_LeftPanel2_actualRoomListContainer {
flex-grow: 1; // fill the available space flex-grow: 1; // fill the available space
overflow-y: auto; overflow-y: auto;
width: 100%;
max-width: 100%;
// Create a flexbox to trick the layout engine
display: flex;
} }
} }
} }

2
res/css/views/rooms/_NotificationBadge.scss
View File

@ -28,7 +28,6 @@ limitations under the License.
&.mx_NotificationBadge_visible { &.mx_NotificationBadge_visible {
background-color: $roomtile2-badge-color; background-color: $roomtile2-badge-color;
margin-right: 14px;
// Create a flexbox to order the count a bit easier // Create a flexbox to order the count a bit easier
display: flex; display: flex;
@ -46,7 +45,6 @@ limitations under the License.
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 6px; border-radius: 6px;
margin-right: 8px;
} }
&.mx_NotificationBadge_2char { &.mx_NotificationBadge_2char {

19
res/css/views/rooms/_RoomSublist2.scss
View File

@ -21,7 +21,7 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 8px; margin-left: 8px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
width: 100%; width: 100%;
@ -30,16 +30,18 @@ limitations under the License.
// Create a flexbox to make ordering easy // Create a flexbox to make ordering easy
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 8px;
height: 24px;
.mx_RoomSublist2_badgeContainer { .mx_RoomSublist2_badgeContainer {
opacity: 0.8; opacity: 0.8;
padding-right: 7px; width: 16px;
margin-right: 5px; // aligns with the room tile's badge
// Create another flexbox row because it's super easy to position the badge at // Create another flexbox row because it's super easy to position the badge this way.
// the end this way.
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: center;
} }
// Both of these buttons are hidden by default until the list is hovered // Both of these buttons are hidden by default until the list is hovered
@ -77,10 +79,9 @@ limitations under the License.
opacity: 0.5; opacity: 0.5;
line-height: $font-16px; line-height: $font-16px;
font-size: $font-12px; font-size: $font-12px;
padding-bottom: 8px;
width: 100%;
flex: 1; flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
// Ellipsize any text overflow // Ellipsize any text overflow
text-overflow: ellipsis; text-overflow: ellipsis;
@ -184,7 +185,7 @@ limitations under the License.
&:not(.mx_RoomSublist2_headerContainer_withAux) { &:not(.mx_RoomSublist2_headerContainer_withAux) {
// The menu button will be the rightmost button, so make it correctly aligned. // The menu button will be the rightmost button, so make it correctly aligned.
.mx_RoomSublist2_menuButton { .mx_RoomSublist2_menuButton {
margin-right: 16px; margin-right: 1px; // line it up with the badges on the room tiles
} }
} }
@ -218,7 +219,7 @@ limitations under the License.
// Show the aux button, but not the list button // Show the aux button, but not the list button
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 16px; margin-right: 1px; // line it up with the badges on the room tiles
visibility: visible; visibility: visible;
} }
} }

4
res/css/views/rooms/_RoomTile2.scss
View File

@ -18,9 +18,7 @@ limitations under the License.
// Note: the room tile expects to be in a flexbox column container // Note: the room tile expects to be in a flexbox column container
.mx_RoomTile2 { .mx_RoomTile2 {
width: calc(100% - 21px); // 10px for alignment/inset, 8px for padding on sides, 3px for margin
margin-bottom: 4px; margin-bottom: 4px;
margin-right: 3px;
padding: 4px; padding: 4px;
// The tile is also a flexbox row itself // The tile is also a flexbox row itself
@ -84,7 +82,7 @@ limitations under the License.
// the end this way. // the end this way.
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: center;
} }
// The menu button is hidden by default // The menu button is hidden by default

4
src/components/views/rooms/RoomSublist2.tsx
View File

@ -237,11 +237,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
> >
<span>{this.props.label}</span> <span>{this.props.label}</span>
</AccessibleButton> </AccessibleButton>
{this.renderMenu()}
{addRoomButton}
<div className="mx_RoomSublist2_badgeContainer"> <div className="mx_RoomSublist2_badgeContainer">
{badge} {badge}
</div> </div>
{this.renderMenu()}
{addRoomButton}
</div> </div>
); );
}} }}