Browse Source

feat(webapp): add icon to copy to clipboard snackbar

Rotzbua 2 years ago
parent
commit
c94b9b4912
1 changed files with 10 additions and 5 deletions
  1. 10 5
      www/webapp/src/views/DomainSetup.vue

+ 10 - 5
www/webapp/src/views/DomainSetup.vue

@@ -116,6 +116,7 @@
 
 
     <!-- copy snackbar -->
     <!-- copy snackbar -->
     <v-snackbar v-model="snackbar">
     <v-snackbar v-model="snackbar">
+      <v-icon v-if="snackbar_icon">{{ snackbar_icon }}</v-icon>
       {{ snackbar_text }}
       {{ snackbar_text }}
 
 
       <template #action="{ attrs }">
       <template #action="{ attrs }">
@@ -134,7 +135,7 @@
 
 
 <script>
 <script>
 import {useUserStore} from "@/store/user";
 import {useUserStore} from "@/store/user";
-import {mdiContentCopy, mdiNumeric0Circle, mdiNumeric1Circle, mdiNumeric2Circle, mdiNumeric3Circle} from "@mdi/js";
+import {mdiContentCopy, mdiAlert, mdiNumeric0Circle, mdiNumeric1Circle, mdiNumeric2Circle, mdiNumeric3Circle, mdiCheck} from "@mdi/js";
 
 
 export default {
 export default {
   name: 'DomainSetup',
   name: 'DomainSetup',
@@ -157,6 +158,8 @@ export default {
     },
     },
   },
   },
   data: () => ({
   data: () => ({
+    mdiAlert,
+    mdiCheck,
     mdiContentCopy,
     mdiContentCopy,
     mdiNumeric0Circle,
     mdiNumeric0Circle,
     mdiNumeric1Circle,
     mdiNumeric1Circle,
@@ -164,6 +167,7 @@ export default {
     mdiNumeric3Circle,
     mdiNumeric3Circle,
     user: useUserStore(),
     user: useUserStore(),
     snackbar: false,
     snackbar: false,
+    snackbar_icon: '',
     snackbar_text: '',
     snackbar_text: '',
     tab1: 'ns',
     tab1: 'ns',
     tab2: 'ds',
     tab2: 'ds',
@@ -193,17 +197,18 @@ export default {
       try {
       try {
         await navigator.clipboard.writeText(text).then(
         await navigator.clipboard.writeText(text).then(
             () => {
             () => {
-              this.showSnackbar("Copied to clipboard.");
+              this.showSnackbar("Copied to clipboard.", mdiCheck);
             },
             },
             () => {
             () => {
-              this.showSnackbar("Copy to clipboard not allowed. Please try again manually.");
+              this.showSnackbar("Copy to clipboard not allowed. Please try again manually.", mdiAlert);
             },
             },
         );
         );
       } catch (e) {
       } catch (e) {
-        this.showSnackbar("Copy to clipboard failed. Please try again manually.");
+        this.showSnackbar("Copy to clipboard failed. Please try again manually.", mdiAlert);
       }
       }
     },
     },
-    showSnackbar: function (text) {
+    showSnackbar: function (text, icon = '') {
+      this.snackbar_icon = icon;
       this.snackbar_text = text;
       this.snackbar_text = text;
       this.snackbar = true;
       this.snackbar = true;
     }
     }