Make overlay appear on button click
And fix options absense for non-carrier cards Signed-off-by: Egor Savkin <es@m-labs.hk>
parent
b2250680c9
commit
bd7e39927d
|
|
@ -255,7 +255,7 @@ button {
|
|||
|
||||
.item-card-name,
|
||||
.price {
|
||||
> .alert-warning, > .alert-info {
|
||||
> .alert-warning, .alert-info {
|
||||
background-color: inherit;
|
||||
height: inherit;
|
||||
width: 20px;
|
||||
|
|
@ -432,7 +432,7 @@ button {
|
|||
height: 24px;
|
||||
}
|
||||
|
||||
> .alert-warning, > .alert-info {
|
||||
> .alert-warning, .alert-info {
|
||||
background-color: inherit;
|
||||
height: inherit;
|
||||
width: 20px;
|
||||
|
|
@ -509,15 +509,15 @@ button {
|
|||
}
|
||||
|
||||
.overlayVariant {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
top: 24px;
|
||||
width: 132px;
|
||||
min-height: 70px;
|
||||
max-height: 320px;
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: left;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
color: black;
|
||||
|
|
@ -548,7 +548,13 @@ button {
|
|||
min-height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-smallcard {
|
||||
right: -34.5px;
|
||||
}
|
||||
.overlay-bigcard {
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.hovered {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
id="Layer_1"
|
||||
style="enable-background:new 0 0 48 48;"
|
||||
version="1.1"
|
||||
viewBox="0 0 48 48"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="icon-customize.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs13" /><sodipodi:namedview
|
||||
id="namedview11"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="16.6875"
|
||||
inkscape:cx="19.715356"
|
||||
inkscape:cy="28.853933"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer3" /><g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="layer1"><g
|
||||
id="g8"
|
||||
inkscape:label="g8"
|
||||
style="enable-background:new 0 0 48 48;fill:#715ec7;fill-opacity:1"><path
|
||||
d="M 36.9,6 C 36.5,4.3 34.9,3 33,3 31.1,3 29.6,4.3 29.1,6 H 2 v 2 h 27.1 c 0.4,1.7 2,3 3.9,3 1.9,0 3.4,-1.3 3.9,-3 H 46 V 6 Z M 33,9 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
|
||||
id="path2"
|
||||
style="fill:#715ec7;fill-opacity:1" /><path
|
||||
d="m 33,37 c -1.9,0 -3.4,1.3 -3.9,3 H 2 v 2 h 27.1 c 0.4,1.7 2,3 3.9,3 1.9,0 3.4,-1.3 3.9,-3 H 46 v -2 h -9.1 c -0.5,-1.7 -2,-3 -3.9,-3 z m 0,6 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
|
||||
id="path4"
|
||||
style="fill:#715ec7;fill-opacity:1" /><path
|
||||
d="m 15,20 c -1.9,0 -3.4,1.3 -3.9,3 H 2 v 2 h 9.1 c 0.4,1.7 2,3 3.9,3 1.9,0 3.4,-1.3 3.9,-3 H 46 V 23 H 18.9 c -0.5,-1.7 -2,-3 -3.9,-3 z m 0,6 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
|
||||
id="path6"
|
||||
style="display:inline;fill:#715ec7;fill-opacity:1" /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client";
|
|||
import PropTypes from "prop-types";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import ProcessOptions from "./shop_components.jsx";
|
||||
import { CustomizeButton } from "./shop_components.jsx";
|
||||
|
||||
|
||||
const data = window.shop_data;
|
||||
|
|
@ -711,37 +711,31 @@ class ProductCartItem extends React.PureComponent {
|
|||
|
||||
{warning ? (
|
||||
<img className="alert-warning" src={`/images${warning.icon}`} />
|
||||
) : (options ? <img className="alert-info" src="/images/shop/icon-customize.svg" /> : null) }
|
||||
) : (options ? (<CustomizeButton
|
||||
options={options}
|
||||
data={options_data}
|
||||
key={"popover" + index}
|
||||
id={"popover" + index}
|
||||
big={data.size == "big"}
|
||||
target={{
|
||||
construct: ((outvar, value) => {
|
||||
//console.log("construct", outvar, value, options_data);
|
||||
options_data[outvar] = value;
|
||||
this.setState(options_data);
|
||||
}),
|
||||
update: ((outvar, value) => {
|
||||
//console.log("update", outvar, value, options_data);
|
||||
if (outvar in options_data) options_data[outvar] = value;
|
||||
this.setState(options_data);
|
||||
}),
|
||||
unmount: ((outvar) => {
|
||||
//console.log("delete", outvar);
|
||||
delete options_data[outvar];
|
||||
})
|
||||
}}
|
||||
/>) : null) }
|
||||
|
||||
{options ? (
|
||||
<div
|
||||
style={{'display': model.showOverlayRemove ? 'flex' : 'none'}}
|
||||
className="overlayVariant">
|
||||
|
||||
<ProcessOptions
|
||||
options={options}
|
||||
data={options_data}
|
||||
key={"processed_options" + index}
|
||||
id={"processed_options" + index}
|
||||
target={{
|
||||
construct: ((outvar, value) => {
|
||||
//console.log("construct", outvar, value, options_data);
|
||||
options_data[outvar] = value;
|
||||
this.setState(options_data);
|
||||
}),
|
||||
update: ((outvar, value) => {
|
||||
//console.log("update", outvar, value, options_data);
|
||||
if (outvar in options_data) options_data[outvar] = value;
|
||||
this.setState(options_data);
|
||||
}),
|
||||
unmount: ((outvar) => {
|
||||
//console.log("delete", outvar);
|
||||
delete options_data[outvar];
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{warning && model.showWarning && (
|
||||
<div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
|
||||
|
|
@ -1440,8 +1434,7 @@ class OrderSumary extends React.PureComponent {
|
|||
|
||||
<tbody>
|
||||
{summary.map((item, index) => {
|
||||
let alert;
|
||||
let warning;
|
||||
let alert, warning, options;
|
||||
|
||||
if (itemsData[index] && itemsData[index].warnings) {
|
||||
alert = itemsData[index];
|
||||
|
|
@ -1450,6 +1443,7 @@ class OrderSumary extends React.PureComponent {
|
|||
warning = alert.warnings[warningsKeys[0]];
|
||||
}
|
||||
}
|
||||
options = itemsData[index] && itemsData[index].options;
|
||||
|
||||
return (
|
||||
<tr key={item.id}
|
||||
|
|
@ -1477,15 +1471,15 @@ class OrderSumary extends React.PureComponent {
|
|||
className="alert-warning"
|
||||
src={`/images/${warning.icon}`}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
) : ( options ?
|
||||
(<img
|
||||
style={{'marginLeft': '10px'}}
|
||||
className="alert-info"
|
||||
src="/images/shop/icon-customize.svg"
|
||||
/>
|
||||
/>) : null
|
||||
)}
|
||||
|
||||
{!warning && (
|
||||
{(!warning && !options) && (
|
||||
<span style={{
|
||||
'display': 'inline-block',
|
||||
'width': '30px',
|
||||
|
|
@ -2374,14 +2368,13 @@ class Shop extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
itemsCloned.forEach((_elem, idx) => {
|
||||
if (!(idx in itemsData)) itemsData[idx] = {};
|
||||
itemsCloned.forEach((elem, idx) => {
|
||||
if (!(idx in itemsData)) itemsData[idx] = elem;
|
||||
if (idx in this.state.columns.cart.itemsData && this.state.columns.cart.itemsData[idx].options_data) {
|
||||
itemsData[idx].options_data = this.state.columns.cart.itemsData[idx].options_data;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// update state with rules
|
||||
this.setState({
|
||||
...this.state,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import React, {Component} from "react";
|
||||
import jsonLogic from 'json-logic-js';
|
||||
import { useState } from 'react';
|
||||
|
||||
// https://stackoverflow.com/a/70511311
|
||||
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
|
||||
|
|
@ -263,4 +264,28 @@ export default function ProcessOptions({options, data, target, id}) {
|
|||
return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function CustomizeButton({options, data, target, id, big}) {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard")
|
||||
const handleClick = (event) => {
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"} onClick={handleClick} />
|
||||
<div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
|
||||
<ProcessOptions
|
||||
options={options}
|
||||
data={data}
|
||||
key={"processed_options_" + id}
|
||||
id={"processed_options_" + id}
|
||||
target={target}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,6 +147,28 @@ const shop_data = {
|
|||
nbrCurrentClock: 0,
|
||||
slotOccupied: 1,
|
||||
clockOccupied: 0,
|
||||
options: [
|
||||
{type: "Radio", args: {title: "Variant", outvar: "variant", variants: ["standalone", "master", "satellite"]}},
|
||||
{
|
||||
"if": [
|
||||
{
|
||||
"in": [
|
||||
{"var": "variant"}, [
|
||||
"master", "standalone"
|
||||
]
|
||||
]
|
||||
},
|
||||
[
|
||||
{type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24"}},
|
||||
{type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
|
||||
{type: "SwitchLine", args: {title: "MAC", outvar: "mac"}},
|
||||
{type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}},
|
||||
],
|
||||
null
|
||||
]
|
||||
},
|
||||
null
|
||||
],
|
||||
rules: {
|
||||
maxSlot: {
|
||||
type: 'kaslisoc-max-slot',
|
||||
|
|
@ -262,6 +284,10 @@ const shop_data = {
|
|||
nbrClockMax: 0,
|
||||
slotOccupied: 1,
|
||||
clockOccupied: 0,
|
||||
options: [
|
||||
{type: "Switch", args: {title: "Output upper bank", outvar: "upper_bank"}},
|
||||
{type: "Switch", args: {title: "Output lower bank", outvar: "lower_bank", fallback: true}}
|
||||
],
|
||||
rules: {
|
||||
resources: {
|
||||
type: 'bnc-dio',
|
||||
|
|
@ -283,6 +309,10 @@ const shop_data = {
|
|||
],
|
||||
datasheet_file: '/docs/sinara-datasheets/2118-2128.pdf',
|
||||
datasheet_name: '2118/2128 BNC/SMA-TTL datasheet',
|
||||
options: [
|
||||
{type: "Switch", args: {title: "Output upper bank", outvar: "upper_bank"}},
|
||||
{type: "Switch", args: {title: "Output lower bank", outvar: "lower_bank", fallback: true}}
|
||||
],
|
||||
size: 'small',
|
||||
type: null,
|
||||
hp: 4,
|
||||
|
|
|
|||
Loading…
Reference in New Issue