RoomSublist2 -> RoomSublist
This commit is contained in:
Travis Ralston
parent
96065ae982
commit
c9b0b3b31d
8 changed files with 107 additions and 107 deletions
|
|
@ -180,7 +180,7 @@
|
|||
@import "./views/rooms/_RoomList.scss";
|
||||
@import "./views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./views/rooms/_RoomRecoveryReminder.scss";
|
||||
@import "./views/rooms/_RoomSublist2.scss";
|
||||
@import "./views/rooms/_RoomSublist.scss";
|
||||
@import "./views/rooms/_RoomTile.scss";
|
||||
@import "./views/rooms/_RoomTileIcon.scss";
|
||||
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
|
||||
|
||||
.mx_RoomSublist2 {
|
||||
.mx_RoomSublist {
|
||||
// The sublist is a column of rows, essentially
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
.mx_RoomSublist_headerContainer {
|
||||
// Create a flexbox to make alignment easy
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
height: 24px;
|
||||
color: $roomlist2-header-color;
|
||||
|
||||
.mx_RoomSublist2_stickable {
|
||||
.mx_RoomSublist_stickable {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
|
||||
|
|
@ -61,26 +61,26 @@ limitations under the License.
|
|||
// to identify when a header is sticky. If we didn't have a consistent sticky class,
|
||||
// we'd have to do the "is sticky" checks again on click, as clicking the header
|
||||
// when sticky scrolls instead of collapses the list.
|
||||
&.mx_RoomSublist2_headerContainer_sticky {
|
||||
&.mx_RoomSublist_headerContainer_sticky {
|
||||
position: fixed;
|
||||
height: 32px; // to match the header container
|
||||
// width set by JS
|
||||
width: calc(100% - 22px);
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_headerContainer_stickyBottom {
|
||||
&.mx_RoomSublist_headerContainer_stickyBottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// We don't have a top style because the top is dependent on the room list header's
|
||||
// height, and is therefore calculated in JS.
|
||||
// The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
|
||||
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
|
||||
}
|
||||
|
||||
// Sticky Headers End
|
||||
// ***************************
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
.mx_RoomSublist_badgeContainer {
|
||||
// Create another flexbox row because it's super easy to position the badge this way.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -93,14 +93,14 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
&:not(.mx_RoomSublist_headerContainer_withAux) {
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton,
|
||||
.mx_RoomSublist2_menuButton {
|
||||
.mx_RoomSublist_auxButton,
|
||||
.mx_RoomSublist_menuButton {
|
||||
margin-left: 8px; // should be the same as the notification badge
|
||||
position: relative;
|
||||
width: 24px;
|
||||
|
|
@ -122,21 +122,21 @@ limitations under the License.
|
|||
}
|
||||
|
||||
// Hide the menu button by default
|
||||
.mx_RoomSublist2_menuButton {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton::before {
|
||||
.mx_RoomSublist_auxButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_menuButton::before {
|
||||
.mx_RoomSublist_menuButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_headerText {
|
||||
.mx_RoomSublist_headerText {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 16px); // 16px is the badge width
|
||||
line-height: $font-16px;
|
||||
|
|
@ -148,7 +148,7 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.mx_RoomSublist2_collapseBtn {
|
||||
.mx_RoomSublist_collapseBtn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
|
|
@ -169,7 +169,7 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_collapseBtn_collapsed::before {
|
||||
&.mx_RoomSublist_collapseBtn_collapsed::before {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -181,12 +181,12 @@ limitations under the License.
|
|||
// when scrolled to the top above the first sublist (whose header can only
|
||||
// ever stick to top), so we force height to 0 for only that first header.
|
||||
// See also https://github.com/vector-im/riot-web/issues/14429.
|
||||
&:first-child .mx_RoomSublist2_headerContainer {
|
||||
&:first-child .mx_RoomSublist_headerContainer {
|
||||
height: 0;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
.mx_RoomSublist_resizeBox {
|
||||
position: relative;
|
||||
|
||||
// Create another flexbox column for the tiles
|
||||
|
|
@ -194,7 +194,7 @@ limitations under the License.
|
|||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_RoomSublist2_tiles {
|
||||
.mx_RoomSublist_tiles {
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
// need this to be flex otherwise the overflow hidden from above
|
||||
|
|
@ -206,18 +206,18 @@ limitations under the License.
|
|||
mask-image: linear-gradient(0deg, transparent, black 4px);
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizerHandles_showNButton {
|
||||
.mx_RoomSublist_resizerHandles_showNButton {
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizerHandles {
|
||||
.mx_RoomSublist_resizerHandles {
|
||||
flex: 0 0 4px;
|
||||
}
|
||||
|
||||
// Class name comes from the ResizableBox component
|
||||
// The hover state needs to use the whole sublist, not just the resizable box,
|
||||
// so that selector is below and one level higher.
|
||||
.mx_RoomSublist2_resizerHandle {
|
||||
.mx_RoomSublist_resizerHandle {
|
||||
cursor: ns-resize;
|
||||
border-radius: 3px;
|
||||
|
||||
|
|
@ -235,21 +235,21 @@ limitations under the License.
|
|||
right: calc(50% - 32px) !important;
|
||||
}
|
||||
|
||||
&:hover, &.mx_RoomSublist2_hasMenuOpen {
|
||||
.mx_RoomSublist2_resizerHandle {
|
||||
&:hover, &.mx_RoomSublist_hasMenuOpen {
|
||||
.mx_RoomSublist_resizerHandle {
|
||||
opacity: 0.8;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showNButton {
|
||||
.mx_RoomSublist_showNButton {
|
||||
cursor: pointer;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $roomtile2-preview-color;
|
||||
|
||||
// Update the render() function for RoomSublist2 if these change
|
||||
// Update the render() function for RoomSublist if these change
|
||||
// Update the ListLayout class for minVisibleTiles if these change.
|
||||
height: 24px;
|
||||
padding-bottom: 4px;
|
||||
|
|
@ -258,7 +258,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSublist2_showNButtonChevron {
|
||||
.mx_RoomSublist_showNButtonChevron {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -270,43 +270,43 @@ limitations under the License.
|
|||
background: $roomtile2-preview-color;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showMoreButtonChevron {
|
||||
.mx_RoomSublist_showMoreButtonChevron {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showLessButtonChevron {
|
||||
.mx_RoomSublist_showLessButtonChevron {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
&.mx_RoomSublist_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: visible;
|
||||
width: 24px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_minimized {
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
&.mx_RoomSublist_minimized {
|
||||
.mx_RoomSublist_headerContainer {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
.mx_RoomSublist_badgeContainer {
|
||||
order: 0;
|
||||
align-self: flex-end;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_stickable {
|
||||
.mx_RoomSublist_stickable {
|
||||
order: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton {
|
||||
.mx_RoomSublist_auxButton {
|
||||
order: 2;
|
||||
visibility: visible;
|
||||
width: 32px !important; // !important to override hover styles
|
||||
|
|
@ -322,25 +322,25 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
.mx_RoomSublist_resizeBox {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showNButton {
|
||||
.mx_RoomSublist_showNButton {
|
||||
flex-direction: column;
|
||||
|
||||
.mx_RoomSublist2_showNButtonChevron {
|
||||
.mx_RoomSublist_showNButtonChevron {
|
||||
margin-right: 12px; // to center
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_menuButton {
|
||||
.mx_RoomSublist_menuButton {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
& > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
&.mx_RoomSublist_hasMenuOpen,
|
||||
& > .mx_RoomSublist_headerContainer:hover {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
|
||||
|
|
@ -360,8 +360,8 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
&.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
|
||||
.mx_RoomSublist_menuButton {
|
||||
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
|
||||
}
|
||||
}
|
||||
|
|
@ -369,7 +369,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_contextMenu {
|
||||
.mx_RoomSublist_contextMenu {
|
||||
padding: 20px 16px;
|
||||
width: 250px;
|
||||
|
||||
|
|
@ -381,7 +381,7 @@ limitations under the License.
|
|||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_contextMenu_title {
|
||||
.mx_RoomSublist_contextMenu_title {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
font-weight: 600;
|
||||
|
|
@ -393,6 +393,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_addRoomTooltip {
|
||||
.mx_RoomSublist_addRoomTooltip {
|
||||
margin-top: -3px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue