From 60e35a118d5f0610ad7ff2bb1345426776f89fa9 Mon Sep 17 00:00:00 2001 From: Yannick Schaus Date: Wed, 13 Jan 2021 20:24:18 +0100 Subject: [PATCH] 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 --- .../org.openhab.ui/web/src/components/app.vue | 9 +++++++++ bundles/org.openhab.ui/web/src/css/app.styl | 16 ++++++++++++---- .../src/pages/developer/widgets/widget-list.vue | 10 +++++++++- .../pages/settings/items/items-list-vlist.vue | 10 +++++++++- .../web/src/pages/settings/pages/pages-list.vue | 12 ++++++++++-- .../web/src/pages/settings/rules/rules-list.vue | 6 ++++++ .../pages/settings/things/add/choose-binding.vue | 6 ++++++ .../settings/things/add/choose-thing-type.vue | 12 +++++++++++- .../pages/settings/things/inbox/inbox-list.vue | 11 +++++++++-- .../src/pages/settings/things/things-list.vue | 7 +++++-- 10 files changed, 86 insertions(+), 13 deletions(-) diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue index 17294b885..e4a918276 100644 --- a/bundles/org.openhab.ui/web/src/components/app.vue +++ b/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) } diff --git a/bundles/org.openhab.ui/web/src/css/app.styl b/bundles/org.openhab.ui/web/src/css/app.styl index c29fe7786..37d74e993 100644 --- a/bundles/org.openhab.ui/web/src/css/app.styl +++ b/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 diff --git 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 index dcb8213f5..2556a2610 100644 --- 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 @@ -8,6 +8,7 @@ { this.initSearchbar = true }) + setTimeout(() => { + this.initSearchbar = true + this.$nextTick(() => { + if (this.$device.desktop && this.$refs.searchbar) { + this.$refs.searchbar.f7Searchbar.$inputEl[0].focus() + } + }) + }) }) }, toggleCheck () { diff --git 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 index 489aae3ba..2cf336f98 100644 --- 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 @@ -8,6 +8,7 @@ { 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() }) }, 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 index 46a27b540..13ab82c85 100644 --- 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 @@ -46,7 +46,7 @@ {{pages.length}} pagesLoading... -
+
Alphabetical By type @@ -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) { diff --git 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 index 65b499735..5a5faa6e4 100644 --- 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 @@ -8,6 +8,7 @@ { 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() diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue index 7909c6fef..4c1852a89 100644 --- a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue +++ b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue @@ -4,6 +4,7 @@ { + 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 diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue index e7962b48d..7c80f67a1 100644 --- a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue +++ b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue @@ -4,9 +4,11 @@ @@ -21,7 +23,7 @@

Discovered Things - + { 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) { diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue index 95d20948d..ffed1de83 100644 --- a/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue +++ b/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue @@ -47,7 +47,7 @@
-
+
Alphabetical By binding @@ -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) { diff --git 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 index 95d0719f8..8b04eee7e 100644 --- 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 @@ -46,7 +46,7 @@ {{things.length}} thingsLoading... -
+
Alphabetical By binding @@ -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()