diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index d5fa72be90..66615fb6a8 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -176,7 +176,7 @@ limitations under the License. flex-direction: column; overflow: hidden; - .mx_RoomSublist2_showMoreButton { + .mx_RoomSublist2_showNButton { cursor: pointer; font-size: $font-13px; line-height: $font-18px; @@ -205,18 +205,25 @@ limitations under the License. display: flex; align-items: center; - .mx_RoomSublist2_showMoreButtonChevron { + .mx_RoomSublist2_showNButtonChevron { position: relative; width: 16px; height: 16px; margin-left: 12px; margin-right: 18px; - mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-position: center; mask-size: contain; mask-repeat: no-repeat; background: $roomtile2-preview-color; } + + .mx_RoomSublist2_showMoreButtonChevron { + mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); + } + + .mx_RoomSublist2_showLessButtonChevron { + mask-image: url('$(res)/img/feather-customised/chevron-up.svg'); + } } // Class name comes from the ResizableBox component @@ -326,10 +333,10 @@ limitations under the License. .mx_RoomSublist2_resizeBox { align-items: center; - .mx_RoomSublist2_showMoreButton { + .mx_RoomSublist2_showNButton { flex-direction: column; - .mx_RoomSublist2_showMoreButtonChevron { + .mx_RoomSublist2_showNButtonChevron { margin-right: 12px; // to center } } diff --git a/res/img/feather-customised/chevron-up.svg b/res/img/feather-customised/chevron-up.svg new file mode 100644 index 0000000000..4eb5ecc33e --- /dev/null +++ b/res/img/feather-customised/chevron-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index 70d63daa23..c72e74a1be 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -109,6 +109,11 @@ export default class RoomSublist2 extends React.Component { this.forceUpdate(); // because the layout doesn't trigger a re-render }; + private onShowLessClick = () => { + this.props.layout.visibleTiles = this.props.layout.minVisibleTiles; + this.forceUpdate(); // because the layout doesn't trigger a re-render + }; + private onOpenMenuClick = (ev: InputEvent) => { ev.preventDefault(); ev.stopPropagation(); @@ -334,25 +339,42 @@ export default class RoomSublist2 extends React.Component { const visibleTiles = tiles.slice(0, nVisible); // If we're hiding rooms, show a 'show more' button to the user. This button - // floats above the resize handle, if we have one present - let showMoreButton = null; + // floats above the resize handle, if we have one present. If the user has all + // tiles visible, it becomes 'show less'. + let showNButton = null; if (tiles.length > nVisible) { // we have a cutoff condition - add the button to show all const numMissing = tiles.length - visibleTiles.length; let showMoreText = ( - + {_t("Show %(count)s more", {count: numMissing})} ); if (this.props.isMinimized) showMoreText = null; - showMoreButton = ( -
- + showNButton = ( +
+ {/* set by CSS masking */} {showMoreText}
); + } else if (tiles.length <= nVisible) { + // we have all tiles visible - add a button to show less + let showLessText = ( + + {_t("Show less")} + + ); + if (this.props.isMinimized) showLessText = null; + showNButton = ( +
+ + {/* set by CSS masking */} + + {showLessText} +
+ ); } // Figure out if we need a handle @@ -376,7 +398,7 @@ export default class RoomSublist2 extends React.Component { // The padding is variable though, so figure out what we need padding for. let padding = 0; - if (showMoreButton) padding += showMoreHeight; + if (showNButton) padding += showMoreHeight; if (handles.length > 0) padding += resizeHandleHeight; const minTilesPx = layout.calculateTilesToPixelsMin(tiles.length, layout.minVisibleTiles, padding); @@ -396,7 +418,7 @@ export default class RoomSublist2 extends React.Component { className="mx_RoomSublist2_resizeBox" > {visibleTiles} - {showMoreButton} + {showNButton} ) }