From 023020cd06abcebddd54aaf4ae6df8b09a234660 Mon Sep 17 00:00:00 2001 From: Eric Gauzens Date: Sat, 8 Jul 2023 12:54:24 -0400 Subject: [PATCH] Add button pagination & announcement notification --- src/assets/components/_el-message.scss | 32 ++++++++++---- src/components/Pagination/src/Pagination.vue | 44 ++++++++++++++++++- src/stories/Pagination/pagination.stories.js | 9 ++-- src/stories/Pagination/pagination.stories.mdx | 3 ++ .../notification/notification.stories.js | 26 +++++++++++ .../notification/notification.stories.mdx | 35 +++++++++++++++ utils/notificationMessages.js | 15 +++++++ 7 files changed, 152 insertions(+), 12 deletions(-) diff --git a/src/assets/components/_el-message.scss b/src/assets/components/_el-message.scss index 9c2dfebd..35edaceb 100644 --- a/src/assets/components/_el-message.scss +++ b/src/assets/components/_el-message.scss @@ -1,22 +1,17 @@ @import '../_variables.scss'; .el-message { - padding: 15px 3px 15px 15px; + padding: 1rem; @media screen and (max-width: 767px) { min-width: 250px; } - .el-message__closeBtn { - color: #9CA1A3; - transform: scale(0.8); - top: 35%; - } &.el-message--success { background-color: #F7FFEE; border: 1px solid #5E9F69; .el-icon-circle-check { color: #5E9F69; -webkit-text-stroke-width: 0.016rem; - padding-right: 15px; + padding-right: 1rem; } .el-message__content { color: #303133; @@ -28,10 +23,31 @@ .el-icon-circle-close { color: #B51D09; -webkit-text-stroke-width: 0.016rem; - padding-right: 15px; + padding-right: 1rem; + } + .el-message__content { + color: #303133; } + } + &.el-message--info { + background-color: #f9f2fc;; + border: 1px solid $purple; .el-message__content { color: #303133; + margin: 0 .5rem; + } + .about-icon { + background-color: $purple; + width: 1.5rem; + height: 1.5rem; + display: inline-block; + content: ''; + -webkit-mask: url("data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EDataPortal-Icons%3C/title%3E%3Cpath d='M12,5a7,7,0,1,1-7,7,7.008,7.008,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z'/%3E%3Cpath d='M12,7.148a.9.9,0,1,0,.9.9.9.9,0,0,0-.9-.9Z'/%3E%3Cpath d='M12,17.148a1,1,0,0,1-1-1v-5.4a1,1,0,1,1,2,0v5.4A1,1,0,0,1,12,17.148Z'/%3E%3C/svg%3E"); + mask: url("data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EDataPortal-Icons%3C/title%3E%3Cpath d='M12,5a7,7,0,1,1-7,7,7.008,7.008,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z'/%3E%3Cpath d='M12,7.148a.9.9,0,1,0,.9.9.9.9,0,0,0-.9-.9Z'/%3E%3Cpath d='M12,17.148a1,1,0,0,1-1-1v-5.4a1,1,0,1,1,2,0v5.4A1,1,0,0,1,12,17.148Z'/%3E%3C/svg%3E"); + -webkit-mask-size: contain; + mask-size: contain; + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; } } } diff --git a/src/components/Pagination/src/Pagination.vue b/src/components/Pagination/src/Pagination.vue index 5e6a92f0..997a7e3d 100644 --- a/src/components/Pagination/src/Pagination.vue +++ b/src/components/Pagination/src/Pagination.vue @@ -3,10 +3,11 @@ @@ -27,6 +28,14 @@ export default { totalCount: { type: Number, default: 0 + }, + background: { + type: Boolean, + default: false + }, + pagerCount: { + type: Number, + default: 5 } }, computed: { @@ -51,6 +60,39 @@ export default { padding-top: 1em; text-align: center; + .is-background { + li.more, + li.number { + background: #f9f2fc; + border: 1.5px solid $app-primary-color; + color: $app-primary-color; + border-radius: 50%; + } + .el-pager .more::before { + line-height: 0; + } + li.number.active { + color: white; + } + .btn-next, .btn-prev { + background: $app-primary-color; + color: white; + border-radius: 50%; + } + .btn-next:disabled, .btn-prev:disabled { + background: $lightGrey; + opacity: 0.3; + color: white; + } + .btn-next .el-icon, .btn-prev .el-icon { + font-size: 1rem; + } + li.number:hover { + background: $app-primary-color; + color: white !important; + } + } + button.btn-prev { background: transparent; } diff --git a/src/stories/Pagination/pagination.stories.js b/src/stories/Pagination/pagination.stories.js index 886c2562..6a001541 100644 --- a/src/stories/Pagination/pagination.stories.js +++ b/src/stories/Pagination/pagination.stories.js @@ -6,19 +6,20 @@ export default { includeStories: [] } -const createDemo = (selected, totalCount, pageSize) => { +const createDemo = (selected, totalCount, pageSize, background=false) => { return { components: { Pagination }, data() { return { selected: selected, totalCount: totalCount, - pageSize: pageSize + pageSize: pageSize, + background: background } }, template: `
- +
` } @@ -28,6 +29,8 @@ export const Primary = () => createDemo(3, 100, 20) export const Secondary = () => createDemo(10, 1000, 20) +export const Background = () => createDemo(10, 1000, 20, true) + export const Menu = () => ({ components: { PaginationMenu }, data() { diff --git a/src/stories/Pagination/pagination.stories.mdx b/src/stories/Pagination/pagination.stories.mdx index e30a2fb9..e61c9cf7 100644 --- a/src/stories/Pagination/pagination.stories.mdx +++ b/src/stories/Pagination/pagination.stories.mdx @@ -25,6 +25,9 @@ The pagination component combines pager and page navigation elements to allow th ### Collapsed Pager {stories.Secondary()} +### Button Pager +{stories.Background()} + # Pagination menu The Pagination component can be paired with the PaginationMenu component to provide the user a way to change the `pageSize`. The two components can be connected using the two events they emit in tandem. diff --git a/src/stories/notification/notification.stories.js b/src/stories/notification/notification.stories.js index 5d602ed7..3626b3ad 100644 --- a/src/stories/notification/notification.stories.js +++ b/src/stories/notification/notification.stories.js @@ -106,3 +106,29 @@ export const FailureNotification = () => ({ ` }) + +export const InfoNotification = () => ({ + data() { + return { + notification : { + message: 'Portal Announcement Notification.', + showClose: true, + iconClass: 'about-icon', + customClass: 'el-message--info', + duration: 5000 + } + } + }, + methods: { + clickHandler() { + this.$message(this.notification) + } + }, + template: ` + + Show Notification + + ` +}) diff --git a/src/stories/notification/notification.stories.mdx b/src/stories/notification/notification.stories.mdx index d8d209c4..cb61a825 100644 --- a/src/stories/notification/notification.stories.mdx +++ b/src/stories/notification/notification.stories.mdx @@ -140,6 +140,41 @@ methods() { } ``` +```html + + Show Notification + +``` + +### Announcement Notification + +Announcement messages are used for announcements. + +{stories.InfoNotification()} + +#### Code + +```js +data() { + return { + notification : { + message: 'Portal Announcement Notification.', + showClose: true, + iconClass: 'el-icon-info', + customClass: 'el-message--info', + duration: 5000 + } + } +}, +methods() { + clickHandler() { + this.$message(this.notification) + } +} +``` + ```html { } } +/** + * Information notification message object + * @param {String} message + * @return {Object} + */ +export const infoMessage = message => { + return { + message: message, + showClose: true, + iconClass: 'about-icon', + customClass: 'el-message--info', + duration: 5000 + } +} + /** * Notification message object * @param {String} message