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;
}
> .alert-warning, .alert-info {
> .alert-warning, .alert-info, .options-notification {
background-color: inherit;
height: inherit;
width: 20px;
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 {

View File

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

View File

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