Dev: Settings select

src/DevTools/DevTools.es6

@@ -122,32 +122,33 @@ export default class DevTools extends util.Emitter
         var cfg = this.config = config.create('eruda-dev-tools');
 
         cfg.set(util.defaults(cfg.get(), {
-            transparent: false,
-            halfScreen: false,
+            transparency: '100%',
+            displaySize: '100%',
             activeEruda: false
         }));
 
-        if (cfg.get('transparent')) this._setTransparency(true);
-        if (cfg.get('halfScreen')) this._setHalfScreen(true);
+        this._setTransparency(cfg.get('transparency'));
+        this._setDisplaySize(cfg.get('displaySize'));
 
         cfg.on('change', (key, val) =>
         {
             switch (key)
             {
-                case 'transparent': return this._setTransparency(val);
-                case 'halfScreen': return this._setHalfScreen(val);
+                case 'transparency': return this._setTransparency(val);
+                case 'displaySize': return this._setDisplaySize(val);
                 case 'activeEruda': return activeEruda(val);
             }
         });
     }
-    _setTransparency(flag)
+    _setTransparency(opacity)
     {
-        this._opacity = flag ? 0.7 : 1;
-        if (this._isShow) this._$el.css({opacity: this._opacity});
+        opacity = +opacity.replace('%', '') / 100;
+        this._opacity = opacity;
+        if (this._isShow) this._$el.css({opacity});
     }
-    _setHalfScreen(flag)
+    _setDisplaySize(height)
     {
-        this._$el.css({height: flag ? '50%': '100%'});
+        this._$el.css({height});
     }
     _appendTpl()
     {

src/Settings/Settings.es6

@@ -11,6 +11,7 @@ export default class Settings extends Tool
 
         this.name = 'settings';
         this._switchTpl = require('./switch.hbs');
+        this._selectTpl = require('./select.hbs');
         this._settings = [];
     }
     init($el)
@@ -21,14 +22,22 @@ export default class Settings extends Tool
     }
     switch(config, key, desc)
     {
-        this._settings.push({
-            config: config,
-            key: key
-        });
+        this._settings.push({config, key});
 
         this._$el.append(this._switchTpl({
-            desc: desc,
-            key: key,
+            desc, key,
+            idx: this._settings.length - 1,
+            val: config.get(key)
+        }));
+
+        return this;
+    }
+    select(config, key, desc, selections)
+    {
+        this._settings.push({config, key});
+
+        this._$el.append(this._selectTpl({
+            desc, key, selections,
             idx: this._settings.length - 1,
             val: config.get(key)
         }));
@@ -58,6 +67,21 @@ export default class Settings extends Tool
                 val = $input.get(0).checked;
 
             var setting = self._settings[idx];
+            setting.config.set(setting.key, val);
+        }).on('click', '.eruda-select .eruda-head', function ()
+        {
+             util.$(this).parent().find('ul').toggleClass('eruda-open');
+        }).on('click', '.eruda-select li', function ()
+        {
+            let $this = util.$(this),
+                $ul = $this.parent(),
+                val = $this.text(),
+                idx = $ul.data('idx'),
+                setting = self._settings[idx];
+
+            $ul.rmClass('eruda-open');
+            $ul.parent().find('.eruda-head span').text(val);
+
             setting.config.set(setting.key, val);
         });
     }

src/Settings/Settings.scss

@@ -12,11 +12,38 @@
             color: $gray-dark;
             font-size: 12px;
         }
-        .switch {
-            padding: 10px;
+        .select .head, .switch {
+            padding: $padding;
             background: #fff;
-            font-size: 14px;
+            font-size: $font-size;
             border-bottom: 1px solid $gray-light;
+        }
+        .select .head {
+            transition: background $anim-duration, color $anim-duration;
+            span {
+                float: right;
+            }
+            &:active {
+                background: $blue;
+                color: #fff;
+            }
+        }
+        .select ul {
+            display: none;
+            &.open {
+                display: block;
+            }
+            li {
+                padding: $padding;
+                background: $gray-light;
+                transition: background $anim-duration, color $anim-duration;
+                &:active {
+                    background: $blue;
+                    color: #fff;
+                }
+            }
+        }
+        .switch {
             .checkbox {
                 float: right;
                 position: relative;

src/Settings/select.hbs

@@ -0,0 +1,11 @@
+<div class="eruda-select">
+    <div class="eruda-head" ontouchstart>
+        {{desc}}
+        <span class="eruda-val">{{val}}</span>
+    </div>
+    <ul data-idx="{{idx}}">
+       {{#each selections}}
+           <li>{{.}}</li>
+       {{/each}}
+    </ul>
+</div>

src/index.es6

@@ -90,8 +90,8 @@ module.exports = {
                 .switch(this._entryBtn.config, 'rememberPos', 'Remember Entry Button Position')
                 .separator()
                 .switch(devTools.config, 'activeEruda', 'Always Activated')
-                .switch(devTools.config, 'transparent', 'Transparent')
-                .switch(devTools.config, 'halfScreen', 'Half Screen Size')
+                .select(devTools.config, 'transparency', 'Transparency', ['100%', '95%', '90%', '85%', '80%', '75%', '70%'])
+                .select(devTools.config, 'displaySize', 'Display Size', ['100%', '90%', '80%', '70%', '60%', '50%'])
                 .separator();
     },
     _initTools()