add video tutorial to configurator (#430)

* Video tutorial * V-if not v-show * Wizard power * label * Add message * add some flair - zvecr * Change icon state when video is enabled * Remove wrong key from mapState * CSS Rules for Help video (#11) Adds padding, box-shadow, background-color, and border-radius to give the video a frame.
qmk · Jul 9, 2019 · 9ab306c · 9ab306c
1 parent 7741b7e
commit 9ab306c
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -29,6 +29,43 @@
       <p>{{ $t('message.maintain') }}</p>
       <p>{{ $t('message.hostedOn') }}</p>
     </footer>
+    <div
+      class="help"
+      :class="helpClasses"
+      @click="toggleTutorial"
+      :title="$t('message.help.label')"
+      @mouseenter="
+        setMessage($t('message.help.label'));
+        hover = true;
+      "
+      @mouseleave="
+        setMessage('');
+        hover = false;
+      "
+    >
+      <font-awesome-icon
+        v-show="!tutorialEnabled"
+        icon="hat-wizard"
+        transform="rotate-22"
+        size="3x"
+      />
+      <font-awesome-icon
+        v-show="tutorialEnabled"
+        icon="magic"
+        transform="rotate-185"
+        size="3x"
+      />
+    </div>
+    <iframe
+      v-if="tutorialEnabled"
+      class="embedded-tutorial"
+      width="560"
+      height="315"
+      src="https://www.youtube.com/embed/tx54jkRC9ZY"
+      frameborder="0"
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+    ></iframe>
   </div>
 </template>
 <script>
@@ -52,7 +89,8 @@ export default {
       interval: 120000,
       destroyWatcher: undefined,
       panel: undefined,
-      settingsClasses: ''
+      settingsClasses: '',
+      hover: false
     };
   },
   watch: {
@@ -78,13 +116,25 @@ export default {
     }
   },
   computed: {
-    ...mapState(['showSpinner', 'spinnerMsg', 'message']),
+    ...mapState(['showSpinner', 'spinnerMsg', 'message', 'tutorialEnabled']),
     showInfoBar() {
       return this.message !== '';
+    },
+    helpClasses() {
+      var classes = [];
+      if (this.hover) {
+        classes.push('faa-tada', 'animated-hover');
+      }
+      return classes.join(' ');
     }
   },
   methods: {
-    ...mapMutations(['setShowSpinner', 'setSettingsPanel']),
+    ...mapMutations([
+      'setShowSpinner',
+      'setSettingsPanel',
+      'toggleTutorial',
+      'setMessage'
+    ]),
     randomPotatoFact() {
       const len = size(this.$t('message.potato'));
       this.potatoFact = this.$t('message.potato.' + random(1, len));
@@ -136,4 +186,62 @@ div.openSettings > button {
 .hideSettings {
   display: none;
 }
+.embedded-tutorial {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 4000;
+  background-color: #ddd;
+  padding: 6px;
+  border-radius: 3px;
+  box-shadow: 0 0 3px #0009;
+}
+
+.help {
+  position: fixed;
+  top: 30px;
+  right: 10px;
+  opacity: 0.7;
+  cursor: pointer;
+  color: blue;
+}
+/* TADA - from https://l-lin.github.io/font-awesome-animation/ */
+@keyframes tada {
+  0% {
+    transform: scale(1);
+  }
+  10%,
+  20% {
+    transform: scale(0.9) rotate(-8deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: scale(1.3) rotate(8deg);
+  }
+  40%,
+  60% {
+    transform: scale(1.3) rotate(-8deg);
+  }
+  80%,
+  100% {
+    transform: scale(1) rotate(0);
+  }
+}
+
+.faa-tada.animated,
+.faa-tada.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-tada {
+  animation: tada 2s linear infinite;
+}
+.faa-tada.animated.faa-fast,
+.faa-tada.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
+  animation: tada 1s linear infinite;
+}
+.faa-tada.animated.faa-slow,
+.faa-tada.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
+  animation: tada 3s linear infinite;
+}
 </style>
diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue
@@ -37,15 +37,31 @@
           @change="toggleDisplaySizes"
         />
       </div>
+      <div>
+        <label
+          class="settings-panel--text"
+          @mouseover="help('displaySizes')"
+          :title="$t('message.settingsPanel.displaySizes.title')"
+        >
+          {{ $t('message.settingsPanel.toggleTutorial.label') }}
+        </label>
+      </div>
+      <div>
+        <toggle-button
+          :value="tutorialEnabled"
+          :sync="true"
+          :labels="labels"
+          @change="toggleTutorial"
+        />
+      </div>
     </div>
     <div v-if="helpText" class="settings-panel--help-text">
       {{ helpText }}
     </div>
   </div>
 </template>
 <script>
-import { createNamespacedHelpers } from 'vuex';
-const { mapState, mapMutations } = createNamespacedHelpers('keymap');
+import { mapMutations, mapState } from 'vuex';
 import { ToggleButton } from 'vue-js-toggle-button';
 export default {
   name: 'settings-panel',
@@ -61,10 +77,12 @@ export default {
   },
   components: { ToggleButton },
   computed: {
-    ...mapState(['continuousInput', 'displaySizes'])
+    ...mapState('keymap', ['continuousInput', 'displaySizes']),
+    ...mapState('app', ['tutorialEnabled'])
   },
   methods: {
-    ...mapMutations(['toggleDisplaySizes', 'toggleContinuousInput']),
+    ...mapMutations('keymap', ['toggleDisplaySizes', 'toggleContinuousInput']),
+    ...mapMutations('app', ['toggleTutorial']),
     help(key) {
       switch (key) {
         case 'fastInput':

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
@@ -5,6 +5,9 @@ export default {
   en: {
     message: {
       ...potato,
+      help: {
+        label: 'Summon Wizard'
+      },
       print: { ...print },
       tester: { ...tester },
       keyboard: {
@@ -104,6 +107,10 @@ export default {
           title: 'ctrl + alt + u',
           help: 'Show keycap sizes in Key Units'
         },
+        toggleTutorial: {
+          label: 'Video Tutorial',
+          help: 'Mechmerlin video guide'
+        },
         on: {
           label: 'On'
         },

diff --git a/src/main.js b/src/main.js
@@ -35,7 +35,9 @@ import {
   faChevronLeft,
   faPrint,
   faUndo,
-  faTrash
+  faTrash,
+  faHatWizard,
+  faMagic
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faApple,
@@ -67,6 +69,8 @@ library.add(faChevronLeft);
 library.add(faPrint);
 library.add(faUndo);
 library.add(faTrash);
+library.add(faHatWizard);
+library.add(faMagic);
 
 ga.init(router);
 

diff --git a/src/store/modules/app.js b/src/store/modules/app.js
@@ -28,7 +28,8 @@ const state = {
   message: '',
   settingsPanelVisible: false,
   author: '',
-  notes: ''
+  notes: '',
+  tutorialEnabled: false
 };
 
 const steno_keyboards = ['gergo', 'georgi'];
@@ -277,6 +278,9 @@ const mutations = {
   },
   setNotes(state, newNotes) {
     state.notes = newNotes;
+  },
+  toggleTutorial(state) {
+    state.tutorialEnabled = !state.tutorialEnabled;
   }
 };