Merge pull request #67 from morkro/release/1.5.0

Release 1.5.0

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented here.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2018-10-31
+
+### Added
+- Added Twitter and GitHub as additional login methods.
+
+### Changed
+- Plant images are now lazy loaded, improving download times and data usage for mobile users.
+
+### Fixed
+- Improved data loading for cloud users, resulting in a more fluent experience on the overview.
+- Couple of performance improvements.
+
 ## [1.4.0] - 2018-10-23
 
 ### Added

README.md

@@ -3,7 +3,7 @@
 </h1>
 
 <p align="center">
-  Current version: <code>1.4.0</code> <a href="CHANGELOG.md">(Changelog)</a>
+  Current version: <code>1.5.0</code> <a href="CHANGELOG.md">(Changelog)</a>
 </p>
 
 <p align="center">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "happy-plants",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "serve": "npm run svg && vue-cli-service serve",

src/app/App.vue

@@ -74,6 +74,7 @@
 
     data () {
       return {
+        applicationOnline: window && window.navigator && window.navigator.onLine,
         notificationTimeout: 2000,
         showReleaseDialog: false
       }
@@ -84,25 +85,39 @@
         if (newRelease) {
           this.showReleaseDialog = true
         }
+      },
+
+      applicationOnline (online) {
+        if (online === false && this.canSeeOfflineNotification) {
+          this.showNotification({ message: 'You just went offline.' })
+        }
       }
     },
 
-    computed: mapState({
-      version: state => state.version,
-      hasNewRelease: state => state.hasNewRelease,
-      storageType: state => state.storage.type,
-      authenticated: state => state.user.authenticated,
-      theme: state => state.settings.theme,
-      message: state => state.notification.message,
-      pageTitle: state => state.appheader.title,
-      transparent: state => state.appheader.transparent,
-      iconColor: state => state.appheader.iconColor,
-      backBtn: state => state.appheader.backBtn,
-      backBtnPath: state => state.appheader.backBtnPath,
-      settingsBtn: state => state.appheader.settingsBtn,
-      settingsBtnOnClick: state => state.appheader.settingsBtnOnClick,
-      showIconBackdrop: state => state.appheader.showIconBackdrop
-    }),
+    computed: {
+      ...mapState({
+        version: state => state.version,
+        hasNewRelease: state => state.hasNewRelease,
+        storageType: state => state.storage.type,
+        authenticated: state => state.user.authenticated,
+        theme: state => state.settings.theme,
+        message: state => state.notification.message,
+        pageTitle: state => state.appheader.title,
+        transparent: state => state.appheader.transparent,
+        iconColor: state => state.appheader.iconColor,
+        backBtn: state => state.appheader.backBtn,
+        backBtnPath: state => state.appheader.backBtnPath,
+        settingsBtn: state => state.appheader.settingsBtn,
+        settingsBtnOnClick: state => state.appheader.settingsBtnOnClick,
+        showIconBackdrop: state => state.appheader.showIconBackdrop
+      }),
+      canSeeOfflineNotification () {
+        return (
+          this.storageType === 'cloud' &&
+          this.authenticated
+        )
+      }
+    },
 
     methods: {
       ...mapActions([
@@ -122,6 +137,12 @@
       ]),
       emitCloseDialog () {
         this.showReleaseDialog = false
+      },
+      setApplicationOnline () {
+        this.applicationOnline = true
+      },
+      setApplicationOffline () {
+        this.applicationOnline = false
       }
     },
 
@@ -162,10 +183,23 @@
       }
     },
 
+    mounted () {
+      if (!this.applicationOnline && this.canSeeOfflineNotification) {
+        this.showNotification({ message: 'You are currently offline.' })
+      }
+      window.addEventListener('online', this.setApplicationOnline)
+      window.addEventListener('offline', this.setApplicationOffline)
+    },
+
     updated () {
       if (this.message) {
         setTimeout(this.hideNotification, this.notificationTimeout)
       }
+    },
+
+    beforeDestroy () {
+      window.removeEventListener('online', this.setApplicationOnline)
+      window.removeEventListener('offline', this.setApplicationOffline)
     }
   }
 </script>

src/app/intro/components/Start.vue

@@ -8,31 +8,28 @@
     <div class="start-login">
       <p>Already have an account?</p>
 
-      <v-button
-        color="plain"
-        :loading="disabled"
+      <auth-provider-list
+        :loading="authFromRedirect"
         :disabled="disabled"
-        @click.native="loginUser">
-        <feather-login slot="icon" />
-        <span>Login with Google</span>
-      </v-button>
+        @provider-selected="loginUser"
+      />
     </div>
   </div>
 </template>
 
 <script>
   import { mapActions, mapState } from 'vuex'
   import Button from '@/components/Button'
+  import AuthProviderList from '@/components/AuthProviderList'
 
   export default {
     name: 'IntroStart',
 
     components: {
       'v-button': Button,
+      'auth-provider-list': AuthProviderList,
       'feather-right': () =>
-        import('vue-feather-icons/icons/ArrowRightIcon' /* webpackChunkName: "icons" */),
-      'feather-login': () =>
-        import('vue-feather-icons/icons/LogInIcon' /* webpackChunkName: "icons" */)
+        import('vue-feather-icons/icons/ArrowRightIcon' /* webpackChunkName: "icons" */)
     },
 
     computed: {
@@ -76,10 +73,10 @@
         this.$router.push('/intro/storage')
       },
 
-      async loginUser () {
+      async loginUser (provider) {
         this.signInProgress = true
         try {
-          await this.signInUser()
+          await this.signInUser(provider)
         } catch (error) {
           this.showNotification()
           return
@@ -99,7 +96,7 @@
   }
 </script>
 
-<style lang="postcss" scoped>
+<style lang="postcss">
   .start-wrapper {
     display: flex;
     flex-direction: column;

src/app/intro/components/Storage.vue

@@ -124,7 +124,7 @@
       },
       async loginUser () {
         await this.updateStorage({ type: 'cloud' })
-        await this.signInUser()
+        await this.signInUser('google')
         if (!this.authenticated) return
         this.closeDialog()
         this.$router.push('/intro/howto')

src/app/overview/components/PlantPreview.vue

@@ -3,7 +3,6 @@
     tag="a"
     @tap.prevent="handleInteraction"
     @press="handleInteraction"
-    :style="type === 'grid' && background"
     :class="wrapperClass"
     :aria-label="ariaLabel">
     <div v-show="pressedMode" :class="getLayerClass('pressed')">
@@ -23,11 +22,14 @@
     </div>
 
     <div class="preview-content">
-      <div v-if="isListView"
-        class="box preview-image"
-        :style="background">
-        <feather-loader
-          v-if="contentLoading && !imageUrl" />
+      <div :class="['preview-image', { 'box': isListView }]">
+        <feather-loader v-if="contentLoading && !imageUrl" />
+        <lazy-image
+          v-if="imageUrl"
+          :key="name"
+          :alt="name"
+          :title="name"
+          :source="imageUrl" />
         <svgicon
           v-if="!contentLoading && !imageUrl"
           icon="cactus"
@@ -52,23 +54,14 @@
           </li>
         </ul>
       </div>
-
-      <feather-loader
-        v-if="contentLoading && !imageUrl && type === 'grid'" />
-
-      <svgicon
-        v-if="!contentLoading && !imageUrl && type === 'grid'"
-        icon="cactus"
-        width="40"
-        height="40"
-        color="#000" />
     </div>
   </v-touch>
 </template>
 
 <script>
   import router from '@/router'
   import Tag from '@/components/Tag'
+  import LazyImage from '@/components/LazyImage'
   import '@/assets/icons/cactus'
 
   export default {
@@ -87,6 +80,7 @@
 
     components: {
       'v-tag': Tag,
+      'lazy-image': LazyImage,
       'feather-trash': () =>
         import('vue-feather-icons/icons/Trash2Icon' /* webpackChunkName: "icons" */),
       'feather-plus': () =>
@@ -128,11 +122,6 @@
         }
         return ''
       },
-      background () {
-        return this.imageUrl
-          ? { backgroundImage: `url(${this.imageUrl})` }
-          : ''
-      },
       wrapperClass () {
         return [`type-${this.type}`, 'box', 'plant-preview', {
           'is-skeleton': this.contentLoading,
@@ -219,8 +208,6 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background-size: cover;
-    background-position: center;
     transform-origin: center;
     transition: transform 50ms var(--ease-out-back);
     --preview-background: var(--grey);
@@ -256,14 +243,17 @@
 
   .preview-image {
     position: relative;
-    width: var(--item-size-height);
-    height: var(--item-size-height);
-    background-size: cover;
-    background-position: center;
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: var(--base-gap);
+
+    @nest .type-list & {
+      margin-right: var(--base-gap);
+      width: var(--item-size-height);
+      height: var(--item-size-height);
+    }
 
     @nest .is-skeleton & {
       box-shadow: none;

src/app/overview/components/PlantsList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul :class="['plant-list', `type-${type}`]">
-    <li v-for="(plant, index) in plantData" :key="index">
+    <li v-for="plant in plantData" :key="plant.guid">
       <plant-preview
         @toggle-delete-selection="emitDeleteSelection"
         @toggle-pressed-selection="emitPressedSelection"