brian/batch-color-converter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added status and error notification

Browse Source
This commit is contained in:
Brian 2022-04-28 14:25:57 -06:00
parent cd62e90ddb
commit 821a1f88de
Signed by: brian
GPG Key ID: DE1A5390A3B84CD8
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div class="grid-container"> <div class="grid-container relative">
<div v-show="showStatusMessage" class="flex justify-center justify-self-center w-1/5 text-center px-4 py-3 uppercase font-bold bg-green-300 text-green-600 fixed top-0 mt-4 rounded z-10">Copied!</div>
<div v-show="showErrorMessage" class="flex justify-center justify-self-center w-1/5 text-center px-4 py-3 uppercase font-bold bg-red-300 text-red-600 fixed top-0 mt-4 rounded z-10">Failed to copy</div>
<div class="wrapper"> <div class="wrapper">
<div class="grid-header"> <div class="grid-header">
<h1 class="text-center text-4xl font-bold">Batch Color Converter</h1> <h1 class="text-center text-4xl font-bold">Batch Color Converter</h1>
@ -228,17 +231,18 @@ export default defineComponent({
function updateClipboard (text) { function updateClipboard (text) {
navigator.clipboard.writeText(text).then(() => { navigator.clipboard.writeText(text).then(() => {
showErrorMessage = false console.log(showStatusMessage)
showStatusMessage = true showErrorMessage.value = false
showStatusMessage.value = true
setTimeout(() => { setTimeout(() => {
showStatusMessage = false showStatusMessage.value = false
}, 1000) }, 1000)
}) })
.catch(() => { .catch(() => {
showStatusMessage = false showStatusMessage.value = false
showErrorMessage = true showErrorMessage.value = true
setTimeout(() => { setTimeout(() => {
showErrorMessage = false showErrorMessage.value = false
}, 1000) }, 1000)
}) })
} }