diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index e217d25..1ff5801 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -521,6 +521,12 @@ button { label { margin-bottom: 0.1rem; } + + .options-icon { + display: inline; + height: .875rem; + margin-right: 0.2rem; + } } .form-check { diff --git a/static/images/shop/icon-leaf.svg b/static/images/shop/icon-leaf.svg new file mode 100644 index 0000000..f11ca49 --- /dev/null +++ b/static/images/shop/icon-leaf.svg @@ -0,0 +1 @@ + diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx index 0e2ae15..0eeecbe 100644 --- a/static/js/shop_components.jsx +++ b/static/js/shop_components.jsx @@ -39,7 +39,10 @@ class Radio extends Component { let key = this.props.id + this.props.outvar; return (
-
{this.props.title}
+
+ {this.props.icon ? : null} + {this.props.title} +
{this.props.variants.map((variant, _) => (
; +function RadioWrapper(target, id, data, {title, variants, outvar, icon}) { + return ; } 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} />
@@ -114,8 +118,8 @@ class Switch extends Component { } } -function SwitchWrapper(target, id, data, {title, fallback, outvar}) { - return ; +function SwitchWrapper(target, id, data, {title, fallback, outvar, icon}) { + return ; } @@ -147,7 +151,10 @@ class Line extends Component { let key = this.props.id + this.props.outvar; return (
- +
@@ -155,8 +162,8 @@ class Line extends Component { } } -function LineWrapper(target, id, data, {title, fallback, outvar}) { - return ; +function LineWrapper(target, id, data, {title, fallback, outvar, icon}) { + return ; } class SwitchLine extends Component { @@ -211,6 +218,7 @@ class SwitchLine extends Component { onChange={this.handleCheck} />
@@ -221,8 +229,8 @@ class SwitchLine extends Component { } } -function SwitchLineWrapper(target, id, data, {title, fallback, outvar}) { - return ; +function SwitchLineWrapper(target, id, data, {title, fallback, outvar, icon}) { + return ; } diff --git a/static/js/shop_data.js b/static/js/shop_data.js index c20279e..3c4bc15 100644 --- a/static/js/shop_data.js +++ b/static/js/shop_data.js @@ -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"}} + ] ] } ],