morpheus65535/bazarr
1
1
Fork 0
mirror of https://github.com/morpheus65535/bazarr.git synced 2025-01-06 06:52:07 +08:00
Code Issues Projects Releases Packages Wiki Activity

Remove red dot in the notification center

Browse source
This commit is contained in:
LASER-Yi 2021-08-30 09:18:00 +08:00
parent 86d37be9aa
commit d37eea3c92
2 changed files with 2 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/App/Notification.tsx
View file

@ -12,7 +12,6 @@ import {
} from "@fortawesome/react-fontawesome"; } from "@fortawesome/react-fontawesome";
import React, { import React, {
FunctionComponent, FunctionComponent,
useCallback,
useEffect, useEffect,
useMemo, useMemo,
useRef, useRef,
@ -27,7 +26,7 @@ import {
} from "react-bootstrap"; } from "react-bootstrap";
import { useDidUpdate, useTimeoutWhen } from "rooks"; import { useDidUpdate, useTimeoutWhen } from "rooks";
import { useReduxStore } from "../@redux/hooks/base"; import { useReduxStore } from "../@redux/hooks/base";
import { BuildKey, useIsArrayExtended } from "../utilities"; import { BuildKey } from "../utilities";
import "./notification.scss"; import "./notification.scss";
enum State { enum State {
@ -66,15 +65,6 @@ const NotificationCenter: FunctionComponent = () => {
const { progress, notifications, notifier } = useReduxStore((s) => s.site); const { progress, notifications, notifier } = useReduxStore((s) => s.site);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
const [hasNew, setHasNew] = useState(false);
const hasNewProgress = useIsArrayExtended(progress);
const hasNewNotifications = useIsArrayExtended(notifications);
useDidUpdate(() => {
if (hasNewNotifications || hasNewProgress) {
setHasNew(true);
}
}, [hasNewProgress, hasNewNotifications]);
const [btnState, setBtnState] = useState(State.Idle); const [btnState, setBtnState] = useState(State.Idle);
@ -143,10 +133,6 @@ const NotificationCenter: FunctionComponent = () => {
return nodes; return nodes;
}, [progress, notifications]); }, [progress, notifications]);
const onToggleClick = useCallback(() => {
setHasNew(false);
}, []);
// Tooltip Controller // Tooltip Controller
const [showTooltip, setTooltip] = useState(false); const [showTooltip, setTooltip] = useState(false);
useTimeoutWhen(() => setTooltip(false), 3 * 1000, showTooltip); useTimeoutWhen(() => setTooltip(false), 3 * 1000, showTooltip);
@ -158,12 +144,7 @@ const NotificationCenter: FunctionComponent = () => {
return ( return (
<React.Fragment> <React.Fragment>
<Dropdown <Dropdown className="notification-btn" ref={dropdownRef} alignRight>
onClick={onToggleClick}
className={`notification-btn ${hasNew ? "new-item" : ""}`}
ref={dropdownRef}
alignRight
>
<Dropdown.Toggle as={Button} className="dropdown-hidden"> <Dropdown.Toggle as={Button} className="dropdown-hidden">
<FontAwesomeIcon {...iconProps}></FontAwesomeIcon> <FontAwesomeIcon {...iconProps}></FontAwesomeIcon>
</Dropdown.Toggle> </Dropdown.Toggle>

13
frontend/src/App/notification.scss
View file

@ -6,19 +6,6 @@
} }
.notification-btn { .notification-btn {
&.new-item {
&::after {
position: absolute;
background-color: red;
content: "";
border-radius: 50%;
height: 6px;
width: 6px;
right: 10%;
top: 10%;
}
}
.dropdown-menu { .dropdown-menu {
max-height: 85vh; max-height: 85vh;
overflow-y: auto; overflow-y: auto;