Skip to content

Commit e9c2c00

Browse files
tejaskh3MayankBansal12Suvidh-kaushikAchintya-Chatterjeevikasosmium
authored
(feat) : notifications page (#997)
* Merge pull request #983 from MayankBansal12/migrate/user-status-pr-1 [My Site Migration] user status feature (Part - 1) * [My Site Migration] migration of profile page [PR-2] (#979) * basic setup and images and svg file * profile route and controller * changed urls.js file * reverted sinon package and fixed css * fixes of urls and yarn.lock and package.json file * changed toast import * moved profile fields to inside constants * resolve merge conflicts * [My Site Migration] user status feature (Part - 2) (#984) * feat: add user status modal, controller for status * refactor: use constants for messages, urls, modify naming * chore: remove extra user_states in status modal * refactor: get current status method in status modal * refactor: status update for dev method * test: simulate mock inViewport for members data test --------- Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> * [My Site Migration] user status feature (Part - 3) (css) (#985) * feat: add css styles for user status component and modal * fix: styles for user status, status modal for mobile responsiveness * fix: remove duplicate css variables * [My Site Migration] user status feature (Part -4) (tests) (#977) * add integration tests for user-status components * fix set prop error and modify test case in status modal * add unit test for status route and component * add unit test for dateConversion, redirectAuth utils * fix: update test for user status, remove redirectAuth test * fix: status naming in user status component test --------- Co-authored-by: Vikas Singh <59792866+vikasosmium@users.noreply.github.com> Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> * migrate from yarn to pnpm package manager (#991) * feat: migrate from yarn to pnpm package manager * docs: update documentation for pnpm migration * chore: remove unrelated changes to live.js * chore: restore helpful comments in CI workflow * chore: trigger CI * chore: trigger CI * feat: notifications page * fix: linting issues * fix: lint issue on router file --------- Co-authored-by: Mayank Bansal <mayankbansal125@gmail.com> Co-authored-by: Suvidh-kaushik <127885995+Suvidh-kaushik@users.noreply.github.com> Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> Co-authored-by: Vikas Singh <59792866+vikasosmium@users.noreply.github.com> Co-authored-by: DEVASHISH <devashish.cs025@gmail.com>
1 parent 2024069 commit e9c2c00

File tree

9 files changed

+165
-0
lines changed

9 files changed

+165
-0
lines changed

‎app/components/notification-card.hbs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="new__message__box">
2+
<div class="new__message__box__alert">
3+
<div class="info__tab tip__icon__alert">
4+
<i/>
5+
</div>
6+
<div class="tip__box__alert">
7+
<p class="text__title">{{@title}}</p>
8+
<p class="text__description">{{@description}}</p>
9+
</div>
10+
</div>
11+
</div>

‎app/constants/notifications.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const NOTIFICATIONS = [
2+
{
3+
title: 'Hello User',
4+
description: 'Welcome to RDS',
5+
},
6+
{
7+
title: 'Your PR is pending',
8+
description: 'Your PR for my website is pending. Kindly check',
9+
},
10+
{
11+
title: 'Workshop on Dynamic Programming',
12+
description:
13+
'Hey user we, are organizing a workshop on dynamic programming from next week. You will find the link soon. Kindly join.',
14+
},
15+
{
16+
title: 'Merge Successful',
17+
description:
18+
'Your PR is Successfully Merged. Thank you for your contribution',
19+
},
20+
];

‎app/controllers/notifications.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { NOTIFICATIONS } from '../constants/notifications';
2+
import Controller from '@ember/controller';
3+
4+
export default class NotificationsController extends Controller {
5+
notifications = NOTIFICATIONS;
6+
}

‎app/router.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@ Router.map(function () {
2121
this.route('status');
2222
this.route('discord');
2323
this.route('profile');
24+
this.route('notifications');
2425
});

‎app/routes/notifications.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Route from '@ember/routing/route';
2+
import { inject as service } from '@ember/service';
3+
export default class NotificationsRoute extends Route {
4+
@service router;
5+
6+
queryParams = {
7+
dev: {
8+
refreshModel: false,
9+
},
10+
};
11+
12+
beforeModel(transition) {
13+
if (transition?.to?.queryParams?.dev !== 'true') {
14+
this.router.transitionTo('404');
15+
}
16+
}
17+
}

‎app/styles/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
@import url("user-status.module.css");
5353
@import url("user-status-modal.module.css");
5454
@import url("discord.module.css");
55+
@import url("notifications.css");
5556

5657
* {
5758
margin: 0;

‎app/styles/notifications.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
.notifications {
2+
display: flex;
3+
flex-direction: column;
4+
max-width: 50rem;
5+
align-items: stretch;
6+
justify-content: center;
7+
margin: 0 auto;
8+
height: 80vh;
9+
}
10+
11+
.new__message__box {
12+
margin-top: 1.875rem;
13+
padding-left: 1.25rem;
14+
width: 100%;
15+
}
16+
17+
.info__tab {
18+
width: 2.5rem;
19+
height: 2.5rem;
20+
position: relative;
21+
top: 0.5rem;
22+
float: left;
23+
margin-left: -1.4375rem;
24+
}
25+
26+
.info__tab i::before {
27+
width: 1.5rem;
28+
height: 1.5rem;
29+
box-shadow: inset 0.75rem 0 0.8125rem var(--info-tab-before-box-shadow);
30+
}
31+
32+
.info__tab i::after {
33+
width: 0;
34+
height: 0;
35+
border: 0.75rem solid transparent;
36+
border-bottom-color: var(--info-tab-after-border-b);
37+
border-left-color: var(--info-tab-after-border-l);
38+
bottom: -1.125rem;
39+
}
40+
41+
.info__tab i::before,
42+
.info__tab i::after {
43+
content: "";
44+
display: inline-block;
45+
position: absolute;
46+
left: 0;
47+
bottom: -1.0625rem;
48+
transform: rotateX(60deg);
49+
}
50+
51+
.tip__box__alert {
52+
padding: 0.625rem 0.625rem 0.625rem 1.25rem;
53+
color: var(--tip-box-alert-text);
54+
background: var(--tip-box-alert-bg);
55+
flex-direction: column;
56+
}
57+
58+
.new__message__box__alert {
59+
background: var(--new-message-box-alert-bg);
60+
padding: 0.1875rem;
61+
margin: 0.625rem 0;
62+
}
63+
64+
.tip__icon__alert {
65+
background: var(--tip-icon-alert-bg);
66+
}
67+
68+
@media (width <= 50rem) {
69+
.notifications {
70+
display: flex;
71+
flex-direction: column;
72+
max-width: 50rem;
73+
align-items: stretch;
74+
justify-content: center;
75+
margin: 0 10%;
76+
}
77+
}
78+
79+
.text__title {
80+
font-weight: bold;
81+
font-size: 1.25rem;
82+
}
83+
84+
.text__description {
85+
font-size: 1rem;
86+
}
87+
88+
@media (width <= 30rem) {
89+
.text__title {
90+
font-weight: bold;
91+
font-size: 1rem;
92+
}
93+
94+
.text__description {
95+
font-size: 0.75rem;
96+
}
97+
}

‎app/styles/variables.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,4 +94,11 @@
9494
--color-black-40: #00000040;
9595
--color-black-59: rgb(0 0 0 / 58.9%);
9696
--color-gray-37: rgb(158 158 158 / 36.8%);
97+
--info-tab-before-box-shadow: rgba(0 0 0 / 50%);
98+
--info-tab-after-border-b: #fff;
99+
--tip-box-alert-text: #212121;
100+
--tip-box-alert-bg: #fff8e1;
101+
--tip-icon-alert-bg: #ff6f00;
102+
--new-message-box-alert-bg: #ff6f00;
103+
--info-tab-after-border-l: #fff;
97104
}

‎app/templates/notifications.hbs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="notifications">
2+
{{#each this.notifications as |post|}}
3+
<NotificationCard @title={{post.title}} @description={{post.description}} />
4+
{{/each}}
5+
</div>

0 commit comments

Comments
 (0)