Use simple color picker instead of ux

5 files changed, 46 insertions, 17 deletions

diff --git a/web/app.css b/web/app.css
index 73398cd8..cb9d2bc2 100644
--- a/web/app.css
+++ b/web/app.css
@@ -12,11 +12,6 @@
     background-color: #5fa2dd !important;
 }
 
-/* workaround for https://www.sencha.com/forum/showthread.php?330718-6-2-ColorField-color-preview-doesn-t-match-color */ 
-.custom-color-picker-swatch {
-    z-index: 10 !important;
-}
-
 body.x-border-layout-ct, div.x-border-layout-ct {
     background-color: #bbbbbb !important;
 }
diff --git a/web/app/view/ColorPicker.js b/web/app/view/ColorPicker.js
new file mode 100644
index 00000000..5de03aa3
--- /dev/null
+++ b/web/app/view/ColorPicker.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2017 Anton Tananaev (anton@traccar.org)
+ * Copyright 2017 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+Ext.define('Traccar.view.ColorPicker', {
+    extend: 'Ext.form.field.Picker',
+    xtype: 'customcolorpicker',
+
+    config: {
+        value: '#008000'
+    },
+
+    editable: false,
+
+    createPicker: function () {
+        return Ext.create('Ext.picker.Color', {
+            floating: true,
+            picker: this,
+            select: function (selColor) {
+                this.picker.setValue('#' + selColor);
+                this.picker.collapse();
+            }
+        });
+    },
+
+    setValue: function (color) {
+        this.callParent([color]);
+        this.setFieldStyle('background-color:' + color);
+    }
+});
diff --git a/web/app/view/dialog/Attribute.js b/web/app/view/dialog/Attribute.js
index 7f0de788..6614c87f 100644
--- a/web/app/view/dialog/Attribute.js
+++ b/web/app/view/dialog/Attribute.js
@@ -19,7 +19,8 @@ Ext.define('Traccar.view.dialog.Attribute', {
     extend: 'Traccar.view.dialog.Base',
 
     requires: [
-        'Traccar.view.dialog.AttributeController'
+        'Traccar.view.dialog.AttributeController',
+        'Traccar.view.ColorPicker'
     ],
 
     controller: 'attribute',
diff --git a/web/app/view/dialog/AttributeController.js b/web/app/view/dialog/AttributeController.js
index daa33be2..7ddab11c 100644
--- a/web/app/view/dialog/AttributeController.js
+++ b/web/app/view/dialog/AttributeController.js
@@ -72,14 +72,7 @@ Ext.define('Traccar.view.dialog.AttributeController', {
                 config.inputValue = true;
                 config.uncheckedValue = false;
             } else if (type === 'color') {
-                config.xtype = 'colorfield';
-                config.format = '#hex6';
-                config.beforeBodyEl = [
-                    '<div class="' + Ext.baseCSSPrefix + 'colorpicker-field-swatch custom-color-picker-swatch">' +
-                    '<div id="{id}-swatchEl" data-ref="swatchEl" class="' + Ext.baseCSSPrefix +
-                            'colorpicker-field-swatch-inner"></div>' +
-                    '</div>'
-                ];
+                config.xtype = 'customcolorpicker';
             } else {
                 config.xtype = 'textfield';
             }
diff --git a/web/load.js b/web/load.js
index b6cec036..fc676b76 100644
--- a/web/load.js
+++ b/web/load.js
@@ -124,11 +124,9 @@
     if (debugMode) {
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js');
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/charts-debug.js');
-        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/ux/classic/ux-debug.js');
     } else {
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all.js');
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/charts.js');
-        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/ux/classic/ux.js');
     }
     addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/locale/locale-' + locale.languages[locale.language].code + '.js');
 
@@ -136,7 +134,6 @@
     addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/theme-triton/theme-triton.js');
 
     addStyleFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/triton/resources/charts-all.css');
-    addStyleFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/ux/classic/triton/resources/ux-all.css');
 
     addStyleFile('//cdnjs.cloudflare.com/ajax/libs/font-awesome/' + fontAwesomeVersion + '/css/font-awesome.min.css');