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;
}
> .alert-warning, .alert-info, .options-notification {
> .alert-warning, .alert-info {
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

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

View File

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

View File

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