Support swipe gesture to show the left menu (#4370)

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>

Author: jimtng

bundles/org.openhab.ui/web/src/App.vue

@@ -6,7 +6,13 @@
       visibility: userStore.user || componentsStore.page('overview') || communicationFailureMsg ? '' : 'hidden'
     }">
     <!-- Left Panel -->
-    <f7-panel v-show="ready" left :cover="showSidebar ? true : null" class="sidebar" :visible-breakpoint="960">
+    <f7-panel
+      v-show="ready"
+      left
+      :cover="showSidebar ? true : null"
+      class="sidebar"
+      :visible-breakpoint="960"
+      :swipe="!uiOptionsStore.disableLeftPanelSwipe">
       <f7-page>
         <!-- openHAB Logo -->
         <f7-link href="/overview/" class="openhab-logo no-ripple" panel-close @click.capture="handleSidebarClick">

bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json

@@ -17,6 +17,7 @@
   "about.miscellaneous.home.background.white": "White",
   "about.miscellaneous.home.hideChatInput": "Hide chat input box on home page",
   "about.miscellaneous.home.disableCardExpansionAnimation": "Disable card expansion animations",
+  "about.miscellaneous.theme.disableLeftPanelSwipe": "Disable left panel swipe gesture",
   "about.miscellaneous.theme.disablePageTransition": "Disable page transition animations",
   "about.miscellaneous.webaudio.enable": "Enable Web Audio sink support",
   "about.miscellaneous.commandItem.title": "Listen for UI commands to ",

bundles/org.openhab.ui/web/src/components/theme-switcher.vue

@@ -86,6 +86,10 @@
             <span>{{ t('about.miscellaneous.home.disableCardExpansionAnimation') }}</span>
             <f7-toggle v-model:checked="disableExpandableCardAnimation" />
           </f7-list-item>
+          <f7-list-item>
+            <span>{{ t('about.miscellaneous.theme.disableLeftPanelSwipe') }}</span>
+            <f7-toggle v-model:checked="disableLeftPanelSwipe" />
+          </f7-list-item>
           <f7-list-item>
             <span>{{ t('about.miscellaneous.theme.disablePageTransition') }}</span>
             <f7-toggle v-model:checked="disablePageTransitionAnimation" />
@@ -211,6 +215,7 @@ export default {
     },
     ...mapStores(useRuntimeStore, useUIOptionsStore),
     ...mapWritableState(useUIOptionsStore, [
+      'disableLeftPanelSwipe',
       'disablePageTransitionAnimation',
       'bars',
       'homeNavBar',

bundles/org.openhab.ui/web/src/js/stores/useUIOptionsStore.ts

@@ -40,6 +40,7 @@ export const useUIOptionsStore = defineStore('uiOptions', () => {
   const disableExpandableCardAnimation = ref<boolean>(_storedExpandableCardAnimation === 'disabled')
 
   const blocklyRenderer = ref<string | null>(localStorage.getItem('openhab.ui:blockly.renderer'))
+  const disableLeftPanelSwipe = ref<boolean>(localStorage.getItem('openhab.ui:theme.disableLeftPanelSwipe') === 'true')
   const disablePageTransitionAnimation = ref<boolean>(localStorage.getItem('openhab.ui:theme.disablepagetransition') === 'true')
 
   const hideChatInput = ref<boolean>(localStorage.getItem('openhab.ui:theme.home.hidechatinput') === 'true')
@@ -148,6 +149,15 @@ export const useUIOptionsStore = defineStore('uiOptions', () => {
     updateClasses()
   })
 
+  watch(disableLeftPanelSwipe, (newValue) => {
+    localStorage.setItem('openhab.ui:theme.disableLeftPanelSwipe', newValue.toString())
+    if (newValue) {
+      f7.panel.get('left').disableSwipe()
+    } else {
+      f7.panel.get('left').enableSwipe()
+    }
+  })
+
   watch(disablePageTransitionAnimation, (newValue) => {
     localStorage.setItem('openhab.ui:theme.disablepagetransition', newValue.toString())
     updateClasses()
@@ -339,6 +349,7 @@ export const useUIOptionsStore = defineStore('uiOptions', () => {
     homeBackground,
     disableExpandableCardAnimation,
     blocklyRenderer,
+    disableLeftPanelSwipe,
     disablePageTransitionAnimation,
     hideChatInput,
     webAudio,