Fixes/Improvements for sidebar highlighting, settings page & add-on s…

…tore (#2053)

Follow-up for #1997.

- Addresses
https://github.com/openhab/openhab-webui/pull/1997/files#r1313446378:
Use filled icon for the add-on store.
- Fixes #2049: Fix sidebar highlighting for add-on settings and add-on
store pages.
- Fixes #2028: Fix tab is resetted to bindings when reloading the add-on
store (by using seperate routes for all tabs, therefore addresses
#1997 (comment)).
- Closes #2048: Expand system settings by default on large screens where
three columns are used.
- Localize the "Show All" buttons.

---------

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
Co-authored-by: Yannick Schaus <github@schaus.net>

bundles/org.openhab.ui/web/src/components/addons/addon-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-link v-if="addon" class="addon-card padding-right-half" :href="addon.uid">
+  <f7-link v-if="addon" class="addon-card padding-right-half" :href="'/addons/' + addon.uid">
     <div class="addon-card-inner card">
       <div class="addon-card-headline">
         <div>{{ headline || autoHeadline || "&nbsp;" }}</div>

bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue

@@ -3,7 +3,7 @@
     v-if="addon"
     class="addon-list-item padding-right-half"
     :title="addon.label"
-    :link="addon.uid">
+    :link="'/addons/' + addon.uid">
     <div v-if="addon.verifiedAuthor" slot="subtitle">
       {{ addon.author }}
       <f7-icon v-if="addon.verifiedAuthor" size="15" :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill" style="margin-top: -3px" />

bundles/org.openhab.ui/web/src/components/app.vue

@@ -24,77 +24,80 @@
           <f7-icon slot="media" ios="f7:menu" aurora="f7:menu" md="material:list"></f7-icon>
         </f7-list-item> -->
           <f7-list-item v-for="page in pages" :animate="false" :key="page.uid"
-                        :class="{ currentsection: currentUrl === '/page/' + page.uid || currentUrl.indexOf('/page/' + page.uid + '/') >= 0 }"
+                        :class="{ currentsection: currentUrl === '/page/' + page.uid || currentUrl.indexOf('/page/' + page.uid + '/') === 0 }"
                         :link="'/page/' + page.uid"
                         :title="page.config.label" view=".view-main" panel-close>
             <f7-icon slot="media" :f7="pageIcon(page)" />
           </f7-list-item>
         </f7-list>
         <f7-block-title v-if="$store.getters.isAdmin" v-t="'sidebar.administration'" />
+        <!-- Settings -->
         <f7-list class="admin-links" v-if="$store.getters.isAdmin">
           <f7-list-item link="/settings/" :title="$t('sidebar.settings')" view=".view-main" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/services/') >= 0 }">
+                        :class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/services/') === 0 || currentUrl.indexOf('/settings/addons/') === 0 || currentUrl.indexOf('/settings/persistence/') === 0 }">
             <f7-icon slot="media" ios="f7:gear_alt_fill" aurora="f7:gear_alt_fill" md="material:settings" color="gray" />
           </f7-list-item>
           <li v-if="showSettingsSubmenu">
             <ul class="menu-sublinks">
               <f7-list-item v-if="$store.getters.apiEndpoint('things')" link="/settings/things/" title="Things" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/things') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/things') === 0 }">
                 <f7-icon slot="media" f7="lightbulb" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('items')" link="/settings/model/" title="Model" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/model') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/model') === 0 }">
                 <f7-icon slot="media" f7="list_bullet_indent" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('items')" link="/settings/items/" title="Items" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/items') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/items') === 0 }">
                 <f7-icon slot="media" f7="square_on_circle" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('ui')" link="/settings/pages/" title="Pages" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/pages') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/pages') === 0 }">
                 <f7-icon slot="media" f7="tv" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/rules/" title="Rules" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/rules') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/rules') === 0 }">
                 <f7-icon slot="media" f7="wand_stars" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/scenes/" title="Scenes" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/scenes') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/scenes') === 0 }">
                 <f7-icon slot="media" f7="film" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/scripts/" title="Scripts" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/scripts') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/scripts') === 0 }">
                 <f7-icon slot="media" f7="doc_plaintext" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/schedule/" title="Schedule" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/schedule') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/settings/schedule') === 0 }">
                 <f7-icon slot="media" f7="calendar" color="gray" />
               </f7-list-item>
             </ul>
           </li>
 
-          <f7-list-item link="/settings/addons/" :title="$t('sidebar.addOnStore')" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl.indexOf('/settings/addons/') >= 0 }">
-            <f7-icon slot="media" ios="f7:bag" aurora="f7:bag" md="material:shopping_bag" color="gray" />
+          <!-- Add-on Store -->
+          <f7-list-item link="/addons/" :title="$t('sidebar.addOnStore')" panel-close :animate="false"
+                        :class="{ currentsection: currentUrl.indexOf('/addons/') === 0 }">
+            <f7-icon slot="media" ios="f7:bag_fill" aurora="f7:bag_fill" md="material:shopping_bag" color="gray" />
           </f7-list-item>
 
+          <!-- Developer Tools -->
           <f7-list-item link="/developer/" :title="$t('sidebar.developerTools')" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl.indexOf('/developer/') >= 0 && currentUrl.indexOf('/developer/widgets') < 0 &&
+                        :class="{ currentsection: currentUrl.indexOf('/developer/') === 0 && currentUrl.indexOf('/developer/widgets') < 0 &&
                           currentUrl.indexOf('/developer/blocks') < 0 && currentUrl.indexOf('/developer/api-explorer') < 0 }">
-            <f7-icon slot="media" ios="f7:exclamationmark_shield_fill" aurora="f7:exclamationmark_shield_fill" md="material:extension" color="gray" />
+            <f7-icon slot="media" ios="f7:wrench_fill" aurora="f7:wrench_fill" md="material:construction" color="gray" />
           </f7-list-item>
           <li v-if="showDeveloperSubmenu">
             <ul class="menu-sublinks">
               <f7-list-item v-if="$store.getters.apiEndpoint('ui')" link="/developer/widgets/" title="Widgets" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/developer/widgets') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/developer/widgets') === 0 }">
                 <f7-icon slot="media" f7="rectangle_on_rectangle_angled" color="gray" />
               </f7-list-item>
               <f7-list-item v-if="$store.getters.apiEndpoint('ui')" link="/developer/blocks/" title="Block Libraries" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/developer/blocks') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/developer/blocks') === 0 }">
                 <f7-icon slot="media" f7="ticket" color="gray" />
               </f7-list-item>
               <f7-list-item link="/developer/api-explorer" title="API Explorer" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/developer/api-explorer') >= 0 }">
+                            :class="{ currentsection: currentUrl.indexOf('/developer/api-explorer') === 0 }">
                 <f7-icon slot="media" f7="burn" color="gray" />
               </f7-list-item>
               <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperSidebar')" title="Sidebar" view=".view-main" panel-close :animate="false" no-chevron>
@@ -753,7 +756,7 @@ export default {
 
       this.$f7.on('pageBeforeIn', (page) => {
         if (page.route && page.route.url) {
-          this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0 && page.route.url.indexOf('addons') === -1
+          this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0 || page.route.url.indexOf('/settings/addons/') === 0
           this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
           this.currentUrl = page.route.url
         }

bundles/org.openhab.ui/web/src/js/routes.js

@@ -11,11 +11,11 @@ const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../
 
 const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/menu/settings-menu.vue')
 const ServiceSettingsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/services/service-settings.vue')
-const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-list.vue')
-const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')
-const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addon-config.vue')
-const AddonsStorePage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-store.vue')
-const AddonDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addon-details.vue')
+const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addons-list.vue')
+const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addons-add.vue')
+const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addon-config.vue')
+const AddonsStorePage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addons-store.vue')
+const AddonDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addon-details.vue')
 
 const ItemsListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/items-list-vlist.vue')
 const ItemDetailsPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/item-details.vue')
@@ -318,11 +318,6 @@ export default [
           {
             path: ':addonId',
             beforeEnter: [enforceAdminForRoute],
-            async: loadAsync(AddonDetailsPage)
-          },
-          {
-            path: ':addonId/config',
-            beforeEnter: [enforceAdminForRoute],
             async: loadAsync(AddonsConfigureBindingPage)
           }
         ]
@@ -335,6 +330,43 @@ export default [
       }
     ]
   },
+  {
+    path: '/addons/',
+    beforeEnter: [enforceAdminForRoute],
+    async: loadAsync(AddonsStorePage),
+    routes: [
+      {
+        path: 'bindings/',
+        beforeEnter: [enforceAdminForRoute],
+        async: loadAsync(AddonsStorePage, { initialTab: 'bindings' })
+      },
+      {
+        path: 'automation/',
+        beforeEnter: [enforceAdminForRoute],
+        async: loadAsync(AddonsStorePage, { initialTab: 'automation' })
+      },
+      {
+        path: 'ui/',
+        beforeEnter: [enforceAdminForRoute],
+        async: loadAsync(AddonsStorePage, { initialTab: 'ui' })
+      },
+      {
+        path: 'other/',
+        beforeEnter: [enforceAdminForRoute],
+        async: loadAsync(AddonsStorePage, { initialTab: 'other' })
+      },
+      {
+        path: 'search/',
+        beforeEnter: [enforceAdminForRoute],
+        async: loadAsync(AddonsStorePage, { initialTab: 'search' })
+      },
+      {
+        path: ':addonId',
+        beforeEnter: [enforceAdminForRoute],
+        async: loadAsync(AddonDetailsPage)
+      }
+    ]
+  },
   {
     path: '/developer/',
     beforeEnter: [enforceAdminForRoute],

bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details.vue → bundles/org.openhab.ui/web/src/pages/addons/addon-details.vue

@@ -30,7 +30,7 @@
                   <f7-button v-else-if="addon.installed" class="install-button" text="Remove" color="red" round small fill @click="openAddonPopup" />
                   <f7-button v-else class="install-button" :text="installableAddon(addon) ? 'Install' : 'Add'" color="blue" round small fill @click="openAddonPopup" />
                 </div>
-                <f7-link v-if="showConfig" icon-f7="gears" tooltip="Configure add-on" color="blue" :href="'/settings/addons/' + addonId + '/config'" round small />
+                <f7-link v-if="showConfig" icon-f7="gears" tooltip="Configure add-on" color="blue" :href="'/settings/addons/' + addonId" round small />
               </div>
             </div>
           </div>

bundles/org.openhab.ui/web/src/pages/settings/addons/addons-store.vue → bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue

@@ -198,6 +198,7 @@ export default {
   },
   methods: {
     onPageAfterIn () {
+      this.$f7router.updateCurrentUrl('/addons/' + this.currentTab + '/')
       this.load()
     },
     onPageBeforeOut () {
@@ -227,6 +228,7 @@ export default {
     switchTab (tab) {
       this.currentTab = ''
       this.$nextTick(() => {
+        this.$f7router.updateCurrentUrl('/addons/' + tab + '/')
         this.$f7.lazy.create('.page-addon-store')
         this.currentTab = tab
         if (this.currentTab === 'search') {

bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue → bundles/org.openhab.ui/web/src/pages/settings/menu/addon-section.vue

@@ -7,10 +7,10 @@
       <f7-list-item
         v-for="a in addonsSettings"
         :key="a.uid"
-        :link="'addons/' + a.uid + '/config'"
+        :link="'addons/' + a.uid"
         :title="a.label" />
       <f7-list-button v-if="!expanded && addonsInstalled.length > addonsSettings.length" color="blue" @click="expanded = true">
-        Show All
+        {{ $t('dialogs.showAll') }}
       </f7-list-button>
     </f7-list>
   </div>

bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue

@@ -16,7 +16,7 @@
         search-in=".item-title"
         :disable-button="!$theme.aurora" />
     </f7-navbar>
-    <f7-block class="block-narrow settings-menu" v-show="servicesLoaded && addonsLoaded">
+    <f7-block class="block-narrow after-big-title settings-menu" v-show="servicesLoaded && addonsLoaded">
       <f7-row>
         <f7-col class="settings-col" width="100" medium="50">
           <f7-block-title>Configuration</f7-block-title>
@@ -124,17 +124,17 @@
                 :link="'services/' + service.id"
                 :title="service.label" />
               <f7-list-button v-if="!showingAll('systemSettings')" color="blue" @click="$set(expandedTypes, 'systemSettings', true)">
-                Show All
+                {{ $t('dialogs.showAll') }}
               </f7-list-button>
             </f7-list>
           </div>
           <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && $f7.width < 1450">
-            <add-on-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
+            <addon-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
           </div>
         </f7-col>
         <f7-col width="33" class="add-on-col">
           <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && $f7.width >= 1450">
-            <add-on-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
+            <addon-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
           </div>
         </f7-col>
       </f7-row>
@@ -146,11 +146,11 @@
 </template>
 
 <script>
-import AddOnSection from './add-on-section.vue'
+import AddonSection from './addon-section.vue'
 
 export default {
   components: {
-    AddOnSection: AddOnSection
+    AddonSection: AddonSection
   },
   data () {
     return {
@@ -190,7 +190,9 @@ export default {
         'org.openhab.lsp'
       ],
 
-      expandedTypes: {}
+      expandedTypes: {
+        systemSettings: this.$f7.width >= 1450
+      }
     }
   },
   computed: {