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

fix: bell icon design change

Browse Source
This commit is contained in:
Awais Ansari
2023-05-26 20:52:18 +05:00
parent 86939a2559
commit 642be093c7
4 changed files with 72 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Header.jsx
View File

@@ -9,6 +9,7 @@ import {
getConfig,
subscribe,
} from '@edx/frontend-platform';
import DesktopHeader from './DesktopHeader';
import MobileHeader from './MobileHeader';

97
src/Notifications/Notifications.jsx
View File

@@ -49,55 +49,68 @@ const Notifications = () => {
}, []);
return (
<div className="mx-4 my-3 bell-container">
<OverlayTrigger
trigger="click"
key="bottom"
placement="bottom"
show={showNotificationTray}
overlay={(
<Popover
id="popover-positioned-bottom"
className="notification-tray-container pt-4.5 pb-4 px-4 overflow-auto d-flex flex-column
<OverlayTrigger
trigger="click"
key="bottom"
placement="bottom"
show={showNotificationTray}
overlay={(
<Popover
id="popover-positioned-bottom"
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={{ 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>
<Icon src={Settings} className="icon-size-20" />
</Popover.Title>
<Popover.Content className="notification-content p-0">
<NotificationTabs />
</Popover.Content>
</div>
</Popover>
>
<div ref={popoverRef}>
<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>
<Icon src={Settings} className="icon-size-20" />
</Popover.Title>
<Popover.Content className="notification-content p-0">
<NotificationTabs />
</Popover.Content>
</div>
</Popover>
)}
>
<>
{notificationCounts?.Total > 0 && (
>
<>
{/* {notificationCounts?.Total > 0 && (
<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}>
<IconButton
onClick={() => { handleNotificationTray(!showNotificationTray); }}
src={NotificationsNone}
iconAs={Icon}
className="d-inline-block align-bottom ml-1 ml-n1 shadow-none bg-transparent text-primary-500"
/>
</div>
</>
</OverlayTrigger>
</div>
)} */}
<div className="" ref={buttonRef}>
<IconButton
isActive={showNotificationTray}
alt="notification bell icon"
onClick={() => { handleNotificationTray(!showNotificationTray); }}
src={NotificationsNone}
iconAs={Icon}
variant="light"
iconClassNames="text-primary-500"
className="ml-4 mr-1 my-3"
style={{ width: '36px', height: '36px' }}
/>
<Badge
variant="danger"
pill
className="font-weight-normal px-1"
style={{
fontSize: '9px', border: '2px solid white', right: '-3px', top: '18px', fontWeight: '600',
}}
>
{ notificationCounts?.Total > 0 && notificationCounts?.Total}
</Badge>
</div>
</>
</OverlayTrigger>
);
};

2
src/learning-header/AuthenticatedUserDropdown.jsx
View File

@@ -22,7 +22,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
<>
<a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
<Notifications />
<Dropdown className="user-dropdown">
<Dropdown className="user-dropdown ml-3">
<Dropdown.Toggle variant="outline-primary">
<FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
<span data-hj-suppress className="d-none d-md-inline">

33
src/learning-header/LearningHeader.jsx
View File

@@ -1,4 +1,4 @@
import React, { useContext, useMemo } from 'react';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -39,30 +39,27 @@ const LearningHeader = ({
alt={getConfig().SITE_NAME}
/>
);
const value = useMemo(() => ({ authenticatedUser }), [authenticatedUser]);
return (
<AppProvider store={store}>
<AppContext.Provider value={value}>
<header className="learning-header">
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
<div className="container-xl py-2 d-flex align-items-center">
{headerLogo}
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>
<span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
</div>
{showUserDropdown && authenticatedUser && (
<header className="learning-header">
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
<div className="container-xl py-2 d-flex align-items-center">
{headerLogo}
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>
<span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
</div>
{showUserDropdown && authenticatedUser && (
<AuthenticatedUserDropdown
username={authenticatedUser.username}
/>
)}
{showUserDropdown && !authenticatedUser && (
)}
{showUserDropdown && !authenticatedUser && (
<AnonymousUserMenu />
)}
</div>
</header>
</AppContext.Provider>
)}
</div>
</header>
</AppProvider>
);
};