Repository: nifi Updated Branches: refs/heads/master 5f9cae97b -> 05ea76dd6
[NIFI-2888] Display processor fill color when zoomed in/out. This closes #1151. Project: http://git-wip-us.apache.org/repos/asf/nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/05ea76dd Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/05ea76dd Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/05ea76dd Branch: refs/heads/master Commit: 05ea76dd6f7ecece9bb7675c81f02d7b36fbd916 Parents: 5f9cae9 Author: Scott Aslan <[email protected]> Authored: Wed Nov 2 10:11:39 2016 -0400 Committer: Matt Gilman <[email protected]> Committed: Wed Nov 2 12:54:58 2016 -0400 ---------------------------------------------------------------------- .../partials/canvas/fill-color-dialog.jsp | 11 +- .../nifi-web-ui/src/main/webapp/css/dialog.css | 38 ++++-- .../nifi-web-ui/src/main/webapp/css/graph.css | 12 +- .../nf-ng-canvas-operate-controller.js | 31 ++++- .../src/main/webapp/js/nf/canvas/nf-actions.js | 2 +- .../src/main/webapp/js/nf/canvas/nf-birdseye.js | 6 + .../src/main/webapp/js/nf/canvas/nf-label.js | 12 ++ .../main/webapp/js/nf/canvas/nf-processor.js | 124 +++++++++++++------ .../src/main/webapp/js/nf/nf-common.js | 14 +++ 9 files changed, 199 insertions(+), 51 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/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-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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp index db6f66f..4e76325 100644 --- a/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fill-color-dialog.jsp @@ -28,9 +28,16 @@ </div> <div class="setting-name" style="margin-top: 10px;">Preview</div> <div class="setting-field"> - <div id="fill-color-processor-preview" class="icon icon-processor"></div> + <div id="fill-color-processor-preview"> + <div id="fill-color-processor-preview-icon" class="icon icon-processor"></div> + <div id="fill-color-processor-preview-name" style="margin-left: 35px; line-height: 25px; font-size: 12px; height: 25px; color: #262626;">Processor Name</div> + <div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div> + <div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #ffffff;"></div> + <div style="width: 100%; height: 10px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div> + <div style="width: 100%; height: 9px; background-color: #ffffff;"></div> + </div> <div id="fill-color-label-preview"> - <div id="fill-color-label-preview-value">Label</div> + <div id="fill-color-label-preview-value">Label Value</div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css index b082f22..911dec2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css @@ -33,21 +33,45 @@ } #fill-color-processor-preview { - font-size: 64px; + width: 173px; + height: 65px; + border-width: 1px; + border-style: solid; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); +} + +#fill-color-processor-preview-icon { + float: left; + width: 25px; + height: 25px; +} + +#fill-color-processor-preview-icon:before { + margin-top: 5px; + margin-left: 4px; + font-size: 15px; +} + +#fill-color-processor-preview-name { + margin-left: 35px; + line-height: 25px; + font-size: 12px; + height: 25px; } #fill-color-label-preview { - width: 173px; - height: 56px; + width: 83px; + height: 83px; font-weight: bold; - border-width: 1px; - border-style: solid; + border: 1px solid rgba(0,0,0,0.25); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } #fill-color-label-preview-value { - margin-left: 5px; - margin-top: 5px; + margin-left: 10px; + margin-top: 10px; float: left; + font-size: 12px; } div.connections-component-name { http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css index 025027d..73f44c9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css @@ -73,12 +73,16 @@ g.component rect.border { g.component rect.border.unauthorized { stroke-width: 1.5; - stroke: #ba554a; + stroke: #ba554a !important; stroke-dasharray: 3,3; } +g.component rect.processor-icon-container.unauthorized { + fill: #f4f6f7 !important; +} + g.component.selected rect.border { - stroke: #004849; + stroke: #004849 !important; stroke-width: 3; } @@ -166,6 +170,10 @@ text.processor-type { font-size: 12px; } +rect.processor-icon-container { + fill: #ffffff; +} + text.processor-icon { font-family: flowfont; font-size: 30px; http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js index c74ca48..d6d8688 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js @@ -405,12 +405,35 @@ nf.ng.Canvas.OperateCtrl = function () { $('#fill-color-value').val(hex); // always update the preview - $('#fill-color-processor-preview').css('color', hex); + if (hex.toLowerCase() === '#ffffff') { + //special case #ffffff implies default fill + $('#fill-color-processor-preview-icon').css({ + 'color': nf.Processor.defaultIconColor(), + 'background-color': hex + }); + } else { + $('#fill-color-processor-preview-icon').css({ + 'color': nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + hex, '#')), + 'background-color': hex + }); + } + + var borderColor = hex; + if (borderColor.toLowerCase() === '#ffffff') { + borderColor = 'rgba(0,0,0,0.25)'; + } + $('#fill-color-processor-preview').css({ + 'border-color': borderColor + }); + $('#fill-color-label-preview').css({ - 'border-color': hex, - 'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')', - 'filter': 'progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#ffffff, endColorstr=' + hex + ')' + 'background': hex }); + $('#fill-color-label-preview-value').css('color', + nf.Common.determineContrastColor(nf.Common.substringAfterLast(hex, '#')) + ); } }); http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js index 222c104..6321df4 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js @@ -1104,7 +1104,7 @@ nf.Actions = (function () { var color; if (allProcessors) { - color = nf.Processor.defaultColor(); + color = nf.Processor.defaultFillColor(); } else { color = nf.Label.defaultColor(); } http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js index 80aaa17..dc4fca2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js @@ -187,12 +187,18 @@ nf.Birdseye = (function () { // processors $.each(components.processors, function (_, d) { + //default color var color = '#dde4eb'; if (d.permissions.canRead) { // use the specified color if appropriate if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { color = d.component.style['background-color']; + + //if the background color is #ffffff use the default instead + if (color === '#ffffff') { + color = '#dde4eb'; + } } } http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js index 1d73079..503c855 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js @@ -201,6 +201,13 @@ nf.Label = (function () { lines.push(''); } + var color = nf.Label.defaultColor(); + + // use the specified color if appropriate + if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + color = d.component.style['background-color']; + } + // add label value $.each(lines, function (i, line) { labelText.append('tspan') @@ -208,6 +215,11 @@ nf.Label = (function () { .attr('dy', '1.2em') .text(function () { return line; + }) + .style('fill', function (d) { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + color, '#')); }); }); http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js index 0279882..bf0f35f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js @@ -106,18 +106,28 @@ nf.Processor = (function () { // processor name processor.append('text') .attr({ - 'x': 62, - 'y': 20, - 'width': 220, - 'height': 16, + 'x': 72, + 'y': 23, + 'width': 210, + 'height': 14, 'class': 'processor-name' }); + // processor icon container + processor.append('rect') + .attr({ + 'x': 0, + 'y': 0, + 'width': 50, + 'height': 50, + 'class': 'processor-icon-container' + }); + // processor icon processor.append('text') .attr({ - 'x': 6, - 'y': 32, + 'x': 9, + 'y': 35, 'class': 'processor-icon' }) .text('\ue807'); @@ -164,18 +174,18 @@ nf.Processor = (function () { details.append('text') .attr({ 'class': 'run-status-icon', - 'x': 42, - 'y': 20 + 'x': 55, + 'y': 23 }); // processor type details.append('text') .attr({ 'class': 'processor-type', - 'x': 62, - 'y': 35, - 'width': 246, - 'height': 16 + 'x': 72, + 'y': 37, + 'width': 236, + 'height': 12 }); // ----- @@ -533,30 +543,67 @@ nf.Processor = (function () { details.remove(); } } - }); - - // --------------- - // processor color - // --------------- - - // update the processor color - updated.select('text.processor-icon') - .style('fill', function (d) { - - // get the default color - var color = nf.Processor.defaultColor(); - - if (!d.permissions.canRead) { - return color; - } - // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { - color = d.component.style['background-color']; + // --------------- + // processor color + // --------------- + + //update the processor icon container + processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead); + + //update the processor icon + processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead); + + //update the processor border + processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead); + + // use the specified color if appropriate + if (processorData.permissions.canRead){ + if (nf.Common.isDefinedAndNotNull(processorData.component.style['background-color'])) { + var color = processorData.component.style['background-color']; + + //update the processor icon container + processor.select('rect.processor-icon-container') + .style('fill', function (d) { + return color; + }); + + //update the processor border + processor.select('rect.border') + .style('stroke', function (d) { + return color; + }); } + } - return color; - }); + // update the processor color + processor.select('text.processor-icon') + .style('fill', function (d) { + + // get the default color + var color = nf.Processor.defaultIconColor(); + + if (!d.permissions.canRead) { + return color; + } + + // use the specified color if appropriate + if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + color = d.component.style['background-color']; + + //special case #ffffff implies default fill + if (color.toLowerCase() === '#ffffff') { + color = nf.Processor.defaultIconColor(); + } else { + color = nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + color, '#')); + } + } + + return color; + }); + }); }; /** @@ -941,9 +988,16 @@ nf.Processor = (function () { }, /** - * Returns the default color that should be used when drawing a processor. + * Returns the default fill color that should be used when drawing a processor. + */ + defaultFillColor: function () { + return '#FFFFFF'; + }, + + /** + * Returns the default icon color that should be used when drawing a processor. */ - defaultColor: function () { + defaultIconColor: function () { return '#ad9897'; } }; http://git-wip-us.apache.org/repos/asf/nifi/blob/05ea76dd/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js index 898a5d8..be9fae7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js @@ -385,6 +385,20 @@ nf.Common = (function () { }, /** + * Determines the contrast color of a given hex color. + * + * @param {string} hex The hex color to test. + * @returns {string} The contrasting color string. + */ + determineContrastColor: function (hex){ + if (parseInt(hex, 16) > 0xffffff/1.5) { + return '#000000'; + } + return '#ffffff'; + }, + + + /** * Method for handling ajax errors. * * @argument {object} xhr The XmlHttpRequest
