Merge pull request #66 from morkro/release/1.4.0

Release 1.4.0
morkro · Oct 23, 2018 · a70c2f9 · a70c2f9
2 parents ca13b07 + ff0ab6b
commit a70c2f9
Show file tree

Hide file tree

Showing 16 changed files with 1,877 additions and 2,075 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,19 @@ 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.4.0] - 2018-10-23
+
+### Added
+- Improved touch actions on the overview menu.
+- Added suggestions when adding a new tag to a plant.
+- It's now possible to login from the Settings view.
+
+### Changed
+- Updated list view with more details.
+
+### Fixed
+- Hiding tags on plant view now works again.
+
 ## [1.3.1] - 2018-10-18
 
 ### Changed

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

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "happy-plants",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "serve": "npm run svg && vue-cli-service serve",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "blob-util": "^2.0.2",
-    "firebase": "^5.5.3",
+    "firebase": "^5.5.5",
     "localforage": "^1.7.2",
     "localforage-startswith": "^1.4.0",
     "lodash.throttle": "^4.1.1",
@@ -24,25 +24,25 @@
     "vue-feather-icons": "^4.7.1",
     "vue-meta": "^1.5.5",
     "vue-router": "^3.0.1",
-    "vue-svgicon": "^3.2.0",
+    "vue-svgicon": "^3.2.1",
     "vue-touch": "^2.0.0-beta.4",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.0",
     "@babel/core": "^7.1.2",
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-plugin-pwa": "^3.0.4",
-    "@vue/cli-plugin-unit-jest": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
-    "@vue/eslint-config-standard": "^3.0.4",
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-plugin-pwa": "^3.0.5",
+    "@vue/cli-plugin-unit-jest": "^3.0.5",
+    "@vue/cli-service": "^3.0.5",
+    "@vue/eslint-config-standard": "^3.0.5",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.0.1",
-    "commitizen": "^2.10.1",
-    "cssnano": "^4.1.4",
+    "commitizen": "^3.0.4",
+    "cssnano": "^4.1.5",
     "lint-staged": "^7.3.0",
     "postcss-calc": "^6.0.2",
     "postcss-color-mod-function": "^3.0.3",

diff --git a/src/app/App.vue b/src/app/App.vue
@@ -207,6 +207,7 @@
       font-family: monospace;
       font-size: var(--text-size-xsmall);
       letter-spacing: -4px;
+      display: inline-block;
     }
 
     & .happy-dialog-content section h1,

diff --git a/src/app/overview/Overview.vue b/src/app/overview/Overview.vue
@@ -269,6 +269,11 @@
         this.cancelDeleteMode()
       },
       updateEditMode (type) {
+        if (type === 'view-mode-toggle') {
+          this.hideBackdrop()
+          return
+        }
+
         this.editMode = type
 
         if (type === 'category' || type === 'view-mode') {

diff --git a/src/app/overview/components/Menu.vue b/src/app/overview/components/Menu.vue
@@ -7,7 +7,8 @@
           aria-label="View mode"
           :class="`view-mode icon ${disableMenu ? '' : 'inverse'}`"
           @click.native.prevent="emitMenuAction('view-mode')">
-          <feather-grid slot="icon" />
+          <feather-grid v-if="!disableMenu" slot="icon" />
+          <feather-x v-else slot="icon" />
         </v-button>
       </li>
     </ul>
@@ -50,7 +51,9 @@
       'feather-trash': () =>
         import('vue-feather-icons/icons/Trash2Icon' /* webpackChunkName: "icons" */),
       'feather-grid': () =>
-        import('vue-feather-icons/icons/GridIcon' /* webpackChunkName: "icons" */)
+        import('vue-feather-icons/icons/GridIcon' /* webpackChunkName: "icons" */),
+      'feather-x': () =>
+        import('vue-feather-icons/icons/XIcon' /* webpackChunkName: "icons" */)
     },
 
     props: {
@@ -72,8 +75,7 @@
 
     methods: {
       emitMenuAction (type) {
-        if (this.disableMenu) return
-        this.$emit('clicked-item', type)
+        this.$emit('clicked-item', this.disableMenu ? `${type}-toggle` : type)
       }
     }
   }

diff --git a/src/app/overview/components/PlantPreview.vue b/src/app/overview/components/PlantPreview.vue
@@ -44,10 +44,10 @@
         </div>
 
         <ul v-if="isListView && tags.length" class="preview-tags">
-          <li>
+          <li v-for="tag of tags" :key="tag.label">
             <v-tag size="small">
               <feather-tag height="16" width="16" />
-              {{ tags.length }}
+              {{ tag.label }}
             </v-tag>
           </li>
         </ul>
@@ -386,6 +386,9 @@
       padding: calc(var(--base-gap) / 1.5);
       height: 100%;
       color: var(--text-color-base);
+      overflow-y: hidden;
+      overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
 
       & h1 {
         color: var(--preview-color);
@@ -451,10 +454,16 @@
   .preview-tags {
     list-style: none;
     display: flex;
-    flex-wrap: wrap;
+    width: 100%;
 
     & li {
+      flex-shrink: 0;
       margin-bottom: calc(var(--base-gap) / 2);
+
+      &:last-child {
+        /* Workaround */
+        padding-right: calc(var(--base-gap) / 2);
+      }
     }
 
     & li:not(:last-child) {
@@ -465,6 +474,7 @@
       padding: calc(var(--base-gap) / 4) calc(var(--base-gap) / 2);
       display: flex;
       align-items: center;
+      white-space: nowrap;
     }
 
     & .tag svg {

diff --git a/src/app/plant/Plant.vue b/src/app/plant/Plant.vue
@@ -28,8 +28,9 @@
         @update-photo="updatePlantPhoto" />
 
       <plant-tags
-        v-if="Array.isArray(allTags)"
-        :tags="allTags"
+        v-if="Array.isArray(plant.tags)"
+        :tags="allPlantTags"
+        :all-tags="tags"
         @new-tag="addNewPlantTag"
         @remove-tag="removePlantTag"
         @hide-module="hidePlantTags" />
@@ -48,7 +49,7 @@
 
       <plant-footer
         :no-modules="plant.modules && !plant.modules.length"
-        :show-tag-button="allTags === false"
+        :show-tag-button="plant.tags === false"
         @manage-modules="activateModuleManager"
         @show-tags="showPlantTags" />
     </main>
@@ -104,15 +105,16 @@
         theme: state => state.settings.theme,
         plantsData: state => state.plants.data,
         plantsLoading: state => state.plants.loading,
-        plant: state => state.selected
+        plant: state => state.selected,
+        tags: state => state.tags.data
       }),
       ...mapGetters({
         plantTags: 'getPlantTags'
       }),
       defaultIconColor () {
         return this.theme === 'light' ? 'black' : 'white'
       },
-      allTags () {
+      allPlantTags () {
         return this.plantTags(this.plant.guid)
       },
       plantModules () {

diff --git a/src/app/plant/components/PlantComponent.vue b/src/app/plant/components/PlantComponent.vue
@@ -42,6 +42,8 @@
     padding: var(--base-gap);
     margin-bottom: 4px;
     overflow: hidden;
+    z-index: 0;
+    position: relative;
   }
 
   .plant-component header {

diff --git a/src/app/plant/components/PlantFooter.vue b/src/app/plant/components/PlantFooter.vue
@@ -63,6 +63,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    z-index: 0;
+    position: relative;
 
     &.no-modules {
       font-size: var(--text-size-base);

diff --git a/src/app/plant/components/PlantTags.vue b/src/app/plant/components/PlantTags.vue
@@ -1,7 +1,7 @@
 <template>
-  <section :class="{ 'plant-tags': true, 'edit-mode': showInput }">
+  <section :class="['plant-tags', { 'edit-mode': showInput }]">
     <div
-      :class="{ 'plant-tags-module': true, 'show-tooltip': showTooltip }"
+      :class="['plant-tags-module', { 'show-tooltip': showTooltip }]"
       data-tooltip="Double tap to remove">
       <v-button
         color="plain"
@@ -12,13 +12,14 @@
         <feather-x v-else slot="icon" />
       </v-button>
 
-      <div :class="{ 'tags-list-wrapper': true, 'show-input': showInput }">
+      <div :class="['tags-list-wrapper', { 'show-input': showInput }]">
         <form
           v-if="showInput"
           class="tags-new"
           @submit.prevent="addNewTag">
           <input
             type="text"
+            autocomplete="off"
             id="tag-new-name"
             ref="tagInput"
             @change="getTagName">
@@ -33,7 +34,9 @@
               <v-touch tag="div"
                 @doubletap="toggleRemovable(tag)"
                 @tap="showRemovalNote">
-                <v-tag>{{ tag.label }}</v-tag>
+                <v-tag>
+                  {{ tag.label }}
+                </v-tag>
               </v-touch>
             </li>
           </ul>
@@ -55,6 +58,19 @@
       </div>
     </div>
 
+    <div v-if="showInput && allTags.length" class="tags-suggestions">
+      <ul>
+        <li v-for="(tag, index) in allTags" :key="index">
+          <v-touch @tap="selectTag(tag)">
+            <v-tag >
+              <feather-plus slot="icon" />
+              {{ tag.label }}
+            </v-tag>
+          </v-touch>
+        </li>
+      </ul>
+    </div>
+
     <div v-if="showInput"
       class="tags-backdrop"
       @click.self="closeInputOutside"/>
@@ -79,7 +95,8 @@
     },
 
     props: {
-      tags: { type: Array, default: () => [] }
+      tags: { type: Array, default: () => [] },
+      allTags: { type: Array, default: () => [] }
     },
 
     data: () => ({
@@ -118,9 +135,10 @@
         this.newTagName = event.target.value
       },
 
-      addNewTag () {
-        if (this.newTagName !== '') {
-          this.$emit('new-tag', { label: this.newTagName.trim() })
+      addNewTag (event, tagName) {
+        const tagLabel = tagName || this.newTagName
+        if (tagLabel !== '') {
+          this.$emit('new-tag', { label: tagLabel.trim() })
         }
         Object.assign(this.$data, this.$options.data()) // Reset state
       },
@@ -138,6 +156,10 @@
         setTimeout(() => {
           this.showTooltip = false
         }, 2000)
+      },
+
+      selectTag (tag) {
+        this.addNewTag(undefined, tag.label)
       }
     }
   }
@@ -301,12 +323,30 @@
     }
   }
 
+  .tags-suggestions {
+    position: absolute;
+    z-index: 2;
+    padding: var(--base-gap) var(--tag-module-height);
+
+    & ul {
+      display: flex;
+      list-style: none;
+      flex-wrap: wrap;
+    }
+
+    & li:not(:last-child) {
+      margin-right: calc(var(--base-gap) / 2);
+      margin-bottom: calc(var(--base-gap) / 2);
+    }
+  }
+
   .tags-backdrop {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
+    background: var(--transparency-black-medium);
   }
 </style>