PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

RoomSublist2 -> RoomSublist

Browse source
This commit is contained in:
Travis Ralston 2020-07-17 15:46:46 -06:00
parent 96065ae982
commit c9b0b3b31d
8 changed files with 107 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -180,7 +180,7 @@
@import "./views/rooms/_RoomList.scss"; @import "./views/rooms/_RoomList.scss";
@import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomPreviewBar.scss";
@import "./views/rooms/_RoomRecoveryReminder.scss"; @import "./views/rooms/_RoomRecoveryReminder.scss";
@import "./views/rooms/_RoomSublist2.scss"; @import "./views/rooms/_RoomSublist.scss";
@import "./views/rooms/_RoomTile.scss"; @import "./views/rooms/_RoomTile.scss";
@import "./views/rooms/_RoomTileIcon.scss"; @import "./views/rooms/_RoomTileIcon.scss";
@import "./views/rooms/_RoomUpgradeWarningBar.scss"; @import "./views/rooms/_RoomUpgradeWarningBar.scss";

100
res/css/views/rooms/_RoomSublist2.scss → res/css/views/rooms/_RoomSublist.scss
View file

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

2
res/themes/light/css/_mods.scss
View file

@ -21,7 +21,7 @@
} }
} }
.mx_RoomSublist2_showNButton { .mx_RoomSublist_showNButton {
background-color: transparent !important; background-color: transparent !important;
} }

34
src/components/structures/LeftPanel.tsx
View file

@ -21,7 +21,7 @@ import classNames from "classnames";
import dis from "../../dispatcher/dispatcher"; import dis from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler"; import { _t } from "../../languageHandler";
import RoomList from "../views/rooms/RoomList"; import RoomList from "../views/rooms/RoomList";
import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2"; import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
import UserMenu from "./UserMenu"; import UserMenu from "./UserMenu";
import RoomSearch from "./RoomSearch"; import RoomSearch from "./RoomSearch";
@ -50,9 +50,9 @@ interface IState {
const cssClasses = [ const cssClasses = [
"mx_RoomSearch_input", "mx_RoomSearch_input",
"mx_RoomSearch_icon", // minimized <RoomSearch /> "mx_RoomSearch_icon", // minimized <RoomSearch />
"mx_RoomSublist2_headerText", "mx_RoomSublist_headerText",
"mx_RoomTile", "mx_RoomTile",
"mx_RoomSublist2_showNButton", "mx_RoomSublist_showNButton",
]; ];
export default class LeftPanel extends React.Component<IProps, IState> { export default class LeftPanel extends React.Component<IProps, IState> {
@ -119,7 +119,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
private doStickyHeaders(list: HTMLDivElement) { private doStickyHeaders(list: HTMLDivElement) {
const topEdge = list.scrollTop; const topEdge = list.scrollTop;
const bottomEdge = list.offsetHeight + list.scrollTop; const bottomEdge = list.offsetHeight + list.scrollTop;
const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist2"); const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
const headerStickyWidth = list.clientWidth - headerRightMargin; const headerStickyWidth = list.clientWidth - headerRightMargin;
@ -135,7 +135,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
let lastTopHeader; let lastTopHeader;
let firstBottomHeader; let firstBottomHeader;
for (const sublist of sublists) { for (const sublist of sublists) {
const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable"); const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist_stickable");
header.style.removeProperty("display"); // always clear display:none first header.style.removeProperty("display"); // always clear display:none first
// When an element is <=40% off screen, make it take over // When an element is <=40% off screen, make it take over
@ -171,8 +171,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
} }
if (style.stickyTop) { if (style.stickyTop) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) { if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
header.classList.add("mx_RoomSublist2_headerContainer_stickyTop"); header.classList.add("mx_RoomSublist_headerContainer_stickyTop");
} }
const newTop = `${list.parentElement.offsetTop}px`; const newTop = `${list.parentElement.offsetTop}px`;
@ -180,8 +180,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
header.style.top = newTop; header.style.top = newTop;
} }
} else { } else {
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) { if (header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop"); header.classList.remove("mx_RoomSublist_headerContainer_stickyTop");
} }
if (header.style.top) { if (header.style.top) {
header.style.removeProperty('top'); header.style.removeProperty('top');
@ -189,18 +189,18 @@ export default class LeftPanel extends React.Component<IProps, IState> {
} }
if (style.stickyBottom) { if (style.stickyBottom) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) { if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom"); header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
} }
} else { } else {
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) { if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom"); header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom");
} }
} }
if (style.stickyTop || style.stickyBottom) { if (style.stickyTop || style.stickyBottom) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) { if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
header.classList.add("mx_RoomSublist2_headerContainer_sticky"); header.classList.add("mx_RoomSublist_headerContainer_sticky");
} }
const newWidth = `${headerStickyWidth}px`; const newWidth = `${headerStickyWidth}px`;
@ -208,8 +208,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
header.style.width = newWidth; header.style.width = newWidth;
} }
} else if (!style.stickyTop && !style.stickyBottom) { } else if (!style.stickyTop && !style.stickyBottom) {
if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) { if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
header.classList.remove("mx_RoomSublist2_headerContainer_sticky"); header.classList.remove("mx_RoomSublist_headerContainer_sticky");
} }
if (header.style.width) { if (header.style.width) {
header.style.removeProperty('width'); header.style.removeProperty('width');

4
src/components/views/rooms/RoomList.tsx
View file

@ -29,7 +29,7 @@ import { ITagMap } from "../../../stores/room-list/algorithms/models";
import { DefaultTagID, TagID } from "../../../stores/room-list/models"; import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";
import defaultDispatcher from "../../../dispatcher/dispatcher"; import defaultDispatcher from "../../../dispatcher/dispatcher";
import RoomSublist2 from "./RoomSublist2"; import RoomSublist from "./RoomSublist";
import { ActionPayload } from "../../../dispatcher/payloads"; import { ActionPayload } from "../../../dispatcher/payloads";
import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition"; import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../MatrixClientPeg";
@ -275,7 +275,7 @@ export default class RoomList extends React.Component<IProps, IState> {
const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null; const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
components.push( components.push(
<RoomSublist2 <RoomSublist
key={`sublist-${orderedTagId}`} key={`sublist-${orderedTagId}`}
tagId={orderedTagId} tagId={orderedTagId}
forRooms={true} forRooms={true}

62
src/components/views/rooms/RoomSublist2.tsx → src/components/views/rooms/RoomSublist.tsx
View file

@ -94,7 +94,7 @@ interface IState {
height: number; height: number;
} }
export default class RoomSublist2 extends React.Component<IProps, IState> { export default class RoomSublist extends React.Component<IProps, IState> {
private headerButton = createRef<HTMLDivElement>(); private headerButton = createRef<HTMLDivElement>();
private sublistRef = createRef<HTMLDivElement>(); private sublistRef = createRef<HTMLDivElement>();
private dispatcherRef: string; private dispatcherRef: string;
@ -144,7 +144,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
} }
private get numTiles(): number { private get numTiles(): number {
return RoomSublist2.calcNumTiles(this.props); return RoomSublist.calcNumTiles(this.props);
} }
private static calcNumTiles(props) { private static calcNumTiles(props) {
@ -167,7 +167,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
} }
// as the rooms can come in one by one we need to reevaluate // as the rooms can come in one by one we need to reevaluate
// the amount of available rooms to cap the amount of requested visible rooms by the layout // the amount of available rooms to cap the amount of requested visible rooms by the layout
if (RoomSublist2.calcNumTiles(prevProps) !== this.numTiles) { if (RoomSublist.calcNumTiles(prevProps) !== this.numTiles) {
this.setState({height: this.calculateInitialHeight()}); this.setState({height: this.calculateInitialHeight()});
} }
} }
@ -329,8 +329,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// the scrollTop is capped at the height of the header in LeftPanel, the top header is always sticky // the scrollTop is capped at the height of the header in LeftPanel, the top header is always sticky
const isAtTop = list.scrollTop <= HEADER_HEIGHT; const isAtTop = list.scrollTop <= HEADER_HEIGHT;
const isAtBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight; const isAtBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight;
const isStickyTop = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_stickyTop'); const isStickyTop = possibleSticky.classList.contains('mx_RoomSublist_headerContainer_stickyTop');
const isStickyBottom = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_stickyBottom'); const isStickyBottom = possibleSticky.classList.contains('mx_RoomSublist_headerContainer_stickyBottom');
if ((isStickyBottom && !isAtBottom) || (isStickyTop && !isAtTop)) { if ((isStickyBottom && !isAtBottom) || (isStickyTop && !isAtTop)) {
// is sticky - jump to list // is sticky - jump to list
@ -444,7 +444,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
<React.Fragment> <React.Fragment>
<hr /> <hr />
<div> <div>
<div className='mx_RoomSublist2_contextMenu_title'>{_t("Appearance")}</div> <div className='mx_RoomSublist_contextMenu_title'>{_t("Appearance")}</div>
<StyledMenuItemCheckbox <StyledMenuItemCheckbox
onClose={this.onCloseMenu} onClose={this.onCloseMenu}
onChange={this.onUnreadFirstChanged} onChange={this.onUnreadFirstChanged}
@ -471,9 +471,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height} top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
onFinished={this.onCloseMenu} onFinished={this.onCloseMenu}
> >
<div className="mx_RoomSublist2_contextMenu"> <div className="mx_RoomSublist_contextMenu">
<div> <div>
<div className='mx_RoomSublist2_contextMenu_title'>{_t("Sort by")}</div> <div className='mx_RoomSublist_contextMenu_title'>{_t("Sort by")}</div>
<StyledMenuItemRadio <StyledMenuItemRadio
onClose={this.onCloseMenu} onClose={this.onCloseMenu}
onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)} onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)}
@ -500,7 +500,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
return ( return (
<React.Fragment> <React.Fragment>
<ContextMenuTooltipButton <ContextMenuTooltipButton
className="mx_RoomSublist2_menuButton" className="mx_RoomSublist_menuButton"
onClick={this.onOpenMenuClick} onClick={this.onOpenMenuClick}
title={_t("List options")} title={_t("List options")}
isExpanded={!!this.state.contextMenuPosition} isExpanded={!!this.state.contextMenuPosition}
@ -537,26 +537,26 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
<AccessibleTooltipButton <AccessibleTooltipButton
tabIndex={tabIndex} tabIndex={tabIndex}
onClick={this.onAddRoom} onClick={this.onAddRoom}
className="mx_RoomSublist2_auxButton" className="mx_RoomSublist_auxButton"
aria-label={this.props.addRoomLabel || _t("Add room")} aria-label={this.props.addRoomLabel || _t("Add room")}
title={this.props.addRoomLabel} title={this.props.addRoomLabel}
tooltipClassName={"mx_RoomSublist2_addRoomTooltip"} tooltipClassName={"mx_RoomSublist_addRoomTooltip"}
/> />
); );
} }
const collapseClasses = classNames({ const collapseClasses = classNames({
'mx_RoomSublist2_collapseBtn': true, 'mx_RoomSublist_collapseBtn': true,
'mx_RoomSublist2_collapseBtn_collapsed': !this.state.isExpanded, 'mx_RoomSublist_collapseBtn_collapsed': !this.state.isExpanded,
}); });
const classes = classNames({ const classes = classNames({
'mx_RoomSublist2_headerContainer': true, 'mx_RoomSublist_headerContainer': true,
'mx_RoomSublist2_headerContainer_withAux': !!addRoomButton, 'mx_RoomSublist_headerContainer_withAux': !!addRoomButton,
}); });
const badgeContainer = ( const badgeContainer = (
<div className="mx_RoomSublist2_badgeContainer"> <div className="mx_RoomSublist_badgeContainer">
{badge} {badge}
</div> </div>
); );
@ -573,12 +573,12 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// The same applies to the notification badge. // The same applies to the notification badge.
return ( return (
<div className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus} aria-label={this.props.label}> <div className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus} aria-label={this.props.label}>
<div className="mx_RoomSublist2_stickable"> <div className="mx_RoomSublist_stickable">
<Button <Button
onFocus={onFocus} onFocus={onFocus}
inputRef={ref} inputRef={ref}
tabIndex={tabIndex} tabIndex={tabIndex}
className="mx_RoomSublist2_headerText" className="mx_RoomSublist_headerText"
role="treeitem" role="treeitem"
aria-expanded={this.state.isExpanded} aria-expanded={this.state.isExpanded}
aria-level={1} aria-level={1}
@ -611,9 +611,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
public render(): React.ReactElement { public render(): React.ReactElement {
const visibleTiles = this.renderVisibleTiles(); const visibleTiles = this.renderVisibleTiles();
const classes = classNames({ const classes = classNames({
'mx_RoomSublist2': true, 'mx_RoomSublist': true,
'mx_RoomSublist2_hasMenuOpen': !!this.state.contextMenuPosition, 'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
'mx_RoomSublist2_minimized': this.props.isMinimized, 'mx_RoomSublist_minimized': this.props.isMinimized,
}); });
let content = null; let content = null;
@ -626,7 +626,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
const minTilesPx = layout.tilesToPixelsWithPadding(minTiles, minHeightPadding); const minTilesPx = layout.tilesToPixelsWithPadding(minTiles, minHeightPadding);
let maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, this.padding); let maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
const showMoreBtnClasses = classNames({ const showMoreBtnClasses = classNames({
'mx_RoomSublist2_showNButton': true, 'mx_RoomSublist_showNButton': true,
}); });
// If we're hiding rooms, show a 'show more' button to the user. This button // If we're hiding rooms, show a 'show more' button to the user. This button
@ -640,14 +640,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight); const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight);
const numMissing = this.numTiles - amountFullyShown; const numMissing = this.numTiles - amountFullyShown;
let showMoreText = ( let showMoreText = (
<span className='mx_RoomSublist2_showNButtonText'> <span className='mx_RoomSublist_showNButtonText'>
{_t("Show %(count)s more", {count: numMissing})} {_t("Show %(count)s more", {count: numMissing})}
</span> </span>
); );
if (this.props.isMinimized) showMoreText = null; if (this.props.isMinimized) showMoreText = null;
showNButton = ( showNButton = (
<RovingAccessibleButton onClick={this.onShowAllClick} className={showMoreBtnClasses}> <RovingAccessibleButton onClick={this.onShowAllClick} className={showMoreBtnClasses}>
<span className='mx_RoomSublist2_showMoreButtonChevron mx_RoomSublist2_showNButtonChevron'> <span className='mx_RoomSublist_showMoreButtonChevron mx_RoomSublist_showNButtonChevron'>
{/* set by CSS masking */} {/* set by CSS masking */}
</span> </span>
{showMoreText} {showMoreText}
@ -656,14 +656,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
} else if (this.numTiles > this.layout.defaultVisibleTiles) { } else if (this.numTiles > this.layout.defaultVisibleTiles) {
// we have all tiles visible - add a button to show less // we have all tiles visible - add a button to show less
let showLessText = ( let showLessText = (
<span className='mx_RoomSublist2_showNButtonText'> <span className='mx_RoomSublist_showNButtonText'>
{_t("Show less")} {_t("Show less")}
</span> </span>
); );
if (this.props.isMinimized) showLessText = null; if (this.props.isMinimized) showLessText = null;
showNButton = ( showNButton = (
<RovingAccessibleButton onClick={this.onShowLessClick} className={showMoreBtnClasses}> <RovingAccessibleButton onClick={this.onShowLessClick} className={showMoreBtnClasses}>
<span className='mx_RoomSublist2_showLessButtonChevron mx_RoomSublist2_showNButtonChevron'> <span className='mx_RoomSublist_showLessButtonChevron mx_RoomSublist_showNButtonChevron'>
{/* set by CSS masking */} {/* set by CSS masking */}
</span> </span>
{showLessText} {showLessText}
@ -698,8 +698,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// only mathematically 7 possible). // only mathematically 7 possible).
const handleWrapperClasses = classNames({ const handleWrapperClasses = classNames({
'mx_RoomSublist2_resizerHandles': true, 'mx_RoomSublist_resizerHandles': true,
'mx_RoomSublist2_resizerHandles_showNButton': !!showNButton, 'mx_RoomSublist_resizerHandles_showNButton': !!showNButton,
}); });
content = ( content = (
@ -712,11 +712,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
onResizeStop={this.onResizeStop} onResizeStop={this.onResizeStop}
onResize={this.onResize} onResize={this.onResize}
handleWrapperClass={handleWrapperClasses} handleWrapperClass={handleWrapperClasses}
handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}} handleClasses={{bottom: "mx_RoomSublist_resizerHandle"}}
className="mx_RoomSublist2_resizeBox" className="mx_RoomSublist_resizeBox"
enable={handles} enable={handles}
> >
<div className="mx_RoomSublist2_tiles" onScroll={this.onScrollPrevent}> <div className="mx_RoomSublist_tiles" onScroll={this.onScrollPrevent}>
{visibleTiles} {visibleTiles}
</div> </div>
{showNButton} {showNButton}

2
test/components/views/rooms/RoomList-test.js
View file

@ -131,7 +131,7 @@ describe('RoomList', () => {
}); });
function expectRoomInSubList(room, subListTest) { function expectRoomInSubList(room, subListTest) {
const RoomSubList = sdk.getComponent('views.rooms.RoomSublist2'); const RoomSubList = sdk.getComponent('views.rooms.RoomSublist');
const RoomTile = sdk.getComponent('views.rooms.RoomTile'); const RoomTile = sdk.getComponent('views.rooms.RoomTile');
const subLists = ReactTestUtils.scryRenderedComponentsWithType(root, RoomSubList); const subLists = ReactTestUtils.scryRenderedComponentsWithType(root, RoomSubList);

8
test/end-to-end-tests/src/usecases/create-room.js
View file

@ -21,9 +21,9 @@ async function openRoomDirectory(session) {
} }
async function findSublist(session, name) { async function findSublist(session, name) {
const sublists = await session.queryAll('.mx_RoomSublist2'); const sublists = await session.queryAll('.mx_RoomSublist');
for (const sublist of sublists) { for (const sublist of sublists) {
const header = await sublist.$('.mx_RoomSublist2_headerText'); const header = await sublist.$('.mx_RoomSublist_headerText');
const headerText = await session.innerText(header); const headerText = await session.innerText(header);
if (headerText.toLowerCase().includes(name.toLowerCase())) { if (headerText.toLowerCase().includes(name.toLowerCase())) {
return sublist; return sublist;
@ -36,7 +36,7 @@ async function createRoom(session, roomName, encrypted=false) {
session.log.step(`creates room "${roomName}"`); session.log.step(`creates room "${roomName}"`);
const roomsSublist = await findSublist(session, "rooms"); const roomsSublist = await findSublist(session, "rooms");
const addRoomButton = await roomsSublist.$(".mx_RoomSublist2_auxButton"); const addRoomButton = await roomsSublist.$(".mx_RoomSublist_auxButton");
await addRoomButton.click(); await addRoomButton.click();
const roomNameInput = await session.query('.mx_CreateRoomDialog_name input'); const roomNameInput = await session.query('.mx_CreateRoomDialog_name input');
@ -58,7 +58,7 @@ async function createDm(session, invitees) {
session.log.step(`creates DM with ${JSON.stringify(invitees)}`); session.log.step(`creates DM with ${JSON.stringify(invitees)}`);
const dmsSublist = await findSublist(session, "people"); const dmsSublist = await findSublist(session, "people");
const startChatButton = await dmsSublist.$(".mx_RoomSublist2_auxButton"); const startChatButton = await dmsSublist.$(".mx_RoomSublist_auxButton");
await startChatButton.click(); await startChatButton.click();
const inviteesEditor = await session.query('.mx_InviteDialog_editor textarea'); const inviteesEditor = await session.query('.mx_InviteDialog_editor textarea');