Notification badge on unviewed options

This commit is contained in:
火焚 富良 2024-01-05 13:15:43 +08:00 committed by Egor Savkin
parent 0ed9f730b2
commit a589c309cc
3 changed files with 31 additions and 7 deletions

View File

@ -454,12 +454,29 @@ button {
height: 24px; height: 24px;
} }
> .alert-warning, .alert-info { > .alert-warning, .alert-info, .options-notification {
background-color: inherit; background-color: inherit;
height: inherit; height: inherit;
width: 20px; width: 20px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.options-notification {
position: relative;
display: inline-block;
.options-badge {
position: absolute;
top: -2.5px;
right: -3.5px;
padding: 0;
color: white;
width: 7px;
height: 7px;
background-image: url("/images/shop/icon-notification.svg") ;
background-repeat: no-repeat;
background-size: 7px;
}
}
} }
.overlayRemove { .overlayRemove {

View File

@ -20,7 +20,7 @@ export function DialogPopup({options, data, target, id, big, first, last, option
<div ref={ref}> <div ref={ref}>
<Notification <Notification
id={"processed_options_notification" + id} id={"processed_options_notification" + id}
tip="ABOBA" tip="Customization options available"
content={ content={
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"} <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
onClick={handleClick}/> onClick={handleClick}/>

View File

@ -3,17 +3,24 @@ import React, {useState} from "react";
export function Notification({id, tip, content}) { export function Notification({id, tip, content}) {
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
const onClickHandler = (event) => {
// prevent removing badge on touchables
if (!event.target.classList.contains("options-badge"))
setShow(false);
};
return ( return (
<div className="" onClick={() => setShow(false)}> <div className="options-notification" onClick={onClickHandler}>
{content} {content}
<OverlayTrigger {show ? <OverlayTrigger
placement="auto" placement="auto"
trigger={['click', 'hover', 'focus']} trigger={['click', 'hover', 'focus']}
style={{display: show ? 'inline' : "hidden"}} style={{display: 'inline'}}
overlay={<Tooltip id={id}>{tip}</Tooltip>} overlay={<Tooltip id={id}>{tip}</Tooltip>}
> >
<img src="/images/shop/icon-notification.svg" className="options-notification" style={{display: show ? 'inline' : "hidden"}}/> <span className="options-badge"></span>
</OverlayTrigger> </OverlayTrigger> : null}
</div> </div>
) )
} }