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

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