From 85f3a9baefe5149b094062280fd93e726ee3461f Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 1 Feb 2021 22:10:48 +0100
Subject: [PATCH] Remove hamburger

Move room list to dropdown, see issue #27
---
 src/App.vue                   | 50 -----------------------------------
 src/assets/css/chat.scss      | 11 ++++++++
 src/components/ChatHeader.vue | 15 +++++++++--
 src/components/RoomInfo.vue   |  7 +++--
 src/components/RoomList.vue   |  4 +--
 5 files changed, 31 insertions(+), 56 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ef64a69..89edd8c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,64 +1,14 @@
 <template>
   <v-app>
-    <!-- <v-app-bar app dark flat color="#008860">
-      <v-app-bar-nav-icon @click.stop="openDrawer = !openDrawer">
-        <v-icon>menu</v-icon>
-      </v-app-bar-nav-icon>
-
-      <v-toolbar-title
-        >Keanu{{ $matrix.currentRoom ? (" - " + $matrix.currentRoom.summary.info.title) : "" }}</v-toolbar-title
-      >
-    </v-app-bar> -->
-
-    <v-navigation-drawer app v-model="openDrawer">
-      <v-list nav dense>
-        <template v-if="!currentUser && $route.path != '/login'">
-          <v-btn
-            color="green"
-            dark
-            @click="openDrawer = false;$navigation.push({ path: '/login' }, -1)"
-            ><v-icon>mdi-login</v-icon>Login</v-btn
-          >
-        </template>
-        <template v-else-if="currentUser">
-          <div class="ma-2">{{ currentUser.user_id }}</div>
-          <v-list-item @click.prevent="logOut">
-            <v-list-item-icon><v-icon>logout</v-icon></v-list-item-icon>
-            <v-list-item-title>Logout</v-list-item-title>
-          </v-list-item>
-        </template>
-
-        <RoomList v-if="$matrix.ready" @close="openDrawer = false" />
-      </v-list>
-    </v-navigation-drawer>
-
     <v-main>
       <router-view />
     </v-main>
-
-    <v-footer app class="copyright">
-      <v-btn icon x-small @click.stop="openDrawer = !openDrawer">
-        <v-icon>menu</v-icon>
-      </v-btn>
-      </v-footer
-    >
   </v-app>
 </template>
 
 <script>
-import RoomList from "./components/RoomList";
-
 export default {
   name: "App",
-  components: {
-    RoomList,
-  },
-  data: () => ({
-    openDrawer: false,
-  }),
-  mounted() {
-    //this.$router.replace("/");
-  },
   methods: {
     loggedIn() {
       return this.$store.state.auth.status.loggedIn;
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 2ad24a6..1b26b16 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -33,6 +33,16 @@ $admin-fg: white;
         margin-top: $chat-standard-padding-xs;
         margin-bottom: $chat-standard-padding-xs;
     }
+
+    .room-list {
+        background-color: white;
+        border: 1px solid #e0e0e0;
+        position: absolute;
+        z-index: 2;
+        .v-subheader {
+            display: none;
+        }
+    }
 }
 
 .chat-root {
@@ -44,6 +54,7 @@ $admin-fg: white;
     width: 100%;
     height: 100%;
     padding: 0;
+    padding-bottom: 10px;
     margin: 0;
 
     background-color: $chat-background;
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index c6bcd29..7bfb7c7 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -10,9 +10,13 @@
       </v-col>
 
       <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-        <div class="room-name" @click.stop="showRoomInfo">{{ room.summary.info.title }}</div>
+        <div class="room-name" @click.stop="showRoomList = true">{{ room.summary.info.title }} <v-icon>expand_more</v-icon></div>
+        <RoomList v-if="showRoomList" v-click-outside="hideRoomList" @close="hideRoomList" />
         <div class="num-members">{{ memberCount }}{{ memberCount > 1 ? " members" : " member" }}</div>
       </v-col>
+      <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+        <v-btn text class="info-button" @click.stop="showRoomInfo"><v-icon color="black">info</v-icon></v-btn>
+      </v-col>
       <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
         <v-btn text class="leave-button" @click.stop="leaveRoom">Leave</v-btn>
       </v-col>
@@ -26,15 +30,18 @@
 
 <script>
 import LeaveRoomDialog from '../components/LeaveRoomDialog';
+import RoomList from "../components/RoomList";
 
 export default {
   name: "ChatHeader",
   components: {
-    LeaveRoomDialog
+    LeaveRoomDialog,
+    RoomList
   },
   data() {
     return {
       memberCount: null,
+      showRoomList: false,
       showLeaveConfirmation: false
     };
   },
@@ -90,6 +97,10 @@ export default {
     leaveRoom() {
       this.showLeaveConfirmation = true;
     },
+
+    hideRoomList() {
+      this.showRoomList = false;
+    }
   },
 };
 </script>
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index afeeb2b..c8c2f49 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -80,11 +80,14 @@
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">My Profile</v-card-title>
       <v-card-text>
-        <div v-if="$matrix.currentUser.is_guest">
-          <div>
+        <div>
+          <div v-if="$matrix.currentUser.is_guest">
             Your identity <b>{{ displayName }}</b> is temporary. You can change
             your name or set a password to keep it.
           </div>
+          <div v-else>
+            Your are logged in as <b>{{ displayName }}</b>.
+          </div>
           <v-btn block class="outlined-button" @click.stop="viewProfile"
             >View</v-btn
           >
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index 8f20a52..255c1be 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-list dense>
+  <v-list dense class="room-list">
     <v-subheader>ROOMS</v-subheader>
     <v-list-item-group v-model="currentRoomId" color="primary">
       <v-list-item v-for="room in $matrix.rooms" :key="room.roomId" :value="room.roomId">
-        <v-list-item-avatar>
+        <v-list-item-avatar color="#e0e0e0">
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
         <v-list-item-content>