You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by ma...@apache.org on 2015/02/22 17:19:18 UTC
[22/28] incubator-nifi git commit: NIFI-325: - Allowing the
processor/label color to be entered by hand. - Allowing the color of multiple
processors or labels to be configured at the same time.
NIFI-325:
- Allowing the processor/label color to be entered by hand.
- Allowing the color of multiple processors or labels to be configured at the same time.
Project: http://git-wip-us.apache.org/repos/asf/incubator-nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-nifi/commit/b8ade5b1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-nifi/tree/b8ade5b1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-nifi/diff/b8ade5b1
Branch: refs/heads/nifi-site-to-site-client
Commit: b8ade5b129d97249e2677ae270900d97bb813400
Parents: 4ec9548
Author: Matt Gilman <ma...@gmail.com>
Authored: Fri Feb 13 10:41:05 2015 -0500
Committer: Matt Gilman <ma...@gmail.com>
Committed: Fri Feb 13 10:41:05 2015 -0500
----------------------------------------------------------------------
.../partials/canvas/fill-color-dialog.jsp | 6 ++-
.../nifi-web-ui/src/main/webapp/css/dialog.css | 6 ++-
.../src/main/webapp/js/nf/canvas/nf-actions.js | 37 +++++++++----
.../webapp/js/nf/canvas/nf-canvas-header.js | 56 +++++++++++++++-----
.../webapp/js/nf/canvas/nf-canvas-toolbar.js | 15 ++++--
5 files changed, 92 insertions(+), 28 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/b8ade5b1/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
index af8fad7..8a7cb4e 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp
@@ -20,9 +20,13 @@
<div class="setting">
<div class="setting-name">Color</div>
<div class="setting-field">
+ <input type="text" id="fill-color" value="#FFFFFF"/>
+ </div>
+ <div class="setting-name" style="margin-top: 10px;">Value</div>
+ <div class="setting-field">
<input type="text" id="fill-color-value" value="#FFFFFF"/>
</div>
- <div class="setting-name" style="margin-top: 5px;">Preview</div>
+ <div class="setting-name" style="margin-top: 10px;">Preview</div>
<div class="setting-field">
<div id="fill-color-processor-preview">
<div id="fill-color-processor-preview-name">Processor</div>
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/b8ade5b1/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
index 56e6580..1b658be 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
@@ -88,10 +88,14 @@
z-index: 1301;
display: none;
width: 195px;
- height: 345px;
+ height: 400px;
border: 1px solid #eee;
}
+#fill-color-value {
+ width: 165px;
+}
+
#fill-color-processor-preview {
width: 173px;
height: 56px;
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/b8ade5b1/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
index 02e0c3a..6624d52 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
@@ -843,20 +843,39 @@ nf.Actions = (function () {
* @param {type} selection The selection
*/
fillColor: function (selection) {
- if (selection.size() === 1 && (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isLabel(selection))) {
- var selectionData = selection.datum();
- var color = nf[selectionData.type].defaultColor();
-
- // use the specified color if appropriate
- if (nf.Common.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
- color = selectionData.component.style['background-color'];
+ var selectedProcessors = selection.filter(function(d) {
+ return nf.CanvasUtils.isProcessor(d3.select(this));
+ });
+ var selectedLabels = selection.filter(function(d) {
+ return nf.CanvasUtils.isLabel(d3.select(this));
+ });
+
+ var allProcessors = selectedProcessors.size() === selection.size();
+ var allLabels = selectedLabels.size() === selection.size();
+
+ if (allProcessors || allLabels) {
+ var color;
+ if (allProcessors) {
+ color = nf.Processor.defaultColor();
+ } else {
+ color = nf.Label.defaultColor();
+ }
+
+ // if there is only one component selected, get its color otherwise use default
+ if (selection.size() === 1) {
+ var selectionData = selection.datum();
+
+ // use the specified color if appropriate
+ if (nf.Common.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
+ color = selectionData.component.style['background-color'];
+ }
}
// set the color
- $('#fill-color-value').minicolors('value', color);
+ $('#fill-color').minicolors('value', color);
// update the preview visibility
- if (nf.CanvasUtils.isProcessor(selection)) {
+ if (allProcessors) {
$('#fill-color-processor-preview').show();
$('#fill-color-label-preview').hide();
} else {
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/b8ade5b1/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js
index 03715e8..5daf415 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js
@@ -170,22 +170,22 @@ nf.CanvasHeader = (function () {
buttonText: 'Apply',
handler: {
click: function () {
- // close the dialog
- $('#fill-color-dialog').modal('hide');
-
- // ensure the selection is a processor or label
var selection = nf.CanvasUtils.getSelection();
- if (selection.size() === 1 && (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isLabel(selection))) {
+
+ // color the selected components
+ selection.each(function (d) {
+ var selected = d3.select(this);
+
var revision = nf.Client.getRevision();
- var selectionData = selection.datum();
+ var selectedData = selected.datum();
// get the color and update the styles
- var color = $('#fill-color-value').val();
+ var color = $('#fill-color').minicolors('value');
// update the style for the specified component
$.ajax({
type: 'PUT',
- url: selectionData.component.uri,
+ url: selectedData.component.uri,
data: {
'version': revision.version,
'clientId': revision.clientId,
@@ -197,7 +197,7 @@ nf.CanvasHeader = (function () {
nf.Client.setRevision(response.revision);
// update the processor
- if (nf.CanvasUtils.isProcessor(selection)) {
+ if (nf.CanvasUtils.isProcessor(selected)) {
nf.Processor.set(response.processor);
} else {
nf.Label.set(response.label);
@@ -210,7 +210,10 @@ nf.CanvasHeader = (function () {
});
}
});
- }
+ });
+
+ // close the dialog
+ $('#fill-color-dialog').modal('hide');
}
}
}, {
@@ -221,13 +224,24 @@ nf.CanvasHeader = (function () {
$('#fill-color-dialog').modal('hide');
}
}
- }]
+ }],
+ handler: {
+ close: function () {
+ // clear the current color
+ $('#fill-color-value').val('');
+ $('#fill-color').minicolors('value', '');
+ }
+ }
});
// initialize the fill color picker
- $('#fill-color-value').minicolors({
+ $('#fill-color').minicolors({
inline: true,
change: function (hex, opacity) {
+ // update the value
+ $('#fill-color-value').val(hex);
+
+ // always update the preview
$('#fill-color-processor-preview, #fill-color-label-preview').css({
'border-color': hex,
'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')',
@@ -235,6 +249,24 @@ nf.CanvasHeader = (function () {
});
}
});
+
+ // updates the color if its a valid hex color string
+ var updateColor = function () {
+ var hex = $('#fill-color-value').val();
+
+ // only update the fill color when its a valid hex color string
+ if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
+ $('#fill-color').minicolors('value', hex);
+ }
+ };
+
+ // initialize the fill color value
+ $('#fill-color-value').on('blur', updateColor).on('keyup', function(e) {
+ var code = e.keyCode ? e.keyCode : e.which;
+ if (code === $.ui.keyCode.ENTER) {
+ updateColor();
+ }
+ });
// mousewheel -> IE, Chrome
// DOMMouseScroll -> FF
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/b8ade5b1/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js
index 38707d8..1031c6c 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js
@@ -141,14 +141,19 @@ nf.CanvasToolbar = (function () {
actions['group'].disable();
}
- // determine how many colorable components are selected
- var colorableComponents = selection.filter(function (d) {
- var selected = d3.select(this);
- return nf.CanvasUtils.isProcessor(selected) || nf.CanvasUtils.isLabel(selected);
+ // determine if the current selection is entirely processors or labels
+ var selectedProcessors = selection.filter(function(d) {
+ return nf.CanvasUtils.isProcessor(d3.select(this));
+ });
+ var selectedLabels = selection.filter(function(d) {
+ return nf.CanvasUtils.isLabel(d3.select(this));
});
+ var allProcessors = selectedProcessors.size() === selection.size();
+ var allLabels = selectedLabels.size() === selection.size();
+
// if there are any colorable components enable the button
- if (colorableComponents.size() === 1 && colorableComponents.size() === selection.size()) {
+ if (allProcessors || allLabels) {
actions['fill'].enable();
} else {
actions['fill'].disable();