Manifest precaching, SW in dev mode, UI fixes

Card deck filters: menu was not always appearing in Firefox Use a web app manifest in statics to precache (prevent asking for credentials) JSON Editor in card designer was broken Fix suggestion chip at start of chat (also it is now dynamic) Make the SW work again in dev mode Consider all colored cards dark (temp. fix for quasarframework/quasar#2546 (comment), should/will add an option) Signed-off-by: Yannick Schaus <[email protected]>
openhab · Sep 26, 2018 · 1727331 · 1727331
1 parent ab811b3
commit 1727331
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 46 deletions.
diff --git a/web/quasar.conf.js b/web/quasar.conf.js
@@ -25,25 +25,26 @@ module.exports = function (ctx) {
       // extractCSS: false,
       // useNotifier: false,
       chainWebpack (chain, { isServer, isClient }) {
-        chain.plugin('manifest-crossorigin').use(class ManifestCrossoriginPlugin {
-          apply (compiler) {
-            compiler.hooks.compilation.tap('webpack-plugin-manifest-crossorigin', compilation => {
-              compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('webpack-plugin-manifest-crossorigin', (data, callback) => {
-                if (data.head) {
-                  for (let tag of data.head) {
-                    // console.log('adding crossorigin to ' + JSON.stringify(tag))
-                    if (tag.tagName === 'link' && tag.attributes.rel === 'manifest') {
-                      tag.attributes.crossorigin = 'use-credentials'
-                      // console.log('done!' + JSON.stringify(tag))
+        if (!ctx.dev) {
+          chain.plugin('manifest-crossorigin').use(class ManifestCrossoriginPlugin {
+            apply (compiler) {
+              compiler.hooks.compilation.tap('webpack-plugin-manifest-crossorigin', compilation => {
+                compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('webpack-plugin-manifest-crossorigin', (data, callback) => {
+                  if (data.head) {
+                    for (let tag of data.head) {
+                      if (tag.tagName === 'link' && tag.attributes.rel === 'manifest') {
+                        tag.attributes.crossorigin = 'use-credentials'
+                        tag.attributes.href = '/habot/statics/manifest.json'
+                      }
                     }
                   }
-                }
-                // finally, inform Webpack that we're ready
-                callback(null, data)
+                  // finally, inform Webpack that we're ready
+                  callback(null, data)
+                })
               })
-            })
-          }
-        }, [])
+            }
+          }, [])
+        }
       },
       extendWebpack (cfg) {
         cfg.module.rules.push({
@@ -188,7 +189,7 @@ module.exports = function (ctx) {
     ],
     pwa: {
       workboxPluginMode: 'InjectManifest',
-      workboxOptions: {
+      workboxOptions: (ctx.dev) ? {} : {
         importWorkboxFrom: 'local'
       },
       manifest: {

diff --git a/web/src/components/HbCard.vue b/web/src/components/HbCard.vue
@@ -1,5 +1,5 @@
 <template>
-<q-card inline v-if="model" class="hb-card" :class="{ bigger: model.config && model.config.bigger, 'highlight-and-fade': this.model.highlight }" :color="color" :text-color="textColor">
+<q-card inline v-if="model" class="hb-card" :class="{ bigger: model.config && model.config.bigger, 'highlight-and-fade': this.model.highlight }" :color="color" :text-color="textColor" :dark="color">
   <q-card-media v-if="model.slots && model.slots.media">
     <component v-for="(component, idx) in model.slots.media" :key="'card-media-' + idx" :is="component.component" :model="component"></component>
   </q-card-media>

diff --git a/web/src/index.template.html b/web/src/index.template.html
@@ -7,9 +7,8 @@
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
     <title><%= htmlWebpackPlugin.options.productName %></title>
 
-    <link rel="icon" href="statics/quasar-logo.png" type="image/x-icon">
-    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png" crossorigin="use-credentials">
+    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png" crossorigin="use-credentials">
   </head>
   <body>
     <% if (!htmlWebpackPlugin.options.ctx.mode.electron) { %>

diff --git a/web/src/layouts/designer/JsonEditor.vue b/web/src/layouts/designer/JsonEditor.vue
@@ -15,9 +15,9 @@
       <q-btn flat round icon="done" @click="validate(false)"><q-tooltip :disable="$q.platform.has.touch">Validate</q-tooltip></q-btn>
       <q-btn flat round icon="system_update_alt" @click="update"><q-tooltip :disable="$q.platform.has.touch">Update</q-tooltip></q-btn>
     </q-toolbar>
-    <q-scroll-area class="fit q-pt-md q-px-sm">
+    <div class="fit">
       <q-input class="json-editor" v-model="json" hide-underline type="textarea" />
-    </q-scroll-area>
+    </div>
     <q-modal position="top" v-model="showValidationReport" :content-css="{padding: '20px'}">
       <div class="q-display-1 q-mb-md">Validation Report</div>
       <p>

diff --git a/web/src/pages/CardDeck.vue b/web/src/pages/CardDeck.vue
@@ -3,12 +3,8 @@
     <div class="row bg-grey-2 shadow-2">
       <q-checkbox class="multiple-toggle" color="secondary" v-model="multiple" unchecked-icon="done" checked-icon="done_all"></q-checkbox>
       <div :class="['filters', 'row', (multiple) ? 'multiple' : 'single']">
-        <div class="col-12 col-sm-6">
-          <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" clearable chips color="secondary" v-model="objects" :options="objectSet" float-label="Objects"></q-select>
-        </div>
-        <div class="col-12 col-sm-6">
-          <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" clearable chips color="secondary" v-model="locations" :options="locationSet" float-label="Locations"></q-select>
-        </div>
+        <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" class="col-12 col-sm-6" clearable chips color="secondary" v-model="objects" :options="objectSet" float-label="Objects"></q-select>
+        <q-select :multiple="multiple" :filter="!$q.platform.is.mobile" class="col-12 col-sm-6" clearable chips color="secondary" v-model="locations" :options="locationSet" float-label="Locations"></q-select>
       </div>
       <!-- <q-search v-model="search" color="none" class="col"></q-search> -->
     </div>
@@ -70,19 +66,11 @@
   padding 10px
   width 100%
   margin-right 50px
-  &.single .q-if-inner
-    //min-height 43px !important
-    // margin-top 2px !important
-    // margin-left 3px !important
-    .q-input-target
-      margin-top 2px !important
-      margin-left 10px !important
-    // margin-bottom 3px !important  padding 10px
   .q-select
-    .q-if-label
-        //top 21px
-        &.q-if-label-above
-          //transform scale(0.75) translate(0, -28px)
+    padding-top 13px
+  .q-if-label
+    width 100%
+    cursor pointer !important
 
 .hb-cards
   padding 10px

diff --git a/web/src/pages/Chat.vue b/web/src/pages/Chat.vue
@@ -51,7 +51,7 @@
 
         <div v-if="chat.greetingSuggestions" class="suggestion-chips">
           <q-btn rounded outline no-caps v-if="bookmarksCount" color="secondary" icon="bookmark" @click="$router.push('/cards/bookmarks')">Bookmarks</q-btn>
-          <q-btn rounded outline no-caps v-if="suggestionsCount" color="secondary" icon="star" @click="$router.push('/cards/suggestions')">Suggestions
+          <q-btn class="q-ml-sm" rounded outline no-caps v-if="suggestionsCount" color="secondary" icon="star" @click="$router.push('/cards/suggestions')">Suggestions
             <q-chip floating small dense color="red">{{suggestionsCount}}</q-chip>
           </q-btn>
         </div>
@@ -147,7 +147,7 @@ export default {
       showPWAPrompt: false,
       inputPlaceholder: 'Ask me about your home',
       stickToBottom: false,
-      suggestionsCount: 0,
+      // suggestionsCount: 0,
       bookmarksCount: 0
     }
   },
@@ -204,11 +204,15 @@ export default {
       this.showPWAPrompt = true
     }
 
-    this.$store.dispatch('cards/computeSuggestions').then((cards) => {
-      this.suggestionsCount = cards.length
-    })
     this.bookmarksCount = this.$store.getters['cards/bookmarked'].length
   },
+  asyncComputed: {
+    suggestionsCount () {
+      return this.$store.dispatch('cards/computeSuggestions').then((cards) => {
+        return cards.length
+      })
+    }
+  },
   mounted () {
     // if (this.$q.platform.is.iphone) {
     //   (new MutationObserver(this.scrollToBottom)).observe(this.$el, {childList: true, subtree: true})

diff --git a/web/src/statics/manifest.json b/web/src/statics/manifest.json
@@ -0,0 +1,36 @@
+{
+  "name": "HABot",
+  "short_name": "HABot",
+  "description": "Chatbot for openHAB",
+  "display": "standalone",
+  "start_url": "/habot/",
+  "background_color": "#ffffff",
+  "theme_color": "#ff6600",
+  "icons": [
+    {
+      "src": "/habot/statics/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/habot/statics/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}