UI: Move account tab to separate page #98

frontend/src/component/navigation.vue

@@ -443,7 +443,7 @@
           </v-list-tile-content>
         </v-list-tile>
 
-        <v-list-tile v-show="!isPublic && auth"  to="/settings/account" class="p-profile">
+        <v-list-tile v-show="!isPublic && auth"  to="/account" 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>

frontend/src/pages/profile.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="p-page p-page-settings">
+    <v-tabs
+        v-model="active"
+        flat
+        grow
+        touchless
+        color="secondary"
+        slider-color="secondary-dark"
+        :height="$vuetify.breakpoint.smAndDown ? 48 : 64"
+    >
+      <v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class" ripple
+             @click="changePath(item.path)">
+        <v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
+        <template v-else>
+          <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }}
+        </template>
+      </v-tab>
+
+      <v-tabs-items touchless>
+        <v-tab-item v-for="(item, index) in tabs" :key="index" lazy>
+          <component :is="item.component"></component>
+        </v-tab-item>
+      </v-tabs-items>
+    </v-tabs>
+  </div>
+</template>
+
+<script>
+import Account from "pages/settings/account.vue";
+
+function initTabs(flag, tabs) {
+  let i = 0;
+  while(i < tabs.length) {
+    if(!tabs[i][flag]) {
+      tabs.splice(i,1);
+    } else {
+      i++;
+    }
+  }
+}
+
+export default {
+  name: 'PPageProfile',
+  props: {
+    tab: String,
+  },
+  data() {
+    const isDemo = this.$config.get("demo");
+    const isPublic = this.$config.get("public");
+    const tabs = [
+      {
+        'name': 'settings-account',
+        'component': Account,
+        'label': this.$gettext('Account'),
+        'class': '',
+        'path': '/account',
+        'icon': 'person',
+        'public': false,
+        'admin': true,
+        'demo': true,
+      },
+    ];
+
+    if(isDemo) {
+      initTabs("demo", tabs);
+    } else if(isPublic) {
+      initTabs("public", tabs);
+    }
+
+    let active = 0;
+
+    if (typeof this.tab === 'string' && this.tab !== '') {
+      active = tabs.findIndex((t) => t.name === this.tab);
+    }
+
+    return {
+      tabs: tabs,
+      demo: isDemo,
+      public: isPublic,
+      readonly: this.$config.get("readonly"),
+      active: active,
+      rtl: this.$rtl,
+    };
+  },
+  methods: {
+    changePath: function (path) {
+      if (this.$route.path !== path) {
+        this.$router.replace(path);
+      }
+    }
+  },
+};
+</script>

frontend/src/pages/settings.vue

@@ -31,7 +31,6 @@ import General from "pages/settings/general.vue";
 import Library from "pages/settings/library.vue";
 import Advanced from "pages/settings/advanced.vue";
 import Sync from "pages/settings/sync.vue";
-import Account from "pages/settings/account.vue";
 
 function initTabs(flag, tabs) {
   let i = 0;
@@ -97,17 +96,6 @@ export default {
         'admin': true,
         'demo': true,
       },
-      {
-        'name': 'settings-account',
-        'component': Account,
-        'label': this.$gettext('Account'),
-        'class': '',
-        'path': '/settings/account',
-        'icon': 'person',
-        'public': false,
-        'admin': true,
-        'demo': true,
-      },
     ];
 
     if(isDemo) {

frontend/src/routes.js

@@ -44,6 +44,7 @@ import About from "pages/about/about.vue";
 import Feedback from "pages/about/feedback.vue";
 import License from "pages/about/license.vue";
 import Help from "pages/help.vue";
+import Profile from "pages/profile.vue";
 import { $gettext } from "common/vm";
 import { config, session } from "./session";
 import Acl, { Constants } from "./common/acl";
@@ -419,13 +420,12 @@ export default [
     props: { tab: "settings-sync" },
   },
   {
-    name: "settings_account",
-    path: "/settings/account",
-    component: Settings,
+    name: "profile_account",
+    path: "/account",
+    component: Profile,
     meta: {
       title: $gettext("Settings"),
       auth: true,
-      settings: true,
       background: "application-light",
     },
     props: { tab: "settings-account" },