esavkin/web2019
1
0
Fork 0
forked from M-Labs/web2019
Code Pull Requests Activity

Add prototype of the notification, fixes and animation needed

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-01-03 17:34:26 +08:00
parent c3e583d644
commit 0ed9f730b2
4 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/css/order-hardware.css
View File

@ -61,6 +61,14 @@
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

1
static/images/shop/icon-notification.svg Normal file
View File

@ -0,0 +1 @@
<svg width="32" height="32" version="1.1" viewBox="0 0 8.4667 8.4667" xmlns="http://www.w3.org/2000/svg"><circle cx="4.2333" cy="4.2333" r="3.9077" fill="#d0423f" stroke="#d0423f" stroke-linecap="round" stroke-width=".65136"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

7
static/js/shop/options/DialogPopup.jsx
View File

@ -1,6 +1,7 @@
import React, {useState} from "react"; import React, {useState} from "react";
import {useClickAway} from "./useClickAway"; import {useClickAway} from "./useClickAway";
import {ProcessOptions} from "./Options"; import {ProcessOptions} from "./Options";
import {Notification} from "./Notification";
export function DialogPopup({options, data, target, id, big, first, last, options_class}) { export function DialogPopup({options, data, target, id, big, first, last, options_class}) {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
@ -17,8 +18,14 @@ export function DialogPopup({options, data, target, id, big, first, last, option
return ( return (
<div ref={ref}> <div ref={ref}>
<Notification
id={"processed_options_notification" + id}
tip="ABOBA"
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}/>
}
/>
<div style={{'display': show ? 'flex' : 'none'}} className={div_classes}> <div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
<ProcessOptions <ProcessOptions
options={options} options={options}

19
static/js/shop/options/Notification.jsx Normal file
View File

@ -0,0 +1,19 @@
import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useState} from "react";
export function Notification({id, tip, content}) {
const [show, setShow] = useState(true);
return (
<div className="" onClick={() => setShow(false)}>
{content}
<OverlayTrigger
placement="auto"
trigger={['click', 'hover', 'focus']}
style={{display: show ? 'inline' : "hidden"}}
overlay={<Tooltip id={id}>{tip}</Tooltip>}
>
<img src="/images/shop/icon-notification.svg" className="options-notification" style={{display: show ? 'inline' : "hidden"}}/>
</OverlayTrigger>
</div>
)
}