OpenHAB
/
openhab-webui
mirror of https://github.com/openhab/openhab-webui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add some colors, improve navigation (#197) 

- Add colored indicator for current section in sidebar
- Filled (colored) navbars by default in Aurora theme
- Fix filled navbar on iOS
- Prevent f7 swipe back on iOS since Safari does it natively
- Improve routes to avoid switching sections, fix navigation
- Close on escape key hit for most popups
- Back link when navigating to a page from another page
- Edit link in page view (ultimately only when authorized...)
- Button to purge cache/service workers in about page
- Deindent block of code with shift-tab in CodeMirror
- Tweak colors in settings menu
- Hide the non-functional sitemaps from the sidebar (for now)

Signed-off-by: Yannick Schaus <github@schaus.net>
pull/198/head
Yannick Schaus 2020-03-03 13:12:10 +01:00 committed by GitHub
parent 726fc91b34
commit bcd161e774
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 218 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
bundles/org.openhab.ui/web/src/assets/i18n/en/empty-states.json
View File

@ -5,8 +5,8 @@
"things.title": "No things yet",
"things.text": "Things are the devices and services connected to openHAB, they are provided by binding add-ons.<br><br>Installed bindings which support auto-discovery will add thing candidates to your Inbox. You can also start a scan for a certain binding or add your first thing manually with the button below.",
"things.nobindings.title": "No bindings installed",
"things.nobindings.text": "You need to install binding add-ons to be able to add things to your system.",
"things.nobindings.title": "No bindings",
"things.nobindings.text": "To add things to your system, you first need to install binding add-ons.",
"model.title": "Start modelling your home",
"model.text": "Build a model from your items to organize them and relate them to each other semantically.<br><br>Begin with a hierarchy of locations: buildings, outside areas, floors and rooms, as needed. Then, insert equipments and points from your things (or manually).",
@ -14,6 +14,9 @@
"items.title": "No items yet",
"items.text": "Items represent the functional side of your home - you can link them to the channels defined by your things. Start with the Model view to create a clean initial structure.<br><br>You can also define items with configuration files, or with the button below.",
"items.add.title": "Define Items Above",
"items.add.text": "Use the openHAB item syntax to create new items or update them, as well as their metadata and links to channels. They will be stored in the internal database.",
"pages.title": "No pages yet",
"pages.text": "Design pages to display information in various ways and interact with your items. You can create several kinds of pages: charts, sitemaps, floor plans...<br><br>Click the button below to create your first page.",

62
bundles/org.openhab.ui/web/src/components/app.vue
View File

@ -12,12 +12,14 @@
</f7-list-item>
<!-- <f7-block-title>Sitemaps</f7-block-title> -->
<f7-list>
<f7-list-item v-for="sitemap in sitemaps" :animate="false" :key="sitemap.name"
<!-- <f7-list-item v-for="sitemap in sitemaps" :animate="false" :key="sitemap.name"
:class="{ currentsection: currentUrl.indexOf('/sitemap/' + sitemap.name) >= 0 }"
:link="'/sitemap/' + sitemap.name + '/' + sitemap.name"
:title="sitemap.label" view=".view-main" panel-close>
<f7-icon slot="media" ios="f7:menu" aurora="f7:menu" md="material:list"></f7-icon>
</f7-list-item>
</f7-list-item> -->
<f7-list-item v-for="page in pages" :animate="false" :key="page.uid"
:class="{ currentsection: currentUrl.indexOf('/page/' + page.uid) >= 0 }"
:link="'/page/' + page.uid"
:title="page.config.label" view=".view-main" panel-close>
<f7-icon slot="media" f7="tv"></f7-icon>
@ -25,44 +27,54 @@
</f7-list>
<f7-block-title>Administration</f7-block-title>
<f7-list class="admin-links">
<f7-list-item link="/settings/" title="Settings" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/" title="Settings" view=".view-main" panel-close :animate="false"
:class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/addons/') >= 0 || currentUrl.indexOf('/settings/services/') >= 0 }">
<f7-icon slot="media" ios="f7:gear_alt_fill" aurora="f7:gear_alt_fill" md="material:settings" color="gray"></f7-icon>
</f7-list-item>
<li v-if="showSettingsSubmenu">
<ul class="menu-sublinks">
<f7-list-item inset link="/settings/things/" title="Things" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/things/" title="Things" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/settings/things') >= 0 }">
<f7-icon slot="media" f7="lightbulb" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item inset link="/settings/model/" title="Model" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/model/" title="Model" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/settings/model') >= 0 }">
<f7-icon slot="media" f7="list_bullet_indent" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item inset link="/settings/items/" title="Items" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/items/" title="Items" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/settings/items') >= 0 }">
<f7-icon slot="media" f7="square_on_circle" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item inset link="/settings/pages/" title="Pages" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/pages/" title="Pages" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/settings/pages') >= 0 }">
<f7-icon slot="media" f7="tv" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item inset link="/settings/rules/" title="Rules" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/rules/" title="Rules" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/settings/rules') >= 0 }">
<f7-icon slot="media" f7="wand_rays" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item inset link="/settings/schedule/" title="Schedule" view=".view-main" panel-close :animate="false">
<f7-list-item link="/settings/schedule/" title="Schedule" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/settings/schedule') >= 0 }">
<f7-icon slot="media" f7="calendar" color="gray"></f7-icon>
</f7-list-item>
</ul>
</li>
<f7-list-item link="/developer/" title="Developer Tools" panel-close>
<f7-list-item link="/developer/" title="Developer Tools" panel-close
:class="{ currentsection: currentUrl.indexOf('/developer/') >= 0 && currentUrl.indexOf('/developer/widgets') < 0 }">
<f7-icon slot="media" ios="f7:exclamationmark_shield_fill" aurora="f7:exclamationmark_shield_fill" md="material:extension" color="gray"></f7-icon>
</f7-list-item>
<li v-if="showDeveloperSubmenu">
<ul class="menu-sublinks">
<f7-list-item inset link="/developer/widgets/" title="Widgets" view=".view-main" panel-close :animate="false">
<f7-list-item link="/developer/widgets/" title="Widgets" view=".view-main" panel-close :animate="false" no-chevron
:class="{ currentsection: currentUrl.indexOf('/developer/widgets') >= 0 }">
<f7-icon slot="media" f7="rectangle_on_rectangle_angled" color="gray"></f7-icon>
</f7-list-item>
</ul>
</li>
<f7-list-item link="/about/" title="Help &amp; About" view=".view-main" panel-close>
<f7-list-item link="/about/" title="Help &amp; About" view=".view-main" panel-close
:class="{ currentsection: currentUrl.indexOf('/about') >= 0 }">
<f7-icon slot="media" ios="f7:question_circle_fill" aurora="f7:question_circle_fill" md="material:help" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item v-if="loggedIn" link="/" title="Logout" @click="logout()" panel-close>
@ -135,14 +147,31 @@
height 50px
.list
margin-top 0
.currentsection
background-color var(--f7-color-blue-tint)
color var(--f7-color-white)
--f7-list-chevron-icon-color var(--f7-color-white)
.icon
color var(--f7-color-white) !important
.theme-dark
.panel-left
.page
background #232323 !important
.currentsection
background-color var(--f7-color-blue-shade)
.logo
background #111111 !important
.menu-sublinks
color var(--f7-list-item-footer-text-color)
padding-left 0
margin-bottom var(--f7-list-margin-vertical)
background-color red
// --f7-list-item-media-margin 24px
// --f7-list-item-padding-horizontal 32px
// --f7-list-chevron-icon-color var(--f7-color-blue-tint) !important
</style>
<script>
@ -180,6 +209,9 @@ export default {
// App routes
routes: routes,
view: {
// disable f7 swipeback on iOS (if not in cordova) because it's handled natively by Safari
iosSwipeBack: !this.$device.ios || this.$device.cordova,
auroraSwipeBack: !this.$device.ios || this.$device.cordova,
pushState: true // !this.$device.cordova
},
// Enable panel left visibility breakpoint
@ -231,7 +263,8 @@ export default {
},
showSettingsSubmenu: false,
showDeveloperSubmenu: false
showDeveloperSubmenu: false,
currentUrl: ''
}
},
methods: {
@ -283,7 +316,7 @@ export default {
},
mounted () {
this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || 'light'
this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((this.$theme.md) ? 'filled' : 'light')
this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
@ -308,6 +341,7 @@ export default {
if (page.route && page.route.url) {
this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0
this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
this.currentUrl = page.route.url
}
})

1
bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue
View File

@ -123,6 +123,7 @@ export default {
: Array(cm.getOption('indentUnit') + 1).join(' '), 'end', '+input')
}
}
extraKeys['Shift-Tab'] = 'indentLess'
cm.setOption('extraKeys', extraKeys)
},
onCmCodeChange (newCode) {

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

@ -30,10 +30,10 @@
<f7-row>
<f7-col>
<f7-block-title>Home page</f7-block-title>
<f7-block-title>Miscellaneous</f7-block-title>
<f7-list>
<f7-list-item>
<span>Simple navigation bar</span>
<span>Simple navigation bar on home page</span>
<f7-toggle :checked="homePageNavbarStyle === 'simple'" @toggle:change="setHomePageNavbarStyle"></f7-toggle>
</f7-list-item>
<f7-list-item>
@ -87,7 +87,7 @@ export default {
return localStorage.getItem('openhab.ui:theme.dark') || 'light'
},
barsStyle () {
return localStorage.getItem('openhab.ui:theme.bars') || ((this.$theme.md) ? 'filled' : 'light')
return localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
},
homePageNavbarStyle () {
return localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'

2
bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue
View File

@ -1,7 +1,7 @@
<template>
<f7-sheet>
<f7-toolbar>
<div class="left">{{(page) ? page.config.label : ''}}</div>
<div class="left padding-left">{{(page) ? page.config.label : ''}}</div>
<div class="right"><f7-link sheet-close>Close</f7-link></div>
</f7-toolbar>

2
bundles/org.openhab.ui/web/src/components/widgets/widget-actions.js
View File

@ -152,7 +152,7 @@ export const actionsMixin = {
console.log('Action target is not of the format page:uid')
return
}
this.$f7router.navigate('/page/' + actionPage.substring(5))
this.$f7router.navigate('/page/' + actionPage.substring(5), { props: { deep: true } })
break
case 'command':
const actionItem = this.config[prefix + 'actionItem']

49
bundles/org.openhab.ui/web/src/css/app.styl
View File

@ -24,37 +24,52 @@ html
/* Custom color theme properties */
:root {
--f7-theme-color: #e64a19; // #ff7700;
--f7-theme-color-rgb: 255, 119, 0;
--f7-theme-color-shade: #d66400;
--f7-theme-color-tint: #ff8d29;
--f7-theme-color: #e64a19;
--f7-theme-color-rgb: 230, 74, 25;
--f7-theme-color-shade: #c13e15;
--f7-theme-color-tint: #ea673e;
}
:root.theme-filled,
:root .theme-filled {
.subnavbar:not(.toolbar-bottom) {
--f7-bars-bg-color: var(--f7-theme-color);
--f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
--f7-bars-translucent-opacity: 0.9;
--f7-bars-text-color: #fff;
--f7-bars-link-color: #fff;
--f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
--f7-bars-border-color: transparent;
}
.toolbar:not(.toolbar-bottom) {
--f7-bars-bg-color: var(--f7-theme-color);
--f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
--f7-bars-translucent-opacity: 0.9;
--f7-bars-text-color: #fff;
--f7-bars-link-color: #fff;
--f7-bars-border-color: transparent;
}
.tabbar:not(.toolbar-bottom) {
--f7-bars-bg-color: var(--f7-theme-color);
--f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
--f7-bars-translucent-opacity: 0.9;
--f7-bars-text-color: #fff;
--f7-bars-link-color: #fff;
--f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
--f7-bars-border-color: transparent;
--f7-tabbar-link-active-color: #fff;
--f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
--f7-tabbar-link-active-border-color: #fff;
}
.navbar {
--f7-bars-bg-color: var(--f7-theme-color);
--f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
--f7-bars-text-color: #fff;
--f7-navbar-large-title-text-color: #fff;
--f7-bars-translucent-opacity: 0.9;
--f7-bars-link-color: #fff;
--f7-navbar-large-title-text-color: #fff;
--f7-bars-border-color: transparent;
&.navbar-large-transparent .title-large-text {
--f7-navbar-large-title-text-color: #000;
}
@ -66,10 +81,27 @@ html
--f7-navbar-border-color: transparent;
--f7-searchbar-input-bg-color: #fff;
--f7-sheet-border-color: transparent;
.navbar-large-transparent {
--f7-navbar-large-title-text-color: #000;
--r: 230;
--g: 74;
--b: 25;
--progress: var(--f7-navbar-large-collapse-progress);
// --f7-bars-link-color: rgb(
// calc(var(--r) + (255 - var(--r)) * var(--progress)),
// calc(var(--g) + (255 - var(--g)) * var(--progress)),
// calc(var(--b) + (255 - var(--b)) * var(--progress))
// );
}
}
// .md
// --f7-page-bg-color: #f7f7f7
.md
--f7-page-bg-color: #fafafa
--f7-page-bg-color-rgb: rgb(250, 250, 250)
.list-card
box-shadow var(--f7-elevation-1)
.home-tabs {
--f7-theme-color: #2196f3;
@ -311,6 +343,9 @@ html
display none !important
.item-inner:after
display none !important
.menu-sublinks
.item-content
padding-left calc(2*var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))
.item-initial
color #c0c0c0

13
bundles/org.openhab.ui/web/src/js/routes.js
View File

@ -156,6 +156,15 @@ export default [
path: 'add',
component: AddThingChooseBindingPage,
routes: [
{
path: 'install-binding',
component: AddonsAddPage,
options: {
props: {
addonType: 'binding'
}
}
},
{
path: ':bindingId',
component: AddThingChooseThingTypePage,
@ -304,6 +313,10 @@ export default [
}
}
]
},
{
path: 'add-items-dsl',
component: ItemsAddFromTextualDefinition
}
]
},

6
bundles/org.openhab.ui/web/src/js/store/index.js
View File

@ -6,14 +6,14 @@ import states from './modules/states'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
// const debug = process.env.NODE_ENV !== 'production'
const store = new Vuex.Store({
modules: {
components,
states
},
strict: debug
}
// strict: debug
})
export default store

57
bundles/org.openhab.ui/web/src/pages/about.vue
View File

@ -20,8 +20,18 @@
</f7-col>
</f7-row>
<f7-block-title><h4>Appearance Options (local to this device)</h4></f7-block-title>
<theme-switcher />
<f7-block-title v-if="hasServiceWorker"><h4>Cache Management</h4></f7-block-title>
<f7-col v-if="hasServiceWorker">
<p class="padding-horizontal">An active service worker is in place to cache the assets of this app to make it load faster, however it may not detect when it has been updated to a new version, even if you refresh the page.</p>
<p class="padding-horizontal">Click Purge the Application Cache below to clear the cache and download everything from the server again.</p>
<f7-list>
<f7-list-button color="red" @click="purgeServiceWorkerAndCaches()">Purge the Application Cache</f7-list-button>
</f7-list>
</f7-col>
</f7-block>
<!-- <f7-button href="/analyzer/?items=MultiSensorSalon_Temperature">Analyzer</f7-button> -->
@ -35,6 +45,53 @@ import ThemeSwitcher from '../components/theme-switcher.vue'
export default {
components: {
ThemeSwitcher
},
data () {
return {
hasServiceWorker: false
}
},
mounted () {
},
methods: {
mounted () {
if (navigator.serviceWorker) {
navigator.serviceWorker.getRegistrations().then(() => {
this.hasServiceWorker = true
})
}
},
purgeServiceWorkerAndCaches () {
this.$f7.dialog.confirm(
'Purge all application caches and unregister the service workers? This will refresh the page and might take a few seconds.',
() => {
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (let registration of registrations) {
registration.unregister().then(function () {
return self.clients.matchAll()
}).then(function (clients) {
clients.forEach(client => {
if (client.url && 'navigate' in client) {
setTimeout(() => { client.navigate(client.url) }, 1000)
}
})
})
}
})
caches.keys().then(function (cachesNames) {
console.log('Deleting caches')
return Promise.all(cachesNames.map(function (cacheName) {
return caches.delete(cacheName).then(function () {
console.log('Cache with name ' + cacheName + ' is deleted')
})
}))
}).then(function () {
console.log('Caches deleted')
})
}
)
}
}
}
</script>

2
bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue
View File

@ -1,5 +1,5 @@
<template>
<f7-popup tablet-fullscreen @popup:opened="() => showChart = true">
<f7-popup tablet-fullscreen close-on-escape @popup:opened="() => showChart = true">
<f7-page class="analyzer-content">
<f7-navbar :title="titleDisplayText" back-link="Back">
<!-- <f7-nav-right>

4
bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue
View File

@ -11,7 +11,7 @@
<f7-tabs>
<f7-tab id="menu-tab" @ tab:show="() => this.currentTab = 'menu'" :tab-active="currentTab === 'menu'">
<f7-block class="block-narrow settings-menu">
<f7-block class="block-narrow after-big-title settings-menu">
<f7-row>
<f7-col width="100" medium="50">
<f7-block-title>Advanced Object Management</f7-block-title>
@ -19,7 +19,7 @@
<f7-list-item media-item title="Widgets" footer="Develop custom widgets to use on pages" link="widgets/">
<f7-icon slot="media" f7="rectangle_on_rectangle_angled" color="gray"></f7-icon>
</f7-list-item>
<f7-list-item media-item title="Add Items from Textual Definition" footer="Add &amp; link items in bulk" link="/settings/items/add-from-textual-definition">
<f7-list-item media-item title="Add Items from Textual Definition" footer="Create or update items &amp; links in bulk" link="add-items-dsl">
<f7-icon slot="media" f7="text_badge_plus" color="gray"></f7-icon>
</f7-list-item>
</f7-list>

2
bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
View File

@ -1,6 +1,6 @@
<template>
<f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
<f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create Widget' : 'Widget: ' + widget.uid" back-link="Back" back-link-url="/" back-link-force>
<f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create Widget' : 'Widget: ' + widget.uid" back-link="Back">
<f7-nav-right>
<f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only></f7-link>
<f7-link @click="save()" v-if="!$theme.md">Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span></f7-link>

22
bundles/org.openhab.ui/web/src/pages/page/layout-page.vue
View File

@ -1,13 +1,16 @@
<template>
<f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
<f7-navbar>
<f7-nav-left>
<f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" hide-bars-on-scroll>
<f7-navbar :back-link="(deep) ? 'Back' : undefined">
<f7-nav-left v-if="!deep">
<f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
<f7-nav-title>{{(ready) ? page.config.label : ''}}</f7-nav-title>
<f7-nav-right>
<f7-link icon-md="material:edit" :href="'/settings/pages/' + pageType + '/' + uid">{{ $theme.md ? '' : 'Edit' }}</f7-link>
</f7-nav-right>
</f7-navbar>
<oh-layout-page v-if="page" :context="context"
<oh-layout-page v-if="page && pageType === 'layout'" :context="context"
class="layout-page"
:class="{notready: !ready}"
@command="onCommand" />
@ -27,7 +30,7 @@ export default {
components: {
OhLayoutPage
},
props: ['uid'],
props: ['uid', 'deep'],
data () {
return {
// ready: false,
@ -45,6 +48,15 @@ export default {
page () {
return this.$store.getters.page(this.uid)
},
pageType () {
switch (this.page.component) {
case 'oh-layout-page':
return 'layout'
default:
console.warn('Unknown page type!')
return 'unknown'
}
},
ready () {
return this.page
}

5
bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
View File

@ -10,7 +10,10 @@
<div class="col">
<editor class="items-parser" :value="itemsDsl" @input="(value) => itemsDsl = value" />
<div v-if="parsedItems.error" class="items-results error">
<pre><code>{{parsedItems.error}}</code></pre>
<div v-if="!itemsDsl">
<empty-state-placeholder icon="text_badge_plus" title="items.add.title" text="items.add.text" />
</div>
<pre v-else><code>{{parsedItems.error}}</code></pre>
</div>
<div v-else class="items-results">
<div class="card data-table data-table-init">

4
bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
View File

@ -59,7 +59,7 @@
</f7-tabs>
<f7-popup ref="widgetConfig" class="widgetconfig-popup" :opened="widgetConfigOpened" @popup:closed="widgetConfigClosed">
<f7-popup ref="widgetConfig" class="widgetconfig-popup" close-on-escape :opened="widgetConfigOpened" @popup:closed="widgetConfigClosed">
<f7-page v-if="currentComponent && currentWidget">
<f7-navbar>
<f7-nav-left>
@ -83,7 +83,7 @@
</f7-page>
</f7-popup>
<f7-popup ref="widgetCode" class="widgetcode-popup" :opened="widgetCodeOpened" @popup:closed="widgetCodeClosed">
<f7-popup ref="widgetCode" class="widgetcode-popup" close-on-escape :opened="widgetCodeOpened" @popup:closed="widgetCodeClosed">
<f7-page v-if="currentComponent && widgetCodeOpened">
<f7-navbar>
<f7-nav-left>

2
bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
View File

@ -101,7 +101,7 @@
</f7-tab>
</f7-tabs>
<f7-popup ref="modulePopup" class="moduleconfig-popup" :opened="moduleConfigOpened" @popupClosed="moduleConfigClosed">
<f7-popup ref="modulePopup" class="moduleconfig-popup" close-on-escape :opened="moduleConfigOpened" @popupClosed="moduleConfigClosed">
<f7-page>
<f7-navbar>
<f7-nav-left>

6
bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
View File

@ -188,4 +188,10 @@ export default {
<style lang="stylus">
.device-desktop .settings-menu
--f7-list-item-footer-line-height 1.3
.settings-menu .icon
color var(--f7-color-blue)
.theme-filled .settings-menu .icon
color var(--f7-color-gray) !important
.aurora .settings-menu .icon
font-size 24px
</style>

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

@ -54,11 +54,14 @@
</f7-list>
</f7-col>
<f7-col>
<f7-col v-if="bindings.length">
<f7-list>
<f7-list-button color="blue" title="Install Bindings" href="/settings/addons/binding/add" />
<f7-list-button color="blue" title="Install More Bindings" href="install-binding" />
</f7-list>
</f7-col>
<f7-row v-else-if="ready" class="display-flex justify-content-center">
<f7-button large fill color="blue" href="install-binding">Install Bindings</f7-button>
</f7-row>
</f7-block>
</f7-page>
</template>

2
bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
View File

@ -128,7 +128,7 @@
<f7-icon ios="f7:close" md="material:close"></f7-icon>
</f7-fab>
<f7-popup tablet-fullscreen :opened="codePopupOpened" @popup:closed="codePopupOpened = false">
<f7-popup tablet-fullscreen :opened="codePopupOpened" close-on-escape @popup:closed="codePopupOpened = false">
<f7-page>
<f7-toolbar>
<div class="left">

2
bundles/org.openhab.ui/web/src/pages/settings/things/zwave/zwave-network-popup.vue
View File

@ -1,5 +1,5 @@
<template>
<f7-popup tablet-fullscreen :opened="opened" @popup:opened="() => showNetwork = true" @popup:closed="$emit('closed')">
<f7-popup tablet-fullscreen close-on-escape :opened="opened" @popup:opened="() => showNetwork = true" @popup:closed="$emit('closed')">
<f7-page class="analyzer-content">
<f7-navbar title="Z-Wave Network Map">
<f7-nav-right>