Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Panel notifications: support for theme #6423

Merged
merged 3 commits into from
May 2, 2024
Merged

Panel notifications: support for theme #6423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2c2632
Panel notifcations: support themes
distantnative Apr 30, 2024
ca7966d
Panel notification: improve timeout handling
distantnative Apr 30, 2024
154a573
`panel.notification.info(message)`
distantnative Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 45 additions & 13 deletions panel/lab/internals/panel/notification/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
/>
Expand All @@ -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({
Expand All @@ -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({
Expand All @@ -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>
Expand All @@ -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({
Expand All @@ -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({
Expand All @@ -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({
Expand All @@ -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!')"
/>
Expand All @@ -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')"
/>
Expand All @@ -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')"
/>
Expand All @@ -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')"
/>
Expand All @@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion panel/src/panel/modal.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
56 changes: 33 additions & 23 deletions panel/src/panel/notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const defaults = () => {
icon: null,
isOpen: false,
message: null,
theme: null,
timeout: null,
type: null
};
Expand Down Expand Up @@ -89,8 +90,7 @@ export default (panel = {}) => {
// convert strings to full error objects
if (typeof error === "string") {
error = {
message: error,
type: "error"
message: error
};
}

Expand All @@ -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
});
},

Expand Down Expand Up @@ -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
Expand All @@ -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
*/
Expand Down
9 changes: 7 additions & 2 deletions panel/src/panel/notification.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ describe("panel.notification", () => {
icon: null,
isOpen: false,
message: null,
theme: null,
timeout: null,
type: null
};
Expand Down Expand Up @@ -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 () => {
Expand Down
Loading