Display layout page as overview (openhab#235)

Move the UI tiles back to the right panel, and display
a placeholder in the home page's overview tab until a
layout page with an ID of "overview" has been created.
This is (normally?) temporary until a specially-designed
overview page has been implemented - discussion on
openhab#155).

Various styling fixes & clean up.

Move the onboarding cards to separate component
(not used for now).

Don't display the Back button in a page view if it's shown
on the sidebar.

Layout pages: switch the "add widget" action sheet from
grid to simple list with groups, headers and cancel button.

Signed-off-by: Yannick Schaus <[email protected]>

Author: ghys

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

@@ -1,4 +1,7 @@
 {
+  "overview.title": "Welcome to openHAB!",
+  "overview.text": "Once your system is configured, create a layout page with the ID <code>\"overview\"</code> to display it here.",
+
   "inbox.title": "The Inbox is empty",
   "inbox.text": "Discovery results from your bindings that can be added as things will appear here.<br><br>You can also start a scan for a certain binding or add things manually with the button below.",
 

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

@@ -10,7 +10,6 @@
       <f7-list-item link="/" class="logo" panel-close v-else>
         <img src="../res/img/openhab-logo.png" width="100%">
       </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"
                 :class="{ currentsection: currentUrl.indexOf('/sitemap/' + sitemap.name) >= 0 }"
@@ -79,24 +78,18 @@
             :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>
-          <f7-icon slot="media" ios="f7:square_arrow_right" md="material:exit_to_app" color="gray"></f7-icon>
-        </f7-list-item> -->
-        <!-- <f7-list-item title="Master-Details" view=".view-main" panel-close>
-          <f7-icon slot="media" ios="f7:exit" md="material:exit_to_app"></f7-icon>
-        </f7-list-item> -->
       </f7-list>
+
       <div class="account" v-if="ready">
         <div class="display-flex justify-content-center">
           <f7-button v-if="!loggedIn" large color="gray" icon-size="36" tooltip="Unlock Administration" icon-f7="lock_shield_fill" @click="authorize()" />
         </div>
-        <f7-list v-if="$store.getters.user" class="admin-links" media-list>
+        <f7-list v-if="$store.getters.user" media-list>
           <f7-list-item :title="$store.getters.user.name" :footer="serverDisplayUrl" io="f7:person_alt_circle_fill" link="/profile/" no-chevron panel-close view=".view-main"
               :class="{ currentsection: currentUrl.indexOf('/profile') >= 0 }">
             <f7-icon slot="media" size="36" ios="f7:person_alt_circle_fill" aurora="f7:person_alt_circle_fill" md="f7:person_alt_circle_fill" color="gray"></f7-icon>
           </f7-list-item>
         </f7-list>
-        <!-- <f7-link v-if="user" color="gray" icon-size="30" :text="accountLabel" tooltip="Sign out" icon-f7="person_alt_circle_fill" @click="logout()" /> -->
       </div>
     </f7-page>
   </f7-panel>
@@ -108,7 +101,7 @@
   </f7-panel>
 
   <!-- Your main view, should have "view-main" class -->
-  <f7-view main class="safe-areas" url="/" :master-detail-breakpoint="960" @routeChanged="console.log('hello')"></f7-view>
+  <f7-view main v-show="ready" class="safe-areas" url="/" :master-detail-breakpoint="960" @routeChanged="console.log('hello')"></f7-view>
 
   <f7-login-screen id="my-login-screen" :opened="loginScreenOpened">
     <f7-view name="login" v-if="$device.cordova">
@@ -155,13 +148,12 @@
   height 0
 
 .panel-left
-  overflow-y scroll
   scrollbar-width none /* Firefox */
   -ms-overflow-style none  /* IE 10+ */
 
   .page
     background #f5f5f5 !important
-    padding-bottom 4rem
+    padding-bottom calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))
   .logo
     margin-top var(--f7-safe-area-top)
     list-style none
@@ -178,11 +170,18 @@
       color var(--f7-color-white) !important
   .account
     z-index 300
-    height 4rem
+    height calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))
     background #f5f5f5 !important
     position fixed
     bottom calc(var(--f7-safe-area-bottom))
     width 100%
+    .list
+      position absolute
+      bottom 0
+      left 0
+      width 100%
+      margin-bottom 0
+      height calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))
 
 .theme-dark
   .panel-left

bundles/org.openhab.ui/web/src/components/onboarding/onboarding-cards.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <f7-card
+      v-show="showSetup"
+      title="Welcome to openHAB!"
+      content="Congratulations, your server is up and running! However, it is not configured yet. Follow the setup wizard and let it guide you through the initial configuration. (Note: the wizard could also be started automatically on launch if no package is detected - services/org.openhab.addons > package)."
+    >
+      <f7-card-footer>
+        <f7-link color="blue" @click="skipSetupWizard()">No thanks</f7-link>
+        <!-- <f7-button color="blue" fill raised login-screen-open="#login-screen">Start Setup Wizard</f7-button> -->
+        <f7-button color="blue" fill raised href="/setup-wizard/">Start Setup Wizard</f7-button>
+      </f7-card-footer>
+    </f7-card>
+    <f7-card title="Suggested Tasks" v-show="showTasks">
+      <f7-card-content :padding="false">
+        <ol>
+          <li>
+            <f7-link no-link-class color="blue" href="#">Install Bindings &amp; other add-ons</f7-link>
+          </li>
+          <li>
+            <f7-link no-link-class color="blue" href="#">Discover &amp; configure Things</f7-link>
+          </li>
+          <li>
+            <f7-link
+              no-link-class
+              color="blue"
+              href="#"
+            >Design your home's conceptually with the semantic model builder and link the Things to Items</f7-link>
+          </li>
+          <li>
+            <f7-link
+              no-link-class
+              color="blue"
+              href="#"
+            >Connect to openHAB Cloud for remote access and integration with voice assistants</f7-link>
+          </li>
+        </ol>
+      </f7-card-content>
+      <f7-card-footer>
+        <f7-link color="blue" @click="dismissTasks">Dismiss</f7-link>
+      </f7-card-footer>
+    </f7-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['showSetup', 'showTasks'],
+  methods: {
+    skipSetupWizard () {
+      this.$f7.dialog.confirm(
+        'Are you sure? You currently only have a minimal set of features available and you will need to install all essential add-ons by hand!',
+        'Skip Setup Wizard',
+        () => {
+          // TODO
+        }
+      )
+    },
+    dismissTasks () {
+      // TODO
+    }
+  }
+}
+</script>

bundles/org.openhab.ui/web/src/components/widgets/layout/oh-placeholder-widget.vue

@@ -12,6 +12,7 @@
   display inline-block
   opacity 0.5
   height calc(2*3rem + 50px)
+  z-index 100
   .button
     width calc(100% - var(--f7-typography-margin))
     padding 3rem 0