From: Adam Dullage <redacted>
Date: Tue, 30 Apr 2024 15:52:20 +0000 (+0100)
Subject: Move toast and associated styling to custom component
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=c1412fc344491994c6fc833481ac65c34986ef9e;p=flatnotes.git

Move toast and associated styling to custom component
---

diff --git a/client/App.vue b/client/App.vue
index 4aeaec4..f61ab0f 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">
-    <Toast position="bottom-right" />
+    <PrimeToast />
     <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />
     <RouterView />
   </div>
 </template>
 
 <script setup>
-import Toast from "primevue/toast";
 import { computed, onBeforeMount } from "vue";
 import { RouterView, useRoute } from "vue-router";
 
@@ -15,6 +14,7 @@ import { getConfig } from "./api.js";
 import { useGlobalStore } from "./globalStore.js";
 import NavBar from "./partials/NavBar.vue";
 import { loadStoredToken } from "./tokenStorage.js";
+import PrimeToast from "./components/PrimeToast.vue";
 
 const globalStore = useGlobalStore();
 const route = useRoute();
diff --git a/client/components/PrimeToast.vue b/client/components/PrimeToast.vue
new file mode 100644
index 0000000..6fb2cf1
--- /dev/null
+++ b/client/components/PrimeToast.vue
@@ -0,0 +1,23 @@
+<template>
+  <Toast position="bottom-right" :pt="style" />
+</template>
+
+<script setup>
+import Toast from "primevue/toast";
+
+const style = {
+  message: "flex flex-col items-end ml-[20px]",
+  container: ({ props }) => ({
+    class: [
+      "mt-2 px-3 py-2 rounded-lg max-w-96",
+      "bg-theme-background-elevated border border-l-2 border-theme-border",
+      {
+        "border-l-theme-success": props.message.severity == "success",
+        "border-l-theme-failure": props.message.severity == "error",
+      },
+    ],
+  }),
+  icon: "invisible h-0 w-0",
+  summary: "font-bold",
+};
+</script>
diff --git a/client/index.js b/client/index.js
index 834a22c..fbea270 100644
--- a/client/index.js
+++ b/client/index.js
@@ -3,7 +3,6 @@ import PrimeVue from "primevue/config";
 import ToastService from "primevue/toastservice";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
-import { primeStyles } from "./style.js";
 import router from "/router.js";
 
 const app = createApp(App);
@@ -11,9 +10,6 @@ const pinia = createPinia();
 
 app.use(router);
 app.use(pinia);
-app.use(PrimeVue, {
-  unstyled: true,
-  pt: primeStyles,
-});
+app.use(PrimeVue, { unstyled: true });
 app.use(ToastService);
 app.mount("#app");
diff --git a/client/style.js b/client/style.js
deleted file mode 100644
index d3a8451..0000000
--- a/client/style.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export const primeStyles = {
-  toast: {
-    message: "flex flex-col items-end ml-[20px]",
-    container: ({ props }) => ({
-      class: [
-        "mt-2 px-3 py-2 rounded-lg max-w-96",
-        "bg-theme-background-elevated border border-l-2 border-theme-border ",
-        {
-          "border-l-theme-success": props.message.severity == "success",
-          "border-l-theme-failure": props.message.severity == "error",
-        },
-      ],
-    }),
-    icon: "invisible h-0 w-0",
-    summary: "font-bold",
-  },
-};