From e77cfbeb8185c69c06b820afdb3af5f584c980f1 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <git@timovolkmann.de>
Date: Fri, 8 Oct 2021 11:38:27 +0200
Subject: [PATCH] UI: Add profile card and fix navigation layout #1175

---
 frontend/src/component/navigation.vue | 59 +++++++++++++++++++--------
 frontend/src/css/navigation.css       | 19 +++++++++
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/navigation.vue b/frontend/src/component/navigation.vue
index 7f6611760..2579855a0 100644
--- a/frontend/src/component/navigation.vue
+++ b/frontend/src/component/navigation.vue
@@ -26,7 +26,7 @@
         :width="270"
         :mobile-break-point="960"
         :mini-variant-width="80"
-        class="nav-sidebar navigation"
+        class="nav-sidebar navigation p-flex-nav"
         fixed dark app
         :right="rtl"
     >
@@ -51,7 +51,7 @@
         </v-list>
       </v-toolbar>
 
-      <v-list class="pt-3">
+      <v-list class="pt-3 p-flex-menu">
         <v-list-tile v-if="isMini" class="nav-expand" @click.stop="toggleIsMini()">
           <v-list-tile-action :title="$gettext('Expand')">
             <v-icon v-if="!rtl">chevron_right</v-icon>
@@ -415,18 +415,6 @@
           </v-list-group>
         </template>
 
-        <v-list-tile v-show="!isPublic && auth" class="nav-logout" @click="logout">
-          <v-list-tile-action :title="$gettext('Logout')">
-            <v-icon>power_settings_new</v-icon>
-          </v-list-tile-action>
-
-          <v-list-tile-content>
-            <v-list-tile-title>
-              <translate key="Logout">Logout</translate>
-            </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-
         <v-list-tile v-show="!auth" to="/login" class="nav-login" @click.stop="">
           <v-list-tile-action :title="$gettext('Login')">
             <v-icon>lock</v-icon>
@@ -439,8 +427,11 @@
           </v-list-tile-content>
         </v-list-tile>
 
-        <v-list-tile v-show="$config.disconnected" to="/help/websockets" class="nav-connecting navigation" style="position:fixed; bottom: 0; left:0; right: 0;"
-                     @click.stop="">
+      </v-list>
+
+      <v-list class="p-user-box">
+
+        <v-list-tile v-show="$config.disconnected" to="/help/websockets" class="nav-connecting navigation" @click.stop="">
           <v-list-tile-action :title="$gettext('Offline')">
             <v-icon color="warning">wifi_off</v-icon>
           </v-list-tile-action>
@@ -451,7 +442,39 @@
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
+
+        <v-list-tile v-show="!isPublic && auth"  to="/" class="p-profile">
+          <v-list-tile-avatar color="grey" size="36">
+            <span class="white--text headline">{{ displayName.length >= 1 ? displayName[0].toUpperCase() : "E" }}</span>
+          </v-list-tile-avatar>
+
+          <v-list-tile-content>
+            <v-list-tile-title>
+              {{ displayName }}
+            </v-list-tile-title>
+            <v-list-tile-sub-title>Profile</v-list-tile-sub-title>
+          </v-list-tile-content>
+
+          <v-list-tile-action :title="$gettext('Logout')">
+            <v-btn icon @click="logout">
+              <v-icon>power_settings_new</v-icon>
+            </v-btn>
+          </v-list-tile-action>
+        </v-list-tile>
+
+        <v-list-tile v-show="!isPublic && auth && isMini" class="nav-logout" @click="logout">
+          <v-list-tile-action :title="$gettext('Logout')">
+            <v-icon>power_settings_new</v-icon>
+          </v-list-tile-action>
+
+          <v-list-tile-content>
+            <v-list-tile-title>
+              <translate key="Logout">Logout</translate>
+            </v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
       </v-list>
+
     </v-navigation-drawer>
     <div v-if="isTest" id="photoprism-info"><a href="https://photoprism.app/" target="_blank">Browse Your Life in Pictures</a></div>
     <p-reload-dialog :show="reload.dialog" @close="reload.dialog = false"></p-reload-dialog>
@@ -500,6 +523,10 @@ export default {
     auth() {
       return this.session.auth || this.isPublic;
     },
+    displayName() {
+      return this.$session.getUser().FullName ? this.$session.getUser().FullName : this.$session.getUser().UserName;
+    },
+
   },
   created() {
     this.reload.subscription = Event.subscribe("dialog.reload", () => this.reload.dialog = true);
diff --git a/frontend/src/css/navigation.css b/frontend/src/css/navigation.css
index 35bc3ef0c..45621f85e 100644
--- a/frontend/src/css/navigation.css
+++ b/frontend/src/css/navigation.css
@@ -92,4 +92,23 @@
 #photoprism .page-toolbar .input-category .v-select__selections .v-select__selection {
     white-space: nowrap;
     overflow: hidden;
+}
+
+.p-user-box {
+    /*position: fixed;*/
+    /*bottom: 0;*/
+    width: 100%;
+    padding: 0;
+}
+.p-profile > a {
+    height: 64px;
+}
+.p-flex-nav {
+    display: flex;
+    flex-flow: column nowrap;
+    overflow-y: hidden;
+}
+.p-flex-menu {
+    overflow-y: scroll;
+    flex-grow: 1;
 }
\ No newline at end of file