From 84e60ee4391963f0bfbc4537ea717d4f63fb15ad Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 15 Jun 2020 20:00:09 -0600
Subject: [PATCH] Add a 'show less' button to the new room list

---
 res/css/views/rooms/_RoomSublist2.scss      | 17 ++++++---
 res/img/feather-customised/chevron-up.svg   |  1 +
 src/components/views/rooms/RoomSublist2.tsx | 38 ++++++++++++++++-----
 3 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 res/img/feather-customised/chevron-up.svg

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 3f5f654494..9e2c651641 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -100,7 +100,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;
@@ -129,18 +129,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
@@ -239,10 +246,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 @@
+<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>
\ No newline at end of file
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 9f8b8579c3..0b9452f55d 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<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();
@@ -303,25 +308,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
-            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 = (
-                    <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 = (
-                    <div onClick={this.onShowAllClick} className='mx_RoomSublist2_showMoreButton'>
-                        <span className='mx_RoomSublist2_showMoreButtonChevron'>
+                showNButton = (
+                    <div onClick={this.onShowAllClick} className='mx_RoomSublist2_showNButton'>
+                        <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
@@ -345,7 +367,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);
@@ -365,7 +387,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     className="mx_RoomSublist2_resizeBox"
                 >
                     {visibleTiles}
-                    {showMoreButton}
+                    {showNButton}
                 </ResizableBox>
             )
         }