feature/IO-3096-GlobalNotifications - styling checkpoint
This commit is contained in:
Dave Richer
@@ -1,5 +1,6 @@
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
import { Alert, Badge, Button, Checkbox, List, Typography } from "antd";
|
||||
import { Alert, Badge, Button, Tooltip, Typography } from "antd";
|
||||
import { EyeFilled, EyeOutlined, CheckCircleFilled, CheckCircleOutlined } from "@ant-design/icons";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./notification-center.styles.scss";
|
||||
@@ -23,22 +24,14 @@ const NotificationCenterComponent = ({
|
||||
|
||||
const renderNotification = (index, notification) => {
|
||||
return (
|
||||
<List.Item
|
||||
<div
|
||||
key={`${notification.id}-${index}`}
|
||||
className={notification.read ? "notification-read" : "notification-unread"}
|
||||
className={`notification-item ${notification.read ? "notification-read" : "notification-unread"}`}
|
||||
onClick={() => !notification.read && onNotificationClick(notification.id)}
|
||||
>
|
||||
<Badge dot={!notification.read}>
|
||||
<div>
|
||||
<Title
|
||||
level={5}
|
||||
style={{
|
||||
margin: "0 0 8px 0",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<div className="notification-content">
|
||||
<Title level={5} className="notification-title">
|
||||
<Link
|
||||
to={`/manage/jobs/${notification.jobid}`}
|
||||
onClick={(e) => {
|
||||
@@ -47,12 +40,15 @@ const NotificationCenterComponent = ({
|
||||
onNotificationClick(notification.id);
|
||||
}
|
||||
}}
|
||||
className="ro-number"
|
||||
>
|
||||
RO #{notification.roNumber}
|
||||
</Link>
|
||||
<Text type="secondary">{day(notification.created_at).fromNow()}</Text>
|
||||
<Text type="secondary" className="relative-time">
|
||||
{day(notification.created_at).fromNow()}
|
||||
</Text>
|
||||
</Title>
|
||||
<Text strong={!notification.read}>
|
||||
<Text strong={!notification.read} className="notification-body">
|
||||
<ul>
|
||||
{notification.scenarioText.map((text, idx) => (
|
||||
<li key={`${notification.id}-${idx}`}>{text}</li>
|
||||
@@ -61,24 +57,36 @@ const NotificationCenterComponent = ({
|
||||
</Text>
|
||||
</div>
|
||||
</Badge>
|
||||
</List.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const hasUnread = notifications.some((n) => !n.read);
|
||||
|
||||
return (
|
||||
<div className={`notification-center ${visible ? "visible" : ""}`}>
|
||||
<div className="notification-header">
|
||||
<h3>{t("notifications.labels.notification-center")}</h3>
|
||||
<div className="notification-controls">
|
||||
<Checkbox checked={showUnreadOnly} onChange={(e) => toggleUnreadOnly(e.target.checked)}>
|
||||
{t("notifications.labels.show-unread-only")}
|
||||
</Checkbox>
|
||||
<Button type="link" onClick={markAllRead} disabled={!notifications.some((n) => !n.read)}>
|
||||
{t("notifications.labels.mark-all-read")}
|
||||
</Button>
|
||||
<Tooltip title={t("notifications.labels.show-unread-only")}>
|
||||
<Button
|
||||
type="link"
|
||||
icon={showUnreadOnly ? <EyeFilled /> : <EyeOutlined />}
|
||||
onClick={() => toggleUnreadOnly(!showUnreadOnly)}
|
||||
className={showUnreadOnly ? "active" : ""}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title={t("notifications.labels.mark-all-read")}>
|
||||
<Button
|
||||
type="link"
|
||||
icon={hasUnread ? <CheckCircleFilled /> : <CheckCircleOutlined />}
|
||||
onClick={markAllRead}
|
||||
disabled={!hasUnread}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{error && <Alert message="Error" description={error} type="error" closable onClose={() => onClose()} />}
|
||||
{error && <Alert message={error} type="error" closable onClose={() => onClose()} />}
|
||||
<Virtuoso
|
||||
style={{ height: "400px", width: "100%" }}
|
||||
data={notifications}
|
||||
|
||||
@@ -2,112 +2,137 @@
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
//width: 600px;
|
||||
background: #fff; /* White background, Ant’s default */
|
||||
color: rgba(0, 0, 0, 0.85); /* Primary text color in Ant 5 */
|
||||
border: 1px solid #d9d9d9; /* Neutral gray border */
|
||||
border-radius: 6px; /* Slightly larger radius per Ant 5 */
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); /* Subtle Ant 5 shadow */
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
background: #fff;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
overflow-x: hidden; /* Prevent horizontal overflow */
|
||||
|
||||
&.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notification-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0; /* Light gray border from Ant 5 */
|
||||
padding: 4px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fafafa; /* Light gray background for header */
|
||||
background: #fafafa;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.85); /* Primary text color */
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.notification-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
color: rgba(0, 0, 0, 0.85); /* Match Ant’s text color */
|
||||
}
|
||||
gap: 8px;
|
||||
|
||||
.ant-btn-link {
|
||||
color: #1677ff; /* Ant 5 primary blue */
|
||||
padding: 0;
|
||||
color: #1677ff;
|
||||
|
||||
&:hover {
|
||||
color: #69b1ff; /* Lighter blue on hover */
|
||||
color: #69b1ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: rgba(0, 0, 0, 0.25); /* Disabled text color from Ant 5 */
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #0958d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-read {
|
||||
background: #fff; /* White background for read items */
|
||||
color: rgba(0, 0, 0, 0.65); /* Secondary text color */
|
||||
background: #fff;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.notification-unread {
|
||||
background: #f5f5f5; /* Very light gray for unread items */
|
||||
color: rgba(0, 0, 0, 0.85); /* Primary text color */
|
||||
background: #f5f5f5;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.ant-list {
|
||||
overflow: auto; /* Match Virtuoso’s default scrolling behavior */
|
||||
max-height: 100%; /* Allow full height, let Virtuoso handle virtualization */
|
||||
}
|
||||
.notification-item {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ant-list-item {
|
||||
padding: 2px 16px;
|
||||
border-bottom: 1px solid #f0f0f0; /* Light gray border */
|
||||
display: block; /* Ensure visibility */
|
||||
overflow: visible; /* Prevent clipping within items */
|
||||
min-height: 80px; /* Minimum height for multi-line content */
|
||||
|
||||
.ant-typography {
|
||||
color: inherit; /* Inherit from parent (read/unread) */
|
||||
.notification-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-typography-secondary {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45); /* Ant 5 secondary text color */
|
||||
}
|
||||
|
||||
.ant-badge-dot {
|
||||
background: #ff4d4f; /* Keep red dot for unread, consistent with Ant */
|
||||
}
|
||||
|
||||
ul {
|
||||
.notification-title {
|
||||
margin: 0;
|
||||
padding-left: 20px; /* Standard list padding */
|
||||
list-style-type: disc; /* Ensure bullet points */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ro-number {
|
||||
margin: 0;
|
||||
color: #1677ff;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.relative-time {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4px; /* Space between list items */
|
||||
.notification-body {
|
||||
margin-top: 4px;
|
||||
|
||||
.ant-typography {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-badge {
|
||||
width: 100%; /* Ensure Badge takes full width to allow .notification-title to stretch properly */
|
||||
}
|
||||
|
||||
.ant-alert {
|
||||
margin: 8px;
|
||||
background: #fff1f0; /* Light red background for error per Ant 5 */
|
||||
background: #fff1f0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid #ffa39e; /* Light red border */
|
||||
border: 1px solid #ffa39e;
|
||||
|
||||
.ant-alert-message {
|
||||
color: #ff4d4f; /* Red text for message */
|
||||
}
|
||||
|
||||
.ant-alert-description {
|
||||
color: rgba(0, 0, 0, 0.65); /* Slightly muted description */
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user