Andal.LND/frontend-component-header
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: UI refactor based on figma

Browse Source
This commit is contained in:
SundasNoreen
2023-05-25 11:58:38 +05:00
parent 061746da9f
commit 8ed18f3d69
8 changed files with 205 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Notifications/NotificationRowItem.jsx
View File

@@ -55,15 +55,15 @@ const NotificationRowItem = ({ notification }) => {
const iconComponent = getIconByType(notification.type);
return (
<div className="d-flex notification-section-padding mb-2">
<div className="mr-2 pt-2.5 pr-2.5 pb-2.5">
<div className="d-flex mb-2">
<div className="mr-2 py-4 pr-2.5">
<Icon
src={iconComponent && iconComponent.icon}
style={{ height: '28px', width: '28px' }}
style={{ height: '23.33px', width: '23.33px' }}
className={iconComponent && iconComponent.class}
/>
</div>
<div className="row d-flex w-100 ml-0">
<div className="row d-flex w-100 py-0 px-0 py-2.5">
<div style={{ display: 'contents' }} className="col-md-12 w-100">
<span className="col-md-11 px-0 text-primary-500 mb-2 w-100 notification-item-content overflow-hidden">
{notification?.respondingUser} {' '}
@@ -82,13 +82,13 @@ const NotificationRowItem = ({ notification }) => {
{' '}{notification?.notificationContent}
</a>
</span>
<div className="col-md-1 d-flex flex-column justify-content-end mb-2 unread">
{notification.status === 'unread' && <div className="bg-brand-500 rounded" />}
<div className="col-md-1 d-flex flex-column justify-content-end mb-2">
{notification.status === 'unread' && <div className="bg-brand-500 rounded unread" />}
</div>
<div className="w-100 px-0">
<span className="text-gray-500 mb-2 w-100 course-container">
<div className="w-100 px-0 py-0 d-flex flex-row align-items-center">
<span className="text-gray-500 mb-2 w-100 font-size-12">
<span className="">{notification?.courseName}</span>
<span className="mr-1.5 font-size-8 font-style text-light-700" style={{ padding: '0px 6px' }}>
<span className="font-size-12 text-light-700 px-1.5">
{intl.formatMessage(messages.fullStop)}
</span>
<span>

6
src/Notifications/NotificationSections.jsx
View File

@@ -14,8 +14,8 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) =>
return (
notifications && (
<div className="pt-4">
<div className="d-flex pb-2 notification-section-padding">
<div className="pt-4 py-2.5">
<div className="d-flex flex-row align-items-center pb-2">
<span className="w-100 px-0 text-gray-500">
{TODAY && TODAY.length > 0 && intl.formatMessage(messages.notificationTodayHeading)}
</span>
@@ -29,7 +29,7 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) =>
{TODAY && TODAY.map(
(notification) => <NotificationRowItem notification={notification} />,
)}
<div className="d-flex pb-2 notification-section-padding">
<div className="d-flex pb-2 notification-section">
<span className="w-100 px-0 text-gray-500">
{EARLIER && EARLIER.length > 0
&& intl.formatMessage(messages.notificationEarlierHeading)}

18
src/Notifications/NotificationTabs.jsx
View File

@@ -4,12 +4,13 @@ import React, {
import { Tabs, Tab } from '@edx/paragon';
import { useSelector, useDispatch } from 'react-redux';
import NotificationSections from './NotificationSections';
import { getNotificationTotalUnseenCounts } from './data/selectors';
import { getNotificationTotalUnseenCounts, getSelectedNotificationType } from './data/selectors';
import { fetchNotificationList } from './data/thunks';
import { notificationTabsOptions } from './data/constants';
const NotificationTabs = () => {
const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts());
const selectedNotificationType = useSelector(getSelectedNotificationType());
const [activeTab, setActiveTab] = useState(notificationTabsOptions[0].key);
const [loadMoreCount, setLoadMoreCount] = useState(10);
@@ -32,17 +33,24 @@ const NotificationTabs = () => {
eventKey={option.key}
title={option.title}
notification={notificationUnseenCounts[option.title]}
tabClassName="notification-tab d-flex flex-row align-items-center"
tabClassName="d-flex flex-row align-items-center pt-0 pb-2.5 line-height-24 px-0 mr-4"
>
<NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />
{option.key === selectedNotificationType
&& <NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />}
</Tab>
)), [notificationUnseenCounts, handleLoadMoreNotification, loadMoreCount]);
)), [notificationUnseenCounts, handleLoadMoreNotification, loadMoreCount, selectedNotificationType]);
// This code is used to replace More... text to More to match the UI
const buttons = document.getElementsByClassName('dropdown-toggle');
for (let i = 0; i < buttons.length; i++) {
buttons[i].firstChild.nodeValue = 'More';
}
return (
activeTab && (
<Tabs
defaultActiveKey={activeTab}
className="notification-tabs ml-2.5"
className="notification-tabs"
onSelect={handleActiveTab}
>
{tabArray}

25
src/Notifications/Notifications.jsx
View File

@@ -49,7 +49,7 @@ const Notifications = () => {
}, []);
return (
<div className="d-flex mx-4 my-3 bell-container">
<div className="mx-4 my-3 bell-container">
<OverlayTrigger
trigger="click"
key="bottom"
@@ -58,18 +58,19 @@ const Notifications = () => {
overlay={(
<Popover
id="popover-positioned-bottom"
className="notification-tray-container vh-100 pt-4.5 pb-4 overflow-auto"
className="notification-tray-container pt-4.5 pb-4 px-4 overflow-auto d-flex flex-column
align-items-start position-absolute mt-2"
>
<div ref={popoverRef}>
<Popover.Title as="h3" style={{ padding: '0px 26px 16px 24px', border: 'none' }}>
<h2 className="text-primary-500 notification-title">
<Popover.Title
as="h3"
style={{ border: 'none' }}
className="d-flex flex-row justify-content-between py-0 px-0 mb-4"
>
<h2 className="text-primary-500 font-size-18 line-height-24">
{intl.formatMessage(messages.notificationTitle)}
</h2>
<div className="setting-icon-container d-flex flex-row justify-content-end align-items-end w-100
position-absolute"
>
<Icon src={Settings} />
</div>
<Icon src={Settings} className="icon-size-20" />
</Popover.Title>
<Popover.Content className="notification-content p-0">
<NotificationTabs />
@@ -80,8 +81,10 @@ const Notifications = () => {
>
<>
{notificationCounts?.Total > 0 && (
<Badge variant="danger position-absolute d-flex flex-row justify-content-center align-items-center zindex-1">
<Form.Label className="count">{notificationCounts?.Total}</Form.Label>
<Badge variant="danger position-absolute px-1.5 py-1.5 d-flex flex-row justify-content-center
align-items-center zindex-1"
>
<Form.Label className="count font-size-9 mt-2">{notificationCounts?.Total}</Form.Label>
</Badge>
)}
<div className="bell-icon-container rounded-circle" ref={buttonRef}>

306
src/Notifications/data/api.js
View File

@@ -2,180 +2,148 @@ import { getConfig } from '@edx/frontend-platform';
export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
const parseNotificationList = (notificationList) => {
const currentTime = Date.now();
const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000);
const today = [];
const earlier = [];
notificationList.forEach(obj => {
const objectTime = obj.time;
if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) { today.push(obj); } else { earlier.push(obj); }
});
return { today, earlier };
};
export async function getNotifications(notificationType, notificationCount) {
const notificationData = [
{
type: 'post',
respondingUser: 'SCM_Lead',
notificationContent: 'Hello and welcome to SC0x!',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684996319038',
},
{
type: 'post',
respondingUser: 'SCM_Lead',
notificationContent: 'Hello and welcome to SC0x!',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684996319038',
},
{
type: 'post',
respondingUser: 'SCM_Lead',
notificationContent: 'Hello and welcome to SC0x!',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684996319038',
},
{
type: 'help',
respondingUser: 'MITx_Learner',
notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684996339844',
},
{
type: 'post',
respondingUser: 'SCM_Lead',
notificationContent: 'Hello and welcome to SC0x!',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253634808',
author: '',
},
{
type: 'help',
respondingUser: 'MITx_Learner',
notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'respond',
respondingUser: 'MITx_Learner',
notificationContent: 'Can’t find linear regression in section 3 review',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'comment',
respondingUser: 'MITx_Learner',
notificationContent: 'Can’t find linear regression in section 3 review',
targetUser: 'MITx_Expert’s ',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'question',
respondingUser: 'MITx_Learner',
notificationContent: 'Examples of quadratic equations in supply chains',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'comment',
respondingUser: 'MITx_Learner',
notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
targetUser: 'MITx_Expert’s ',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: 'testuser',
},
{
type: 'comment',
respondingUser: 'MITx_Learner',
notificationContent: 'Convexity of f(x)=1/x , x>1',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: 'testuser',
},
];
const { today, earlier } = parseNotificationList(notificationData);
const data = {
discussions: {
TODAY: [
{
type: 'post',
respondingUser: 'SCM_Lead',
notificationContent: 'Hello and welcome to SC0x!',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
},
{
type: 'help',
respondingUser: 'MITx_Learner',
notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
},
],
TODAY: today,
EARLIER: earlier,
},
reminders: {
TODAY: [
{
type: 'post',
respondingUser: 'SCM_Lead',
notificationContent: 'Hello and welcome to SC0x!',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253634808',
author: '',
},
{
type: 'help',
respondingUser: 'MITx_Learner',
notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'respond',
respondingUser: 'MITx_Learner',
notificationContent: 'Can’t find linear regression in section 3 review',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'comment',
respondingUser: 'MITx_Learner',
notificationContent: 'Can’t find linear regression in section 3 review',
targetUser: 'MITx_Expert’s ',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'question',
respondingUser: 'MITx_Learner',
notificationContent: 'Examples of quadratic equations in supply chains',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: '',
},
{
type: 'comment',
respondingUser: 'MITx_Learner',
notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
targetUser: 'MITx_Expert’s ',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: 'testuser',
},
{
type: 'comment',
respondingUser: 'MITx_Learner',
notificationContent: 'Convexity of f(x)=1/x , x>1',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '1684253736371',
author: 'testuser',
},
],
EARLIER: [
{
type: 'answer',
respondingUser: 'SCM_Lead',
notificationContent: 'Quiz in section 3 - Please explain the F-Significance value',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
author: 'testuser',
},
{
type: 'endorsed',
respondingUser: '',
notificationContent: 'Quiz in section 3 - Please explain the F-Significance value',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
author: 'testuser',
},
{
type: 'reported',
respondingUser: 'MITx Learner’s',
notificationContent: '“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
author: '',
},
{
type: 'postLiked',
respondingUser: 'SCM_Lead',
notificationContent: 'Retaking the course',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
author: '',
},
{
type: 'commentLiked',
respondingUser: 'MITx_Expert ',
notificationContent: 'Final exam answers',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
author: '',
},
{
type: 'edited',
respondingUser: 'MITx_Expert ',
notificationContent: 'Question 1',
targetUser: '',
courseName: 'Supply Chain Analytics',
URL: '',
status: 'unread',
time: '15m',
author: '',
},
],
TODAY: today,
EARLIER: earlier,
},
};
const notifications = data[notificationType];

1
src/Notifications/data/selectors.js
View File

@@ -1,3 +1,4 @@
export const getNotificationStatus = () => state => state.notifications.notificationStatus;
export const getNotificationTotalUnseenCounts = () => state => state.notifications.totalUnseenCounts;
export const getNotifications = () => state => state.notifications.notifications;
export const getSelectedNotificationType = () => state => state.notifications.notificationType;

2
src/__snapshots__/Header.test.jsx.snap
View File

@@ -238,7 +238,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
className="nav secondary-menu-container align-items-center ml-auto"
>
<div
className="d-flex mx-4 my-3 bell-container"
className="mx-4 my-3 bell-container"
>
<div
className="bell-icon-container rounded-circle"

77
src/index.scss
View File

@@ -133,55 +133,49 @@ $white: #fff;
.badge{
border-radius: 54px;
border: 2px solid #FFFFFF;
padding: 4px 5px;
width: 23px;
height: 16px;
margin-top: 3px;
margin-left: 18px;
.count{
font-size: 9px;
line-height: 20px;
width: 13px;
height: 8px;
font-weight: 600;
margin-top: -3px;
}
}
}
.font-size-18{
font-size: 18px;
}
.font-size-12{
font-size: 12px;
}
.font-size-9{
font-size: 9px;
}
.line-height-24{
line-height: 24px;
}
.icon-size-20{
width: 20px !important;
height: 20px !important;
}
.notification-tray-container{
width: 549px;
margin-top: 9px !important;
max-width: 549px;
min-width: 549px;
min-height:'1253px';
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 0px 0px 4px 4px;
.notification-title{
line-height: 24px;
font-size: 18px;
}
.setting-icon-container{
margin-left: -40px;
margin-top: -7px;
span{
height:20px;
width: 20px;
}
}
.notification-section-padding{
padding: 10px 24px 10px 24px;
.dropdown-toggle::after {
display: none;
}
.notification-content{
.notification-tabs{
height: 38px;
width: 501px;
button{
font-size: 14px;
}
.dropdown-toggle{
::after{
display: none;
}
height: 36px;
padding-top: 0px !important;
padding-left: 12px !important;
div{
@@ -189,21 +183,14 @@ $white: #fff;
min-width: 6px;
}
}
.notification-tab, .dropdown-item{
padding: 0px 12px 12px !important;
height: 36px;
.dropdown-item{
font-size:14px;
color: $primary-500;
font-weight: 500;
line-height: 24px;
padding-bottom: 18px;
}
.expandable{
height: 20px;
width: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 7px;
position: relative;
margin-left: 4px;
@@ -214,20 +201,10 @@ $white: #fff;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
line-height: 24px;
width: 417px;
}
.unread{
max-height: 48px;
width: 24px;
div{
height: 10px;
width: 10px;
}
}
.course-container{
line-height: 20px;
font-size: 12px;
height: 10px;
width: 10px;
}
}
}