mirror of https://github.com/node-red/node-red.git
use custom color picker instead of color input type
This commit is contained in:
Hiroyasu Nishiyama
parent
d06dbbb4bd
commit
260a9723a4
|
|
@ -948,6 +948,120 @@ RED.editor = (function() {
|
|||
searchInput.trigger("focus");
|
||||
}
|
||||
|
||||
function createColorPicker(colorRow, color) {
|
||||
var colorSpec = $("<span/>", {
|
||||
class: "red-ui-subflow-color-spec"
|
||||
}).appendTo(colorRow);
|
||||
var colorButton = $("<label/>").appendTo(colorSpec);
|
||||
var colorIcon = $("<span><i class='fa fa-caret-down'/> </span>").css({
|
||||
width: "30px",
|
||||
height: "20px",
|
||||
"padding-left": "15px",
|
||||
"padding-right": "5px"
|
||||
}).appendTo(colorButton);
|
||||
var colorDisp = $("<label/>").css({
|
||||
width: "40px",
|
||||
height: "20px",
|
||||
margin: "6px",
|
||||
"vertical-align": "middle",
|
||||
"background-color": color
|
||||
}).appendTo(colorButton);
|
||||
var selector = $("<input/>", {
|
||||
id: "red-ui-editor-node-color",
|
||||
type: "text",
|
||||
value: color
|
||||
}).css({
|
||||
width: "150px",
|
||||
border: "none"
|
||||
}).appendTo(colorSpec);
|
||||
|
||||
selector.on("change", function (e) {
|
||||
var color = selector.val();
|
||||
colorDisp.css({
|
||||
"background-color": color
|
||||
});
|
||||
});
|
||||
selector.hover(function (e) {
|
||||
selector.css({
|
||||
"border": "solid 1px #ccc"
|
||||
});
|
||||
}, function() {
|
||||
selector.css({
|
||||
"border": "none"
|
||||
});
|
||||
});
|
||||
|
||||
colorButton.on("click", function (e) {
|
||||
var recommendedColors = [
|
||||
"#3FADB5", "#87A980", "#A6BBCF",
|
||||
"#AAAA66", "#C0C0C0", "#C0DEED",
|
||||
"#C7E9C0", "#D7D7A0", "#D8BFD8",
|
||||
"#DAC4B4", "#DEB887", "#DEBD5C",
|
||||
"#E2D96E", "#E6E0F8", "#E7E7AE",
|
||||
"#E9967A", "#F3B567", "#FDD0A2",
|
||||
"#FDF0C2", "#FFAAAA", "#FFCC66",
|
||||
"#FFF0F0", "#FFFFFF"
|
||||
];
|
||||
var numColors = recommendedColors.length;
|
||||
var width = 58;
|
||||
var height = 28;
|
||||
var picker = $("<div/>", {
|
||||
class: "red-ui-color-picker"
|
||||
}).css({
|
||||
width: (width*4)+"px",
|
||||
height: Math.ceil(numColors/4)*height+"+px"
|
||||
});
|
||||
|
||||
var pickerBackground = $('<div>').css({
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 20
|
||||
}).appendTo("body");
|
||||
var colorPos = colorDisp.offset();
|
||||
picker.css({
|
||||
top: (colorPos.top +32) +"px",
|
||||
left: (colorPos.left -20) +"px"
|
||||
}).appendTo("body");
|
||||
|
||||
function hide() {
|
||||
pickerBackground.remove();
|
||||
picker.remove();
|
||||
RED.keyboard.remove("escape");
|
||||
}
|
||||
|
||||
var count = 0;
|
||||
var row = null;
|
||||
recommendedColors.forEach(function (col) {
|
||||
if ((count % 4) == 0) {
|
||||
row = $("<div/>").appendTo(picker);
|
||||
}
|
||||
var button = $("<button/>", {
|
||||
}).css({
|
||||
width: "50px",
|
||||
height: "20px",
|
||||
margin: "4px",
|
||||
backgroundColor: col,
|
||||
"border-style": "none"
|
||||
}).appendTo(row);
|
||||
button.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
hide();
|
||||
selector.val(col);
|
||||
selector.change();
|
||||
});
|
||||
count++;
|
||||
});
|
||||
|
||||
RED.keyboard.add("*", "escape", hide);
|
||||
pickerBackground.on("mousedown", hide);
|
||||
pickerBackground.show();
|
||||
picker.show();
|
||||
});
|
||||
}
|
||||
|
||||
function buildAppearanceForm(container,node) {
|
||||
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
|
||||
|
||||
|
|
@ -1003,38 +1117,13 @@ RED.editor = (function() {
|
|||
|
||||
if (node.type === "subflow") {
|
||||
// subflow template can select its color
|
||||
var color = node.color ? node.color : "#E9967A";
|
||||
var colorRow = $("<div/>", {
|
||||
class: "form-row"
|
||||
}).appendTo(dialogForm);
|
||||
$("<label/>").text(RED._("editor.color")).appendTo(colorRow);
|
||||
var selector = $("<input/>", {
|
||||
id: "red-ui-editor-node-color",
|
||||
type: "color",
|
||||
value: "#E9967A",
|
||||
list: "red-ui-editor-node-colors"
|
||||
}).css({
|
||||
width: "100px"
|
||||
}).appendTo(colorRow);
|
||||
var colors = $("<datalist id='red-ui-editor-node-colors'>").appendTo(colorRow);
|
||||
var recommendedColors = [
|
||||
"#3FADB5", "#87A980", "#A6BBCF",
|
||||
"#AAAA66", "#C0C0C0", "#C0DEED",
|
||||
"#C7E9C0", "#D7D7A0", "#D8BFD8",
|
||||
"#DAC4B4", "#DEB887", "#DEBD5C",
|
||||
"#E2D96E", "#E6E0F8", "#E7E7AE",
|
||||
"#E9967A", "#F3B567", "#FDD0A2",
|
||||
"#FDF0C2", "#FFAAAA", "#FFCC66",
|
||||
"#FFF0F0", "#FFFFFF"
|
||||
];
|
||||
recommendedColors.forEach(function (col) {
|
||||
var opt = $("<option>").appendTo(colors);
|
||||
opt.val(col);
|
||||
});
|
||||
if (node.color) {
|
||||
selector.val(node.color);
|
||||
}
|
||||
selector.change();
|
||||
}
|
||||
createColorPicker(colorRow, color);
|
||||
}
|
||||
|
||||
$('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
|
||||
|
||||
|
|
|
|||
|
|
@ -579,3 +579,23 @@ button.red-ui-button-small
|
|||
button.red-ui-toggleButton.toggle {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.red-ui-color-picker {
|
||||
position: absolute;
|
||||
border: 1px solid $primary-border-color;
|
||||
box-shadow: 0 1px 6px -3px black;
|
||||
background: $secondary-background;
|
||||
z-Index: 21;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.red-ui-subflow-color-spec {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
border: solid 1px $primary-border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue