Move order options to the OrderForm, fix missing tooltip props, update tooltip contents

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-02-07 16:23:17 +08:00
parent 759f7cffcc
commit 67cef120b6
12 changed files with 47 additions and 41 deletions

View File

@ -385,9 +385,9 @@ button {
} }
.order-bar { .order-bar {
width: 100%; width: 90%;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.75rem 1.25rem; padding: 0;
input[type="text"] { input[type="text"] {
padding: 0; padding: 0;
font-size: 0.9rem; font-size: 0.9rem;
@ -395,7 +395,7 @@ button {
} }
.options-group { .options-group {
margin-top: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem;
} }

View File

@ -136,7 +136,8 @@
font-size: 1rem; font-size: 1rem;
} }
#root-shop .panel .summary>.summary-form form { #root-shop .panel .summary>.summary-form form,
#root-shop .panel .summary>.summary-form .order-bar {
width: 100%; width: 100%;
} }
@ -229,7 +230,8 @@
font-size: .7rem; font-size: .7rem;
} }
#root-shop .panel .summary>.summary-form form { #root-shop .panel .summary>.summary-form form,
#root-shop .panel .summary>.summary-form .order-bar {
width: 100%; width: 100%;
} }
@ -346,7 +348,8 @@
font-size: .7rem; font-size: .7rem;
} }
#root-shop .panel .summary>.summary-form form { #root-shop .panel .summary>.summary-form form,
#root-shop .panel .summary>.summary-form .order-bar {
width: 100%; width: 100%;
} }
@ -611,7 +614,8 @@
font-size: .7rem; font-size: .7rem;
} }
#root-shop .panel .summary>.summary-form form { #root-shop .panel .summary>.summary-form form,
#root-shop .panel .summary>.summary-form .order-bar {
width: 100%; width: 100%;
} }

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,7 @@ import {ShowJSON} from "./ShowJSON";
// #!render_count // #!render_count
import {useRenderCount} from "@uidotdev/usehooks"; import {useRenderCount} from "@uidotdev/usehooks";
import {OrderOptions} from "./OrderOptions";
/** /**
@ -29,6 +30,8 @@ export function OrderForm() {
return ( return (
<div className="summary-form"> <div className="summary-form">
<OrderOptions/>
<form onSubmit={submitForm} noValidate> <form onSubmit={submitForm} noValidate>
<input <input

View File

@ -47,11 +47,8 @@ export function OrderPanel({title, description}) {
<CrateList/> <CrateList/>
<OrderOptions/>
<section className="summary"> <section className="summary">
<SummaryOrder/> <SummaryOrder/>
<OrderForm/> <OrderForm/>
</section> </section>

View File

@ -62,7 +62,7 @@ export function ProductItem({card_index}) {
<img src="/images/shop/icon-add.svg" alt="add"/> <img src="/images/shop/icon-add.svg" alt="add"/>
</button> </button>
<Draggable draggableId={card.id} index={card_index}> <Draggable draggableId={card.id + card_index} index={card_index}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<React.Fragment> <React.Fragment>
<img <img

View File

@ -27,6 +27,7 @@ export function Shop() {
const handleOnDragEnd = (drop_result, _provided) => { const handleOnDragEnd = (drop_result, _provided) => {
if (!drop_result.destination) { if (!drop_result.destination) {
console.warn("No drop destination"); console.warn("No drop destination");
console.log(drop_result)
return; return;
} }
if (drop_result.source.droppableId === "backlog") if (drop_result.source.droppableId === "backlog")

View File

@ -21,7 +21,7 @@ export function Notification({id, tip, content, sideMenuIsOpen}) {
style={{display: 'inline'}} style={{display: 'inline'}}
show={show} show={show}
onToggle={() => setShow(false)} onToggle={() => setShow(false)}
overlay={<Tooltip id={id}>{tip}</Tooltip>} overlay={props => <Tooltip id={id} {...props}>{tip}</Tooltip>}
rootClose={!sideMenuIsOpen} rootClose={!sideMenuIsOpen}
> >
{content} {content}

View File

@ -2,9 +2,9 @@ import React from "react";
import {apply as json_logic_apply, add_operation as json_add_operation} from "json-logic-js"; import {apply as json_logic_apply, add_operation as json_add_operation} from "json-logic-js";
json_add_operation("lower", (some_str) => some_str.toLowerCase(some_str)); json_add_operation("lower", (some_str) => some_str && some_str.toLowerCase(some_str));
json_add_operation("upper", (some_str) => some_str.toUpperCase(some_str)); json_add_operation("upper", (some_str) => some_str && some_str.toUpperCase(some_str));
json_add_operation("capitalize", (some_str) => some_str.capitalizeFirstLetter(some_str)); json_add_operation("capitalize", (some_str) => some_str && some_str.capitalizeFirstLetter(some_str));
export function Label(target, id, data, {content}) { export function Label(target, id, data, {content}) {
const resulting_string = json_logic_apply(content, data).flat().join(""); const resulting_string = json_logic_apply(content, data).flat().join("");

View File

@ -41,6 +41,7 @@ class Radio extends Component {
{this.props.title} {this.props.title}
</div> </div>
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>} {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
<div className="d-block">
{this.props.variants.map((variant, _) => ( {this.props.variants.map((variant, _) => (
<div className={`form-check shop-radio-variant ${this.props.classes}`} key={key + variant}> <div className={`form-check shop-radio-variant ${this.props.classes}`} key={key + variant}>
<input <input
@ -58,6 +59,7 @@ class Radio extends Component {
</div> </div>
))} ))}
</div> </div>
</div>
); );
} }
} }

View File

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

View File

@ -67,7 +67,6 @@ const shop_data = {
title: "Desktop Environment", title: "Desktop Environment",
outvar: "nuc_desktop", outvar: "nuc_desktop",
variants: ["Gnome", "KDE"], variants: ["Gnome", "KDE"],
tip: "Gnome has clean and minimalist design. KDE has more feature-rich and classic interface.",
fallback: 0, fallback: 0,
classes: "form-check-inline ms-4" classes: "form-check-inline ms-4"
} }
@ -79,7 +78,7 @@ const shop_data = {
{type: "Switch", args: { {type: "Switch", args: {
title: "Include promotional USB stick", title: "Include promotional USB stick",
outvar: "include_usb_stick_nuc", outvar: "include_usb_stick_nuc",
tip: "Choose if you need a USB stick and wish to receive configuration files via other electronic means (e.g. email or cloud).", tip: "Choose if you need a USB stick with device database and other relevant files. Alternative is to to receive them via other electronic means (e.g. email or cloud).",
fallback: false, fallback: false,
}} }}
]}, ]},
@ -89,7 +88,7 @@ const shop_data = {
{type: "Switch", args: { {type: "Switch", args: {
title: "Include promotional USB stick", title: "Include promotional USB stick",
outvar: "include_usb_stick", outvar: "include_usb_stick",
tip: "Choose if you need a USB stick and wish to receive configuration files via other electronic means (e.g. email or cloud).", tip: "Choose if you need a USB stick with device database and other relevant files. Alternative is to to receive them via other electronic means (e.g. email or cloud).",
fallback: true, fallback: true,
}} }}
]}, ]},
@ -203,8 +202,8 @@ const shop_data = {
{type: "Switch", args: {title: "Optical fiber", outvar: "optics", tip: "Use optical fiber instead of direct attach copper cable"}}, {type: "Switch", args: {title: "Optical fiber", outvar: "optics", tip: "Use optical fiber instead of direct attach copper cable"}},
{"if": [ {"if": [
{"var": "optics"}, {"var": "optics"},
{type: "Radio", args: {title: "Fiber cable length", outvar: "cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}}, {type: "Radio", args: {title: "Fiber cable length", outvar: "fiber_cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}},
{type: "Radio", args: {title: "Copper cable length", outvar: "cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}}, {type: "Radio", args: {title: "Copper cable length", outvar: "copper_cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}},
]} ]}
] ]
] ]
@ -271,8 +270,8 @@ const shop_data = {
{type: "Switch", args: {title: "Optical fiber", outvar: "optics", tip: "Use optical fiber instead of direct attach copper cable"}}, {type: "Switch", args: {title: "Optical fiber", outvar: "optics", tip: "Use optical fiber instead of direct attach copper cable"}},
{"if": [ {"if": [
{"var": "optics"}, {"var": "optics"},
{type: "Radio", args: {title: "Fiber cable length", outvar: "cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}}, {type: "Radio", args: {title: "Fiber cable length", outvar: "fiber_cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}},
{type: "Radio", args: {title: "Copper cable length", outvar: "cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}}, {type: "Radio", args: {title: "Copper cable length", outvar: "copper_cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}},
]} ]}
] ]
] ]
@ -884,7 +883,7 @@ const shop_data = {
size: 'small', size: 'small',
type: 'hd68', type: 'hd68',
options: [ options: [
{type: "Radio", args: {title: "Cable length", outvar: "cable_len", variants: ["1 M", "2 M", "3 M"], tip: "The desired length of the HD68 cable", fallback: 1}}, {type: "Radio", args: {title: "Cable length", outvar: "hd68_cable_len", variants: ["1 M", "2 M", "3 M"], tip: "The desired length of the HD68 cable", fallback: 1}},
], ],
options_class: "hd68-idc", options_class: "hd68-idc",
warnings: [ warnings: [