frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

use custom color picker instead of color input type

Browse Source
This commit is contained in:
Hiroyasu Nishiyama
2019-07-21 22:55:25 +09:00
parent d06dbbb4bd
commit 260a9723a4
2 changed files with 137 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@@ -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);

20
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@@ -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;
}