add vscode theme

kode-team · Jan 20, 2020 · 0cffa4d · 0cffa4d
1 parent 3870d4e
commit 0cffa4d
Show file tree

Hide file tree

Showing 35 changed files with 3,377 additions and 1,736 deletions.
diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css
diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js
diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css
diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js
diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js
diff --git a/index.html b/index.html
@@ -639,6 +639,11 @@ <h3>Mini Style</h3>
         <h3>Mini Vertical Style</h3>
         <div class="colorpicker-style" data-type="mini-vertical"></div>
     </div>        
+
+    <div class="colorpicker-type">
+        <h3>VSCode Style</h3>
+        <div class="colorpicker-style" data-type="vscode"></div>
+    </div>            
 
 
     <!-- <div class="colorpicker-type">
@@ -1015,7 +1020,7 @@ <h1 class="title">Default Html Sample </h1>
         colorpicker : {
             mode : 'edit',
             hideDelay: 0, 
-            type: 'macos',
+            type: 'vscode',
             onHide: function (color) {
                 console.log('hide', color)
             }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.9.53",
+  "version": "1.9.66",
   "description": "simple colorpicker used anywhere",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {

diff --git a/src/colorpicker/BaseBox.js b/src/colorpicker/BaseBox.js
@@ -68,7 +68,7 @@ export default class BaseBox extends UIElement {
         this.refreshColorUI(e);
     }
 
-    onDragMove (e) {      
+    onDragMove (e) {
         if (this.isDown) {
             this.refreshColorUI(e);
         }
@@ -80,7 +80,6 @@ export default class BaseBox extends UIElement {
             this.$store.emit('lastUpdateColor');            
             this.isDown = false 
         }
-
     }
 
 

diff --git a/src/colorpicker/BaseColorPicker.js b/src/colorpicker/BaseColorPicker.js
@@ -273,6 +273,10 @@ export default class BaseColorPicker extends UIElement {
         }
     }
 
+    'keyup.isAbsolute.escape $root' (e) {
+        this.hide();
+    }
+
     'mouseover.isAbsolute $root' (e) {
         clearTimeout(this.timerCloseColorPicker);
         // this.__isMouseDown = true; 

diff --git a/src/colorpicker/index.js b/src/colorpicker/index.js
@@ -4,6 +4,7 @@ import MiniColorPicker from './mini/index'
 import MiniVerticalColorPicker from './mini-vertical/index'
 import RingColorPicker from './ring/index'
 import XDColorPicker from './xd/index'
+import VSCodePicker from './vscode/index'
 
 export default {
     create (opts) {
@@ -16,6 +17,8 @@ export default {
             return new RingColorPicker(opts);            
         case 'mini': 
             return new MiniColorPicker(opts);            
+        case 'vscode': 
+            return new VSCodePicker(opts);
         case 'mini-vertical': 
             return new MiniVerticalColorPicker(opts);
         case 'sketch':
@@ -29,5 +32,6 @@ export default {
     MacOSColorPicker,
     RingColorPicker,
     MiniColorPicker,
+    VSCodePicker,
     MiniVerticalColorPicker 
 }    
diff --git a/src/colorpicker/module/ColorManager.js b/src/colorpicker/module/ColorManager.js
@@ -44,11 +44,7 @@ export default class ColorManager extends BaseModule {
 
         $store.alpha = isUndefined(colorObj.a) ? $store.alpha : colorObj.a; 
         $store.format = colorObj.type != 'hsv' ? (colorObj.type || $store.format) : $store.format;
-
-        if ($store.format == 'hex' && $store.alpha < 1) {
-            $store.format = 'rgb';
-        }
-
+
         if (colorObj.type == 'hsl') {
             $store.hsl = Object.assign($store.hsl, colorObj); 
             $store.rgb = Color.HSLtoRGB($store.hsl);
@@ -80,7 +76,10 @@ export default class ColorManager extends BaseModule {
     '/toString' ($store, type) {
         type = type || $store.format
         var colorObj = $store[type] || $store.rgb
-        return Color.format(Object.assign({}, colorObj, {a: $store.alpha} ), type);
+        return Color.format({
+            ...colorObj,
+            a: $store.alpha
+        }, type);
     }
 
     '/toColor' ($store, type) {

diff --git a/src/colorpicker/ui/ColorInformation.js b/src/colorpicker/ui/ColorInformation.js
@@ -6,7 +6,7 @@ const source = 'chromedevtool-information';
 export default class ColorInformation extends UIElement {
 
     template () {
-        return `
+        return /*html*/`
         <div class="information hex">
             <div ref="$informationChange" class="information-change">
                 <button ref="$formatChangeButton" type="button" class="format-change-button arrow-button"></button>
@@ -68,9 +68,10 @@ export default class ColorInformation extends UIElement {
     initFormat () {
         var current_format = this.format || 'hex';
 
-        this.$el.removeClass('hex');
-        this.$el.removeClass('rgb');
-        this.$el.removeClass('hsl');
+        ['hex', 'rgb', 'hsl'].filter(it => it !== current_format).forEach(formatString => {
+            this.$el.removeClass(formatString);
+        })
+
         this.$el.addClass(current_format);
     }
 
@@ -83,26 +84,29 @@ export default class ColorInformation extends UIElement {
         } else if (current_format == 'rgb') {
             next_format = 'hsl';
         } else if (current_format == 'hsl') {
-            if (this.$store.alpha == 1) {
-                next_format = 'hex';
-            } else {
-                next_format = 'rgb';
-            }
+            next_format = 'hex';
         }
 
-        this.$el.removeClass(current_format);
-        this.$el.addClass(next_format);
         this.format = next_format;
+        this.initFormat();
 
         this.$store.dispatch('/changeFormat', this.format);
-        this.$store.emit('lastUpdateColor')
+        this.$store.emit('lastUpdateColor')        
     }
+
+    goToFormat(to_format) {
+        this.format = to_format;
+        if (to_format === 'rgb' || to_format === 'hsl') {
+            this.initFormat();
+        }
+
+        this.$store.dispatch('/changeFormat', this.format);
+    }      
 
     getFormat () {
         return this.format || 'hex';   
     }
 
-
     checkNumberKey(e) {
         var code = e.which,
             isExcept = false;
@@ -129,7 +133,7 @@ export default class ColorInformation extends UIElement {
             a : this.refs.$rgb_a.float(),
             source
         })
-        this.$store.emit('lastUpdateColor')
+        this.$store.emit('lastUpdateColor')        
     }
 
     changeHslColor () {
@@ -140,8 +144,8 @@ export default class ColorInformation extends UIElement {
             l : this.refs.$hsl_l.int(),
             a : this.refs.$hsl_a.float(),
             source
-        })       
-        this.$store.emit('lastUpdateColor')         
+        })    
+        this.$store.emit('lastUpdateColor')            
     }    
 
     '@changeColor' (sourceType) {
@@ -161,17 +165,11 @@ export default class ColorInformation extends UIElement {
     'input $hsl_s' (e) {  this.changeHslColor(); }
     'input $hsl_l' (e) {  this.changeHslColor(); }
     'input $hsl_a' (e) {  this.changeHslColor(); }      
-
-    'keydown $hexCode' (e) {
-        if(e.which < 65 || e.which > 70) {
-            return this.checkNumberKey(e);
-        }
-    }
 
     'keyup $hexCode' (e) {
         var code = this.refs.$hexCode.val();
 
-        if(code.charAt(0) == '#' && code.length == 7) {
+        if(code.charAt(0) == '#' && (code.length == 7 || code.length === 9)) {
             this.$store.dispatch('/changeColor', code, source)
             this.$store.emit('lastUpdateColor')            
         }
@@ -181,6 +179,18 @@ export default class ColorInformation extends UIElement {
         this.nextFormat();
     }
 
+    'click $el .information-item.hex .input-field .title' (e) {
+        this.goToFormat('hex');
+    }    
+
+    'click $el .information-item.rgb .input-field .title' (e) {
+        this.goToFormat('hsl');
+    }    
+
+    'click $el .information-item.hsl .input-field .title' (e) {
+        this.goToFormat('rgb');
+    }      
+
     setRGBInput() {
         this.refs.$rgb_r.val(this.$store.rgb.r);
         this.refs.$rgb_g.val(this.$store.rgb.g);

diff --git a/src/colorpicker/ui/ColorPalette.js b/src/colorpicker/ui/ColorPalette.js
@@ -106,8 +106,7 @@ export default class ColorPalette extends UIElement {
     mousedown (e) {
         this.isDown = true; 
         this.setMainColor(e);
-    }
-
+    }    
 
     'touchend document' (e) {
         if (this.isDown) {
@@ -126,6 +125,6 @@ export default class ColorPalette extends UIElement {
         e.preventDefault()
         this.isDown = true; 
         this.setMainColor(e);
-    } 
-
+    }
+    
 }
diff --git a/src/colorpicker/ui/CurrentColorSets.js b/src/colorpicker/ui/CurrentColorSets.js
@@ -75,7 +75,7 @@ export default class CurrentColorSets extends UIElement {
 
     'click $colorSetsColorList .color-item'  (e) {
         this.$store.dispatch('/changeColor', e.$delegateTarget.attr('data-color'));
-        this.$store.emit('lastUpdateColor')
+        this.$store.emit('lastUpdateColor')        
     }
 
 }
diff --git a/src/colorpicker/ui/control/Opacity.js b/src/colorpicker/ui/control/Opacity.js
@@ -20,7 +20,7 @@ export default class Opacity extends BaseSlider {
         <div class="opacity">
             <div ref="$container" class="opacity-container">
                 <div ref="$colorbar" class="color-bar"></div>
-                <div ref="$bar" class="drag-bar2"></div>
+                <div ref="$bar" class="drag-bar"></div>
             </div>
         </div>
         `

diff --git a/src/colorpicker/vscode/ColorControl.js b/src/colorpicker/vscode/ColorControl.js
@@ -0,0 +1,40 @@
+import Hue from '../ui/control/VerticalHue';
+import Opacity from '../ui/control/VerticalOpacity'
+import UIElement from '../UIElement';
+
+const source = 'mini-control';
+
+export default class ColorControl extends UIElement {
+
+    components () {
+        return { Hue, Opacity }
+    }
+
+    template () {
+        return /*html*/`
+            <div class="control">
+                <div target="Opacity" ></div>            
+                <div target="Hue" ></div>
+            </div>
+        `
+    }
+
+    refresh () {
+        this.setColorUI();
+    }
+
+    setColorUI() {
+        this.Hue.setColorUI()
+        this.Opacity.setColorUI()
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+}
+
diff --git a/src/colorpicker/vscode/index.js b/src/colorpicker/vscode/index.js
@@ -0,0 +1,83 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+import ColorPalette from '../ui/ColorPalette'
+import Color from '../../util/Color'
+
+export default class VSCodePicker extends BaseColorPicker {
+
+    template () {
+        return /*html*/`
+            <div class='colorpicker-body'>
+                <div class='color-view'>
+                    <div class='color-view-container'  ref="$colorview"></div>
+                </div>
+                <div class='color-tool'>
+                    <div target="palette"></div>
+                    <div target="control"></div>
+                </div>
+            </div>
+        `
+    } 
+
+    components() {
+        return { 
+            palette: ColorPalette,  
+            control: ColorControl
+        }
+    }
+
+    initColorWithoutChangeEvent (color) {
+        console.log(color);
+        this.$store.dispatch('/initColor', color);
+        this.refresh();
+    }
+
+    setBackgroundColor () {
+        var color = this.$store.dispatch('/toColor')
+        var rgb = this.$store.rgb;
+        var bValue = Color.brightness(rgb.r,rgb.g,rgb.b);
+
+        this.refs.$colorview.css({
+            "background-color": color,
+            'color': bValue > 127 ? 'black': 'white'
+        });
+        this.refs.$colorview.html(color);
+    }
+
+    'click $colorview' (e) {
+        this.nextFormat()
+    }
+
+    nextFormat() {
+        var current_format = this.$store.format || 'hex';
+
+        var next_format = 'hex';
+        if (current_format == 'hex') {
+            next_format = 'rgb';
+        } else if (current_format == 'rgb') {
+            next_format = 'hsl';
+        } else if (current_format == 'hsl') {
+            next_format = 'hex';
+        }
+
+        this.$store.dispatch('/changeFormat', next_format);
+        this.$store.emit('lastUpdateColor')
+        this.refresh();
+    }
+
+    refresh () {
+        this.setBackgroundColor()
+    }
+
+    '@changeColor' () {
+        this.refresh()
+    }
+
+    '@initColor' () { 
+        this.refresh() 
+    }
+
+
+
+}
diff --git a/src/scss/colorpicker.scss b/src/scss/colorpicker.scss
@@ -59,6 +59,7 @@
   @import './themes/mini-vertical';   
   @import './themes/ring';   
   @import './themes/xd';   
+  @import './themes/vscode';
 }    
 
 @import './component/colorsets-contextmenu';