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>

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

@@ -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.title": "No bindings",
-  "things.nobindings.text": "You need to install binding add-ons to be able to add things to your system.",
+  "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.",
 

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

@@ -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
         }
       })
 

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

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

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

@@ -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'

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

@@ -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>
 

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

@@ -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']

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

@@ -24,37 +24,52 @@ html
 
 /* Custom color theme properties */
 :root {
-  --f7-theme-color: #e64a19; // #ff7700;
+  --f7-theme-color: #e64a19;
-  --f7-theme-color-rgb: 255, 119, 0;
+  --f7-theme-color-rgb: 230, 74, 25;
-  --f7-theme-color-shade: #d66400;
+  --f7-theme-color-shade: #c13e15;
-  --f7-theme-color-tint: #ff8d29;
+  --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: var(--f7-theme-color);
-    --f7-bars-text-color: #fff;
+  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
-    --f7-bars-link-color: #fff;
+  --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
+.md
-//   --f7-page-bg-color: #f7f7f7
+  --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

bundles/org.openhab.ui/web/src/js/routes.js

@@ -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
       }
     ]
   },

bundles/org.openhab.ui/web/src/js/store/index.js

@@ -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

bundles/org.openhab.ui/web/src/pages/about.vue

@@ -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>

bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -1,13 +1,16 @@
 <template>
-  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" hide-bars-on-scroll>
-    <f7-navbar>
+    <f7-navbar :back-link="(deep) ? 'Back' : undefined">
-      <f7-nav-left>
+      <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
     }

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

@@ -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">

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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">

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

@@ -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>