Add a global component developer-dock-icon (#2369)

Also add the icon to widget-list and script-edit pages. Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
2024-02-18 20:56:31 +10:00 · 2024-02-18 20:56:31 +10:00 · af6174b9dc
parent 26673dc9f6
commit af6174b9dc
17 changed files with 47 additions and 41 deletions
--- a/bundles/org.openhab.ui/web/src/components/developer/developer-dock-icon.vue
+++ b/bundles/org.openhab.ui/web/src/components/developer/developer-dock-icon.vue
@ -0,0 +1,9 @@
+<template>
+  <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+  <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock', { 'dock': 'help', 'helpTab': 'current' })" />
+</template>
+
+<script>
+export default {
+}
+</script>
--- a/bundles/org.openhab.ui/web/src/js/app.js
+++ b/bundles/org.openhab.ui/web/src/js/app.js
@ -9,6 +9,7 @@ import OHIconComponent from '../components/widgets/system/oh-icon.vue'
 import ModelTreeviewItem from '../components/model/treeview-item.vue'
 import SitemapTreeviewItem from '../components/pagedesigner/sitemap/treeview-item.vue'
 import GenericWidgetComponent from '../components/widgets/generic-widget-component.vue'
+import DeveloperDockIcon from '../components/developer/developer-dock-icon.vue'

 // Import Framework7
 import Framework7 from 'framework7/framework7-lite.esm.bundle.js'
@ -80,3 +81,4 @@ Vue.component('oh-icon', OHIconComponent)
 Vue.component('model-treeview-item', ModelTreeviewItem)
 Vue.component('sitemap-treeview-item', SitemapTreeviewItem)
 Vue.component('generic-widget-component', GenericWidgetComponent)
+Vue.component('developer-dock-icon', DeveloperDockIcon)
--- a/bundles/org.openhab.ui/web/src/pages/about.vue
+++ b/bundles/org.openhab.ui/web/src/pages/about.vue
@ -2,8 +2,7 @@
  <f7-page name="about" class="page-about" @page:beforein="beforePageIn">
    <f7-navbar large :title-large="$t('about.title')" :title="$t('about.title')" :back-link="$t('dialogs.back')">
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
      </f7-nav-right>
    </f7-navbar>
    <f7-block class="block-narrow after-big-title">
--- a/bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue
+++ b/bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue
@ -16,8 +16,7 @@
        <span v-if="currentTab === 'search'">Search</span>
      </f7-nav-title>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link
          v-show="currentTab === 'search'"
          class="searchbar-enable"
--- a/bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue
@ -2,8 +2,7 @@
  <f7-page name="devtools" @page:beforeremove="onPageBeforeRemove">
    <f7-navbar title="Developer Tools" back-link="Back" back-link-url="/" back-link-force no-hairline>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar position="top">
--- a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-list.vue
@ -2,6 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn">
    <f7-navbar title="Widgets" back-link="Developer Tools" back-link-url="/developer/" back-link-force>
      <f7-nav-right>
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
    <f7-navbar title="Items" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>
--- a/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
@ -2,8 +2,7 @@
  <f7-page @page:init="onPageInit" @page:afterin="onPageAfterIn" class="page-settings">
    <f7-navbar large :large-transparent="false" title-large="Settings" title="Settings" back-link="Back" back-link-url="/home/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@ -1,9 +1,8 @@
 <template>
  <f7-page name="Model" :stacked="true" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" @click="selectItem(null)">
    <f7-navbar title="Semantic Model" back-link="Settings" back-link-url="/settings/" back-link-force>
-      <f7-nav-right v-if="$f7.width >= 1280">
-        <f7-link v-if="$store.state.developerDock" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+      <f7-nav-right>
+        <developer-dock-icon />
      </f7-nav-right>
      <f7-subnavbar :inner="false" v-show="initSearchbar">
        <f7-searchbar
--- 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
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
    <f7-navbar title="Pages" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>
--- a/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-settings.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-settings.vue
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
    <f7-navbar title="Persistence Settings" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right v-if="persistenceList.length > 0">
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
        <f7-link @click="save()" v-if="!$theme.md">
          Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
@ -1,11 +1,14 @@
 <template>
  <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
    <f7-navbar :title="isNewRule ? 'Create rule' : rule.name" back-link="Back" no-hairline>
-      <f7-nav-right v-if="isEditable">
-        <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
-        <f7-link @click="save()" v-if="!$theme.md">
-          Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
-        </f7-link>
+      <f7-nav-right>
+        <developer-dock-icon />
+        <template v-if="isEditable">
+          <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
+          <f7-link @click="save()" v-if="!$theme.md">
+            Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
+          </f7-link>
+        </template>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar position="top">
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
    <f7-navbar :title="type" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@ -1,17 +1,20 @@
 <template>
  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
    <f7-navbar :title="pageTitle" :subtitle="(!newScript) ? mode : undefined" back-link="Back">
-      <f7-nav-right v-if="isEditable && !newScript">
-        <f7-link @click="onSave()" v-if="$theme.md" icon-md="material:save" icon-only />
-        <f7-link @click="onSave()" v-if="!$theme.md">
-          Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
-        </f7-link>
-      </f7-nav-right>
-      <f7-nav-right v-else-if="isEditable && newScript">
-        <f7-link @click="createScript" v-if="$theme.md && newScript" icon-md="material:save" icon-only />
-        <f7-link @click="createScript" v-if="$theme.ios && newScript">
-          Create
-        </f7-link>
+      <f7-nav-right>
+        <developer-dock-icon />
+        <template v-if="isEditable && !newScript">
+          <f7-link @click="onSave()" v-if="$theme.md" icon-md="material:save" icon-only />
+          <f7-link @click="onSave()" v-if="!$theme.md">
+            Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
+          </f7-link>
+        </template>
+        <template v-else-if="isEditable && newScript">
+          <f7-link @click="createScript" v-if="$theme.md && newScript" icon-md="material:save" icon-only />
+          <f7-link @click="createScript" v-if="$theme.ios && newScript">
+            Create
+          </f7-link>
+        </template>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar v-if="!newScript && ready" position="bottom">
--- a/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
    <f7-navbar title="Schedule" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
    <f7-navbar title="Things" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>
--- a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
@ -2,8 +2,7 @@
  <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
    <f7-navbar title="Transformations" back-link="Settings" back-link-url="/settings/" back-link-force>
      <f7-nav-right>
-        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
-        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+        <developer-dock-icon />
        <f7-link icon-md="material:done_all" @click="toggleCheck()"
                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
      </f7-nav-right>