opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12867 from OlegZharkov/input-color

Browse Source 
Vuefy color input form element
This commit is contained in:
Aysam Guerler
2021-11-13 15:27:07 -05:00
committed by GitHub
parent ca3c38aad7 ce1be4e351
commit 29609b532b
8 changed files with 51 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Form/Elements/FormColor.vue
+40
View File
@@ -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
View File
@@ -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
+3
View File
@@ -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
-4
View File
@@ -383,7 +383,3 @@ export default {
},
};
</script>
<style scoped>
@import "./pointer.css";
</style>
client/src/components/Libraries/LibraryFolder/TopToolbar/pointer.css
-7
View File
@@ -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 */
}
client/src/components/Libraries/LibraryFolder/library-folder-table.css
-2
View File
@@ -1,5 +1,3 @@
@import "./TopToolbar/pointer.css";
th:focus {
outline: none !important;
}
client/src/mvc/ui/ui-color-picker.js
-142
View File
@@ -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 '<div class="ui-color-picker-check fa fa-check"/>';
},
/** Content template */
_templateContent: function () {
return '<div class="ui-color-picker-content"><div class="line"/></div>';
},
/** Box template */
_templateBox: function (color) {
return `<div id="${color}" class="ui-color-picker-box" style="background-color: #${color};"/>`;
},
/** Main template */
_template: function () {
return `
<div class="ui-color-picker">
<div class="ui-color-picker-header">
<div class="ui-color-picker-value"/>
<div class="ui-color-picker-label">Select a color</div>
</div>
<div class="ui-color-picker-view ui-input">
<div class="ui-color-picker-panel"/>
</div>
</div>
`;
},
});
client/src/style/scss/ui.scss
+8 -59
View File
@@ -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 */
}