From 8b45e137085cb2b957f81e104dcfe01e7b2f0e59 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Oct 2019 20:10:47 +0100
Subject: [PATCH] Made a little welcome dialog to tell the user about keyboard
 shortcuts. Everybody loves a good keyboard shortcut

---
 src/components/FilterTile.vue           |   5 +
 src/components/KeyboardShortcutInfo.vue | 119 ++++++++++++++++++++++++
 src/views/Home.vue                      |   2 -
 3 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 src/components/KeyboardShortcutInfo.vue

diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
index 0a439b09..ccafe065 100644
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@@ -15,10 +15,12 @@
           @click="clearFilterInput"></i>
       </form>
       <div class="space-filler"></div>
+      <KeyboardShortcutInfo />
   </section>
 </template>
 
 <script>
+import KeyboardShortcutInfo from '@/components/KeyboardShortcutInfo';
 
 export default {
   name: 'FilterTile',
@@ -27,6 +29,9 @@ export default {
       input: '',
     };
   },
+  components: {
+    KeyboardShortcutInfo,
+  },
   methods: {
     userIsTypingSomething() {
       this.$emit('user-is-searchin', this.input);
diff --git a/src/components/KeyboardShortcutInfo.vue b/src/components/KeyboardShortcutInfo.vue
new file mode 100644
index 00000000..4aca58a7
--- /dev/null
+++ b/src/components/KeyboardShortcutInfo.vue
@@ -0,0 +1,119 @@
+<template>
+  <transition name="slide-fade">
+    <div class="kb-sc-info" v-if="!shouldHide">
+      <h5>There are keyboard shortcuts! ⌨️🙌</h5>
+      <div class="close" title="Hide forever [Esc]" @click="hideWelcomeHelper()">x</div>
+      <p title="Press [Esc] to hide this tip forever. See there's even a shortcut for that! 🚀">
+        Just start typing to filter. Then use the tab key to cycle through results,
+        and press enter to launch the selected item. You can hit Esc at anytime to
+        clear the search. Easy 🥳
+      </p>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'KeyboardShortcutInfo',
+  data() {
+    return {
+      shouldHide: true, // False = show/ true = hide. Intuitive, eh?
+    };
+  },
+  methods: {
+    /**
+     * If the session storage item exists, true will be returned
+     * Otherwise, if not then false is returned.
+     * Note the !! just converts 'false' to false, as strings resolve to true
+     */
+    shouldHideWelcomeMessage() {
+      return !!localStorage.hideWelcomeHelpers;
+    },
+    /**
+     * Sets the session storage to 'true', so that it won't be shown again
+     * Then sets the state, also to true, so that it'll be hidden immediatley
+     */
+    hideWelcomeHelper() {
+      localStorage.setItem('hideWelcomeHelpers', true);
+      this.shouldHide = true;
+    },
+  },
+  /**
+   * Once mounted, if it's the users first time here, then we wait 3 seconds,
+   * and show the helpfull little keyboard shortcut dialog.
+   * Then we listen for the Esc key to be pressed, and hide the dialog.
+   */
+  mounted() {
+    const shouldHide = this.shouldHideWelcomeMessage();
+    if (!shouldHide) {
+      window.setTimeout(() => { this.shouldHide = shouldHide; }, 3000);
+      window.addEventListener('keyup', (ev) => {
+        if (ev.keyCode === 27) this.hideWelcomeHelper();
+      });
+    } else { // Meh, component not needed.
+      // No point wasting valuable bytes of your 32GB Ram, lets kill it
+      this.$destroy();
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+    .kb-sc-info {
+      position: fixed;
+      width: 30em;
+      bottom: 0;
+      right: 10px;
+      margin: 0.5em;
+      padding: 0.1em 0.3em;
+      z-index: 10;
+      border-radius: 12px;
+      border: 1px solid #282a32;
+      -webkit-box-shadow: 2px 1px 5px #130f23;
+      box-shadow: 2px 1px 5px #130f23;
+      border: 1px solid #39a1e5;
+      color: #39a1e5;
+      background: #282a32;
+      cursor: default;
+      opacity: 0.94;
+      @media screen and (max-width: 600px) {
+        display: none;
+      }
+      h5 { /* The dialog title */
+        position: absolute;
+        top: -35px;
+        left: 20px;
+        border: 1px solid #39a1e5;
+        color: #39a1e5;
+        background: #282a32;
+        padding: 4px;
+        border-radius: 5px;
+      }
+      .close { /* The little exit icon, in top-right */
+        float: right;
+        border-radius: 20px;
+        width: 1em;
+        padding: 0 0 6px 6px;
+        height: 1em;
+        background: #0000008a;
+        margin-top: 3px;
+        border: 1px solid transparent;
+        cursor: pointer;
+        &:hover {
+          border: 1px solid #39a1e5;
+          opacity: 0.6;
+        }
+      }
+    }
+    /* Animations, animations everywhere */
+    .slide-fade-enter-active {
+      transition: all 1s ease;
+    }
+    .slide-fade-leave-active {
+      transition: all .8s cubic-bezier(.93,.01,.89,.5);
+    }
+    .slide-fade-enter, .slide-fade-leave-to {
+      transform: translateY(35em);
+      opacity: 0;
+    }
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 97bf65bb..bae8f951 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,9 +2,7 @@
   <div class="home">
     <Header />
     <FilterTile @user-is-searchin="searching" class="filter-container" />
-
     <div class="item-group-container">
-
       <masonry
         :cols="{600: 1, 780: 2, 1150: 2, 1780: 3, 9999: 4}"
         :gutter="30"