diff --git a/components/app/Header.vue b/components/app/Header.vue index fc92b8f3c..267bb4413 100644 --- a/components/app/Header.vue +++ b/components/app/Header.vue @@ -10,7 +10,7 @@ items-center " > - Hoppscotch +
diff --git a/components/app/Logo.vue b/components/app/Logo.vue index f11358f31..5ff1b07bb 100644 --- a/components/app/Logo.vue +++ b/components/app/Logo.vue @@ -1,19 +1,7 @@ diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue index c23475a45..037ec80d1 100644 --- 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, diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue index 05d357682..5149293cc 100644 --- a/components/http/CodegenModal.vue +++ b/components/http/CodegenModal.vue @@ -53,13 +53,6 @@ -
+ + @@ -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) }, }, }) diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue index f49cc4c98..ad42f3040 100644 --- a/components/http/PreRequestScript.vue +++ b/components/http/PreRequestScript.vue @@ -27,8 +27,8 @@ -
-
- {{ cta.icon }} -
-

- {{ cta.title }} -

-

- {{ cta.description }} -

-

- - {{ cta.link.title }} - chevron_right - -

-
+
+
+ {{ cta.icon }} +
+

+ {{ cta.title }} +

+

+ {{ cta.description }} +

+

+ + {{ cta.link.title }} + chevron_right + +

diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue index 0fc9ced8f..1c2c4d776 100644 --- a/components/landing/Hero.vue +++ b/components/landing/Hero.vue @@ -1,10 +1,10 @@ diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue index c489d77f2..90651a1f7 100644 --- 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", diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue index cd6c15b4b..8f0b959dc 100644 --- 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", diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue index c77ae5af9..df4282e09 100644 --- 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", diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue index afc9b02b0..fd853c03b 100644 --- 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", diff --git a/nuxt.config.js b/nuxt.config.js index 87a4bfde8..d0337e6ff 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -94,6 +94,7 @@ export default { // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) plugins: [ "~/plugins/v-tippy", + "~/plugins/v-clipboard", "~/plugins/vuex-persist", "~/plugins/vue-rx", "~/plugins/vue-apollo", diff --git a/package-lock.json b/package-lock.json index 392c79ce8..c55ed2af1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "socketio-wildcard": "^2.0.0", "splitpanes": "^2.3.8", "tern": "^0.24.3", + "v-clipboard": "^2.2.3", "vue-apollo": "^3.0.7", "vue-cli-plugin-apollo": "^0.22.2", "vue-functional-data-merge": "^3.1.0", @@ -28822,6 +28823,11 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/v-clipboard": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz", + "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw==" + }, "node_modules/v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -55442,6 +55448,11 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, + "v-clipboard": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz", + "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw==" + }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", diff --git a/package.json b/package.json index bed8acd5c..9cad9cd3b 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "socketio-wildcard": "^2.0.0", "splitpanes": "^2.3.8", "tern": "^0.24.3", + "v-clipboard": "^2.2.3", "vue-apollo": "^3.0.7", "vue-cli-plugin-apollo": "^0.22.2", "vue-functional-data-merge": "^3.1.0", diff --git a/pages/documentation.vue b/pages/documentation.vue index 51ea3b529..0da0ffcb6 100644 --- a/pages/documentation.vue +++ b/pages/documentation.vue @@ -41,8 +41,8 @@ :lang="'json'" :lint="false" :options="{ - maxLines: '16', - minLines: '8', + maxLines: 16, + minLines: 8, fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, diff --git a/pages/graphql.vue b/pages/graphql.vue index ca4772d09..f7da7d9e2 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -75,7 +75,7 @@ v-tippy="{ theme: 'tooltip' }" :title="`${$t( 'prettify_query' - )} (${getSpecialKey()}-P)`" + )} ${getSpecialKey()}P`" :icon="prettifyQueryIcon" @click.native="prettifyQuery" /> @@ -94,7 +94,7 @@ :on-run-g-q-l-query="runQuery" :options="{ maxLines: Infinity, - minLines: '16', + minLines: 16, fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, @@ -146,7 +146,7 @@ :lang="'json'" :options="{ maxLines: Infinity, - minLines: '16', + minLines: 16, fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, @@ -333,7 +333,7 @@ :lint="false" :options="{ maxLines: Infinity, - minLines: '16', + minLines: 16, fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, @@ -541,7 +541,7 @@ :lang="'graphqlschema'" :options="{ maxLines: Infinity, - minLines: '16', + minLines: 16, fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, @@ -879,12 +879,7 @@ export default defineComponent({ setTimeout(() => (this.copyVariablesIcon = "content_copy"), 1000) }, copyToClipboard(content) { - const aux = document.createElement("textarea") - aux.innerText = content - document.body.appendChild(aux) - aux.select() - document.execCommand("copy") - document.body.removeChild(aux) + this.$clipboard(content) this.$toast.success(this.$t("copied_to_clipboard"), { icon: "done", }) diff --git a/plugins/v-clipboard.js b/plugins/v-clipboard.js new file mode 100644 index 000000000..2e9aaacd8 --- /dev/null +++ b/plugins/v-clipboard.js @@ -0,0 +1,4 @@ +import Vue from "vue" +import Clipboard from "v-clipboard" + +Vue.use(Clipboard) diff --git a/vue-shim.d.ts b/vue-shim.d.ts index b39982764..889e6e29f 100644 --- a/vue-shim.d.ts +++ b/vue-shim.d.ts @@ -1,4 +1,5 @@ +import Vue from "vue" + declare module "*.vue" { - import Vue from "vue" export default Vue }