thibaud-lclr/api-client
1
0
Fork 0
Code Packages Activity Actions

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
Show stats 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)
},
},
})