M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sass/css/_shop.scss
View File

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

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

@ -136,7 +136,8 @@
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%;
}
@ -229,7 +230,8 @@
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%;
}
@ -346,7 +348,8 @@
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%;
}
@ -611,7 +614,8 @@
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%;
}

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

3
static/js/shop/OrderForm.jsx
View File

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

3
static/js/shop/OrderPanel.jsx
View File

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

2
static/js/shop/ProductItem.jsx
View File

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

1
static/js/shop/Shop.jsx
View File

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

2
static/js/shop/options/Notification.jsx
View File

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

6
static/js/shop/options/components/Label.jsx
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";
json_add_operation("lower", (some_str) => some_str.toLowerCase(some_str));
json_add_operation("upper", (some_str) => some_str.toUpperCase(some_str));
json_add_operation("capitalize", (some_str) => some_str.capitalizeFirstLetter(some_str));
json_add_operation("lower", (some_str) => some_str && some_str.toLowerCase(some_str));
json_add_operation("upper", (some_str) => some_str && some_str.toUpperCase(some_str));
json_add_operation("capitalize", (some_str) => some_str && some_str.capitalizeFirstLetter(some_str));
export function Label(target, id, data, {content}) {
const resulting_string = json_logic_apply(content, data).flat().join("");

34
static/js/shop/options/components/Radio.jsx
View File

@ -41,22 +41,24 @@ class Radio extends Component {
{this.props.title}
</div>
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
{this.props.variants.map((variant, _) => (
<div className={`form-check shop-radio-variant ${this.props.classes}`} key={key + variant}>
<input
className="form-check-input"
type="radio"
name={key}
id={key + variant}
checked={this.state.variant === variant}
onClick={() => this.handleClick(variant)}
onChange={() => this.handleClick(variant)}
/>
<label className="form-check-label" htmlFor={key + variant}>
{variant}
</label>
</div>
))}
<div className="d-block">
{this.props.variants.map((variant, _) => (
<div className={`form-check shop-radio-variant ${this.props.classes}`} key={key + variant}>
<input
className="form-check-input"
type="radio"
name={key}
id={key + variant}
checked={this.state.variant === variant}
onClick={() => this.handleClick(variant)}
onChange={() => this.handleClick(variant)}
/>
<label className="form-check-label" htmlFor={key + variant}>
{variant}
</label>
</div>
))}
</div>
</div>
);
}

2
static/js/shop/options/components/Tip.jsx
View File

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

15
static/js/shop_data.js
View File

@ -67,7 +67,6 @@ const shop_data = {
title: "Desktop Environment",
outvar: "nuc_desktop",
variants: ["Gnome", "KDE"],
tip: "Gnome has clean and minimalist design. KDE has more feature-rich and classic interface.",
fallback: 0,
classes: "form-check-inline ms-4"
}
@ -79,7 +78,7 @@ const shop_data = {
{type: "Switch", args: {
title: "Include promotional USB stick",
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,
}}
]},
@ -89,7 +88,7 @@ const shop_data = {
{type: "Switch", args: {
title: "Include promotional 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,
}}
]},
@ -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"}},
{"if": [
{"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: "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: "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: "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"}},
{"if": [
{"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: "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: "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: "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',
type: 'hd68',
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",
warnings: [