Working on editor

andrewbrg · andrewbrg · commit 9fa6eef422ef · 2017-10-20T17:07:22.000+02:00
diff --git a/src/css/main.css b/src/css/main.css
@@ -341,4 +341,14 @@ input.cmn-tgl-rnd-flt:checked + label:after {
 
 .modal-body label span {
     opacity: 0.8;
-}
+}
+
+input[type="text"], select {
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid;
+    width: 100%;
+    font-family: inherit;
+    font-size: 1.2em;
+    color: #ccc;
+}
diff --git a/src/html/app.html b/src/html/app.html
@@ -12,7 +12,7 @@
     - https://ace.c9.io/api/editor.html
     - https://github.com/jonmiles/bootstrap-treeview/
     - http://fizzed.com/oss/font-mfizz
-    - http://seiyria.com/bootstrap-slider/
+    - https://github.com/mouse0270/bootstrap-notify
 ------------------------------------------------------------------------------------------------------------------->
 
 <!DOCTYPE html>
diff --git a/src/html/modals/editor/ide.settings.html b/src/html/modals/editor/ide.settings.html
@@ -106,8 +106,8 @@
                         <span>#No. of columns per tab</span>
                     </label>
                     <div class="range-slider">
-                        <input data-toggle="ide-setting" data-option="tabSize" class="range-slider__range" type="range" min="0" max="50"/>
-                        <span class="range-slider__value"></span>
+                        <input data-toggle="ide-setting" data-option="tabSize" class="range-slider-range" type="range" min="0" max="50"/>
+                        <span class="range-slider-value"></span>
                     </div>
                 </div>
             </div>
@@ -131,8 +131,9 @@
                         <strong>Word wrap limit</strong><br/>
                         <span>#No. of characters per line before wrapping</span>
                     </label>
-                    <div>
-                        <input data-toggle="ide-setting" data-option="wrap" type="number" min="0" max="900" value="0"/>
+                    <div class="range-slider">
+                        <input data-toggle="ide-setting" data-option="wrap" class="range-slider-range" type="range" min="0" max="900"/>
+                        <span class="range-slider-value"></span>
                     </div>
                 </div>
             </div>
diff --git a/vendor/range-slider/range-slider.css b/vendor/range-slider/range-slider.css
@@ -2,18 +2,18 @@
     width: 100%;
 }
 
-.range-slider__range {
+.range-slider-range {
     -webkit-appearance: none;
     width: calc(100% - (73px));
     height: 10px;
     border-radius: 5px;
-    background: #d7dcdf;
+    background: #343a40;
     outline: none;
     padding: 0;
     margin: 0;
 }
 
-.range-slider__range::-webkit-slider-thumb {
+.range-slider-range::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
@@ -25,15 +25,15 @@
     transition: background .15s ease-in-out;
 }
 
-.range-slider__range::-webkit-slider-thumb:hover {
+.range-slider-range::-webkit-slider-thumb:hover {
     background: rgba(0, 123, 255, 1);
 }
 
-.range-slider__range:active::-webkit-slider-thumb {
+.range-slider-range:active::-webkit-slider-thumb {
     background: rgba(0, 123, 255, 1);
 }
 
-.range-slider__range::-moz-range-thumb {
+.range-slider-range::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border: 0;
@@ -44,28 +44,29 @@
     transition: background .15s ease-in-out;
 }
 
-.range-slider__range::-moz-range-thumb:hover {
+.range-slider-range::-moz-range-thumb:hover {
     background: rgba(0, 123, 255, 1);
 }
 
-.range-slider__range:active::-moz-range-thumb {
+.range-slider-range:active::-moz-range-thumb {
     background: rgba(0, 123, 255, 1);
 }
 
-.range-slider__value {
+.range-slider-value {
     display: inline-block;
     position: relative;
     width: 60px;
-    color: #222;
+    color: #121212;
     line-height: 20px;
     text-align: center;
     border-radius: 3px;
     background: #cccccc;
     margin-left: 8px;
 }
 
-.range-slider__value:after {
+.range-slider-value:after {
     position: absolute;
+    top: 3px;
     left: -7px;
     width: 0;
     height: 0;
diff --git a/vendor/range-slider/range-slider.js b/vendor/range-slider/range-slider.js
@@ -1,6 +1,6 @@
 (function () {
-    $(document).on('input change', '.range-slider__range', function () {
+    $(document).on('change', '.range-slider-range', function () {
         var $this = $(this);
-        $this.closest('.range-slider').find('.range-slider__value').html($this.val());
+        $this.closest('.range-slider').find('.range-slider-value').html($this.val());
     });
 })();
