btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: better icon button states

Browse Source
This commit is contained in:
liyasthomas
2021-06-29 17:04:02 +05:30
parent 729f341164
commit 9a83938c75
10 changed files with 99 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/environments/Edit.vue
View File

@@ -28,7 +28,7 @@
class="icon button" class="icon button"
@click="clearContent($event)" @click="clearContent($event)"
> >
<i class="material-icons">clear_all</i> <i class="material-icons">{{ clearIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -118,7 +118,7 @@ export default Vue.extend({
return { return {
name: null as string | null, name: null as string | null,
vars: [] as { key: string; value: string }[], vars: [] as { key: string; value: string }[],
doneButton: '<i class="material-icons">done</i>', clearIcon: "clear_all",
} }
}, },
watch: { watch: {
@@ -132,17 +132,13 @@ export default Vue.extend({
}, },
}, },
methods: { methods: {
clearContent({ target }: { target: HTMLElement }) { clearContent() {
this.vars = [] this.vars = []
this.clearIcon = "done"
target.innerHTML = this.doneButton
this.$toast.info(this.$t("cleared").toString(), { this.$toast.info(this.$t("cleared").toString(), {
icon: "clear_all", icon: "clear_all",
}) })
setTimeout( setTimeout(() => (this.clearIcon = "clear_all"), 1000)
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
1000
)
}, },
addEnvironmentVariable() { addEnvironmentVariable() {
this.vars.push({ this.vars.push({

18
components/http/CodegenModal.vue
View File

@@ -48,7 +48,7 @@
class="icon button" class="icon button"
@click="copyRequestCode" @click="copyRequestCode"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -84,8 +84,7 @@ export default {
data() { data() {
return { return {
codegens, codegens,
copyButton: '<i class="material-icons">content_copy</i>', copyIcon: "content_copy",
doneButton: '<i class="material-icons">done</i>',
} }
}, },
computed: { computed: {
@@ -106,17 +105,14 @@ export default {
this.$emit("handle-import") this.$emit("handle-import")
}, },
copyRequestCode() { copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
this.$refs.generatedCode.editor.selectAll() this.$refs.generatedCode.editor.selectAll()
this.$refs.generatedCode.editor.focus() this.$refs.generatedCode.editor.focus()
document.execCommand("copy") document.execCommand("copy")
setTimeout( this.copyIcon = "done"
() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), this.$toast.success(this.$t("copied_to_clipboard"), {
1000 icon: "done",
) })
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
}, },
}, },
} }

9
components/http/RawBody.vue
View File

@@ -12,7 +12,7 @@
class="icon button" class="icon button"
@click="prettifyRequestBody" @click="prettifyRequestBody"
> >
<i class="material-icons">photo_filter</i> <i class="material-icons">{{ prettifyIcon }}</i>
</button> </button>
<label for="payload" class="p-0"> <label for="payload" class="p-0">
<button <button
@@ -69,7 +69,7 @@ export default {
}, },
data() { data() {
return { return {
doneButton: '<i class="material-icons">done</i>', prettifyIcon: "photo_filter",
} }
}, },
computed: { computed: {
@@ -112,9 +112,8 @@ export default {
try { try {
const jsonObj = JSON.parse(this.rawParamsBody) const jsonObj = JSON.parse(this.rawParamsBody)
this.rawParamsBody = JSON.stringify(jsonObj, null, 2) this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
const oldIcon = this.$refs.prettifyRequest.innerHTML this.prettifyIcon = "done"
this.$refs.prettifyRequest.innerHTML = this.doneButton setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
} catch (e) { } catch (e) {
this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, { this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
icon: "error", icon: "error",

26
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -37,7 +37,7 @@
class="icon button" class="icon button"
@click="downloadResponse" @click="downloadResponse"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadIcon }}</i>
</button> </button>
<button <button
v-if="response.body" v-if="response.body"
@@ -46,7 +46,7 @@
class="icon button" class="icon button"
@click="copyResponse" @click="copyResponse"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -87,9 +87,8 @@ export default {
return { return {
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16, responseBodyMaxLines: 16,
doneButton: '<i class="material-icons">done</i>', downloadIcon: "save_alt",
downloadButton: '<i class="material-icons">save_alt</i>', copyIcon: "content_copy",
copyButton: '<i class="material-icons">content_copy</i>',
previewEnabled: false, previewEnabled: false,
} }
}, },
@@ -109,21 +108,17 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton this.downloadIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
const aux = document.createElement("textarea") const aux = document.createElement("textarea")
const copy = this.responseBodyText const copy = this.responseBodyText
aux.innerText = copy aux.innerText = copy
@@ -131,10 +126,11 @@ export default {
aux.select() aux.select()
document.execCommand("copy") document.execCommand("copy")
document.body.removeChild(aux) document.body.removeChild(aux)
setTimeout( this.copyIcon = "done"
() => (this.$refs.copyResponse.innerHTML = this.copyButton), this.$toast.success(this.$t("copied_to_clipboard"), {
1000 icon: "done",
) })
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
}, },
togglePreview() { togglePreview() {
this.previewEnabled = !this.previewEnabled this.previewEnabled = !this.previewEnabled

9
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -10,7 +10,7 @@
class="icon button" class="icon button"
@click="downloadResponse" @click="downloadResponse"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -28,8 +28,7 @@ export default {
data() { data() {
return { return {
imageSource: "", imageSource: "",
doneButton: '<i class="material-icons">done</i>', downloadIcon: "save_alt",
downloadButton: '<i class="material-icons">save_alt</i>',
} }
}, },
computed: { computed: {
@@ -81,14 +80,14 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton this.downloadIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },
}, },

26
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -25,7 +25,7 @@
class="icon button" class="icon button"
@click="downloadResponse" @click="downloadResponse"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadIcon }}</i>
</button> </button>
<button <button
v-if="response.body" v-if="response.body"
@@ -34,7 +34,7 @@
class="icon button" class="icon button"
@click="copyResponse" @click="copyResponse"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -71,9 +71,8 @@ export default {
return { return {
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16, responseBodyMaxLines: 16,
doneButton: '<i class="material-icons">done</i>', downloadIcon: "save_alt",
downloadButton: '<i class="material-icons">save_alt</i>', copyIcon: "content_copy",
copyButton: '<i class="material-icons">content_copy</i>',
} }
}, },
computed: { computed: {
@@ -115,21 +114,17 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton this.downloadIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
const aux = document.createElement("textarea") const aux = document.createElement("textarea")
const copy = this.responseBodyText const copy = this.responseBodyText
aux.innerText = copy aux.innerText = copy
@@ -137,10 +132,11 @@ export default {
aux.select() aux.select()
document.execCommand("copy") document.execCommand("copy")
document.body.removeChild(aux) document.body.removeChild(aux)
setTimeout( this.copyIcon = "done"
() => (this.$refs.copyResponse.innerHTML = this.copyButton), this.$toast.success(this.$t("copied_to_clipboard"), {
1000 icon: "done",
) })
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
}, },
}, },
} }

26
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -25,7 +25,7 @@
class="icon button" class="icon button"
@click="downloadResponse" @click="downloadResponse"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadIcon }}</i>
</button> </button>
<button <button
v-if="response.body" v-if="response.body"
@@ -34,7 +34,7 @@
class="icon button" class="icon button"
@click="copyResponse" @click="copyResponse"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -70,9 +70,8 @@ export default {
return { return {
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16, responseBodyMaxLines: 16,
doneButton: '<i class="material-icons">done</i>', downloadIcon: "save_alt",
downloadButton: '<i class="material-icons">save_alt</i>', copyIcon: "content_copy",
copyButton: '<i class="material-icons">content_copy</i>',
} }
}, },
computed: { computed: {
@@ -106,21 +105,17 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton this.downloadIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
const aux = document.createElement("textarea") const aux = document.createElement("textarea")
const copy = this.responseBodyText const copy = this.responseBodyText
aux.innerText = copy aux.innerText = copy
@@ -128,10 +123,11 @@ export default {
aux.select() aux.select()
document.execCommand("copy") document.execCommand("copy")
document.body.removeChild(aux) document.body.removeChild(aux)
setTimeout( this.copyIcon = "done"
() => (this.$refs.copyResponse.innerHTML = this.copyButton), this.$toast.success(this.$t("copied_to_clipboard"), {
1000 icon: "done",
) })
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
}, },
}, },
} }

26
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -25,7 +25,7 @@
class="icon button" class="icon button"
@click="downloadResponse" @click="downloadResponse"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadIcon }}</i>
</button> </button>
<button <button
v-if="response.body" v-if="response.body"
@@ -34,7 +34,7 @@
class="icon button" class="icon button"
@click="copyResponse" @click="copyResponse"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -69,9 +69,8 @@ export default {
return { return {
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16, responseBodyMaxLines: 16,
doneButton: '<i class="material-icons">done</i>', copyIcon: "content_copy",
downloadButton: '<i class="material-icons">save_alt</i>', downloadIcon: "save_alt",
copyButton: '<i class="material-icons">content_copy</i>',
} }
}, },
computed: { computed: {
@@ -97,21 +96,17 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton this.downloadIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
const aux = document.createElement("textarea") const aux = document.createElement("textarea")
const copy = this.responseBodyText const copy = this.responseBodyText
aux.innerText = copy aux.innerText = copy
@@ -119,10 +114,11 @@ export default {
aux.select() aux.select()
document.execCommand("copy") document.execCommand("copy")
document.body.removeChild(aux) document.body.removeChild(aux)
setTimeout( this.copyIcon = "done"
() => (this.$refs.copyResponse.innerHTML = this.copyButton), this.$toast.success(this.$t("copied_to_clipboard"), {
1000 icon: "done",
) })
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
}, },
}, },
} }

77
pages/graphql.vue
View File

@@ -179,7 +179,7 @@
class="icon button" class="icon button"
@click="downloadSchema" @click="downloadSchema"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadSchemaIcon }}</i>
</button> </button>
<button <button
ref="copySchemaCode" ref="copySchemaCode"
@@ -187,7 +187,7 @@
class="icon button" class="icon button"
@click="copySchema" @click="copySchema"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copySchemaIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -236,14 +236,14 @@
class="icon button" class="icon button"
@click="copyQuery" @click="copyQuery"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyQueryIcon }}</i>
</button> </button>
<button <button
v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`" v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
class="icon button" class="icon button"
@click="doPrettifyQuery" @click="doPrettifyQuery"
> >
<i class="material-icons">photo_filter</i> <i class="material-icons">{{ prettifyIcon }}</i>
</button> </button>
<button <button
ref="saveRequest" ref="saveRequest"
@@ -304,7 +304,7 @@
class="icon button" class="icon button"
@click="downloadResponse" @click="downloadResponse"
> >
<i class="material-icons">save_alt</i> <i class="material-icons">{{ downloadResponseIcon }}</i>
</button> </button>
<button <button
v-if="response" v-if="response"
@@ -313,7 +313,7 @@
class="icon button" class="icon button"
@click="copyResponse" @click="copyResponse"
> >
<i class="material-icons">content_copy</i> <i class="material-icons">{{ copyResponseIcon }}</i>
</button> </button>
</div> </div>
</div> </div>
@@ -503,9 +503,12 @@ export default {
mutationFields: [], mutationFields: [],
subscriptionFields: [], subscriptionFields: [],
graphqlTypes: [], graphqlTypes: [],
copyButton: '<i class="material-icons">content_copy</i>', downloadResponseIcon: "save_alt",
downloadButton: '<i class="material-icons">save_alt</i>', downloadSchemaIcon: "save_alt",
doneButton: '<i class="material-icons">done</i>', copyQueryIcon: "content_copy",
copySchemaIcon: "content_copy",
copyResponseIcon: "content_copy",
prettifyIcon: "photo_filter",
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16, responseBodyMaxLines: 16,
graphqlFieldsFilterText: undefined, graphqlFieldsFilterText: undefined,
@@ -711,6 +714,8 @@ export default {
getSpecialKey: getPlatformSpecialKey, getSpecialKey: getPlatformSpecialKey,
doPrettifyQuery() { doPrettifyQuery() {
this.$refs.queryEditor.prettifyQuery() this.$refs.queryEditor.prettifyQuery()
this.prettifyIcon = "done"
setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
}, },
async handleJumpToType(type) { async handleJumpToType(type) {
this.$refs.gqlTabs.selectTab(this.$refs.typesTab) this.$refs.gqlTabs.selectTab(this.$refs.typesTab)
@@ -731,41 +736,23 @@ export default {
return t return t
}, },
copySchema() { copySchema() {
this.$refs.copySchemaCode.innerHTML = this.doneButton this.copyToClipboard(this.schema)
const aux = document.createElement("textarea") this.copySchemaIcon = "done"
aux.innerText = this.schema setTimeout(() => (this.copySchemaIcon = "content_copy"), 1000)
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
setTimeout(
() => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
1000
)
}, },
copyQuery() { copyQuery() {
this.$refs.copyQueryButton.innerHTML = this.doneButton this.copyToClipboard(this.gqlQueryString)
const aux = document.createElement("textarea") this.copyQueryIcon = "done"
aux.innerText = this.gqlQueryString setTimeout(() => (this.copyQueryIcon = "content_copy"), 1000)
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
setTimeout(
() => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
1000
)
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponseButton.innerHTML = this.doneButton this.copyToClipboard(this.response)
this.copyResponseIcon = "done"
setTimeout(() => (this.copyResponseIcon = "content_copy"), 1000)
},
copyToClipboard(content) {
const aux = document.createElement("textarea") const aux = document.createElement("textarea")
aux.innerText = this.response aux.innerText = content
document.body.appendChild(aux) document.body.appendChild(aux)
aux.select() aux.select()
document.execCommand("copy") document.execCommand("copy")
@@ -773,10 +760,6 @@ export default {
this.$toast.success(this.$t("copied_to_clipboard"), { this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done", icon: "done",
}) })
setTimeout(
() => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
1000
)
}, },
async runQuery() { async runQuery() {
const startTime = Date.now() const startTime = Date.now()
@@ -1093,14 +1076,14 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton this.downloadResponseIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton this.downloadResponseIcon = "save_alt"
}, 1000) }, 1000)
}, },
downloadSchema() { downloadSchema() {
@@ -1112,14 +1095,14 @@ export default {
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}` a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a) document.body.appendChild(a)
a.click() a.click()
this.$refs.downloadSchema.innerHTML = this.doneButton this.downloadSchemaIcon = "done"
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
this.$refs.downloadSchema.innerHTML = this.downloadButton this.downloadSchemaIcon = "save_alt"
}, 1000) }, 1000)
}, },
addRequestHeader() { addRequestHeader() {

14
pages/settings.vue
View File

@@ -136,7 +136,7 @@
class="icon button" class="icon button"
@click="resetProxy" @click="resetProxy"
> >
<i class="material-icons">clear_all</i> <i class="material-icons">{{ clearIcon }}</i>
</button> </button>
</div> </div>
<input <input
@@ -227,7 +227,7 @@ export default Vue.extend({
? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion() ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
: null, : null,
doneButton: '<i class="material-icons">done</i>', clearIcon: "clear_all",
SYNC_COLLECTIONS: true, SYNC_COLLECTIONS: true,
SYNC_ENVIRONMENTS: true, SYNC_ENVIRONMENTS: true,
@@ -309,17 +309,13 @@ export default Vue.extend({
) { ) {
this.applySetting(name, value) this.applySetting(name, value)
}, },
resetProxy({ target }: { target: HTMLElement }) { resetProxy() {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`) applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
this.clearIcon = "done"
target.innerHTML = this.doneButton
this.$toast.info(this.$t("cleared"), { this.$toast.info(this.$t("cleared"), {
icon: "clear_all", icon: "clear_all",
}) })
setTimeout( setTimeout(() => (this.clearIcon = "clear_all"), 1000)
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
1000
)
}, },
}, },
}) })