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 af8fad7322..8a7cb4ea05 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 @@ -19,10 +19,14 @@
Color
+
+ +
+
Value
-
Preview
+
Preview
Processor
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 56e6580b39..1b658bea67 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; 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 02e0c3a7fc..6624d52b24 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 { 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 03715e8d40..5daf41541b 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 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 38707d8a87..1031c6cfdc 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();