diff options
| -rw-r--r-- | web/app.css | 5 | ||||
| -rw-r--r-- | web/app/view/ColorPicker.js | 43 | ||||
| -rw-r--r-- | web/app/view/dialog/Attribute.js | 3 | ||||
| -rw-r--r-- | web/app/view/dialog/AttributeController.js | 9 | ||||
| -rw-r--r-- | web/load.js | 3 |
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'); |