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

Add icons to options titles 

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-09-06 14:22:26 +08:00
parent 0df69499b8
commit 788653abaa
4 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sass/css/_shop.scss
View File

@ -521,6 +521,12 @@ button {
label {
margin-bottom: 0.1rem;
}
.options-icon {
display: inline;
height: .875rem;
margin-right: 0.2rem;
}
}
.form-check {

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

@ -0,0 +1 @@
<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.88,2.15l-1.2.4a13.84,13.84,0,0,1-6.41.64,11.87,11.87,0,0,0-6.68.9A7.23,7.23,0,0,0,3.3,9.5a8.65,8.65,0,0,0,1.47,6.6c-.06.21-.12.42-.17.63A22.6,22.6,0,0,0,4,22H6a30.69,30.69,0,0,1,.59-4.32,9.25,9.25,0,0,0,4.52,1.11,11,11,0,0,0,4.28-.87C23,14.67,22,3.86,22,3.41ZM14.61,16.08C12,17.19,8.88,17,7.13,15.63a13.79,13.79,0,0,1,1.21-2.84A10.17,10.17,0,0,1,9.73,11a9,9,0,0,1,1.81-1.42A12,12,0,0,1,16,8V7a11.43,11.43,0,0,0-5.26,1.08,10.28,10.28,0,0,0-4.12,3.65,15.07,15.07,0,0,0-1,1.87,7,7,0,0,1-.38-3.73,5.24,5.24,0,0,1,3.14-4,8.93,8.93,0,0,1,3.82-.84c.62,0,1.23.06,1.87.11a16.2,16.2,0,0,0,6-.35C20,7.55,19.5,14,14.61,16.08Z" fill="#3a887c" stroke="#4baf84"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 765 B

30
static/js/shop_components.jsx
View File

@ -39,7 +39,10 @@ class Radio extends Component {
let key = this.props.id + this.props.outvar;
return (
<div className="shop-radio" key={this.props.id}>
<div>{this.props.title}</div>
<div>
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon" /> : null}
{this.props.title}
</div>
{this.props.variants.map((variant, _) => (
<div className="form-check" key={key + variant}>
<input
@ -61,8 +64,8 @@ class Radio extends Component {
}
}
function RadioWrapper(target, id, data, {title, variants, outvar}) {
return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id} data={data}/>;
function RadioWrapper(target, id, data, {title, variants, outvar, icon}) {
return <Radio target={target} title={title} variants={variants} outvar={outvar} icon={icon} key={id} id={id} data={data}/>;
}
class Switch extends Component {
@ -70,7 +73,7 @@ class Switch extends Component {
super(props);
// Initialize the state object with the initial values from the props
this.state = {
checked: props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback)
checked: props.outvar in props.data ? !!(props.data[props.outvar]) : !!(props.fallback)
};
// Bind the event handler to this
@ -106,6 +109,7 @@ class Switch extends Component {
onChange={this.handleClick}
/>
<label className="form-check-label" htmlFor={key}>
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon" /> : null}
{this.props.title}
</label>
</div>
@ -114,8 +118,8 @@ class Switch extends Component {
}
}
function SwitchWrapper(target, id, data, {title, fallback, outvar}) {
return <Switch target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
function SwitchWrapper(target, id, data, {title, fallback, outvar, icon}) {
return <Switch target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} key={id} id={id} data={data}/>;
}
@ -147,7 +151,10 @@ class Line extends Component {
let key = this.props.id + this.props.outvar;
return (
<div className="shop-line" key={this.props.id}>
<label htmlFor={key} className="form-label">{this.props.title}: </label>
<label htmlFor={key} className="form-label">
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon" /> : null}
{this.props.title}:
</label>
<input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick}
value={this.state.text}/>
</div>
@ -155,8 +162,8 @@ class Line extends Component {
}
}
function LineWrapper(target, id, data, {title, fallback, outvar}) {
return <Line target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
function LineWrapper(target, id, data, {title, fallback, outvar, icon}) {
return <Line target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} key={id} id={id} data={data}/>;
}
class SwitchLine extends Component {
@ -211,6 +218,7 @@ class SwitchLine extends Component {
onChange={this.handleCheck}
/>
<label className="form-check-label" htmlFor={key + "switch"}>
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon" /> : null}
{this.props.title}
</label>
</div>
@ -221,8 +229,8 @@ class SwitchLine extends Component {
}
}
function SwitchLineWrapper(target, id, data, {title, fallback, outvar}) {
return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
function SwitchLineWrapper(target, id, data, {title, fallback, outvar, icon}) {
return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} key={id} id={id} data={data}/>;
}

5
static/js/shop_data.js
View File

@ -79,8 +79,11 @@ const shop_data = {
{type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24"}},
{type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
{type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}},
{type: "Switch", args: {title: "Email device_db", outvar: "out", icon: "/shop/icon-leaf.svg"}},
],
null
[
{type: "Switch", args: {title: "Optic fiber instead of copper cable", outvar: "optics"}}
]
]
}
],