@omniumretail/component-library 1.2.29 → 1.2.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +1 -1
- package/dist/main.css +1 -1
- package/package.json +1 -1
- package/src/components/BellNotifications/BellNotifications.stories.tsx +89 -19
- package/src/components/BellNotifications/index.tsx +33 -51
- package/src/components/BellNotifications/styles.module.scss +30 -11
- package/src/components/Header/Header.stories.tsx +173 -0
package/dist/main.css
CHANGED
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
.aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
|
|
32
32
|
.OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
|
|
33
33
|
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center;max-width:calc(100% - 60px)}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px;width:30px;display:flex;align-items:center;justify-content:center}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
|
|
34
|
-
.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;
|
|
34
|
+
@media(max-width: 768px){.muC1BdCbIEMIs70EtJoA{position:unset}}.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;padding:0 !important}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100vw}}@media(min-width: 1024px){.msELhnfhfo6un3c4Spoc{max-width:600px;max-height:700px}}@media(max-width: 768px){.oGsIq0O_Hzwg2mLR72la{position:absolute}}.KSVguXBQ_A1SUSR6e8Wq{overflow-y:auto;max-height:calc(100vh - 60px - 72px - 43px)}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff !important;cursor:pointer}.GeNg2HVTmhQDmsLLTpWj:hover{background-color:#f9f9f9}@media(max-width: 768px){.GeNg2HVTmhQDmsLLTpWj{padding:8px}}.GBb48KXbGnQtAY8xqmUp{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:#f5f5f5;border-bottom:1px solid #e8e8e8}.LoCH7sYpmK3VgRASqTgz{font-size:20px;cursor:pointer;color:#595959}.Xjs10kZPSsD_BVFomnIe{color:#ff674c;margin-right:8px}.oibCayv_cOyhyWCKzHSr{display:flex;align-items:center;gap:10px}.oibCayv_cOyhyWCKzHSr span{font-size:14px;font-weight:500;color:#595959}.hhwYXSd0CR75D8ETnUML{display:flex;align-items:center;position:relative;padding-left:12px}@media(max-width: 768px){.hhwYXSd0CR75D8ETnUML{padding-left:8px}}.LkP1cqeAyAYI9rCurnE8{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:16px}@media(max-width: 768px){.LkP1cqeAyAYI9rCurnE8{font-size:12px}}.u_jT9kmq2kyThRlj8HT1{width:50px;height:50px;margin-left:10px;margin-right:10px}@media(max-width: 768px){.u_jT9kmq2kyThRlj8HT1{width:40px;height:40px;margin-left:8px;margin-right:8px}}.ieGdf5FTgLUPcfuZi7Xz{flex:1;overflow:hidden}.QgZ3oHW9IRTexL8xWVqP{font-weight:bold;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}@media(max-width: 768px){.QgZ3oHW9IRTexL8xWVqP{font-size:12px}}.JwfbSOSIRAz5OO2hiSFc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%;font-size:12px;color:#666;margin-top:2px}@media(max-width: 768px){.JwfbSOSIRAz5OO2hiSFc{font-size:10px}}.XfXQBYqMfZc4p8s2Mhla{width:6px;height:6px;background-color:#1890ff;border-radius:50%;margin-left:10px}@media(max-width: 768px){.XfXQBYqMfZc4p8s2Mhla{width:4px;height:4px;margin-left:8px}}.RGXTlVxCxbZpD6__J5_g{font-size:12px}.rWa5cnbZQLDtxFxJU6qA{font-size:20px;cursor:pointer}@media(max-width: 768px){.rWa5cnbZQLDtxFxJU6qA{font-size:18px}}.Pus_rAoqX05D4Qz2pYxo{animation:Pus_rAoqX05D4Qz2pYxo 1s ease-in-out infinite}@keyframes Pus_rAoqX05D4Qz2pYxo{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ const Template: Story<BellNotificationsProps> = (args) => <BellNotifications {..
|
|
|
10
10
|
|
|
11
11
|
const notifications = [
|
|
12
12
|
{
|
|
13
|
-
"Id": "
|
|
13
|
+
"Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
|
|
14
14
|
"Title": "Creation of an Evaluation Cycle",
|
|
15
15
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
16
16
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -21,10 +21,10 @@ const notifications = [
|
|
|
21
21
|
"Name": "High",
|
|
22
22
|
"ColorHex": "#E05151"
|
|
23
23
|
},
|
|
24
|
-
"IsRead":
|
|
24
|
+
"IsRead": true
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
"Id": "
|
|
27
|
+
"Id": "0AF18720-1C94-48CD-8DF3-D254077E8363",
|
|
28
28
|
"Title": "Creation of an Evaluation Cycle",
|
|
29
29
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
30
30
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -35,10 +35,10 @@ const notifications = [
|
|
|
35
35
|
"Name": "High",
|
|
36
36
|
"ColorHex": "#E05151"
|
|
37
37
|
},
|
|
38
|
-
"IsRead":
|
|
38
|
+
"IsRead": true
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
|
-
"Id": "
|
|
41
|
+
"Id": "0419654F-66FE-41EA-BBA4-D8BB6E3D6B33",
|
|
42
42
|
"Title": "Creation of an Evaluation Cycle",
|
|
43
43
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
44
44
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -49,10 +49,10 @@ const notifications = [
|
|
|
49
49
|
"Name": "High",
|
|
50
50
|
"ColorHex": "#E05151"
|
|
51
51
|
},
|
|
52
|
-
"IsRead":
|
|
52
|
+
"IsRead": true
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
|
-
"Id": "
|
|
55
|
+
"Id": "CC98EDA1-0461-4D08-982E-8424EF4AFB3B",
|
|
56
56
|
"Title": "Creation of an Evaluation Cycle",
|
|
57
57
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
58
58
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -66,7 +66,7 @@ const notifications = [
|
|
|
66
66
|
"IsRead": false
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
|
-
"Id": "
|
|
69
|
+
"Id": "3DB9310A-4BF8-4B90-8D5A-7583473664BB",
|
|
70
70
|
"Title": "Creation of an Evaluation Cycle",
|
|
71
71
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
72
72
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -80,32 +80,102 @@ const notifications = [
|
|
|
80
80
|
"IsRead": false
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
|
-
"Id": "
|
|
84
|
-
"Title": "Creation of
|
|
85
|
-
"Description": "A new
|
|
83
|
+
"Id": "D6FB93EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
84
|
+
"Title": "Creation of a new user",
|
|
85
|
+
"Description": "A new user was created in the platform with the mecanographic number 8111.",
|
|
86
86
|
"RedirectURL": "https://www.google.pt",
|
|
87
|
-
"Icon": "https://
|
|
88
|
-
"ExpirationDate":
|
|
87
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
88
|
+
"ExpirationDate": 1736985600,
|
|
89
89
|
"Criticality": {
|
|
90
90
|
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
91
91
|
"Name": "High",
|
|
92
92
|
"ColorHex": "#E05151"
|
|
93
93
|
},
|
|
94
|
-
"IsRead":
|
|
94
|
+
"IsRead": false
|
|
95
95
|
},
|
|
96
96
|
{
|
|
97
|
-
"Id": "
|
|
98
|
-
"Title": "Creation of a new
|
|
99
|
-
"Description": "A new
|
|
97
|
+
"Id": "D6FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
98
|
+
"Title": "Creation of a new action of inspection",
|
|
99
|
+
"Description": "A new inspection action was created.",
|
|
100
100
|
"RedirectURL": "https://www.google.pt",
|
|
101
|
-
"Icon": "https://
|
|
101
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
102
102
|
"ExpirationDate": 1736985600,
|
|
103
103
|
"Criticality": {
|
|
104
104
|
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
105
105
|
"Name": "High",
|
|
106
106
|
"ColorHex": "#E05151"
|
|
107
107
|
},
|
|
108
|
-
"IsRead":
|
|
108
|
+
"IsRead": false
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"Id": "D6FB96EE-3655-42B2-8EC1-27E7AC3F5249",
|
|
112
|
+
"Title": "Creation of a new action of inspection",
|
|
113
|
+
"Description": "A new inspection action was created.",
|
|
114
|
+
"RedirectURL": "https://www.google.pt",
|
|
115
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
116
|
+
"ExpirationDate": 1736985600,
|
|
117
|
+
"Criticality": {
|
|
118
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
119
|
+
"Name": "High",
|
|
120
|
+
"ColorHex": "#E05151"
|
|
121
|
+
},
|
|
122
|
+
"IsRead": false
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"Id": "D6FB96EE-3255-46B2-8EC1-27E7AC3F5249",
|
|
126
|
+
"Title": "Creation of a new action of inspection",
|
|
127
|
+
"Description": "A new inspection action was created.",
|
|
128
|
+
"RedirectURL": "https://www.google.pt",
|
|
129
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
130
|
+
"ExpirationDate": 1736985600,
|
|
131
|
+
"Criticality": {
|
|
132
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
133
|
+
"Name": "High",
|
|
134
|
+
"ColorHex": "#E05151"
|
|
135
|
+
},
|
|
136
|
+
"IsRead": false
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"Id": "D9FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
140
|
+
"Title": "Creation of a new action of inspection",
|
|
141
|
+
"Description": "A new inspection action was created.",
|
|
142
|
+
"RedirectURL": "https://www.google.pt",
|
|
143
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
144
|
+
"ExpirationDate": 1736985600,
|
|
145
|
+
"Criticality": {
|
|
146
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
147
|
+
"Name": "High",
|
|
148
|
+
"ColorHex": "#E05151"
|
|
149
|
+
},
|
|
150
|
+
"IsRead": false
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"Id": "D6FB96EE-5955-42B2-8EC1-27E7AC3F5249",
|
|
154
|
+
"Title": "Creation of a new action of inspection",
|
|
155
|
+
"Description": "A new inspection action was created.",
|
|
156
|
+
"RedirectURL": "https://www.google.pt",
|
|
157
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
158
|
+
"ExpirationDate": 1736985600,
|
|
159
|
+
"Criticality": {
|
|
160
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
161
|
+
"Name": "High",
|
|
162
|
+
"ColorHex": "#E05151"
|
|
163
|
+
},
|
|
164
|
+
"IsRead": false
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"Id": "D6FB96EE-3255-42B7-8EC1-27E7AC3F5249",
|
|
168
|
+
"Title": "Creation of a new action of inspection",
|
|
169
|
+
"Description": "A new inspection action was created.",
|
|
170
|
+
"RedirectURL": "https://www.google.pt",
|
|
171
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
172
|
+
"ExpirationDate": 1736985600,
|
|
173
|
+
"Criticality": {
|
|
174
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
175
|
+
"Name": "High",
|
|
176
|
+
"ColorHex": "#E05151"
|
|
177
|
+
},
|
|
178
|
+
"IsRead": false
|
|
109
179
|
}
|
|
110
180
|
];
|
|
111
181
|
|
|
@@ -31,7 +31,6 @@ export interface BellNotificationsProps {
|
|
|
31
31
|
|
|
32
32
|
export const BellNotifications = ({ notifications, onFilterChange, onNotificationClick, handleMarkAllAsRead }: BellNotificationsProps) => {
|
|
33
33
|
const { t } = useTranslation();
|
|
34
|
-
const [maxChars, setMaxChars] = useState(30);
|
|
35
34
|
const [filter, setFilter] = useState<'all' | 'unread'>('all');
|
|
36
35
|
const [isShaking, setIsShaking] = useState(false);
|
|
37
36
|
|
|
@@ -47,23 +46,6 @@ export const BellNotifications = ({ notifications, onFilterChange, onNotificatio
|
|
|
47
46
|
onFilterChange(newFilter);
|
|
48
47
|
};
|
|
49
48
|
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
const handleResize = () => {
|
|
52
|
-
if (window.innerWidth < 1024) {
|
|
53
|
-
setMaxChars(30);
|
|
54
|
-
} else {
|
|
55
|
-
setMaxChars(60);
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
handleResize();
|
|
60
|
-
window.addEventListener('resize', handleResize);
|
|
61
|
-
|
|
62
|
-
return () => {
|
|
63
|
-
window.removeEventListener('resize', handleResize);
|
|
64
|
-
};
|
|
65
|
-
}, []);
|
|
66
|
-
|
|
67
49
|
useEffect(() => {
|
|
68
50
|
if (unreadCount > 0) {
|
|
69
51
|
const interval = setInterval(() => {
|
|
@@ -104,53 +86,53 @@ export const BellNotifications = ({ notifications, onFilterChange, onNotificatio
|
|
|
104
86
|
/>
|
|
105
87
|
</div>
|
|
106
88
|
|
|
107
|
-
<Dropdown overlay={optionsMenu} trigger={['click']}>
|
|
89
|
+
<Dropdown overlayClassName={styles.optionsMenuStyle} overlay={optionsMenu} trigger={['click']}>
|
|
108
90
|
<MoreOutlined className={styles.moreOutlinedIconStyle} />
|
|
109
91
|
</Dropdown>
|
|
110
92
|
</div>
|
|
111
93
|
)}
|
|
112
94
|
|
|
113
|
-
{
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
{
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
<div
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
95
|
+
<div className={styles.menuItemContainer}>
|
|
96
|
+
{notifications.map((notif) => (
|
|
97
|
+
<Menu.Item
|
|
98
|
+
key={notif.Id}
|
|
99
|
+
className={styles.notificationItem}
|
|
100
|
+
onClick={() => handleNotificationClick(notif.Id, notif.RedirectURL)}
|
|
101
|
+
>
|
|
102
|
+
<div className={styles.notificationContent}>
|
|
103
|
+
{notif.Criticality?.Name === 'High' && (
|
|
104
|
+
<ExclamationCircleOutlined
|
|
105
|
+
className={styles.criticalityIcon}
|
|
106
|
+
style={{ color: notif.Criticality?.ColorHex }}
|
|
107
|
+
/>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
<img src={notif.Icon} alt="Notification Icon" className={styles.notificationIcon} />
|
|
111
|
+
|
|
112
|
+
<div className={styles.notificationText}>
|
|
113
|
+
<div
|
|
114
|
+
className={styles.notificationTitle}
|
|
115
|
+
>
|
|
116
|
+
{notif.Title}
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div className={styles.notificationDescription}>
|
|
120
|
+
{notif.Description}
|
|
121
|
+
</div>
|
|
134
122
|
</div>
|
|
135
123
|
|
|
136
|
-
<div className={styles.
|
|
137
|
-
{notif.Description.length > maxChars
|
|
138
|
-
? `${notif.Description.slice(0, maxChars)}...`
|
|
139
|
-
: notif.Description}
|
|
140
|
-
</div>
|
|
124
|
+
{!notif.IsRead && <div className={styles.unreadIndicator}></div>}
|
|
141
125
|
</div>
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
</Menu.Item>
|
|
146
|
-
))}
|
|
126
|
+
</Menu.Item>
|
|
127
|
+
))}
|
|
128
|
+
</div>
|
|
147
129
|
|
|
148
130
|
{notifications.length === 0 && <Menu.Item disabled>{t('components.bellNotifications.noNotifications')}</Menu.Item>}
|
|
149
131
|
</Menu>
|
|
150
132
|
);
|
|
151
133
|
|
|
152
134
|
return (
|
|
153
|
-
<Dropdown overlay={menu} trigger={['click']}>
|
|
135
|
+
<Dropdown overlayClassName={styles.dropdownContainer} overlay={menu} trigger={['click']}>
|
|
154
136
|
<Badge count={unreadCount} className={styles.badgeStyle} overflowCount={99} offset={[8, 0]}>
|
|
155
137
|
<BellOutlined className={`${styles.bellIcon} ${isShaking ? styles.shake : ''}`} />
|
|
156
138
|
</Badge>
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
.dropdownContainer {
|
|
2
|
+
@media (max-width: 768px) {
|
|
3
|
+
position: unset;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
.notificationMenu {
|
|
2
8
|
max-width: 300px;
|
|
3
9
|
max-height: 400px;
|
|
4
|
-
|
|
5
|
-
padding: 0;
|
|
10
|
+
padding: 0 !important;
|
|
6
11
|
|
|
7
12
|
@media (max-width: 768px) {
|
|
8
|
-
max-width:
|
|
9
|
-
max-height: 300px;
|
|
13
|
+
max-width: 100vw;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
@media (min-width: 1024px) {
|
|
@@ -15,13 +19,24 @@
|
|
|
15
19
|
}
|
|
16
20
|
}
|
|
17
21
|
|
|
22
|
+
.optionsMenuStyle {
|
|
23
|
+
@media (max-width: 768px) {
|
|
24
|
+
position: absolute;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.menuItemContainer {
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
max-height: calc(100vh - 60px - 72px - 43px);
|
|
31
|
+
}
|
|
32
|
+
|
|
18
33
|
.notificationItem {
|
|
19
34
|
display: flex;
|
|
20
35
|
flex-direction: column;
|
|
21
36
|
align-items: unset !important;
|
|
22
37
|
padding: 10px;
|
|
23
38
|
border-bottom: 1px solid #f0f0f0;
|
|
24
|
-
background-color: #fff;
|
|
39
|
+
background-color: #fff !important;
|
|
25
40
|
cursor: pointer;
|
|
26
41
|
|
|
27
42
|
&:hover {
|
|
@@ -40,12 +55,6 @@
|
|
|
40
55
|
padding: 10px;
|
|
41
56
|
background-color: #f5f5f5;
|
|
42
57
|
border-bottom: 1px solid #e8e8e8;
|
|
43
|
-
|
|
44
|
-
@media (max-width: 768px) {
|
|
45
|
-
flex-direction: column;
|
|
46
|
-
align-items: flex-start;
|
|
47
|
-
gap: 8px;
|
|
48
|
-
}
|
|
49
58
|
}
|
|
50
59
|
|
|
51
60
|
.moreOutlinedIconStyle {
|
|
@@ -116,6 +125,11 @@
|
|
|
116
125
|
.notificationTitle {
|
|
117
126
|
font-weight: bold;
|
|
118
127
|
font-size: 14px;
|
|
128
|
+
overflow: hidden;
|
|
129
|
+
text-overflow: ellipsis;
|
|
130
|
+
white-space: nowrap;
|
|
131
|
+
display: block;
|
|
132
|
+
max-width: 100%;
|
|
119
133
|
|
|
120
134
|
@media (max-width: 768px) {
|
|
121
135
|
font-size: 12px;
|
|
@@ -123,6 +137,11 @@
|
|
|
123
137
|
}
|
|
124
138
|
|
|
125
139
|
.notificationDescription {
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
text-overflow: ellipsis;
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
display: block;
|
|
144
|
+
max-width: 100%;
|
|
126
145
|
font-size: 12px;
|
|
127
146
|
color: #666;
|
|
128
147
|
margin-top: 2px;
|
|
@@ -51,6 +51,177 @@ const mockMenu = [
|
|
|
51
51
|
}
|
|
52
52
|
];
|
|
53
53
|
|
|
54
|
+
const notifications = [
|
|
55
|
+
{
|
|
56
|
+
"Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
|
|
57
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
58
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
59
|
+
"RedirectURL": "https://www.google.pt",
|
|
60
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
61
|
+
"ExpirationDate": 1736899200,
|
|
62
|
+
"Criticality": {
|
|
63
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
64
|
+
"Name": "High",
|
|
65
|
+
"ColorHex": "#E05151"
|
|
66
|
+
},
|
|
67
|
+
"IsRead": true
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"Id": "0AF18720-1C94-48CD-8DF3-D254077E8363",
|
|
71
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
72
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
73
|
+
"RedirectURL": "https://www.google.pt",
|
|
74
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
75
|
+
"ExpirationDate": 1736899200,
|
|
76
|
+
"Criticality": {
|
|
77
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
78
|
+
"Name": "High",
|
|
79
|
+
"ColorHex": "#E05151"
|
|
80
|
+
},
|
|
81
|
+
"IsRead": true
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"Id": "0419654F-66FE-41EA-BBA4-D8BB6E3D6B33",
|
|
85
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
86
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
87
|
+
"RedirectURL": "https://www.google.pt",
|
|
88
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
89
|
+
"ExpirationDate": 1736899200,
|
|
90
|
+
"Criticality": {
|
|
91
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
92
|
+
"Name": "High",
|
|
93
|
+
"ColorHex": "#E05151"
|
|
94
|
+
},
|
|
95
|
+
"IsRead": true
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"Id": "CC98EDA1-0461-4D08-982E-8424EF4AFB3B",
|
|
99
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
100
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
101
|
+
"RedirectURL": "https://www.google.pt",
|
|
102
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
103
|
+
"ExpirationDate": 1736899200,
|
|
104
|
+
"Criticality": {
|
|
105
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
106
|
+
"Name": "High",
|
|
107
|
+
"ColorHex": "#E05151"
|
|
108
|
+
},
|
|
109
|
+
"IsRead": false
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"Id": "3DB9310A-4BF8-4B90-8D5A-7583473664BB",
|
|
113
|
+
"Title": "Creation of an Evaluation Cycle",
|
|
114
|
+
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
115
|
+
"RedirectURL": "https://www.google.pt",
|
|
116
|
+
"Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
|
|
117
|
+
"ExpirationDate": 1736899200,
|
|
118
|
+
"Criticality": {
|
|
119
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
120
|
+
"Name": "High",
|
|
121
|
+
"ColorHex": "#E05151"
|
|
122
|
+
},
|
|
123
|
+
"IsRead": false
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"Id": "D6FB93EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
127
|
+
"Title": "Creation of a new user",
|
|
128
|
+
"Description": "A new user was created in the platform with the mecanographic number 8111.",
|
|
129
|
+
"RedirectURL": "https://www.google.pt",
|
|
130
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
131
|
+
"ExpirationDate": 1736985600,
|
|
132
|
+
"Criticality": {
|
|
133
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
134
|
+
"Name": "High",
|
|
135
|
+
"ColorHex": "#E05151"
|
|
136
|
+
},
|
|
137
|
+
"IsRead": false
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"Id": "D6FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
141
|
+
"Title": "Creation of a new action of inspection",
|
|
142
|
+
"Description": "A new inspection action was created.",
|
|
143
|
+
"RedirectURL": "https://www.google.pt",
|
|
144
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
145
|
+
"ExpirationDate": 1736985600,
|
|
146
|
+
"Criticality": {
|
|
147
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
148
|
+
"Name": "High",
|
|
149
|
+
"ColorHex": "#E05151"
|
|
150
|
+
},
|
|
151
|
+
"IsRead": false
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"Id": "D6FB96EE-3655-42B2-8EC1-27E7AC3F5249",
|
|
155
|
+
"Title": "Creation of a new action of inspection",
|
|
156
|
+
"Description": "A new inspection action was created.",
|
|
157
|
+
"RedirectURL": "https://www.google.pt",
|
|
158
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
159
|
+
"ExpirationDate": 1736985600,
|
|
160
|
+
"Criticality": {
|
|
161
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
162
|
+
"Name": "High",
|
|
163
|
+
"ColorHex": "#E05151"
|
|
164
|
+
},
|
|
165
|
+
"IsRead": false
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"Id": "D6FB96EE-3255-46B2-8EC1-27E7AC3F5249",
|
|
169
|
+
"Title": "Creation of a new action of inspection",
|
|
170
|
+
"Description": "A new inspection action was created.",
|
|
171
|
+
"RedirectURL": "https://www.google.pt",
|
|
172
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
173
|
+
"ExpirationDate": 1736985600,
|
|
174
|
+
"Criticality": {
|
|
175
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
176
|
+
"Name": "High",
|
|
177
|
+
"ColorHex": "#E05151"
|
|
178
|
+
},
|
|
179
|
+
"IsRead": false
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"Id": "D9FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
183
|
+
"Title": "Creation of a new action of inspection",
|
|
184
|
+
"Description": "A new inspection action was created.",
|
|
185
|
+
"RedirectURL": "https://www.google.pt",
|
|
186
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
187
|
+
"ExpirationDate": 1736985600,
|
|
188
|
+
"Criticality": {
|
|
189
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
190
|
+
"Name": "High",
|
|
191
|
+
"ColorHex": "#E05151"
|
|
192
|
+
},
|
|
193
|
+
"IsRead": false
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"Id": "D6FB96EE-5955-42B2-8EC1-27E7AC3F5249",
|
|
197
|
+
"Title": "Creation of a new action of inspection",
|
|
198
|
+
"Description": "A new inspection action was created.",
|
|
199
|
+
"RedirectURL": "https://www.google.pt",
|
|
200
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
201
|
+
"ExpirationDate": 1736985600,
|
|
202
|
+
"Criticality": {
|
|
203
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
204
|
+
"Name": "High",
|
|
205
|
+
"ColorHex": "#E05151"
|
|
206
|
+
},
|
|
207
|
+
"IsRead": false
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"Id": "D6FB96EE-3255-42B7-8EC1-27E7AC3F5249",
|
|
211
|
+
"Title": "Creation of a new action of inspection",
|
|
212
|
+
"Description": "A new inspection action was created.",
|
|
213
|
+
"RedirectURL": "https://www.google.pt",
|
|
214
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
215
|
+
"ExpirationDate": 1736985600,
|
|
216
|
+
"Criticality": {
|
|
217
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
218
|
+
"Name": "High",
|
|
219
|
+
"ColorHex": "#E05151"
|
|
220
|
+
},
|
|
221
|
+
"IsRead": false
|
|
222
|
+
}
|
|
223
|
+
];
|
|
224
|
+
|
|
54
225
|
export const Primary = Template.bind({});
|
|
55
226
|
Primary.args = {
|
|
56
227
|
menuList: mockMenu,
|
|
@@ -59,5 +230,7 @@ Primary.args = {
|
|
|
59
230
|
profileUrl: profileUrl,
|
|
60
231
|
userName: 'Diogo Carvalho',
|
|
61
232
|
pageTitle: 'Page Title',
|
|
233
|
+
notifications: notifications,
|
|
234
|
+
|
|
62
235
|
};
|
|
63
236
|
|