Show tooltip instead of badge by default

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-01-15 12:28:07 +08:00
parent fcf0f49816
commit 6d6809af7f
4 changed files with 23 additions and 42 deletions

View File

@ -454,29 +454,12 @@ button {
height: 24px; height: 24px;
} }
> .alert-warning, .alert-info, .options-notification { > .alert-warning, .alert-info {
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

@ -73,14 +73,6 @@
text-decoration: none; text-decoration: none;
} }
.options-notification {
width: 5px;
height: 5px;
position: relative;
top: -2.5px;
right: -2.5px;
}
/* /*
##Device = Tablets, Ipads (portrait) ##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px ##Screen = B/w 768px to 1024px

View File

@ -1,26 +1,31 @@
import {OverlayTrigger, Tooltip} from "react-bootstrap"; import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useState} from "react"; import React, {useEffect, useState, useRef} from "react";
import {useClickAway} from "./useClickAway";
export function Notification({id, tip, content}) { export function Notification({id, tip, content}) {
const [show, setShow] = useState(true); const [show, setShow] = useState(false);
const onClickHandler = (event) => {
// prevent removing badge on touchables useEffect(() => {
if (!event.target.classList.contains("options-badge")) setTimeout(() => {
setShow(false); setShow(true)
}; }, 100);
setTimeout(() => {
setShow(false)
}, 5000);
}, []);
return ( return (
<div className="options-notification" onClick={onClickHandler}> <OverlayTrigger
{content} placement="top"
{show ? <OverlayTrigger trigger={["click", "hover"]}
placement="auto"
trigger={['click', 'hover', 'focus']}
style={{display: 'inline'}} style={{display: 'inline'}}
show={show}
onToggle={() => setShow(false)}
overlay={<Tooltip id={id}>{tip}</Tooltip>} overlay={<Tooltip id={id}>{tip}</Tooltip>}
rootClose
> >
<span className="options-badge"></span> {content}
</OverlayTrigger> : null} </OverlayTrigger>
</div>
) )
} }

View File

@ -8,6 +8,7 @@ export function Tip({id, tip}) {
trigger={['click', 'hover', 'focus']} trigger={['click', 'hover', 'focus']}
style={{display: 'inline'}} style={{display: 'inline'}}
overlay={<Tooltip id={id}>{tip}</Tooltip>} overlay={<Tooltip id={id}>{tip}</Tooltip>}
rootClose
> >
<img src={`/images/shop/icon-reminder.svg`} className="options-icon"/> <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
</OverlayTrigger> </OverlayTrigger>