Add icons to options titles

Signed-off-by: Egor Savkin <es@m-labs.hk>

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 {

static/images/shop/icon-leaf.svg

@@ -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>

static/js/shop_components.jsx

@@ -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}) {
+function RadioWrapper(target, id, data, {title, variants, outvar, icon}) {
-    return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id} data={data}/>;
+    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}) {
+function SwitchWrapper(target, id, data, {title, fallback, outvar, icon}) {
-    return <Switch target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
+    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}) {
+function LineWrapper(target, id, data, {title, fallback, outvar, icon}) {
-    return <Line target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
+    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}) {
+function SwitchLineWrapper(target, id, data, {title, fallback, outvar, icon}) {
-    return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
+    return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} key={id} id={id} data={data}/>;
 }
 
 

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"}}
+              ]
             ]
           }
       ],