Merge pull request #6423 from getkirby/enhancement/notifications

Panel notifications: support for theme
getkirby · May 2, 2024 · 984bae0 · 984bae0
2 parents 0850e9c + 154a573
commit 984bae0
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 39 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({
@@ -55,6 +55,19 @@
 				/>
 			</k-text>
 		</k-lab-example>
+		<k-lab-example label="info" :code="false">
+			<k-text>
+				<k-code language="js"
+					>window.panel.notification.info(notification);</k-code
+				>
+				<p>Displays an info notification</p>
+				<k-button
+					icon="megaphone"
+					variant="filled"
+					@click="$panel.notification.info('Did you know?')"
+				/>
+			</k-text>
+		</k-lab-example>
 		<k-lab-example label="message" :code="false">
 			<k-text>
 				<p>
@@ -63,7 +76,7 @@
 				</p>
 				<k-code>{{ $panel.notification.message || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -81,7 +94,7 @@
 				</p>
 				<k-code>{{ $panel.notification.timeout || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -100,7 +113,7 @@
 				</p>
 				<k-code>{{ $panel.notification.type || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -118,7 +131,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 +149,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 +162,7 @@
 				>
 				<p>Displays an error notification.</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.error('Something went wrong')"
 				/>
@@ -162,7 +175,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 +187,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 +210,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/modal.test.js b/panel/src/panel/modal.test.js
@@ -147,8 +147,8 @@ describe.concurrent("panel/modal.js", () => {
 			message: "Test"
 		});
 
-		expect(panel.notification.type).toStrictEqual("success");
 		expect(panel.notification.message).toStrictEqual("Test");
+		expect(panel.notification.theme).toStrictEqual("positive");
 	});
 
 	it("should emit panel events after submit", async () => {

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,36 @@ 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"
+			});
+		},
+
+		/**
+		 * Shortcut to create an info
+		 * notification. You can pass a simple
+		 * string or a state object.
+		 *
+		 * @param {Object|String} info
+		 * @returns {Object} The notification state
+		 */
+		info(info = {}) {
+			if (typeof info === "string") {
+				info = { message: info };
+			}
+
+			return this.open({
+				icon: "info",
+				theme: "info",
+				...info
 			});
 		},
 
@@ -174,6 +194,11 @@ export default (panel = {}) => {
 				return this.success(notification);
 			}
 
+			// add timeout if not error or fatal notification
+			if (notification.type !== "error" && notification.type !== "fatal") {
+				notification.timeout ??= 4000;
+			}
+
 			// set the new state
 			this.set({
 				// add the current editing context
@@ -199,33 +224,18 @@ export default (panel = {}) => {
 		 * @param {Object|String} success
 		 * @returns {Object} The notification state
 		 */
-		success(success) {
-			if (!success) {
-				success = {};
-			}
-
+		success(success = {}) {
 			if (typeof success === "string") {
 				success = { message: success };
 			}
 
 			return this.open({
-				timeout: 4000,
-				type: "success",
 				icon: "check",
+				theme: "positive",
 				...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
 		};
@@ -99,12 +100,16 @@ describe("panel.notification", () => {
 		const notification = Notification(panel);
 
 		notification.success("Test");
-
 		expect(notification.theme).toStrictEqual("positive");
 
-		notification.error("Test");
+		notification.info("Test");
+		expect(notification.theme).toStrictEqual("info");
 
+		notification.error("Test");
 		expect(notification.theme).toStrictEqual("negative");
+
+		notification.open({ theme: "love" });
+		expect(notification.theme).toStrictEqual("love");
 	});
 
 	it("should set a timer for success notifications", async () => {