Add intergrated Help Features

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

@@ -100,8 +100,8 @@
                             :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>
-                <f7-icon slot="media" :f7="$store.state.developerSidebar ? 'wrench_fill' : 'wrench'" color="gray" />
+              <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperDock')" title="Dock" view=".view-main" panel-close :animate="false" no-chevron>
+                <f7-icon slot="media" :f7="$store.state.developerDock ? 'wrench_fill' : 'wrench'" color="gray" />
               </f7-list-item> -->
             </ul>
           </li>
@@ -140,8 +140,8 @@
     <!-- <f7-view url="/panel-right/"></f7-view> -->
     </f7-panel>
 
-    <f7-panel v-if="showDeveloperSidebar" right :visible-breakpoint="1280" resizable>
-      <developer-sidebar />
+    <f7-panel v-if="showDeveloperDock" right :visible-breakpoint="1280" resizable>
+      <developer-dock :dock="activeDock" :helpTab="activeHelpTab" :toolTab="activeToolTab" />
     </f7-panel>
 
     <f7-block v-if="!ready && communicationFailureMsg" class="block-narrow">
@@ -248,7 +248,7 @@ import Framework7 from 'framework7/framework7-lite.esm.bundle.js'
 import cordovaApp from '../js/cordova-app.js'
 import routes from '../js/routes.js'
 import PanelRight from '../pages/panel-right.vue'
-import DeveloperSidebar from './developer/developer-sidebar.vue'
+import DeveloperDock from './developer/developer-dock.vue'
 import EmptyStatePlaceholder from '@/components/empty-state-placeholder.vue'
 
 import { loadLocaleMessages } from '@/js/i18n'
@@ -266,7 +266,7 @@ export default {
   components: {
     EmptyStatePlaceholder,
     PanelRight,
-    DeveloperSidebar
+    DeveloperDock
   },
   data () {
     let theme = localStorage.getItem('openhab.ui:theme')
@@ -370,7 +370,11 @@ export default {
 
       showSettingsSubmenu: false,
       showDeveloperSubmenu: false,
-      showDeveloperSidebar: false,
+      showDeveloperDock: false,
+      activeDock: 'tools',
+      activeToolTab: 'pin',
+      activeHelpTab: 'current',
+      quickStartShow: true,
       currentUrl: ''
     }
   },
@@ -501,6 +505,12 @@ export default {
 
           if (data[2]) dayjs.locale(data[2].key)
 
+          const page = data[0].find((p) => p.uid === 'overview')
+          if ((!page) || (page.component !== 'oh-layout-page') || (!page.slots || (!page.slots.default.length && !page.slots.masonry && !page.slots.canvas && !page.slots.grid))) {
+            if (this.quickStartShow) this.selectDeveloperDock({ 'dock': 'help', 'helpTab': 'quick' })
+            this.quickStartShow = false
+          }
+
           // finished with loading
           this.ready = true
           return Promise.resolve()
@@ -586,11 +596,19 @@ export default {
         this.$nextTick(() => this.$f7.panel.get('left').disableVisibleBreakpoint())
       }
     },
-    toggleDeveloperSidebar () {
+    toggleDeveloperDock () {
       if (!this.$store.getters.isAdmin) return
-      this.showDeveloperSidebar = !this.showDeveloperSidebar
-      if (this.showDeveloperSidebar) this.$store.dispatch('startTrackingStates')
-      this.$store.commit('setDeveloperSidebar', this.showDeveloperSidebar)
+      this.showDeveloperDock = !this.showDeveloperDock
+      if (this.showDeveloperDock) this.$store.dispatch('startTrackingStates')
+      this.$store.commit('setDeveloperDock', this.showDeveloperDock)
+    },
+    selectDeveloperDock (dockOpts) {
+      if (dockOpts) {
+        if (dockOpts.dock) this.activeDock = dockOpts.dock
+        if (dockOpts.helpTab) this.activeHelpTab = dockOpts.helpTab
+        if (dockOpts.toolTab) this.activeToolTab = dockOpts.toolTab
+      }
+      if (!this.showDeveloperDock) this.toggleDeveloperDock()
     },
     toggleVisibleBreakpoint () {
       this.$f7.panel.get('left').toggleVisibleBreakpoint()
@@ -599,7 +617,7 @@ export default {
     },
     keyDown (ev) {
       if (ev.keyCode === 68 && ev.shiftKey && ev.altKey) {
-        this.toggleDeveloperSidebar()
+        this.toggleDeveloperDock()
         ev.stopPropagation()
         ev.preventDefault()
       }
@@ -671,6 +689,7 @@ export default {
           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
+          this.$store.commit('setPagePath', this.currentUrl)
         }
       })
 
@@ -690,8 +709,12 @@ export default {
         this.updateThemeOptions()
       })
 
-      this.$f7.on('toggleDeveloperSidebar', () => {
-        this.toggleDeveloperSidebar()
+      this.$f7.on('toggleDeveloperDock', () => {
+        this.toggleDeveloperDock()
+      })
+
+      this.$f7.on('selectDeveloperDock', (opts) => {
+        this.selectDeveloperDock(opts)
       })
 
       this.$f7.on('smartSelectOpened', (smartSelect) => {

bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue

@@ -0,0 +1,67 @@
+<template>
+  <f7-page class="developer-dock">
+    <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" style="width: 100%" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'" />
+    <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 5px; margin-bottom: 5px">
+      <f7-button :active="dockView === 'tools'" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools'})">
+        Tools
+      </f7-button>
+      <f7-button :active="dockView === 'help'" @click="$f7.emit('selectDeveloperDock',{'dock': 'help'})">
+        Help
+      </f7-button>
+    </f7-segmented>
+    <f7-segmented v-if="dockView === 'tools'" strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0">
+      <f7-button :active="activeToolTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'pin'})" />
+      <f7-button :active="activeToolTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'events'})" />
+      <f7-button :active="activeToolTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'scripting'})" />
+      <f7-button :active="activeToolTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'tools'})" />
+    </f7-segmented>
+    <f7-segmented v-if="dockView === 'help'" strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0">
+      <f7-button :active="activeHelpTab === 'current'" icon-f7="doc_richtext" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'current'})" />
+      <f7-button :active="activeHelpTab === 'binding'" icon-f7="bag_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'binding'})" />
+      <f7-button :active="activeHelpTab === 'faq'" icon-f7="question_diamond_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'faq'})" />
+      <f7-button :active="activeHelpTab === 'quick'" icon-f7="cursor_rays" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'quick'})" />
+    </f7-segmented>
+    <developer-sidebar v-if="dockView === 'tools'" :activeToolTab="activeToolTab" />
+    <help-sidebar v-if="dockView === 'help'" :activeHelpTab="activeHelpTab" />
+  </f7-page>
+</template>
+
+<style lang="stylus">
+.panel-right.panel-in-breakpoint:before
+  position absolute
+  left 0
+  top 0
+  height 100%
+  width 1px
+  background rgba(0,0,0,0.1)
+  content ''
+  z-index 6000
+
+.developer-dock
+  scrollbar-width none /* Firefox */
+  -ms-overflow-style none  /* IE 10+ */
+</style>
+
+<script>
+import DeveloperSidebar from './developer-sidebar.vue'
+import HelpSidebar from './help-sidebar.vue'
+
+export default {
+  components: {
+    DeveloperSidebar,
+    HelpSidebar
+  },
+  props: ['dock', 'helpTab', 'toolTab'],
+  computed: {
+    dockView () {
+      return this.dock
+    },
+    activeHelpTab () {
+      return (this.helpTab || 'current')
+    },
+    activeToolTab () {
+      return (this.toolTab || 'pin')
+    }
+  }
+}
+</script>

bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue

@@ -1,21 +1,13 @@
 <template>
-  <f7-page class="developer-sidebar">
-    <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'">
-      <f7-subnavbar :inner="false" v-if="!$theme.md">
-        <f7-searchbar custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
-      </f7-subnavbar>
-    </f7-navbar>
-    <f7-subnavbar :inner="false" v-if="$theme.md">
+  <f7-block class="developer-sidebar">
+    <f7-row :inner="false" v-if="!$theme.md">
+      <f7-searchbar style="width: 100%" custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
+    </f7-row>
+    <f7-row style="width: 100%" :inner="false" v-if="$theme.md">
       <f7-searchbar custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
-    </f7-subnavbar>
+    </f7-row>
     <div v-if="!searching" class="developer-sidebar-content">
-      <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))">
-        <f7-button :active="activeTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="activeTab = 'pin'" />
-        <f7-button :active="activeTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="activeTab = 'events'" />
-        <f7-button :active="activeTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="activeTab = 'scripting'" />
-        <f7-button :active="activeTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="activeTab = 'tools'" />
-      </f7-segmented>
-      <div v-if="activeTab === 'pin'">
+      <div v-if="activeToolTab === 'pin'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
             Pinned Objects
@@ -196,7 +188,7 @@
         </f7-block>
       </div>
 
-      <div v-else-if="activeTab === 'events'">
+      <div v-else-if="activeToolTab === 'events'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal display-flex" medium>
             <span>Event Monitor</span>
@@ -222,7 +214,7 @@
         </f7-block>
       </div>
 
-      <div v-else-if="activeTab === 'scripting'">
+      <div v-else-if="activeToolTab === 'scripting'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
             Code Tools
@@ -241,7 +233,7 @@
         </f7-block>
       </div>
 
-      <div v-else-if="activeTab === 'tools'">
+      <div v-else-if="activeToolTab === 'tools'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
             Create Shortcuts
@@ -311,26 +303,19 @@
       <item-standalone-control v-if="openedItem" :item="openedItem" :context="context" :no-border="true" />
     </f7-popover>
     <search-results v-if="searching" :searchResults="searchResults" :pinnedObjects="pinnedObjects" @pin="pin" @unpin="unpin" :cachedObjects="cachedObjects" :loading="searchResultsLoading" />
-  </f7-page>
+  </f7-block>
 </template>
 
 <style lang="stylus">
-.panel-right.panel-in-breakpoint:before
-  position absolute
-  left 0
-  top 0
-  height 100%
-  width 1px
-  background rgba(0,0,0,0.1)
-  content ''
-  z-index 6000
-
 .developer-sidebar
   scrollbar-width none /* Firefox */
   -ms-overflow-style none  /* IE 10+ */
+  margin 0 !important
+  padding 0
+  padding-top 0.3rem
+  width 100%
 
   .developer-sidebar-content
-    margin-top var(--f7-subnavbar-height)
     padding-top 0.3rem
 
   &.page
@@ -364,12 +349,12 @@ export default {
     SearchResults,
     ExpressionTester
   },
+  props: ['activeToolTab'],
   data () {
     return {
       searchQuery: '',
       searchResultsLoading: false,
       searching: false,
-      activeTab: 'pin',
       monitoredItems: [],
       sseClient: null,
       eventTopicFilter: '',