diff --git a/client/src/components/Form/Elements/FormColor.vue b/client/src/components/Form/Elements/FormColor.vue new file mode 100644 index 00000000000..cc0fd23cdce --- /dev/null +++ b/client/src/components/Form/Elements/FormColor.vue @@ -0,0 +1,40 @@ + + + + diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js index 3b6d7cecb24..5a5ce8eb30e 100644 --- a/client/src/components/Form/Elements/parameters.js +++ b/client/src/components/Form/Elements/parameters.js @@ -10,7 +10,6 @@ import SelectLibrary from "mvc/ui/ui-select-library"; import SelectFtp from "mvc/ui/ui-select-ftp"; import RulesEdit from "mvc/ui/ui-rules-edit"; import FileSource from "mvc/ui/ui-file-source"; -import ColorPicker from "mvc/ui/ui-color-picker"; import DataPicker from "mvc/ui/ui-data-picker"; // create form view @@ -27,7 +26,6 @@ export default Backbone.View.extend({ integer: "_fieldSlider", float: "_fieldSlider", drill_down: "_fieldDrilldown", - color: "_fieldColor", group_tag: "_fieldSelect", library_data: "_fieldLibrary", ftpfile: "_fieldFtp", @@ -185,14 +183,6 @@ export default Backbone.View.extend({ }); }, - /** Color picker field */ - _fieldColor: function (input_def) { - return new ColorPicker({ - id: `field-${input_def.id}`, - onchange: input_def.onchange, - }); - }, - /** Data dialog picker field */ _fieldDialog: function (input_def) { return new DataPicker({ diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue index c2e0cf15f17..4f88562c2a0 100644 --- a/client/src/components/Form/FormElement.vue +++ b/client/src/components/Form/FormElement.vue @@ -28,6 +28,7 @@ :id="id" :info="attrs['info']" /> + - - diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/pointer.css b/client/src/components/Libraries/LibraryFolder/TopToolbar/pointer.css deleted file mode 100644 index e3589b1ff49..00000000000 --- a/client/src/components/Libraries/LibraryFolder/TopToolbar/pointer.css +++ /dev/null @@ -1,7 +0,0 @@ -.cursor-pointer { - cursor: pointer; - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - user-select: none; /* Likely future */ -} \ No newline at end of file diff --git a/client/src/components/Libraries/LibraryFolder/library-folder-table.css b/client/src/components/Libraries/LibraryFolder/library-folder-table.css index 6c57698b8c2..ec0b864166e 100644 --- a/client/src/components/Libraries/LibraryFolder/library-folder-table.css +++ b/client/src/components/Libraries/LibraryFolder/library-folder-table.css @@ -1,5 +1,3 @@ -@import "./TopToolbar/pointer.css"; - th:focus { outline: none !important; } diff --git a/client/src/mvc/ui/ui-color-picker.js b/client/src/mvc/ui/ui-color-picker.js deleted file mode 100644 index e862d974f26..00000000000 --- a/client/src/mvc/ui/ui-color-picker.js +++ /dev/null @@ -1,142 +0,0 @@ -/** Renders the color picker used e.g. in the tool form **/ -import $ from "jquery"; -import Backbone from "backbone"; -import Utils from "utils/utils"; - -function hex(x) { - return `0${parseInt(x).toString(16)}`.slice(-2); -} - -export default Backbone.View.extend({ - colors: { - standard: ["c00000", "ff0000", "ffc000", "ffff00", "92d050", "00b050", "00b0f0", "0070c0", "002060", "7030a0"], - base: ["ffffff", "000000", "eeece1", "1f497d", "4f81bd", "c0504d", "9bbb59", "8064a2", "4bacc6", "f79646"], - theme: [ - ["f2f2f2", "7f7f7f", "ddd9c3", "c6d9f0", "dbe5f1", "f2dcdb", "ebf1dd", "e5e0ec", "dbeef3", "fdeada"], - ["d8d8d8", "595959", "c4bd97", "8db3e2", "b8cce4", "e5b9b7", "d7e3bc", "ccc1d9", "b7dde8", "fbd5b5"], - ["bfbfbf", "3f3f3f", "938953", "548dd4", "95b3d7", "d99694", "c3d69b", "b2a2c7", "92cddc", "fac08f"], - ["a5a5a5", "262626", "494429", "17365d", "366092", "953734", "76923c", "5f497a", "31859b", "e36c09"], - ["7f7f7e", "0c0c0c", "1d1b10", "0f243e", "244061", "632423", "4f6128", "3f3151", "205867", "974806"], - ], - }, - - initialize: function (options) { - this.options = Utils.merge(options, {}); - this.setElement(this._template()); - this.$panel = this.$(".ui-color-picker-panel"); - this.$view = this.$(".ui-color-picker-view"); - this.$value = this.$(".ui-color-picker-value"); - this.$header = this.$(".ui-color-picker-header"); - this._build(); - this.visible = false; - this.value(this.options.value); - this.$boxes = this.$(".ui-color-picker-box"); - var self = this; - this.$boxes.on("click", function () { - self.value($(this).css("background-color")); - self.$header.trigger("click"); - }); - this.$header.on("click", () => { - self.visible = !self.visible; - if (self.visible) { - self.$view.fadeIn("fast"); - } else { - self.$view.fadeOut("fast"); - } - }); - }, - - /** Get/set value */ - value: function (new_val) { - if (new_val !== undefined && new_val !== null) { - this.$value.css("background-color", new_val); - this.$(".ui-color-picker-box").empty(); - this.$(this._getValue()).html(this._templateCheck()); - this.options.onchange && this.options.onchange(new_val); - } - return this._getValue(); - }, - - /** Get value from dom */ - _getValue: function () { - var rgb = this.$value.css("background-color"); - rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); - if (rgb) { - return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`; - } else { - return null; - } - }, - - /** Build color panel */ - _build: function () { - this._content({ colors: this.colors.base }); - for (var i in this.colors.theme) { - var line_def = {}; - if (i == 0) { - line_def["bottom"] = true; - } else if (i != this.colors.theme.length - 1) { - line_def["top"] = true; - line_def["bottom"] = true; - } else { - line_def["top"] = true; - } - line_def["colors"] = this.colors.theme[i]; - this._content(line_def); - } - this._content({ colors: this.colors.standard }); - }, - - /** Create content */ - _content: function (options) { - var colors = options.colors; - var $content = $(this._templateContent()); - var $line = $content.find(".line"); - this.$panel.append($content); - for (var i in colors) { - var $box = $(this._templateBox(colors[i])); - if (options.top) { - $box.css("border-top", "none"); - $box.css("border-top-left-radius", "0px"); - $box.css("border-top-right-radius", "0px"); - } - if (options.bottom) { - $box.css("border-bottom", "none"); - $box.css("border-bottom-left-radius", "0px"); - $box.css("border-bottom-right-radius", "0px"); - } - $line.append($box); - } - return $content; - }, - - /** Check icon */ - _templateCheck: function () { - return '
'; - }, - - /** Content template */ - _templateContent: function () { - return '
'; - }, - - /** Box template */ - _templateBox: function (color) { - return `
`; - }, - - /** Main template */ - _template: function () { - return ` -
-
-
-
Select a color
-
-
-
-
-
- `; - }, -}); diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss index bce497b38ca..c25061136bd 100644 --- a/client/src/style/scss/ui.scss +++ b/client/src/style/scss/ui.scss @@ -353,65 +353,6 @@ $ui-margin-horizontal-large: $margin-v * 2; } } -.ui-color-picker { - .ui-color-picker-header { - cursor: pointer; - } - .ui-color-picker-value { - float: left; - border-radius: 3px; - border: solid 1px #000000; - width: 12px; - height: 12px; - margin-right: 5px; - } - .ui-color-picker-label { - line-height: 1.2em; - margin-bottom: 5px; - } - .ui-color-picker-view { - height: 100%; - overflow: auto; - display: none; - float: left; - margin-bottom: 5px; - .ui-color-picker-panel { - width: 210px; - .ui-color-picker-content { - margin-bottom: 15px; - .badge { - padding-bottom: 2px; - } - .line { - .ui-color-picker-box { - cursor: pointer; - float: left; - margin-right: 5px; - border: solid 1px #c0c0c0; - width: 15px; - height: 15px; - border-radius: 2px; - .ui-color-picker-check { - color: black; - font-size: 1.2em; - position: relative; - left: 1px; - } - } - } - } - .ui-color-picker-content:first-child { - padding-top: 5px; - padding-bottom: 10px; - } - .ui-color-picker-content:last-child { - padding-top: 85px; - padding-bottom: 5px; - } - } - } -} - .ui-select { position: relative; .icon-dropdown { @@ -487,3 +428,11 @@ $ui-margin-horizontal-large: $margin-v * 2; border: 2px solid $state-success-bg; background: lighten($state-success-bg, 10%); } +// util class to make pointer cursor +.cursor-pointer { + cursor: pointer; + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + user-select: none; /* Likely future */ +}