From d40e3d563b9868dce4262a50ce6258db03331169 Mon Sep 17 00:00:00 2001 From: smanylov Date: Tue, 31 Mar 2026 13:47:27 +0700 Subject: [PATCH] continue: add notification page styles --- src/app/styles/pages-styles.scss | 73 +++++++- .../ui/notifications/notifications-list.tsx | 159 ++++++++++++------ src/i18n/messages/en.json | 3 +- src/i18n/messages/ru.json | 3 +- 4 files changed, 179 insertions(+), 59 deletions(-) diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index f24bb2c..0e24db7 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -5054,14 +5054,21 @@ overflow-x: auto; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + max-width: calc(100vw - var(--side-bar-width) - 60px); + + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } } &-header { - background-color: v.$bg-light; padding: 20px 20px; font-size: 18px; font-weight: 600; border-bottom: 1px solid v.$b-color-2; + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + color: v.$white; + display: flex; justify-content: space-between; @@ -5076,15 +5083,22 @@ } &-action { + display: flex; + gap: 10px; + .btn-primary { - /* background: v.$p-color; */ - background: #2b7fff; + background: white; + color: black; + font-weight: 600; + font-size: 14px; padding: 5px 20px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } } &-body { padding: 0; + background: v.$white; .notification { &-item { @@ -5098,6 +5112,57 @@ } } + &-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + &-body { + flex-grow: 1; + } + + &-title { + font-weight: 600; + font-size: 18px; + margin-bottom: 4px; + } + + &-text { + color: v.$text-s; + margin-bottom: 4px; + } + + &-status { + background: v.$b-color-2; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + user-select: none; + } + + &-footer { + display: flex; + justify-content: space-between; + align-items: center; + + .btn-remove { + color: v.$white; + background: v.$status-new; + padding: 4px 18px; + + &:hover { + background: #ff9100; + } + } + } + + &-date { + color: v.$text-m; + font-size: 14px; + text-align: start; + } + &-check { display: flex; align-items: center; @@ -5118,8 +5183,6 @@ } } } - - &-text {} } } } \ No newline at end of file diff --git a/src/app/ui/notifications/notifications-list.tsx b/src/app/ui/notifications/notifications-list.tsx index e597261..efa1ff0 100644 --- a/src/app/ui/notifications/notifications-list.tsx +++ b/src/app/ui/notifications/notifications-list.tsx @@ -9,6 +9,8 @@ interface Notification { notificationText: string, data: string, link: string, + title: string, + status: string, } const noitficationList: Notification[] = [ @@ -16,31 +18,41 @@ const noitficationList: Notification[] = [ id: '1', notificationText: 'text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1', data: '20.20.20', - link: '#' + link: '#', + title: 'title 1', + status: 'status' }, { id: '2', - notificationText: 'text2', + notificationText: 'text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 ', data: '20.20.20', - link: '#' + link: '#', + title: 'title 2', + status: 'status' }, { id: '3', - notificationText: 'text3', + notificationText: 'text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 ', data: '20.20.20', - link: '#' + link: '#', + title: 'title 3', + status: 'status' }, { id: '4', - notificationText: 'text4', + notificationText: 'text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 ', data: '20.20.20', - link: '#' + link: '#', + title: 'title 4', + status: 'status' }, { id: '5', - notificationText: 'text5', + notificationText: 'text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 ', data: '20.20.20', - link: '#' + link: '#', + title: 'title 5', + status: 'status' } ]; @@ -50,7 +62,8 @@ export function NotificationsList() { function selectHandler(fileId: string) { setSelectedFiles((prev) => { - const newSet = new Set(prev) + const newSet = new Set(prev); + if (newSet.has(fileId)) { newSet.delete(fileId) } else { @@ -64,68 +77,110 @@ export function NotificationsList() { setSelectedFiles(new Set()); } + function selectAllHandler() { + setSelectedFiles(new Set(noitficationList.map(item => item.id))); + } + return (
-
-

- {t('all-notifications')} -

+

+ {t('all-notifications')} +

-
- {(selectedFiles.size !== 0) && ( - - )} -
-
- {(noitficationList.length !== 0) && ( - noitficationList.map(item => { - return ( + {(selectedFiles.size !== 0) && ( + + )} + +
+
+
+ {(noitficationList.length !== 0) && ( + noitficationList.map(item => { + return ( +
+ +
+ +
- + {item.title} +
+
+ {item.status} +
-
{item.notificationText}
+
+
+ {item.data} +
+ + +
- ) - }) - )} -
+
+ ) + }) + )} ) diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 405994b..3fe6ccc 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -386,7 +386,8 @@ "all": "All", "mark-all-as-read": "Mark all as read", "all-notifications": "All notifications", - "deselect": "Deselect" + "deselect": "Deselect", + "select-all": "Select all" }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index cb7bb0d..f5a6f12 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -386,7 +386,8 @@ "all": "Все", "mark-all-as-read": "Отметить все как прочитанное", "all-notifications": "Все уведомления", - "deselect": "Снять выделение" + "deselect": "Снять выделение", + "select-all": "Выбрать все" }, "Login-register-form": { "and": "и",