feat(ui): change the breadcrumbs on settings modal (#1677)

Satellite-im · Feb 28, 2022 · b8351fa · b8351fa
1 parent 13ac0c6
commit b8351fa
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 35 deletions.
diff --git a/components/views/settings/Sidebar.vue b/components/views/settings/Sidebar.vue
@@ -13,6 +13,7 @@
 import Vue from 'vue'
 
 import { SidebarGrouping, SidebarLink } from '~/types/ui/sidebar'
+import { SettingsRoutes } from '~/store/ui/types'
 
 export default Vue.extend({
   props: {
@@ -38,27 +39,27 @@ export default Vue.extend({
           title: 'General',
           links: [
             {
-              to: 'personalize',
+              to: SettingsRoutes.PERSONALIZE,
               text: 'Personalize',
             },
             {
-              to: 'profile',
+              to: SettingsRoutes.PROFILE,
               text: 'Profile',
             },
             {
-              to: 'audio',
+              to: SettingsRoutes.AUDIO_AND_VIDEO,
               text: 'Audio & Video',
             },
             {
-              to: 'keybinds',
+              to: SettingsRoutes.KEY_BINDS,
               text: 'Keybinds',
             },
             {
-              to: 'accounts',
+              to: SettingsRoutes.ACCOUNTS_AND_DEVICES,
               text: 'Accounts & Devices',
             },
             {
-              to: 'privacy',
+              to: SettingsRoutes.PRIVACY,
               text: 'Privacy',
             },
           ] as Array<SidebarLink>,
@@ -67,15 +68,15 @@ export default Vue.extend({
           title: 'Realms & Security',
           links: [
             {
-              to: 'realms',
+              to: SettingsRoutes.REALMS,
               text: 'Realms',
             },
             {
-              to: 'storage',
+              to: SettingsRoutes.STORAGE,
               text: 'Storage',
             },
             {
-              to: 'network',
+              to: SettingsRoutes.NETWORK,
               text: 'Network',
             },
           ] as Array<SidebarLink>,
@@ -92,7 +93,7 @@ export default Vue.extend({
               text: 'Notifications',
             }, */
             {
-              to: 'info',
+              to: SettingsRoutes.INFO,
               text: 'App Info',
             },
           ] as Array<SidebarLink>,

diff --git a/components/views/settings/breadcrumbs/Breadcrumbs.html b/components/views/settings/breadcrumbs/Breadcrumbs.html
@@ -0,0 +1,6 @@
+<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
+  <ul>
+    <li class="is-active"><a>Settings</a></li>
+    <li class="is-active"><a>{{route}}</a></li>
+  </ul>
+</nav>
diff --git a/components/views/settings/breadcrumbs/Breadcrumbs.less b/components/views/settings/breadcrumbs/Breadcrumbs.less
@@ -0,0 +1,28 @@
+.breadcrumb {
+  a {
+    text-transform: capitalize;
+    &:extend(.font-accent);
+  }
+  li + li::before {
+    &:extend(.font-primary);
+  }
+  li.is-active a {
+    &:extend(.font-muted);
+  }
+  li.is-disabled a {
+    &:extend(.font-muted);
+  }
+  font-family: @primary-font;
+  font-size: @text-size;
+  li {
+    max-width: 100%;
+  }
+
+  li > a {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+}
diff --git a/components/views/settings/breadcrumbs/Breadcrumbs.vue b/components/views/settings/breadcrumbs/Breadcrumbs.vue
@@ -0,0 +1,27 @@
+<template src="./Breadcrumbs.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+
+export default Vue.extend({
+  computed: {
+    ...mapState(['ui']),
+    route() {
+      return `${this.ui.settingsRoute}`
+    },
+  },
+  methods: {
+    /**
+     * @method buildLink DocsTODO
+     * @description
+     * @param depth
+     * @returns
+     * @example
+     */
+    buildLink(depth: number) {
+      return `/${this.route.slice(0, depth + 1).join('/')}`
+    },
+  },
+})
+</script>
+<style scoped lang="less" src="./Breadcrumbs.less"></style>
diff --git a/components/views/settings/modal/Modal.html b/components/views/settings/modal/Modal.html
@@ -23,26 +23,44 @@
             v-on:click="toggleSidebar"
             class="menu--toggle"
           />
-          <UiBreadcrumbs />
+          <SettingsBreadcrumbs />
           <InteractablesClose :action="closeModal" />
           <SettingsPagesPersonalize
-            v-if="this.ui.settingsRoute === 'personalize'"
+            v-if="this.ui.settingsRoute === SettingsRoutes.PERSONALIZE"
+          />
+          <SettingsPagesAccounts
+            v-if="this.ui.settingsRoute === SettingsRoutes.ACCOUNTS_AND_DEVICES"
+          />
+          <SettingsPagesAudio
+            v-if="this.ui.settingsRoute === SettingsRoutes.AUDIO_AND_VIDEO"
           />
-          <SettingsPagesAccounts v-if="this.ui.settingsRoute === 'accounts'" />
-          <SettingsPagesAudio v-if="this.ui.settingsRoute === 'audio'" />
           <SettingsPagesDeveloper
-            v-if="this.ui.settingsRoute === 'developer'"
+            v-if="this.ui.settingsRoute === SettingsRoutes.DEVELOPER"
+          />
+          <SettingsPagesInfo
+            v-if="this.ui.settingsRoute === SettingsRoutes.INFO"
+          />
+          <SettingsPagesKeybinds
+            v-if="this.ui.settingsRoute === SettingsRoutes.KEY_BINDS"
           />
-          <SettingsPagesInfo v-if="this.ui.settingsRoute === 'info'" />
-          <SettingsPagesKeybinds v-if="this.ui.settingsRoute === 'keybinds'" />
           <SettingsPagesNotifications
             v-if="this.ui.settingsRoute === 'notifications'"
           />
-          <SettingsPagesProfile v-if="this.ui.settingsRoute === 'profile'" />
-          <SettingsPagesStorage v-if="this.ui.settingsRoute === 'storage'" />
-          <SettingsPagesNetwork v-if="this.ui.settingsRoute === 'network'" />
-          <SettingsPagesRealms v-if="this.ui.settingsRoute === 'realms'" />
-          <SettingsPagesPrivacy v-if="this.ui.settingsRoute === 'privacy'" />
+          <SettingsPagesProfile
+            v-if="this.ui.settingsRoute === SettingsRoutes.PROFILE"
+          />
+          <SettingsPagesStorage
+            v-if="this.ui.settingsRoute === SettingsRoutes.STORAGE"
+          />
+          <SettingsPagesNetwork
+            v-if="this.ui.settingsRoute === SettingsRoutes.NETWORK"
+          />
+          <SettingsPagesRealms
+            v-if="this.ui.settingsRoute === SettingsRoutes.REALMS"
+          />
+          <SettingsPagesPrivacy
+            v-if="this.ui.settingsRoute === SettingsRoutes.PRIVACY"
+          />
         </UiScroll>
       </swiper-slide>
     </swiper>

diff --git a/components/views/settings/modal/Modal.vue b/components/views/settings/modal/Modal.vue
@@ -4,6 +4,7 @@
 import { MenuIcon } from 'satellite-lucide-icons'
 import Vue from 'vue'
 import { mapState } from 'vuex'
+import { SettingsRoutes } from '~/store/ui/types'
 
 type Swiper = {
   $swiper: {
@@ -25,6 +26,7 @@ export default Vue.extend({
         noSwiping: !this.$device.isMobile,
         allowTouchMove: this.$device.isMobile,
       },
+      SettingsRoutes,
     }
   },
   computed: {

diff --git a/store/ui/types.ts b/store/ui/types.ts
@@ -123,19 +123,32 @@ export interface RecentGlyph {
   count: number
 }
 
-export type SettingsRoutes =
-  | 'personalize'
-  | 'profile'
-  | 'audio'
-  | 'keybinds'
-  | 'accounts'
-  | 'privacy'
-  | 'developer'
-  | 'info'
-  | 'notifications'
-  | 'storage'
-  | 'network'
-  | 'realms'
+export enum SettingsRoutes {
+  PERSONALIZE = 'personalize',
+  PROFILE = 'profile',
+  AUDIO_AND_VIDEO = 'audio & Video',
+  KEY_BINDS = 'keybinds',
+  ACCOUNTS_AND_DEVICES = 'accounts',
+  PRIVACY = 'privacy',
+  DEVELOPER = 'developer',
+  INFO = 'info',
+  NOTIFICATIONS = 'notifications',
+  STORAGE = 'storage',
+  NETWORK = 'network',
+  REALMS = 'realms',
+}
+// | 'personalize'
+// | 'profile'
+// | 'audio'
+// | 'keybinds'
+// | 'accounts'
+// | 'privacy'
+// | 'developer'
+// | 'info'
+// | 'notifications'
+// | 'storage'
+// | 'network'
+// | 'realms'
 
 export interface UIState {
   contextMenuStatus: boolean