Allow custom page icons (openhab#2340)

This adds the ability to set custom icons for pages. The custom icons can be any icons available to the the oh-icon component. They are visible in the side bar and in the page settings list. Signed-off-by: Justin Georgi <[email protected]>
JustinGeorgi · Feb 11, 2024 · 946b499 · 946b499
1 parent 7c78241
commit 946b499
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -27,7 +27,7 @@
                         :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)" />
+            <oh-icon slot="media" :icon="pageIcon(page)" />
           </f7-list-item>
         </f7-list>
         <f7-block-title v-if="$store.getters.isAdmin" v-t="'sidebar.administration'" />
@@ -518,21 +518,22 @@ export default {
       return false
     },
     pageIcon (page) {
+      if (page.config && page.config.icon) return page.config.icon
       switch (page.component) {
         case 'Sitemap':
-          return 'menu'
+          return 'f7:menu'
         case 'oh-layout-page':
-          return 'rectangle_grid_2x2'
+          return 'f7:rectangle_grid_2x2'
         case 'oh-tabs-page':
-          return 'squares_below_rectangle'
+          return 'f7:squares_below_rectangle'
         case 'oh-map-page':
-          return 'map'
+          return 'f7:map'
         case 'oh-plan-page':
-          return 'square_stack_3d_up'
+          return 'f7:square_stack_3d_up'
         case 'oh-chart-page':
-          return 'graph_square'
+          return 'f7:graph_square'
         default:
-          return 'tv'
+          return 'f7:tv'
       }
     },
     login () {

diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/page-settings.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/page-settings.vue
@@ -24,6 +24,7 @@
               <f7-toggle slot="after" :checked="page.config.sidebar" @toggle:change="page.config.sidebar = $event" />
             </f7-list-item>
             <f7-list-input label="Sidebar order" type="number" placeholder="Assign order index to rearrange pages on sidebar" :value="page.config.order" @input="page.config.order = $event.target.value" clear-button />
+            <f7-list-input label="Icon" type="text" placeholder="Assign a custom icon" :value="page.config.icon" @input="page.config.icon = $event.target.value" clear-button />
           </f7-list>
         </f7-accordion-content>
       </f7-list-item>

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
@@ -112,7 +112,7 @@
                 </f7-chip>
               </div>
               <!-- <span slot="media" class="item-initial">{{page.config.label[0].toUpperCase()}}</span> -->
-              <f7-icon slot="media" :color="page.config.sidebar || page.uid === 'overview' ? '' : 'gray'" :f7="getPageIcon(page)" :size="32" />
+              <oh-icon slot="media" :color="page.config.sidebar || page.uid === 'overview' ? '' : 'gray'" :icon="getPageIcon(page)" :height="32" :width="32" />
             </f7-list-item>
           </f7-list-group>
         </f7-list>
@@ -160,13 +160,13 @@ export default {
       groupBy: 'alphabetical',
       showCheckboxes: false,
       pageTypes: [
-        { type: 'sitemap', label: 'Sitemap', componentType: 'Sitemap', icon: 'menu' },
-        { type: 'layout', label: 'Layout', componentType: 'oh-layout-page', icon: 'rectangle_grid_2x2' },
-        { type: 'home', label: 'Home', componentType: 'oh-home-page', icon: 'house' },
-        { type: 'tabs', label: 'Tabbed', componentType: 'oh-tabs-page', icon: 'squares_below_rectangle' },
-        { type: 'map', label: 'Map', componentType: 'oh-map-page', icon: 'map' },
-        { type: 'plan', label: 'Floor plan', componentType: 'oh-plan-page', icon: 'square_stack_3d_up' },
-        { type: 'chart', label: 'Chart', componentType: 'oh-chart-page', icon: 'graph_square' }
+        { type: 'sitemap', label: 'Sitemap', componentType: 'Sitemap', icon: 'f7:menu' },
+        { type: 'layout', label: 'Layout', componentType: 'oh-layout-page', icon: 'f7:rectangle_grid_2x2' },
+        { type: 'home', label: 'Home', componentType: 'oh-home-page', icon: 'f7:house' },
+        { type: 'tabs', label: 'Tabbed', componentType: 'oh-tabs-page', icon: 'f7:squares_below_rectangle' },
+        { type: 'map', label: 'Map', componentType: 'oh-map-page', icon: 'f7:map' },
+        { type: 'plan', label: 'Floor plan', componentType: 'oh-plan-page', icon: 'f7:square_stack_3d_up' },
+        { type: 'chart', label: 'Chart', componentType: 'oh-chart-page', icon: 'f7:graph_square' }
       ]
     }
   },
@@ -280,9 +280,10 @@ export default {
       return this.pageTypes.find(t => t.componentType === page.component)
     },
     getPageIcon (page) {
-      if (page.uid === 'overview') return 'house'
+      if (page.uid === 'overview') return 'f7:house'
+      if (page.config && page.config.icon) return page.config.icon
       const pageType = this.pageTypes.find(t => t.componentType === page.component)
-      return (pageType) ? pageType.icon : 'tv'
+      return (pageType) ? pageType.icon : 'f7:tv'
     },
     removeSelected () {
       const vm = this