Panel notifcations: support themes

getkirby · Apr 30, 2024 · e2c2632 · e2c2632
1 parent 96b6bb5
commit e2c2632
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 31 deletions.
diff --git a/panel/lab/internals/panel/notification/index.vue b/panel/lab/internals/panel/notification/index.vue
@@ -9,7 +9,7 @@
 				</p>
 				<k-code>{{ $panel.notification.context || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.success('Yay')"
 				/>
@@ -24,7 +24,7 @@
 				</p>
 				<k-code>{{ $panel.notification.details || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -44,7 +44,7 @@
 				</p>
 				<k-code>{{ $panel.notification.icon || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -63,7 +63,7 @@
 				</p>
 				<k-code>{{ $panel.notification.message || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -81,7 +81,7 @@
 				</p>
 				<k-code>{{ $panel.notification.timeout || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -100,7 +100,7 @@
 				</p>
 				<k-code>{{ $panel.notification.type || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -118,7 +118,7 @@
 				<k-code language="js">window.panel.notification.close();</k-code>
 				<p>Closes the current notification</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.success('Nice one!')"
 				/>
@@ -136,7 +136,7 @@
 				>
 				<p>Used to show a deprecation warning in the console.</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.deprecated('Don`t use this anymore')"
 				/>
@@ -149,7 +149,7 @@
 				>
 				<p>Displays an error notification.</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.error('Something went wrong')"
 				/>
@@ -162,7 +162,7 @@
 				>
 				<p>Displays a fatal error in an iframe overlay for better isolation</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.fatal('Something went wrong')"
 				/>
@@ -174,11 +174,18 @@
 					>window.panel.notification.open(notification);</k-code
 				>
 				<p>Open a custom notification</p>
+				<k-input :value="icon" type="text" @input="icon = $event" />
+				<k-input :value="text" type="text" @input="text = $event" />
+				<k-input :value="theme" type="text" @input="theme = $event" />
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
-						$panel.notification.open({ type: 'success', message: 'Nice one!' })
+						$panel.notification.open({
+							message: text,
+							icon,
+							theme
+						})
 					"
 				/>
 			</k-text>
@@ -190,11 +197,23 @@
 				>
 				<p>Displays a success notification</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.success('Nice one!')"
 				/>
 			</k-text>
 		</k-lab-example>
 	</k-lab-examples>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			icon: "check",
+			text: "Yay",
+			theme: "positive"
+		};
+	}
+};
+</script>
diff --git a/panel/src/panel/notification.js b/panel/src/panel/notification.js
@@ -11,6 +11,7 @@ export const defaults = () => {
 		icon: null,
 		isOpen: false,
 		message: null,
+		theme: null,
 		timeout: null,
 		type: null
 	};
@@ -89,8 +90,7 @@ export default (panel = {}) => {
 			// convert strings to full error objects
 			if (typeof error === "string") {
 				error = {
-					message: error,
-					type: "error"
+					message: error
 				};
 			}
 
@@ -105,16 +105,16 @@ export default (panel = {}) => {
 			if (panel.context === "view") {
 				panel.dialog.open({
 					component: "k-error-dialog",
-					props: error,
-					type: "error"
+					props: error
 				});
 			}
 
 			// show the error notification bar
 			return this.open({
 				message: error.message,
-				type: "error",
-				icon: "alert"
+				icon: "alert",
+				theme: "negative",
+				type: "error"
 			});
 		},
 
@@ -209,23 +209,13 @@ export default (panel = {}) => {
 			}
 
 			return this.open({
-				timeout: 4000,
-				type: "success",
 				icon: "check",
+				theme: "positive",
+				timeout: 4000,
 				...success
 			});
 		},
 
-		/**
-		 * Getter that converts the notification type
-		 * into the matching notification component theme
-		 *
-		 * @returns {String}
-		 */
-		get theme() {
-			return this.type === "error" ? "negative" : "positive";
-		},
-
 		/**
 		 * Holds the timer object
 		 */

diff --git a/panel/src/panel/notification.test.js b/panel/src/panel/notification.test.js
@@ -19,6 +19,7 @@ describe("panel.notification", () => {
 			icon: null,
 			isOpen: false,
 			message: null,
+			theme: null,
 			timeout: null,
 			type: null
 		};