Implement UX

- Add chevron to member count in room details
- Make some rows in panel buttons
- Add user chrome to right panel
- Style UI

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/session/rightpanel/MemberListViewModel.js

@@ -16,6 +16,10 @@ export class MemberListViewModel extends ViewModel {
 
     get type() { return "member-list"; }
 
+    get shouldShowBackButton() { return true; }
+
+    get previousSegmentName() { return "details"; }
+
     _filterJoinedMembers(members) {
         return members.filterValues(member => member.membership === "join");
     }

src/domain/session/rightpanel/RightPanelViewModel.js

@@ -44,4 +44,19 @@ export class RightPanelViewModel extends ViewModel {
         updater(true);
         return updater;
     }
+
+    closePanel() {
+        const path = this.navigation.path.until("room");
+        this.navigation.applyPath(path);
+    }
+
+    showPreviousPanel() {
+        const segmentName = this.activeViewModel.previousSegmentName;
+        if (segmentName) {
+            let path = this.navigation.path.until("room");
+            path = path.with(this.navigation.segment("right-panel", true));
+            path = path.with(this.navigation.segment(segmentName, true));
+            this.navigation.applyPath(path);
+        }
+    }
 }

src/domain/session/rightpanel/RoomDetailsViewModel.js

@@ -13,6 +13,14 @@ export class RoomDetailsViewModel extends ViewModel {
         return "room-details";
     }
 
+    get shouldShowBackButton() {
+        return false;
+    }
+
+    get previousSegmentName() {
+        return false;
+    }
+
     get roomId() {
         return this._room.id;
     }
@@ -53,11 +61,6 @@ export class RoomDetailsViewModel extends ViewModel {
         this.emitChange();
     }
 
-    closePanel() {
-        const path = this.navigation.path.until("room");
-        this.navigation.applyPath(path);
-    }
-
     dispose() {
         super.dispose();
         this._room.off("change", this._onRoomChange);

src/platform/web/ui/css/right-panel.css

@@ -30,10 +30,16 @@
     justify-content: center;
 }
 
-.RoomDetailsView_buttons {
+.RightPanelView_buttons {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+}
+
+.RightPanelView_buttons .hide {
+    visibility: hidden;
 }
 
 .MemberTileView {

src/platform/web/ui/css/themes/element/icons/chevron-thin-left.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 6L7.5 9L10.5 12" stroke="#8D99A5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/platform/web/ui/css/themes/element/theme.css

@@ -883,15 +883,19 @@ button.RoomDetailsView_row::after {
     content: url("./icons/e2ee-disabled.svg");
 }
 
-.RoomDetailsView .button-utility {
+.RightPanelView_buttons .button-utility {
     width: 24px;
     height: 24px;
 }
 
-.RoomDetailsView .close {
+.RightPanelView_buttons .close {
     background-image: url("./icons/clear.svg");
 }
 
+.RightPanelView_buttons .back {
+    background-image: url("./icons/chevron-thin-left.svg");
+}
+
 /* Memberlist Panel */
 
 .MemberListView {
@@ -912,3 +916,11 @@ button.RoomDetailsView_row::after {
     width: 184px;
     white-space: nowrap;
 }
+
+.LazyListParent {
+    overflow: hidden;
+}
+
+.LazyListParent:hover {
+    overflow-y: auto;
+}

src/platform/web/ui/session/rightpanel/RightPanelView.js

@@ -11,8 +11,24 @@ export class RightPanelView extends TemplateView {
         };
         return t.div({ className: "RightPanelView" },
             [
+                t.mapView(vm => vm.activeViewModel && vm, vm => vm ? new ButtonsView(vm) : null),
                 t.mapView(vm => vm.activeViewModel, vm => vm ? new viewFromType[vm.type](vm) : new LoadingView())
             ]
         );
     }
 }
+
+class ButtonsView extends TemplateView {
+    render(t, vm) {
+        return t.div({ className: "RightPanelView_buttons" },
+            [
+            t.button({
+                className: {
+                    "back": true,
+                    "button-utility": true,
+                    "hide": !vm.activeViewModel.shouldShowBackButton
+                }, onClick: () => vm.showPreviousPanel()}),
+            t.button({className: "close button-utility", onClick: () => vm.closePanel()})
+        ]);
+    }
+}

src/platform/web/ui/session/rightpanel/RoomDetailsView.js

@@ -6,7 +6,6 @@ export class RoomDetailsView extends TemplateView {
     render(t, vm) {
         const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`;
         return t.div({className: "RoomDetailsView"}, [
-            this._createButton(t, vm),
             t.div({className: "RoomDetailsView_avatar"},
                 [
                     t.view(new AvatarView(vm, 52)),
@@ -44,12 +43,6 @@ export class RoomDetailsView extends TemplateView {
         ]);
     }
 
-    _createButton(t, vm) {
-        return t.div({className: "RoomDetailsView_buttons"},
-            [
-                t.button({className: "close button-utility", onClick: () => vm.closePanel()})
-            ]);
-    }
 }
 
 class EncryptionIconView extends TemplateView {