Merge pull request #12867 from OlegZharkov/input-color

Vuefy color input form element

client/src/components/Form/Elements/FormColor.vue

@@ -0,0 +1,40 @@
+<template>
+    <b-row>
+        <b-col class="form-color-input">
+            <b-form-input class="cursor-pointer" :id="id" v-model="currentValue" type="color" size="sm" />
+        </b-col>
+        <b-col class="pl-0">
+            <label class="pt-1 cursor-pointer" :for="id">Select a color</label>
+        </b-col>
+    </b-row>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: String,
+            default: "",
+        },
+        id: {
+            type: String,
+            required: true,
+        },
+    },
+    computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
+        },
+    },
+};
+</script>
+<style scoped>
+.form-color-input {
+    max-width: 3.6rem;
+}
+</style>

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({

client/src/components/Form/FormElement.vue

@@ -28,6 +28,7 @@
                 :id="id"
                 :info="attrs['info']"
             />
+            <FormColor v-else-if="type == 'color'" v-model="currentValue" :id="id" />
             <FormParameter
                 v-else-if="backbonejs"
                 v-model="currentValue"
@@ -51,12 +52,14 @@ import FormBoolean from "./Elements/FormBoolean";
 import FormHidden from "./Elements/FormHidden";
 import FormInput from "./Elements/FormInput";
 import FormParameter from "./Elements/FormParameter";
+import FormColor from "./Elements/FormColor";
 
 export default {
     components: {
         FormBoolean,
         FormHidden,
         FormInput,
+        FormColor,
         FormParameter,
     },
     props: {

client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue

@@ -383,7 +383,3 @@ export default {
     },
 };
 </script>
-
-<style scoped>
-@import "./pointer.css";
-</style>

client/src/components/Libraries/LibraryFolder/library-folder-table.css

@@ -1,5 +1,3 @@
-@import "./TopToolbar/pointer.css";
-
 th:focus {
     outline: none !important;
 }

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 */
+}