♻️ (dialog) Updated a11y-dialog and refactored components

morkro · Jan 9, 2019 · ca2a47d · ca2a47d
1 parent 4553d52
commit ca2a47d
Show file tree

Hide file tree

Showing 23 changed files with 831 additions and 886 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,10 +17,11 @@
     "localforage-startswith": "^1.4.0",
     "lodash.throttle": "^4.1.1",
     "normalize.css": "^8.0.1",
+    "portal-vue": "^1.5.1",
     "register-service-worker": "^1.0.0",
     "uuid": "^3.3.2",
     "vue": "^2.5.21",
-    "vue-a11y-dialog": "^0.3.1",
+    "vue-a11y-dialog": "^0.4.0",
     "vue-feather-icons": "^4.7.1",
     "vue-meta": "^1.5.8",
     "vue-mq": "^1.0.1",
@@ -33,11 +34,11 @@
   "devDependencies": {
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.0",
     "@babel/core": "^7.2.2",
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.1",
-    "@vue/cli-plugin-pwa": "^3.2.0",
-    "@vue/cli-plugin-unit-jest": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
+    "@vue/cli-plugin-babel": "^3.2.2",
+    "@vue/cli-plugin-eslint": "^3.2.2",
+    "@vue/cli-plugin-pwa": "^3.2.2",
+    "@vue/cli-plugin-unit-jest": "^3.2.3",
+    "@vue/cli-service": "^3.2.3",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.28",
     "babel-core": "7.0.0-bridge.0",
@@ -51,7 +52,7 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.5.0",
-    "postcss-reporter": "^6.0.0",
+    "postcss-reporter": "^6.0.1",
     "postcss-url": "^8.0.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-processor-html": "^1.0.0",

diff --git a/public/index.html b/public/index.html
@@ -70,6 +70,7 @@ <h1>Oops, that's awkward.</h1>
     </noscript>
 
     <div id="app"></div>
+    <div id="dialog"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/app/App.vue b/src/app/App.vue
@@ -1,5 +1,10 @@
 <template>
   <div id="app">
+    <app-dialog
+      :dialog-id="activeDialog"
+      :type="dialogType"
+      @dialog-ref="assignDialogRef" />
+
     <app-notifications
       class="notifications"
       :message="message" />
@@ -18,10 +23,8 @@
       </h1>
     </app-header>
 
-    <happy-dialog
-      id="new-release-dialog"
-      app-root=".main-wireframe"
-      class="happy-dialog"
+    <portal-dialog
+      dialog-name="new-release-dialog"
       :show="showReleaseDialog"
       @close-dialog="emitCloseDialog">
       <span slot="headline">
@@ -36,7 +39,7 @@
 
         <md-changelog ref="releaseUpdates" />
       </div>
-    </happy-dialog>
+    </portal-dialog>
 
     <router-view />
   </div>
@@ -70,7 +73,8 @@
       return {
         applicationOnline: window && window.navigator && window.navigator.onLine,
         notificationTimeout: 2000,
-        showReleaseDialog: false
+        showReleaseDialog: false,
+        dialog: null
       }
     },
 
@@ -85,13 +89,25 @@
         if (online === false && this.canSeeOfflineNotification) {
           this.showNotification({ message: 'You just went offline.' })
         }
+      },
+
+      activeDialog (dialogName) {
+        if (dialogName) {
+          this.$root.$el.parentNode.classList.add('js-no-scrolling')
+          if (this.dialog) this.dialog.show()
+        } else {
+          this.$root.$el.parentNode.classList.remove('js-no-scrolling')
+          if (this.dialog) this.dialog.hide()
+        }
       }
     },
 
     computed: {
       ...mapState({
         version: state => state.version,
         hasNewRelease: state => state.hasNewRelease,
+        activeDialog: state => state.dialog.active,
+        dialogType: state => state.dialog.type,
         storageType: state => state.storage.type,
         authenticated: state => state.user.authenticated,
         theme: state => state.settings.theme,
@@ -124,8 +140,16 @@
         'loadTags',
         'showNotification',
         'hideNotification',
-        'updateAppHeader'
+        'updateAppHeader',
+        'toggleDialog'
       ]),
+      assignDialogRef (dialog) {
+        this.dialog = dialog
+        if (this.dialog) this.dialog.on('hide', this.onDialogClose)
+      },
+      onDialogClose () {
+        this.toggleDialog({ dialog: false })
+      },
       emitCloseDialog () {
         this.showReleaseDialog = false
       },
@@ -191,6 +215,7 @@
     beforeDestroy () {
       window.removeEventListener('online', this.setApplicationOnline)
       window.removeEventListener('offline', this.setApplicationOffline)
+      if (this.dialog) this.dialog.off('hide', this.onDialogClose)
     }
   }
 </script>

diff --git a/src/app/gallery/Gallery.vue b/src/app/gallery/Gallery.vue
@@ -1,8 +1,7 @@
 <template>
   <div :class="['main-wireframe', { fullscreen }]">
-    <happy-dialog
-      id="gallery-dialog"
-      app-root=".main-wireframe"
+    <portal-dialog
+      dialog-name="gallery-dialog"
       :show="showDialog"
       @close-dialog="closeDialog">
       <span slot="headline">{{ uploadedPhotoName }}</span>
@@ -19,7 +18,7 @@
           Add photo
         </v-button>
       </div>
-    </happy-dialog>
+    </portal-dialog>
 
     <main class="app-content">
       <gallery-options

diff --git a/src/app/intro/components/Storage.vue b/src/app/intro/components/Storage.vue
@@ -1,8 +1,7 @@
 <template>
   <div>
-    <happy-dialog
-      id="happy-dialog"
-      app-root=".settings-data"
+    <portal-dialog
+      dialog-name="intro-storage-dialog"
       :show="showDialog"
       @close-dialog="closeDialog">
       <span slot="headline">Login to Google</span>
@@ -15,7 +14,7 @@
           Open Google sign-in
         </v-button>
       </div>
-    </happy-dialog>
+    </portal-dialog>
 
     <div class="intro-storage box">
       <h2>How do you want to save your plant data?</h2>

diff --git a/src/app/overview/Overview.vue b/src/app/overview/Overview.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="main-wireframe">
     <!-- Alert window pops up as confirmation the user is about to delete plants. -->
-    <happy-dialog
-      id="overview-dialog"
-      app-root=".main-wireframe"
+    <portal-dialog
+      dialog-name="overview-dialog"
       type="danger"
       :show="showDialog"
       @close-dialog="cancelDeleteMode">
@@ -19,7 +18,7 @@
           Yes, delete plants
         </v-button>
       </div>
-    </happy-dialog>
+    </portal-dialog>
 
     <div v-if="showBackdrop"
       class="overview-backdrop"

diff --git a/src/app/plant/components/PlantModal.vue b/src/app/plant/components/PlantModal.vue
@@ -1,25 +1,25 @@
 <template>
-  <happy-dialog
-    id="plant-edit-dialog"
-    app-root=".main-wireframe"
-    class="happy-dialog"
+  <portal-dialog
+    dialog-name="plant-edit-dialog"
     :show="show"
     @close-dialog="emitCloseDialog">
     <span slot="headline">Delete plant</span>
 
-    <v-button
-      color="red"
-      :loading="loading"
-      @click.native="emitDeletePlant">
-      <feather-trash slot="icon" />
-      Yes, delete this plant
-    </v-button>
+    <div>
+      <v-button
+        color="red"
+        :loading="loading"
+        @click.native="emitDeletePlant">
+        <feather-trash slot="icon" />
+        Yes, delete this plant
+      </v-button>
 
-    <div class="modal-meta">
-      <span>Last updated: {{ modified | formatDate }}</span>
-      <span>Created: {{ created | formatDate }}</span>
+      <div class="modal-meta">
+        <span>Last updated: {{ modified | formatDate }}</span>
+        <span>Created: {{ created | formatDate }}</span>
+      </div>
     </div>
-  </happy-dialog>
+  </portal-dialog>
 </template>
 
 <script>

diff --git a/src/app/plant/components/PlantModuleManager.vue b/src/app/plant/components/PlantModuleManager.vue
@@ -1,59 +1,60 @@
 <template>
-  <happy-dialog
-    id="plant-module-manager-dialog"
-    app-root=".main-wireframe"
+  <portal-dialog
+    dialog-name="plant-module-manager-dialog"
     :show="show"
     @close-dialog="cancel">
     <span slot="headline">Manage modules</span>
 
-    <div class="module-content">
-      <div v-if="warnGalleryRemoval" class="module-warning">
-        <p>
-          Disabling the gallery module will also <strong>delete all photos</strong> from it!
-          Are you sure about this?
-        </p>
+    <div>
+      <div class="module-content">
+        <div v-if="warnGalleryRemoval" class="module-warning">
+          <p>
+            Disabling the gallery module will also <strong>delete all photos</strong> from it!
+            Are you sure about this?
+          </p>
+        </div>
+
+        <ul class="module-list">
+          <v-touch
+            tag="li"
+            v-for="(module, index) in updatedModules"
+            :class="getListClass(module)"
+            :key="`module-${index}`"
+            @tap="onToggleModule(module)">
+            <div class="module-icon">
+              <input type="radio"
+                :id="`module-${module.type}`"
+                :name="`module-${module.type}`"
+                :value="module.type"
+                :checked="!cloudOnlyFeature(module) && module.selected"
+                :disabled="cloudOnlyFeature(module)">
+              <span aria-hidden="true">
+                <feather-check />
+              </span>
+            </div>
+            <label class="module-description" :for="`module-${module.type}`">
+              <h2>
+                <component :is="`feather-${module.meta.icon}`" />
+                {{ module.meta.title }}
+              </h2>
+              <span>{{ getModuleDescription(module) }}</span>
+            </label>
+          </v-touch>
+        </ul>
       </div>
 
-      <ul class="module-list">
-        <v-touch
-          tag="li"
-          v-for="(module, index) in updatedModules"
-          :class="getListClass(module)"
-          :key="`module-${index}`"
-          @tap="onToggleModule(module)">
-          <div class="module-icon">
-            <input type="radio"
-              :id="`module-${module.type}`"
-              :name="`module-${module.type}`"
-              :value="module.type"
-              :checked="!cloudOnlyFeature(module) && module.selected"
-              :disabled="cloudOnlyFeature(module)">
-            <span aria-hidden="true">
-              <feather-check />
-            </span>
-          </div>
-          <label class="module-description" :for="`module-${module.type}`">
-            <h2>
-              <component :is="`feather-${module.meta.icon}`" />
-              {{ module.meta.title }}
-            </h2>
-            <span>{{ getModuleDescription(module) }}</span>
-          </label>
-        </v-touch>
-      </ul>
-    </div>
-
-    <div class="dialog-actions">
-      <v-button
-        v-if="warnGalleryRemoval"
-        @click.native="continueModuleEditing">
-        Continue updating
-      </v-button>
-      <v-button v-else @click.native="confirmModuleUpdates">
-        Update modules
-      </v-button>
+      <div class="dialog-actions">
+        <v-button
+          v-if="warnGalleryRemoval"
+          @click.native="continueModuleEditing">
+          Continue updating
+        </v-button>
+        <v-button v-else @click.native="confirmModuleUpdates">
+          Update modules
+        </v-button>
+      </div>
     </div>
-  </happy-dialog>
+  </portal-dialog>
 </template>
 
 <script>

diff --git a/src/app/plant/components/PlantNotes.vue b/src/app/plant/components/PlantNotes.vue
@@ -3,21 +3,22 @@
     <feather-book slot="icon" />
     <h2 slot="title">Notebook</h2>
     <div slot="content">
-      <happy-dialog
-        id="plant-notes-dialog"
-        app-root=".main-wireframe"
+      <portal-dialog
+        dialog-name="plant-notes-dialog"
         :show="showNotes"
         @close-dialog="closeNotes">
         <span slot="headline">Notebook</span>
 
-        <textarea
-          @change="updateContent"
-          :value="content" />
+        <div>
+          <textarea
+            @change="updateContent"
+            :value="content" />
 
-        <v-button @click.native="closeAndSaveNotes">
-          Save
-        </v-button>
-      </happy-dialog>
+          <v-button @click.native="closeAndSaveNotes">
+            Save
+          </v-button>
+        </div>
+      </portal-dialog>
 
       <div v-if="!content"
         key="notes-empty"