fixed change color format in chromedevtool style

kode-team · Jun 4, 2020 · fb7103e · fb7103e
1 parent f366598
commit fb7103e
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 39 deletions.
diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css
@@ -256,7 +256,12 @@
           text-align: center;
           font-size: 12px;
           color: #a9a9a9;
-          padding-top: 2px; }
+          padding-top: 2px;
+          cursor: pointer;
+          -webkit-user-select: none;
+             -moz-user-select: none;
+              -ms-user-select: none;
+                  user-select: none; }
         .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input {
           text-align: center;
           width: 100%;

diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js
@@ -7935,7 +7935,7 @@ var ColorInformation = function (_UIElement) {
     }, {
         key: 'nextFormat',
         value: function nextFormat() {
-            var current_format = this.format || 'hex';
+            var current_format = this.$store.format || 'hex';
 
             var next_format = 'hex';
             if (current_format == 'hex') {
@@ -7947,20 +7947,17 @@ var ColorInformation = function (_UIElement) {
             }
 
             this.format = next_format;
-            this.initFormat();
-
-            this.$store.dispatch('/changeFormat', this.format);
+            this.$store.dispatch('/changeFormat', next_format);
             this.$store.emit('lastUpdateColor');
+            this.initFormat();
         }
     }, {
         key: 'goToFormat',
         value: function goToFormat(to_format) {
             this.format = to_format;
-            if (to_format === 'rgb' || to_format === 'hsl') {
-                this.initFormat();
-            }
-
             this.$store.dispatch('/changeFormat', this.format);
+            this.$store.emit('lastUpdateColor');
+            this.initFormat();
         }
     }, {
         key: 'getFormat',
@@ -8080,7 +8077,7 @@ var ColorInformation = function (_UIElement) {
     }, {
         key: 'click $el .information-item.hex .input-field .title',
         value: function click$elInformationItemHexInputFieldTitle(e) {
-            this.goToFormat('hex');
+            this.goToFormat('rgb');
         }
     }, {
         key: 'click $el .information-item.rgb .input-field .title',
@@ -8090,7 +8087,7 @@ var ColorInformation = function (_UIElement) {
     }, {
         key: 'click $el .information-item.hsl .input-field .title',
         value: function click$elInformationItemHslInputFieldTitle(e) {
-            this.goToFormat('rgb');
+            this.goToFormat('hex');
         }
     }, {
         key: 'setRGBInput',

diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css
@@ -256,7 +256,12 @@
           text-align: center;
           font-size: 12px;
           color: #a9a9a9;
-          padding-top: 2px; }
+          padding-top: 2px;
+          cursor: pointer;
+          -webkit-user-select: none;
+             -moz-user-select: none;
+              -ms-user-select: none;
+                  user-select: none; }
         .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input {
           text-align: center;
           width: 100%;

diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js
@@ -8068,7 +8068,7 @@ var ColorInformation = function (_UIElement) {
     }, {
         key: 'nextFormat',
         value: function nextFormat() {
-            var current_format = this.format || 'hex';
+            var current_format = this.$store.format || 'hex';
 
             var next_format = 'hex';
             if (current_format == 'hex') {
@@ -8080,20 +8080,17 @@ var ColorInformation = function (_UIElement) {
             }
 
             this.format = next_format;
-            this.initFormat();
-
-            this.$store.dispatch('/changeFormat', this.format);
+            this.$store.dispatch('/changeFormat', next_format);
             this.$store.emit('lastUpdateColor');
+            this.initFormat();
         }
     }, {
         key: 'goToFormat',
         value: function goToFormat(to_format) {
             this.format = to_format;
-            if (to_format === 'rgb' || to_format === 'hsl') {
-                this.initFormat();
-            }
-
             this.$store.dispatch('/changeFormat', this.format);
+            this.$store.emit('lastUpdateColor');
+            this.initFormat();
         }
     }, {
         key: 'getFormat',
@@ -8213,7 +8210,7 @@ var ColorInformation = function (_UIElement) {
     }, {
         key: 'click $el .information-item.hex .input-field .title',
         value: function click$elInformationItemHexInputFieldTitle(e) {
-            this.goToFormat('hex');
+            this.goToFormat('rgb');
         }
     }, {
         key: 'click $el .information-item.rgb .input-field .title',
@@ -8223,7 +8220,7 @@ var ColorInformation = function (_UIElement) {
     }, {
         key: 'click $el .information-item.hsl .input-field .title',
         value: function click$elInformationItemHslInputFieldTitle(e) {
-            this.goToFormat('rgb');
+            this.goToFormat('hex');
         }
     }, {
         key: 'setRGBInput',

diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js
diff --git a/index.html b/index.html
@@ -1020,7 +1020,7 @@ <h1 class="title">Default Html Sample </h1>
         colorpicker : {
             mode : 'edit',
             hideDelay: 0, 
-            type: 'vscode',
+            type: 'chromedevtool',
             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.69",
+  "version": "1.9.70",
   "description": "simple colorpicker used anywhere",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {

diff --git a/src/colorpicker/ui/ColorInformation.js b/src/colorpicker/ui/ColorInformation.js
@@ -74,9 +74,10 @@ export default class ColorInformation extends UIElement {
 
         this.$el.addClass(current_format);
     }
-
+
+
     nextFormat() {
-        var current_format = this.format || 'hex';
+        var current_format = this.$store.format || 'hex';
 
         var next_format = 'hex';
         if (current_format == 'hex') {
@@ -88,19 +89,16 @@ export default class ColorInformation extends UIElement {
         }
 
         this.format = next_format;
+        this.$store.dispatch('/changeFormat', next_format);
+        this.$store.emit('lastUpdateColor')
         this.initFormat();
-
-        this.$store.dispatch('/changeFormat', this.format);
-        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);
+        this.$store.emit('lastUpdateColor')                
+        this.initFormat();        
     }      
 
     getFormat () {
@@ -180,15 +178,15 @@ export default class ColorInformation extends UIElement {
     }
 
     'click $el .information-item.hex .input-field .title' (e) {
-        this.goToFormat('hex');
+        this.goToFormat('rgb');
     }    
 
     'click $el .information-item.rgb .input-field .title' (e) {
         this.goToFormat('hsl');
     }    
 
     'click $el .information-item.hsl .input-field .title' (e) {
-        this.goToFormat('rgb');
+        this.goToFormat('hex');
     }      
 
     setRGBInput() {

diff --git a/src/scss/component/information.scss b/src/scss/component/information.scss
@@ -50,12 +50,14 @@
         padding: 3px;
         box-sizing: border-box;
         position: relative;
-
+ 
         > .title {
           text-align:center;
           font-size:12px;
           color:#a9a9a9;
           padding-top:2px;
+          cursor: pointer;
+          user-select: none;
         }
 
         input {

diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -2,4 +2,4 @@
 
 @import './colorview';
 @import './colorpicker';
-
+