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

18
components/http/CodegenModal.vue
View File

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

9
components/http/RawBody.vue
View File

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

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

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

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

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

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

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

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

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

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

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

77
pages/graphql.vue
View File

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

14
pages/settings.vue
View File

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