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

refactor: used paragon icons and updated css

Browse Source
This commit is contained in:
SundasNoreen
2023-05-24 15:14:41 +05:00
parent de77aa5f0c
commit 061746da9f
17 changed files with 53 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/Notifications/NotificationRowItem.jsx
View File

@@ -5,11 +5,11 @@ import { Icon } from '@edx/paragon';
import * as timeago from 'timeago.js';
import PropTypes from 'prop-types';
import { AppContext } from '@edx/frontend-platform/react';
import { messages } from './messages';
import {
PostOutline, HelpOutline, QuestionAnswerOutline, CheckCircleFilled, Verified, Report, ThumbsUpOutline, EditOutline,
} from './icons';
import timeLocale from '../time-locale';
CheckCircle, HelpOutline, QuestionAnswerOutline, Verified, Report, EditOutline, ThumbUpOutline, PostOutline,
} from '@edx/paragon/icons';
import { messages } from './messages';
import timeLocale from '../common/time-locale';
const NotificationRowItem = ({ notification }) => {
const intl = useIntl();
@@ -17,20 +17,21 @@ const NotificationRowItem = ({ notification }) => {
const { authenticatedUser } = useContext(AppContext);
const getIconByType = (type) => {
switch (type) {
case 'post': return PostOutline;
case 'help': return HelpOutline;
case 'respond': return QuestionAnswerOutline;
case 'comment': return QuestionAnswerOutline;
case 'question': return QuestionAnswerOutline;
case 'answer': return CheckCircleFilled;
case 'endorsed': return Verified;
case 'reported': return Report;
case 'postLiked': return ThumbsUpOutline;
case 'commentLiked': return ThumbsUpOutline;
case 'edited': return EditOutline;
default: return null;
}
const iconMap = {
post: { icon: PostOutline, class: 'text-primary-500' },
help: { icon: HelpOutline, class: 'text-primary-500' },
respond: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
comment: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
question: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
answer: { icon: CheckCircle, class: 'text-success' },
endorsed: { icon: Verified, class: 'text-primary-500' },
reported: { icon: Report, class: 'text-danger-500' },
postLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
commentLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
edited: { icon: EditOutline, class: 'text-primary-500' },
};
return iconMap[type] || null;
};
const getContentMessageByType = useCallback(() => {
@@ -52,17 +53,19 @@ const NotificationRowItem = ({ notification }) => {
return contentMessage[notification.type] ? intl.formatMessage(contentMessage[notification.type]) : null;
}, [authenticatedUser, notification, intl]);
const iconComponent = getIconByType(notification.type);
return (
<div className="d-flex notification-item mb-2 notification-item">
<div className="mr-2 icon-container">
<div className="d-flex notification-section-padding mb-2">
<div className="mr-2 pt-2.5 pr-2.5 pb-2.5">
<Icon
src={getIconByType(notification.type)}
src={iconComponent && iconComponent.icon}
style={{ height: '28px', width: '28px' }}
className={iconComponent && iconComponent.class}
/>
</div>
<div className="row d-flex w-100 ml-0">
<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">
<span className="col-md-11 px-0 text-primary-500 mb-2 w-100 notification-item-content overflow-hidden">
{notification?.respondingUser} {' '}
<span className="text-gray-500">{getContentMessageByType()} </span>
{notification?.targetUser && (
@@ -80,8 +83,7 @@ const NotificationRowItem = ({ notification }) => {
</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" />}
{notification.status === 'unread' && <div className="bg-brand-500 rounded" />}
</div>
<div className="w-100 px-0">
<span className="text-gray-500 mb-2 w-100 course-container">

4
src/Notifications/NotificationSections.jsx
View File

@@ -15,7 +15,7 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) =>
return (
notifications && (
<div className="pt-4">
<div className="d-flex pb-2 notification-section">
<div className="d-flex pb-2 notification-section-padding">
<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">
<div className="d-flex pb-2 notification-section-padding">
<span className="w-100 px-0 text-gray-500">
{EARLIER && EARLIER.length > 0
&& intl.formatMessage(messages.notificationEarlierHeading)}

7
src/Notifications/NotificationTabs.jsx
View File

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
import NotificationSections from './NotificationSections';
import { getNotificationTotalUnseenCounts } from './data/selectors';
import { fetchNotificationList } from './data/thunks';
import { notificationTabsOptions } from '../constants';
import { notificationTabsOptions } from './data/constants';
const NotificationTabs = () => {
const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts());
@@ -32,7 +32,7 @@ const NotificationTabs = () => {
eventKey={option.key}
title={option.title}
notification={notificationUnseenCounts[option.title]}
tabClassName="notification-tab"
tabClassName="notification-tab d-flex flex-row align-items-center"
>
<NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />
</Tab>
@@ -42,8 +42,7 @@ const NotificationTabs = () => {
activeTab && (
<Tabs
defaultActiveKey={activeTab}
id="notification-tab"
className="notification-tabs"
className="notification-tabs ml-2.5"
onSelect={handleActiveTab}
>
{tabArray}

14
src/Notifications/Notifications.jsx
View File

@@ -58,18 +58,20 @@ const Notifications = () => {
overlay={(
<Popover
id="popover-positioned-bottom"
className="notification-tray-container"
className="notification-tray-container vh-100 pt-4.5 pb-4 overflow-auto"
>
<div ref={popoverRef}>
<Popover.Title as="h3" style={{ padding: '0px 26px 16px 24px', border: 'none' }}>
<h2 className="text-primary-500 notification-title">
{intl.formatMessage(messages.notificationTitle)}
</h2>
<div className="setting-icon-container">
<div className="setting-icon-container d-flex flex-row justify-content-end align-items-end w-100
position-absolute"
>
<Icon src={Settings} />
</div>
</Popover.Title>
<Popover.Content className="notification-content">
<Popover.Content className="notification-content p-0">
<NotificationTabs />
</Popover.Content>
</div>
@@ -78,16 +80,16 @@ const Notifications = () => {
>
<>
{notificationCounts?.Total > 0 && (
<Badge variant="danger position-absolute d-flex flex-row justify-content-center align-items-center">
<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>
)}
<div className="bell-icon-container" ref={buttonRef}>
<div className="bell-icon-container rounded-circle" ref={buttonRef}>
<IconButton
onClick={() => { handleNotificationTray(!showNotificationTray); }}
src={NotificationsNone}
iconAs={Icon}
className="d-inline-block align-bottom ml-1 bell-icon"
className="d-inline-block align-bottom ml-1 ml-n1 shadow-none bg-transparent text-primary-500"
/>
</div>
</>

0
src/constants.js → src/Notifications/data/constants.js
View File

19
src/Notifications/icons/CheckCircleFilled.jsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
const CheckCircleFilled = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 2.3335C7.56004 2.3335 2.33337 7.56016 2.33337 14.0002C2.33337 20.4402 7.56004 25.6668 14 25.6668C20.44 25.6668 25.6667 20.4402 25.6667 14.0002C25.6667 7.56016 20.44 2.3335 14 2.3335ZM11.6667 19.8335L5.83337 14.0002L7.47837 12.3552L11.6667 16.5318L20.5217 7.67683L22.1667 9.3335L11.6667 19.8335Z"
fill="#0D7D4D"
/>
</svg>
);
export default CheckCircleFilled;

19
src/Notifications/icons/EditOutline.jsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
const EditOutline = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.4033 10.5233L17.4767 11.5967L6.90667 22.1667H5.83333V21.0933L16.4033 10.5233ZM20.6033 3.5C20.3117 3.5 20.0083 3.61667 19.7867 3.83833L17.6517 5.97333L22.0267 10.3483L24.1617 8.21333C24.6167 7.75833 24.6167 7.02333 24.1617 6.56833L21.4317 3.83833C21.1983 3.605 20.9067 3.5 20.6033 3.5ZM16.4033 7.22167L3.5 20.125V24.5H7.875L20.7783 11.5967L16.4033 7.22167Z"
fill="#00262B"
/>
</svg>
);
export default EditOutline;

26
src/Notifications/icons/HelpOutline.jsx
View File

@@ -1,26 +0,0 @@
import React from 'react';
const HelpOutline = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_927_733)">
<path
d="M12.8334 20.9997H15.1667V18.6663H12.8334V20.9997ZM14 2.33301C7.56004 2.33301 2.33337 7.55967 2.33337 13.9997C2.33337 20.4397 7.56004 25.6663 14 25.6663C20.44 25.6663 25.6667 20.4397 25.6667 13.9997C25.6667 7.55967 20.44 2.33301 14 2.33301ZM14 23.333C8.85504 23.333 4.66671 19.1447 4.66671 13.9997C4.66671 8.85468 8.85504 4.66634 14 4.66634C19.145 4.66634 23.3334 8.85468 23.3334 13.9997C23.3334 19.1447 19.145 23.333 14 23.333ZM14 6.99967C11.4217 6.99967 9.33337 9.08801 9.33337 11.6663H11.6667C11.6667 10.383 12.7167 9.33301 14 9.33301C15.2834 9.33301 16.3334 10.383 16.3334 11.6663C16.3334 13.9997 12.8334 13.708 12.8334 17.4997H15.1667C15.1667 14.8747 18.6667 14.583 18.6667 11.6663C18.6667 9.08801 16.5784 6.99967 14 6.99967Z"
fill="#00262B"
/>
</g>
<defs>
<clipPath id="clip0_927_733">
<rect width="28" height="28" fill="white" />
</clipPath>
</defs>
</svg>
);
export default HelpOutline;

18
src/Notifications/icons/PostOutline.jsx
View File

@@ -1,18 +0,0 @@
import React from 'react';
const PostOutline = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.66671 4.66634H23.3334V18.6663H6.03171L4.66671 20.0313V4.66634ZM4.66671 2.33301C3.38337 2.33301 2.34504 3.38301 2.34504 4.66634L2.33337 25.6663L7.00004 20.9997H23.3334C24.6167 20.9997 25.6667 19.9497 25.6667 18.6663V4.66634C25.6667 3.38301 24.6167 2.33301 23.3334 2.33301H4.66671ZM7.00004 13.9997H16.3334V16.333H7.00004V13.9997ZM7.00004 10.4997H21V12.833H7.00004V10.4997ZM7.00004 6.99967H21V9.33301H7.00004V6.99967Z"
fill="#00262B"
/>
</svg>
);
export default PostOutline;

19
src/Notifications/icons/QuestionAnswerOutline.jsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
const QuestionAnswerOutline = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.5 4.66634V12.833H6.03171L5.34337 13.5213L4.66671 14.198V4.66634H17.5ZM18.6667 2.33301H3.50004C2.85837 2.33301 2.33337 2.85801 2.33337 3.49967V19.833L7.00004 15.1663H18.6667C19.3084 15.1663 19.8334 14.6413 19.8334 13.9997V3.49967C19.8334 2.85801 19.3084 2.33301 18.6667 2.33301ZM24.5 6.99967H22.1667V17.4997H7.00004V19.833C7.00004 20.4747 7.52504 20.9997 8.16671 20.9997H21L25.6667 25.6663V8.16634C25.6667 7.52467 25.1417 6.99967 24.5 6.99967Z"
fill="#00262B"
/>
</svg>
);
export default QuestionAnswerOutline;

19
src/Notifications/icons/Report.jsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
const Report = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3517 3.5H9.64833L3.5 9.64833V18.3517L9.64833 24.5H18.3517L24.5 18.3517V9.64833L18.3517 3.5ZM14 20.1833C13.16 20.1833 12.4833 19.5067 12.4833 18.6667C12.4833 17.8267 13.16 17.15 14 17.15C14.84 17.15 15.5167 17.8267 15.5167 18.6667C15.5167 19.5067 14.84 20.1833 14 20.1833ZM15.1667 15.1667H12.8333V8.16667H15.1667V15.1667Z"
fill="#AB0D02"
/>
</svg>
);
export default Report;

22
src/Notifications/icons/ThumbsUpOutline.jsx
View File

@@ -1,22 +0,0 @@
import React from 'react';
const ThumbsUpOutline = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.8333 9.33317V14.4665L22.5283 24.4998L8.16663 24.4998L8.16663 9.54317L16.5316 1.1665L18.445 3.0565L17.1383 9.33317L26.8333 9.33317ZM10.5 10.5115V22.1665L20.9883 22.1665L24.5 13.9882V11.6665L14.2683 11.6665L15.5633 5.4365L10.5 10.5115Z"
fill="#00262B"
/>
<path d="M5.83329 24.4998H1.16663L1.16663 10.4998H5.83329L5.83329 24.4998Z" fill="#00262B" />
</svg>
);
export default ThumbsUpOutline;

19
src/Notifications/icons/Verified.jsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
const Verified = () => (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26.8333 14L23.9866 10.745L24.3833 6.44L20.1716 5.48333L17.9666 1.75L14 3.45333L10.0333 1.75L7.82829 5.47167L3.61663 6.41667L4.01329 10.7333L1.16663 14L4.01329 17.255L3.61663 21.5717L7.82829 22.5283L10.0333 26.25L14 24.535L17.9666 26.2383L20.1716 22.5167L24.3833 21.56L23.9866 17.255L26.8333 14ZM11.7716 19.5067L7.33829 15.0617L9.06496 13.335L11.7716 16.0533L18.5966 9.205L20.3233 10.9317L11.7716 19.5067Z"
fill="#00262B"
/>
</svg>
);
export default Verified;

8
src/Notifications/icons/index.js
View File

@@ -1,8 +0,0 @@
export { default as PostOutline } from './PostOutline';
export { default as HelpOutline } from './HelpOutline';
export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
export { default as CheckCircleFilled } from './CheckCircleFilled';
export { default as Verified } from './Verified';
export { default as Report } from './Report';
export { default as ThumbsUpOutline } from './ThumbsUpOutline';
export { default as EditOutline } from './EditOutline';

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

@@ -241,10 +241,10 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
className="d-flex mx-4 my-3 bell-container"
>
<div
className="bell-icon-container"
className="bell-icon-container rounded-circle"
>
<button
className="btn-icon btn-icon-primary btn-icon-md d-inline-block align-bottom ml-1 bell-icon"
className="btn-icon btn-icon-primary btn-icon-md d-inline-block align-bottom ml-1 ml-n1 shadow-none bg-transparent text-primary-500"
onClick={[Function]}
type="button"
>

0
src/time-locale.js → src/common/time-locale.js
View File

67
src/index.scss
View File

@@ -1,7 +1,10 @@
$spacer: 1rem;
$blue: #007db8;
$white: #fff;
@import "@edx/brand/paragon/fonts.scss";
@import "@edx/brand/paragon/variables.scss";
@import "@edx/paragon/scss/core/core.scss";
@import "@edx/brand/paragon/overrides.scss";
@import './Menu/menu.scss';
.dropdown-item a {
@@ -118,38 +121,16 @@ $white: #fff;
border-radius: $rounded-pill;
}
}
.bell-container{
button{
position: relative;
background: transparent;
color: black;
border: none;
&:hover, &:active, &:focus{
background: transparent !important;
color: black !important;
border: none;
}
&::before{
border: none !important
}
}
.bell-icon-container{
width: 36px;
height: 36px;
border-radius: 1e+16px;
&:hover{
background: #EAE6E5;
}
.bell-icon{
margin-left: -4px !important;
margin-top: -1px;
&:focus{
box-shadow: none !important
}
background: $light-400;
}
}
.badge{
z-index: 1;
border-radius: 54px;
border: 2px solid #FFFFFF;
padding: 4px 5px;
@@ -167,27 +148,18 @@ $white: #fff;
}
}
}
.notification-tray-container{
width: 549px;
height: 100vh;
margin-top: 9px !important;
padding: 32px 0px 24px;
max-width: 549px;
overflow: scroll;
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-weight: 700;
font-size: 18px;
}
.setting-icon-container{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
position: absolute;
margin-left: -40px;
margin-top: -7px;
span{
@@ -195,28 +167,20 @@ $white: #fff;
width: 20px;
}
}
.notification-section{
.notification-section-padding{
padding: 10px 24px 10px 24px;
}
.notification-item{
padding: 10px 24px 10px 24px
}
.icon-container{
padding: 12px 12px 12px 0px
}
.notification-content{
padding: 0px;
.notification-tabs{
height: 38px;
width:501px;
margin-left: 12px;
width: 501px;
button{
font-size: 14px;
}
.dropdown-toggle::after{
display: none;
}
.dropdown-toggle{
::after{
display: none;
}
height: 36px;
padding-top: 0px !important;
padding-left: 12px !important;
@@ -226,9 +190,6 @@ $white: #fff;
}
}
.notification-tab, .dropdown-item{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 12px 12px !important;
height: 36px;
font-size:14px;
@@ -244,7 +205,6 @@ $white: #fff;
justify-content: center;
align-items: center;
padding: 6px 7px;
gap: 8px;
position: relative;
margin-left: 4px;
}
@@ -253,7 +213,6 @@ $white: #fff;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
width: 417px;
@@ -262,8 +221,6 @@ $white: #fff;
max-height: 48px;
width: 24px;
div{
background: #D23228;
border-radius: 100px;
height: 10px;
width: 10px;
}