feat: migrate all copy to clipboard actions to v-clipboard

2021-07-27 18:17:41 +05:30
parent 37ad8e08fc
commit 78fccc8583
21 changed files with 120 additions and 129 deletions
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -10,7 +10,7 @@
        items-center
      "
    >
-      Hoppscotch
+      <AppLogo />
    </div>
    <div class="space-x-2 flex-shrink-0 inline-flex items-center">
      <AppGitHubStarButton class="mt-1 mr-2" />
--- a/components/app/Logo.vue
+++ b/components/app/Logo.vue
@@ -1,19 +1,7 @@
 <template>
-  <svg
-    class="fill-current logo"
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    viewBox="0 0 612 612"
-  >
-    <g xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M4.283 208.326c-28.015 71.685 84.358 182.589 250.992 247.71 166.634 65.121 324.428 59.801 352.442-11.884 17.432-44.606-19.496-104.396-90.027-158.893-.489 22.675-4.952 44.944-13.309 66.328-3.559 9.108-11.697 21.519-30.254 28.923-10.853 4.33-24.392 6.526-40.242 6.526-40.758 0-99.372-14.662-156.792-39.22-27.484-11.755-52.967-25.125-73.694-38.665-23.871-15.594-41.229-31.196-51.592-46.373-15.399-22.551-13.289-40.954-8.807-52.421 8.368-21.412 20.275-40.884 35.185-57.777-88.789-7.765-156.47 11.143-173.902 55.746zm542.506 203.868c7.682-5.648 19.708-2.339 26.861 7.39 7.153 9.729 6.724 22.194-.958 27.842s-19.709 2.339-26.861-7.39c-7.153-9.729-6.724-22.194.958-27.842zm-297.979-5.647c3.842-9.832 16.98-13.886 29.344-9.054 12.363 4.832 19.271 16.719 15.428 26.552-3.842 9.832-16.98 13.887-29.344 9.054-12.363-4.832-19.269-16.72-15.428-26.552zM51.312 246.776c-11.854 2.301-22.937-3.422-24.754-12.782-1.817-9.361 6.321-18.813 18.174-21.114 11.854-2.301 22.937 3.422 24.754 12.782 1.817 9.36-6.319 18.813-18.174 21.114z"
-      />
-      <path
-        d="M433.885 363.563c24.904 0 42.999-6.106 48.633-20.52 9.669-24.741 13.162-50.371 11.229-75.19-4.919-63.176-45.008-121.096-107.987-145.708-20.393-7.97-41.378-11.745-62.027-11.744-43.118.003-84.718 16.481-116.132 45.623-18.252 16.932-33.069 38.136-42.738 62.878-21.567 55.188 173.67 144.661 269.022 144.661z"
-      />
-    </g>
+  <svg class="logo" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+    <circle class="fill-current" r="8" cx="50%" cy="50%" />
+    <circle class="fill-primary" r="6" cx="50%" cy="50%" />
  </svg>
 </template>

--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -17,10 +17,11 @@
      color
        ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
-      label ? 'px-3' : 'px-2',
+      label ? 'px-4' : 'px-2',
      rounded ? 'rounded-full' : 'rounded',
      { 'opacity-75 cursor-not-allowed': disabled },
      { 'flex-row-reverse': reverse },
+      { 'px-6 py-4 text-lg': large },
      {
        'border border-divider hover:border-dividerDark focus:border-dividerDark':
          outline,
@@ -106,6 +107,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
    outline: {
      type: Boolean,
      default: false,
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -53,13 +53,6 @@
          <label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
            {{ $t("generated_code") }}
          </label>
-          <ButtonSecondary
-            ref="copyRequestCode"
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('copy')"
-            :icon="copyIcon"
-            @click.native="copyRequestCode"
-          />
        </div>
        <SmartAceEditor
          v-if="codegenType"
@@ -67,8 +60,8 @@
          :value="requestCode"
          :lang="codegens.find((x) => x.id === codegenType).language"
          :options="{
-            maxLines: '16',
-            minLines: '8',
+            maxLines: 16,
+            minLines: 8,
            fontSize: '12px',
            autoScrollEditorIntoView: true,
            readOnly: true,
@@ -79,6 +72,15 @@
        />
      </div>
    </template>
+    <template #footer>
+      <ButtonPrimary
+        ref="copyRequestCode"
+        :label="$t('copy')"
+        :icon="copyIcon"
+        @click.native="copyRequestCode"
+      />
+      <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+    </template>
  </SmartModal>
 </template>

@@ -149,16 +151,12 @@ export default defineComponent({
      this.$emit("handle-import")
    },
    copyRequestCode() {
-      const editor: any = this.$refs.generatedCode
-
-      editor.editor.selectAll()
-      editor.editor.focus()
-
-      document.execCommand("copy")
+      this.$clipboard(this.requestCode)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
        icon: "done",
      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
    },
  },
 })
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -27,8 +27,8 @@
    <SmartJsEditor
      v-model="preRequestScript"
      :options="{
-        maxLines: '16',
-        minLines: '8',
+        maxLines: 16,
+        minLines: 8,
        fontSize: '12px',
        autoScrollEditorIntoView: true,
        showPrintMargin: false,
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -53,8 +53,8 @@
        v-model="rawParamsBody"
        :lang="rawInputEditorLang"
        :options="{
-          maxLines: '16',
-          minLines: '8',
+          maxLines: 16,
+          minLines: 8,
          fontSize: '12px',
          autoScrollEditorIntoView: true,
          showPrintMargin: false,
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -276,12 +276,7 @@ export default defineComponent({
          .then(() => {})
          .catch(() => {})
      } else {
-        const dummy = document.createElement("input")
-        document.body.appendChild(dummy)
-        dummy.value = window.location.href
-        dummy.select()
-        document.execCommand("copy")
-        document.body.removeChild(dummy)
+        this.$clipboard(window.location.href)
        this.$toast.info(this.$t("copied_to_clipboard"), {
          icon: "done",
        })
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -27,8 +27,8 @@
    <SmartJsEditor
      v-model="testScript"
      :options="{
-        maxLines: '16',
-        minLines: '8',
+        maxLines: 16,
+        minLines: 8,
        fontSize: '12px',
        autoScrollEditorIntoView: true,
        showPrintMargin: false,
--- a/components/landing/CTA.vue
+++ b/components/landing/CTA.vue
@@ -1,34 +1,38 @@
 <template>
-  <div class="bg-primaryLight rounded flex p-4">
-    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <div
-        v-for="(cta, index) in ctas"
-        :key="`cta-${index}`"
-        class="flex-col p-8 inline-flex"
-      >
-        <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
-        <div class="flex-grow">
-          <h2
-            class="
-              font-semibold
-              mt-4
-              text-lg text-secondaryDark
-              mb-2
-              transition
-            "
-          >
-            {{ cta.title }}
-          </h2>
-          <p>
-            {{ cta.description }}
-          </p>
-          <p class="mt-2">
-            <SmartLink :to="cta.link.target" class="link" blank>
-              {{ cta.link.title }}
-              <i class="material-icons">chevron_right</i>
-            </SmartLink>
-          </p>
-        </div>
+  <div
+    class="
+      bg-primaryLight
+      rounded
+      flex
+      grid
+      p-4
+      gap-4
+      grid-cols-1
+      md:grid-cols-2
+      lg:grid-cols-3
+    "
+  >
+    <div
+      v-for="(cta, index) in ctas"
+      :key="`cta-${index}`"
+      class="flex-col p-8 inline-flex"
+    >
+      <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
+      <div class="flex-grow">
+        <h2
+          class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
+        >
+          {{ cta.title }}
+        </h2>
+        <p>
+          {{ cta.description }}
+        </p>
+        <p class="mt-2">
+          <SmartLink :to="cta.link.target" class="link" blank>
+            {{ cta.link.title }}
+            <i class="material-icons">chevron_right</i>
+          </SmartLink>
+        </p>
      </div>
    </div>
  </div>
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col p-6 relative md:flex-row">
-    <div class="my-16 max-w-2xl z-10 relative">
+  <div class="flex flex-col p-6 relative">
+    <div class="flex flex-col mt-16 items-center justify-center">
      <h2
        class="
-          font-semibold
-          text-accent
+          font-extrabold
+          text-accent text-center
          leading-none
          tracking-tighter
          text-4xl
@@ -14,20 +14,32 @@
      >
        Open Source
      </h2>
-      <h3 class="my-4 text-secondaryDark text-3xl md:text-4xl lg:text-5xl">
+      <h3
+        class="
+          font-extrabold
+          my-4
+          text-center text-secondaryDark
+          leading-none
+          tracking-tighter
+          text-3xl
+          md:text-4xl
+          lg:text-5xl
+        "
+      >
        API Development Ecosystem
      </h3>
-      <p class="my-4 text-lg">
+      <p class="my-4 text-lg text-center max-w-2xl">
        Thousands of developers and companies build, ship, and maintain their
        APIs on Hoppscotch — the transparent and most flexible API development
        ecosystem in the world.
      </p>
-      <div class="flex space-x-4 my-8 items-center">
+      <div class="flex space-x-4 my-8 justify-center items-center">
        <ButtonPrimary
          label="Get Started"
          icon="arrow_forward"
          rounded
          reverse
+          large
          @click.native="showLogin = true"
        />
        <ButtonSecondary
@@ -41,9 +53,9 @@
          :shortcut="['30k Stars']"
        />
      </div>
-      <LandingStats />
+      <!-- <LandingStats /> -->
    </div>
-    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"></div>
+    <div class="flex flex-col items-center justify-center"></div>
    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
  </div>
 </template>
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -47,7 +47,7 @@
        :lang="'html'"
        :options="{
          maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
          fontSize: '12px',
          autoScrollEditorIntoView: true,
          readOnly: true,
@@ -102,13 +102,7 @@ export default {
      }, 1000)
    },
    copyResponse() {
-      const aux = document.createElement("textarea")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -41,7 +41,7 @@
        :provide-j-s-o-n-outline="true"
        :options="{
          maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
          fontSize: '12px',
          autoScrollEditorIntoView: true,
          readOnly: true,
@@ -113,13 +113,7 @@ export default {
      }, 1000)
    },
    copyResponse() {
-      const aux = document.createElement("textarea")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -40,7 +40,7 @@
        :lang="'plain_text'"
        :options="{
          maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
          fontSize: '12px',
          autoScrollEditorIntoView: true,
          readOnly: true,
@@ -104,13 +104,7 @@ export default {
      }, 1000)
    },
    copyResponse() {
-      const aux = document.createElement("textarea")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -40,7 +40,7 @@
        :lang="'xml'"
        :options="{
          maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
          fontSize: '12px',
          autoScrollEditorIntoView: true,
          readOnly: true,
@@ -95,13 +95,7 @@ export default {
      }, 1000)
    },
    copyResponse() {
-      const aux = document.createElement("textarea")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",