Merge pull request #4765 from matrix-org/travis/room-list/show-less

Add a 'show less' button to the new room list

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
                 }
             }

res/img/feather-customised/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>

src/components/views/rooms/RoomSublist2.tsx

@@ -109,6 +109,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         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<IProps, IState> {
             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
+            // floats above the resize handle, if we have one present. If the user has all
-            let showMoreButton = null;
+            // 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 = (
-                    <span className='mx_RoomSublist2_showMoreButtonText'>
+                    <span className='mx_RoomSublist2_showNButtonText'>
                         {_t("Show %(count)s more", {count: numMissing})}
                     </span>
                 );
                 if (this.props.isMinimized) showMoreText = null;
-                showMoreButton = (
+                showNButton = (
-                    <div onClick={this.onShowAllClick} className='mx_RoomSublist2_showMoreButton'>
+                    <div onClick={this.onShowAllClick} className='mx_RoomSublist2_showNButton'>
-                        <span className='mx_RoomSublist2_showMoreButtonChevron'>
+                        <span className='mx_RoomSublist2_showMoreButtonChevron mx_RoomSublist2_showNButtonChevron'>
                             {/* set by CSS masking */}
                         </span>
                         {showMoreText}
                     </div>
                 );
+            } else if (tiles.length <= nVisible) {
+                // we have all tiles visible - add a button to show less
+                let showLessText = (
+                    <span className='mx_RoomSublist2_showNButtonText'>
+                        {_t("Show less")}
+                    </span>
+                );
+                if (this.props.isMinimized) showLessText = null;
+                showNButton = (
+                    <div onClick={this.onShowLessClick} className='mx_RoomSublist2_showNButton'>
+                        <span className='mx_RoomSublist2_showLessButtonChevron mx_RoomSublist2_showNButtonChevron'>
+                            {/* set by CSS masking */}
+                        </span>
+                        {showLessText}
+                    </div>
+                );
             }
 
             // Figure out if we need a handle
@@ -376,7 +398,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
             // 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<IProps, IState> {
                     className="mx_RoomSublist2_resizeBox"
                 >
                     {visibleTiles}
-                    {showMoreButton}
+                    {showNButton}
                 </ResizableBox>
             )
         }