feat: search

2021-08-10 13:46:42 +05:30
parent da74fb5241
commit b612feea41
25 changed files with 493 additions and 256 deletions
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -0,0 +1,109 @@
+<template>
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
+    <template #body>
+      <input
+        id="command"
+        v-focus
+        type="text"
+        name="command"
+        :placeholder="$t('app.type_a_command_search')"
+        class="
+          bg-primary
+          border-b border-dividerLight
+          text-secondaryDark text-base
+          leading-normal
+          px-4
+          pt-2
+          pb-6
+          truncate
+          appearance-none
+          focus:outline-none
+        "
+      />
+      <div
+        class="
+          divide-y divide-dividerLight
+          flex flex-col
+          space-y-4
+          flex-1
+          overflow-auto
+          hide-scrollbar
+        "
+      >
+        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
+          <h5 class="font-normal my-2 text-secondaryLight py-2 px-4">
+            {{ map.section }}
+          </h5>
+          <div
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+            class="
+              rounded
+              cursor-pointer
+              flex
+              py-2
+              px-4
+              transition
+              items-center
+              group
+              hover:bg-primaryLight
+            "
+            @click="
+              runAction(shortcut.action)
+              hideModal()
+            "
+          >
+            <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
+              {{ shortcut.icon }}
+            </i>
+            <span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
+              {{ $t(shortcut.label) }}
+            </span>
+            <span
+              v-for="(key, keyIndex) in shortcut.keys"
+              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
+              class="shortcut-key"
+            >
+              {{ key }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { invokeAction } from "~/helpers/actions"
+import { spotlight } from "~/helpers/shortcuts"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      mappings: spotlight,
+    }
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    runAction(command) {
+      invokeAction(command, "path_from_invokeAction")
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -16,7 +16,6 @@
      >
        <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
        <div class="flex">
-          <ButtonSecondary to="/settings" icon="tune" />
          <ButtonSecondary icon="close" @click.native="close()" />
        </div>
      </div>
@@ -50,8 +49,8 @@
            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
            class="flex items-center"
          >
-            <span class="flex flex-1 text-secondaryLight mr-4">
-              {{ shortcut.label }}
+            <span class="flex flex-1 mr-4">
+              {{ $t(shortcut.label) }}
            </span>
            <span
              v-for="(key, keyIndex) in shortcut.keys"
@@ -68,10 +67,7 @@
 </template>

 <script>
-import {
-  getPlatformSpecialKey,
-  getPlatformAlternateKey,
-} from "~/helpers/platformutils"
+import shortcuts from "~/helpers/shortcuts"

 export default {
  props: {
@@ -80,78 +76,7 @@ export default {
  data() {
    return {
      filterText: "",
-      mappings: [
-        {
-          section: "General",
-          shortcuts: [
-            {
-              keys: ["?"],
-              label: this.$t("shortcut.general.help_menu"),
-            },
-            {
-              keys: ["/"],
-              label: this.$t("shortcut.general.show_all"),
-            },
-            {
-              keys: [getPlatformSpecialKey(), "K"],
-              label: this.$t("shortcut.general.command_menu"),
-            },
-            {
-              keys: ["Esc"],
-              label: this.$t("shortcut.general.close_current_menu"),
-            },
-          ],
-        },
-        {
-          section: "Request",
-          shortcuts: [
-            {
-              keys: [getPlatformSpecialKey(), "G"],
-              label: this.$t("shortcut.send_request"),
-            },
-            {
-              keys: [getPlatformSpecialKey(), "S"],
-              label: this.$t("shortcut.save_to_collections"),
-            },
-            {
-              keys: [getPlatformSpecialKey(), "K"],
-              label: this.$t("shortcut.copy_request_link"),
-            },
-            {
-              keys: [getPlatformSpecialKey(), "I"],
-              label: this.$t("shortcut.reset_request"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "↑"],
-              label: this.$t("shortcut.next_method"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "↓"],
-              label: this.$t("shortcut.previous_method"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "G"],
-              label: this.$t("shortcut.get_method"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "H"],
-              label: this.$t("shortcut.head_method"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "P"],
-              label: this.$t("shortcut.post_method"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "U"],
-              label: this.$t("shortcut.put_method"),
-            },
-            {
-              keys: [getPlatformAlternateKey(), "X"],
-              label: this.$t("shortcut.delete_method"),
-            },
-          ],
-        },
-      ],
+      mappings: shortcuts,
    }
  },
  watch: {
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -26,19 +26,26 @@
        space-x-0 space-y-2)
      "
    >
-      <TabPrimary
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="`${$t('app.search')} <kbd>/</kbd>`"
+        icon="search"
+        @click.native="showSearch = true"
+      />
+      <ButtonSecondary
        v-tippy="{ theme: 'tooltip', placement: 'top' }"
        :title="$t('app.invite')"
        icon="person_add_alt"
        @click.native="showShare = true"
      />
-      <TabPrimary
+      <ButtonSecondary
        v-tippy="{ theme: 'tooltip', placement: 'top' }"
        :title="`${$t('support.title')} <kbd>?</kbd>`"
        icon="support"
        @click.native="showSupport = true"
      />
    </nav>
+    <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
    <AppShare :show="showShare" @hide-modal="showShare = false" />
  </aside>
@@ -50,9 +57,14 @@ import { defineActionHandler } from "~/helpers/actions"

 export default defineComponent({
  setup() {
+    const showSearch = ref(false)
    const showSupport = ref(false)
    const showShare = ref(false)

+    defineActionHandler("modals.search.toggle", () => {
+      showSearch.value = !showSearch.value
+    })
+
    defineActionHandler("modals.support.toggle", () => {
      showSupport.value = !showSupport.value
    })
@@ -62,6 +74,7 @@ export default defineComponent({
    })

    return {
+      showSearch,
      showSupport,
      showShare,
    }
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -5,7 +5,7 @@
    @close="$emit('hide-modal')"
  >
    <template #body>
-      <div class="flex flex-col space-y-2 px-2">
+      <div class="flex flex-col space-y-2">
        <SmartItem
          icon="menu_book"
          :label="$t('app.documentation')"
@@ -48,6 +48,16 @@
            hideModal()
          "
        />
+        <SmartItem
+          svg="discord"
+          :label="$t('app.join_discord_community')"
+          to="https://hoppscotch.io/discord"
+          blank
+          :description="$t('support.community')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
        <SmartItem
          svg="twitter"
          :label="$t('app.twitter')"
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -15,10 +15,13 @@
            {{ $t("shortcut.send_request") }}
          </span>
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.reset_request") }}
+            {{ $t("shortcut.general.show_all") }}
          </span>
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.show_all") }}
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
          </span>
        </div>
        <div class="flex flex-col space-y-4">
@@ -28,7 +31,10 @@
          </div>
          <div class="flex">
            <span class="shortcut-key">{{ getSpecialKey() }}</span>
-            <span class="shortcut-key">I</span>
+            <span class="shortcut-key">K</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">/</span>
          </div>
          <div class="flex">
            <span class="shortcut-key">?</span>
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -47,7 +47,10 @@
              md:m-4
            "
          >
-            <div class="flex pl-2 items-center justify-between">
+            <div
+              v-if="title"
+              class="flex mb-4 pl-2 items-center justify-between"
+            >
              <h3 class="heading">{{ title }}</h3>
              <span class="flex">
                <slot name="actions"></slot>
@@ -59,20 +62,13 @@
              </span>
            </div>
            <div
-              class="
-                flex flex-col
-                max-h-md
-                my-4
-                py-2
-                overflow-y-auto
-                hide-scrollbar
-              "
+              class="flex flex-col max-h-md py-2 overflow-y-auto hide-scrollbar"
            >
              <slot name="body"></slot>
            </div>
            <div
              v-if="hasFooterSlot"
-              class="flex flex-1 p-2 items-center justify-between"
+              class="flex flex-1 mt-4 p-2 items-center justify-between"
            >
              <slot name="footer"></slot>
            </div>