feat: share and support modals

2021-08-09 17:55:30 +05:30
parent cbf99d2daf
commit aa8b4231e2
27 changed files with 425 additions and 27 deletions
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -58,6 +58,13 @@
                blank
                @click.native="$refs.options.tippy().hide()"
              />
+              <SmartItem
+                :label="$t('app.chat_with_us')"
+                @click.native="
+                  chatWithUs()
+                  $refs.options.tippy().hide()
+                "
+              />
              <hr />
              <SmartItem
                :label="$t('app.twitter')"
@@ -109,6 +116,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"

 export default defineComponent({
@@ -149,6 +157,9 @@ export default defineComponent({
        // fallback
      }
    },
+    chatWithUs() {
+      showChat()
+    },
  },
 })
 </script>
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -0,0 +1,123 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <p class="text-secondaryLight mb-8 px-2">
+        {{ $t("app.invite_description") }}
+      </p>
+      <div class="flex flex-col space-y-2 px-2">
+        <div class="grid gap-4 grid-cols-3">
+          <a
+            v-for="(platform, index) in platforms"
+            :key="`platform-${index}`"
+            :href="platform.link"
+            target="_blank"
+            class="share-link"
+          >
+            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <span class="mt-3">
+              {{ platform.name }}
+            </span>
+          </a>
+          <button class="share-link" @click="copyAppLink">
+            <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
+            <span class="font-medium mt-3">
+              {{ $t("app.copy") }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+export default {
+  props: {
+    show: Boolean,
+  },
+  data() {
+    const url = "https://hoppscotch.io"
+    const text = "Hoppscotch - Open source API development ecosystem."
+    const description =
+      "Helps you create requests faster, saving precious time on development."
+    const subject =
+      "Checkout Hoppscotch - an open source API development ecosystem"
+    const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
+    const twitter = "hoppscotch_io"
+
+    return {
+      url: "https://hoppscotch.io",
+      copyIcon: "content_copy",
+      platforms: [
+        {
+          name: "Email",
+          icon: "email",
+          link: `mailto:?subject=${subject}&body=${summary}`,
+        },
+        {
+          name: "Twitter",
+          icon: "twitter",
+          link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
+        },
+        {
+          name: "Facebook",
+          icon: "facebook",
+          link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+        },
+        {
+          name: "Reddit",
+          icon: "reddit",
+          link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
+        },
+        {
+          name: "LinkedIn",
+          icon: "linkedin",
+          link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+        },
+      ],
+    }
+  },
+  methods: {
+    copyAppLink() {
+      copyToClipboard(this.url)
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.share-link {
+  @apply border border-dividerLight;
+  @apply rounded;
+  @apply flex-col flex;
+  @apply p-4;
+  @apply transition;
+  @apply items-center;
+  @apply justify-center;
+  @apply hover:(bg-primaryLight text-secondaryDark);
+  @apply focus:(border-divider outline-none);
+
+  svg {
+    @apply opacity-80;
+  }
+
+  &:hover {
+    svg {
+      @apply opacity-100;
+    }
+  }
+}
+</style>
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -86,7 +86,19 @@ export default {
          shortcuts: [
            {
              keys: ["?"],
-              label: this.$t("shortcut.show_all"),
+              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"),
            },
          ],
        },
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -1,7 +1,7 @@
 <template>
-  <aside>
+  <aside class="flex h-full justify-between md:flex-col">
    <nav class="flex flex-nowrap md:flex-col">
-      <nuxt-link
+      <NuxtLink
        v-for="(navigation, index) in primaryNavigation"
        :key="`navigation-${index}`"
        :to="localePath(navigation.target)"
@@ -14,13 +14,58 @@
          <SmartIcon :name="navigation.svg" class="svg-icons" />
        </div>
        <span>{{ navigation.title }}</span>
-      </nuxt-link>
+      </NuxtLink>
    </nav>
+    <nav
+      class="
+        flex flex-nowrap
+        p-4
+        items-center
+        justify-center
+        md:(flex-col
+        space-x-0 space-y-2)
+      "
+    >
+      <TabPrimary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="$t('app.invite')"
+        icon="person_add_alt"
+        @click.native="showShare = true"
+      />
+      <TabPrimary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="`${$t('support.title')} <kbd>?</kbd>`"
+        icon="support"
+        @click.native="showSupport = true"
+      />
+    </nav>
+    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" />
  </aside>
 </template>

-<script>
-export default {
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { defineActionHandler } from "~/helpers/actions"
+
+export default defineComponent({
+  setup() {
+    const showSupport = ref(false)
+    const showShare = ref(false)
+
+    defineActionHandler("modals.support.toggle", () => {
+      showSupport.value = !showSupport.value
+    })
+
+    defineActionHandler("modals.share.toggle", () => {
+      showShare.value = !showShare.value
+    })
+
+    return {
+      showSupport,
+      showShare,
+    }
+  },
  data() {
    return {
      primaryNavigation: [
@@ -52,7 +97,7 @@ export default {
      ],
    }
  },
-}
+})
 </script>

 <style scoped lang="scss">
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -0,0 +1,86 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('support.title')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col space-y-2 px-2">
+        <SmartItem
+          icon="menu_book"
+          :label="$t('app.documentation')"
+          to="https://github.com/hoppscotch/hoppscotch/wiki"
+          :description="$t('support.documentation')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          icon="keyboard"
+          :label="$t('app.keyboard_shortcuts')"
+          :description="$t('support.shortcuts')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            showShortcuts()
+            hideModal()
+          "
+        />
+        <SmartItem
+          icon="auto_awesome"
+          :label="$t('app.whats_new')"
+          to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+          :description="$t('support.changelog')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          icon="contact_support"
+          :label="$t('app.chat_with_us')"
+          :description="$t('support.chat')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            chatWithUs()
+            hideModal()
+          "
+        />
+        <SmartItem
+          svg="twitter"
+          :label="$t('app.twitter')"
+          to="https://twitter.com/hoppscotch_io"
+          blank
+          :description="$t('support.twitter')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { invokeAction } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    chatWithUs() {
+      showChat()
+    },
+    showShortcuts() {
+      invokeAction("flyouts.keybinds.toggle")
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -20,6 +20,7 @@
          :key="`contentTypeItem-${index}`"
          :label="contentTypeItem"
          :info-icon="contentTypeItem === contentType ? 'done' : ''"
+          :active-info-icon="contentTypeItem === contentType"
          @click.native="
            contentType = contentTypeItem
            $refs.contentTypeOptions.tippy().hide()
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -41,6 +41,7 @@
                :key="`gen-${index}`"
                :label="gen.name"
                :info-icon="gen.id === codegenType ? 'done' : ''"
+                :active-info-icon="gen.id === codegenType"
                @click.native="
                  codegenType = gen.id
                  $refs.options.tippy().hide()
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -93,6 +93,7 @@
        id="send"
        class="rounded-none min-w-20"
        :label="!loading ? $t('send') : $t('cancel')"
+        :shortcut="[getSpecialKey(), 'G']"
        @click.native="!loading ? newSendRequest() : cancelRequest()"
      />
      <span class="inline-flex">
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -18,7 +18,7 @@
            {{ $t("shortcut.reset_request") }}
          </span>
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.show_all") }}
+            {{ $t("shortcut.general.show_all") }}
          </span>
        </div>
        <div class="flex flex-col space-y-4">
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -14,7 +14,7 @@
            }`"
          />
        </template>
-        <nuxt-link
+        <NuxtLink
          v-for="(locale, index) in $i18n.locales.filter(
            ({ code }) => code !== $i18n.locale
          )"
@@ -23,7 +23,7 @@
          @click="$refs.language.tippy().hide()"
        >
          <SmartItem :label="locale.name" />
-        </nuxt-link>
+        </NuxtLink>
      </tippy>
    </span>
  </span>
--- a/components/smart/FontSizePicker.vue
+++ b/components/smart/FontSizePicker.vue
@@ -17,6 +17,7 @@
          :key="`size-${index}`"
          :label="size.name"
          :info-icon="size.code === active.code ? 'done' : ''"
+          :active-info-icon="size.code === active.code"
          @click.native="
            setActiveFont(size)
            $refs.fontSize.tippy().hide()
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -30,10 +30,17 @@
    :disabled="disabled"
    :tabindex="loading ? '-1' : '0'"
  >
-    <span v-if="!loading" class="inline-flex items-center">
+    <span
+      v-if="!loading"
+      class="inline-flex items-center"
+      :class="{ 'self-start': infoIcon }"
+    >
      <i
        v-if="icon"
-        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        :class="[
+          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          { 'text-accent': active },
+        ]"
        class="material-icons"
      >
        {{ icon }}
@@ -41,7 +48,10 @@
      <SmartIcon
        v-if="svg"
        :name="svg"
-        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        :class="[
+          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          { 'text-accent': active },
+        ]"
        class="svg-icons"
      />
    </span>
@@ -57,7 +67,11 @@
        {{ description }}
      </p>
    </div>
-    <i v-if="infoIcon" class="text-accent ml-6 self-end material-icons">
+    <i
+      v-if="infoIcon"
+      class="ml-6 self-center material-icons items-center"
+      :class="{ 'text-accent': activeInfoIcon }"
+    >
      {{ infoIcon }}
    </i>
  </SmartLink>
@@ -110,6 +124,14 @@ export default {
      type: Boolean,
      default: false,
    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    activeInfoIcon: {
+      type: Boolean,
+      default: false,
+    },
    infoIcon: {
      type: String,
      default: "",
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -162,6 +162,7 @@ export default defineComponent({
      }
    },
    onTransitionLeaveStart() {
+      this.close()
      this.shouldCleanupDomOnUnmount = false
    },
    $getPortal() {