Autofocus most searchbars on desktop (#799)

Focuses searchbars on most dialog boxes
and pages when in desktop mode.
Closes #677.

Fixes searching on new thing type selection screen.
Fixes #683.

Partial styling fix for dark mode w/ filled bars, fixes #780.

Disable smart select popup animations when page transitions
are disabled.

Signed-off-by: Yannick Schaus <github@schaus.net>

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

@@ -481,6 +481,9 @@ export default {
       } else {
         this.$$('html').removeClass('theme-dark')
       }
+      if (this.themeOptions.pageTransitionAnimation === 'disabled') {
+        this.$$('html').addClass('no-page-transitions')
+      }
       if (localStorage.getItem('openhab.ui:panel.visibleBreakpointDisabled') === 'true') {
         this.visibleBreakpointDisabled = true
         this.$nextTick(() => this.$f7.panel.get('left').disableVisibleBreakpoint())
@@ -595,6 +598,12 @@ export default {
         this.toggleDeveloperSidebar()
       })
 
+      this.$f7.on('smartSelectOpened', (smartSelect) => {
+        if (smartSelect && smartSelect.searchbar && this.$device.desktop) {
+          smartSelect.searchbar.$inputEl.focus()
+        }
+      })
+
       if (window) {
         window.addEventListener('keydown', this.keyDown)
       }

bundles/org.openhab.ui/web/src/css/app.styl

@@ -14,9 +14,14 @@ html
   --f7-list-item-header-line-height 1.3
   --f7-label-line-height 1.3
   --f7-list-item-after-line-height 1.3
-  // seems to reduce the problems with the mouse wheel not working on Chrome
-  // .smart-select-popup.popup.modal-in, .smart-select-popup.popup.modal-out
-  //   transition-duration 1ms
+
+  // disable all searchbar backdrops on desktop devices
+  .searchbar-backdrop
+    display none
+
+.no-page-transitions
+  .smart-select-popup.popup.modal-in, .smart-select-popup.popup.modal-out
+    transition-duration 1ms
 
 /* Custom color theme properties */
 :root
@@ -73,8 +78,11 @@ html
 
   --f7-navbar-subtitle-text-color rgba(255,255,255,0.85)
   --f7-navbar-border-color transparent
-  --f7-searchbar-input-bg-color #fff
   --f7-sheet-border-color transparent
+  .searchbar
+    --f7-searchbar-input-bg-color #fff
+    input
+      --f7-searchbar-input-text-color #000
 
   .navbar-large-transparent
     --f7-navbar-large-title-text-color #000

bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-list.vue

@@ -8,6 +8,7 @@
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
+          ref="searchbar"
           class="searchbar-widgets"
           :init="initSearchbar"
           search-container=".widgets-list"
@@ -116,7 +117,14 @@ export default {
         })
         this.loading = false
         this.ready = true
-        setTimeout(() => { this.initSearchbar = true })
+        setTimeout(() => {
+          this.initSearchbar = true
+          this.$nextTick(() => {
+            if (this.$device.desktop && this.$refs.searchbar) {
+              this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+            }
+          })
+        })
       })
     },
     toggleCheck () {

bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue

@@ -8,6 +8,7 @@
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
+          ref="searchbar"
           class="searchbar-items"
           :init="initSearchbar"
           search-container=".virtual-list"
@@ -157,7 +158,14 @@ export default {
           this.ready = true
         }
 
-        setTimeout(() => { this.initSearchbar = true })
+        setTimeout(() => {
+          this.initSearchbar = true
+          this.$nextTick(() => {
+            if (this.$device.desktop && this.$refs.searchbar) {
+              this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+            }
+          })
+        })
         if (!this.eventSource) this.startEventSource()
       })
     },

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

@@ -46,7 +46,7 @@
     <f7-block class="block-narrow">
       <f7-col>
         <f7-block-title class="searchbar-hide-on-search"><span v-if="ready">{{pages.length}} pages</span><span v-else>Loading...</span></f7-block-title>
-        <div class="padding-left padding-right" v-show="!ready || pages.length > 0">
+        <div class="padding-left padding-right searchbar-found" v-show="!ready || pages.length > 0">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">Alphabetical</f7-button>
             <f7-button :active="groupBy === 'type'" @click="switchGroupOrder('type')">By type</f7-button>
@@ -196,7 +196,15 @@ export default {
 
         this.loading = false
         this.ready = true
-        setTimeout(() => { this.initSearchbar = true; this.$refs.listIndex.update() })
+        setTimeout(() => {
+          this.initSearchbar = true
+          this.$refs.listIndex.update()
+          this.$nextTick(() => {
+            if (this.$device.desktop && this.$refs.searchbar) {
+              this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+            }
+          })
+        })
       })
     },
     switchGroupOrder (groupBy) {

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

@@ -8,6 +8,7 @@
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
+          ref="searchbar"
           class="searchbar-rules"
           :init="initSearchbar"
           search-container=".rules-list"
@@ -170,6 +171,11 @@ export default {
         setTimeout(() => {
           this.initSearchbar = true
           if (this.$refs.listIndex) this.$refs.listIndex.update()
+          this.$nextTick(() => {
+            if (this.$device.desktop && this.$refs.searchbar) {
+              this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+            }
+          })
         })
 
         if (!this.eventSource) this.startEventSource()

bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue

@@ -4,6 +4,7 @@
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
+          ref="searchbar"
           class="searchbar-things"
           :init="initSearchbar"
           search-container=".binding-list"
@@ -80,6 +81,11 @@ export default {
         this.loading = false
         this.initSearchbar = true
         this.ready = true
+        this.$nextTick(() => {
+          if (this.$device.desktop && this.$refs.searchbar) {
+            this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+          }
+        })
       })
       this.$oh.api.get('/rest/inbox').then((data) => {
         this.inbox = data

bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue

@@ -4,9 +4,11 @@
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
+          ref="searchbar"
           class="searchbar-things"
           :init="initSearchbar"
           search-container=".thing-type-list"
+          search-item=".media-item"
           search-in=".item-title, .item-header, .item-footer"
           :disable-button="!$theme.aurora"
         ></f7-searchbar>
@@ -21,7 +23,7 @@
         </div>
         <p class="margin-left margin-right" style="height: 30px" id="scan-progress"></p>
         <f7-block-title v-if="discoverySupported && scanResults.length">Discovered Things</f7-block-title>
-        <f7-list class="col" v-if="scanResults.length">
+        <f7-list class="col thing-type-list" v-if="scanResults.length">
           <f7-list-item v-for="entry in scanResults"
             :key="entry.thingUID"
             :link="true"
@@ -160,6 +162,14 @@ export default {
       this.$oh.api.get('/rest/inbox').then((data) => {
         this.loading = false
         this.scanResults = data.filter((e) => e.thingTypeUID.split(':')[0] === this.bindingId && e.flag !== 'IGNORED')
+        const searchbar = this.$refs.searchbar.$el.f7Searchbar
+        const filterQuery = searchbar.query
+        this.initSearchbar = false
+        this.$nextTick(() => {
+          this.initSearchbar = true
+          searchbar.clear()
+          searchbar.search(filterQuery)
+        })
       })
     },
     approve (entry) {

bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue

@@ -47,7 +47,7 @@
           <label @click="toggleIgnored" style="cursor:pointer">Show ignored</label> <f7-checkbox :checked="showIgnored" @change="toggleIgnored"></f7-checkbox>
         </div>
         </f7-block-title>
-        <div class="padding-left padding-right" v-show="!ready || inboxCount > 0">
+        <div class="padding-left padding-right searchbar-found" v-show="!ready || inboxCount > 0">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">Alphabetical</f7-button>
             <f7-button :active="groupBy === 'binding'" @click="switchGroupOrder('binding')">By binding</f7-button>
@@ -164,7 +164,14 @@ export default {
         this.initSearchbar = true
         this.loading = false
         this.ready = true
-        setTimeout(() => { this.$refs.listIndex.update() })
+        setTimeout(() => {
+          this.$refs.listIndex.update()
+          this.$nextTick(() => {
+            if (this.$device.desktop && this.$refs.searchbar) {
+              this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+            }
+          })
+        })
       })
     },
     switchGroupOrder (groupBy) {

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

@@ -46,7 +46,7 @@
     <f7-block class="block-narrow">
       <f7-col>
         <f7-block-title class="searchbar-hide-on-search"><span v-if="ready">{{things.length}} things</span><span v-else>Loading...</span></f7-block-title>
-        <div class="padding-left padding-right" v-show="!ready || things.length > 0">
+        <div class="searchbar-found padding-left padding-right" v-show="!ready || things.length > 0">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">Alphabetical</f7-button>
             <f7-button :active="groupBy === 'binding'" @click="switchGroupOrder('binding')">By binding</f7-button>
@@ -172,7 +172,10 @@ export default {
         this.initSearchbar = true
         this.loading = false
         this.ready = true
-        setTimeout(() => { this.$refs.listIndex.update() })
+        setTimeout(() => {
+          this.$refs.listIndex.update()
+          if (this.$device.desktop && this.$refs.searchbar) this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+        })
         if (!this.eventSource) this.startEventSource()
       })
       this.loadInbox()