From 60423f05b5b0c52c12233dcdda3076b1fa18175b Mon Sep 17 00:00:00 2001 From: Peter Wicks Date: Mon, 22 Aug 2016 11:45:20 -0600 Subject: [PATCH] NIFI-2603 - Gui Icons - Gui Icons - Fixing Orange Color - Gui Icons - Fixing misc. colors - Gui Icons - Summary page + spinner - Gui Icons - Summary page again --- .../src/main/webapp/css/common-ui.css | 20 +++++++++++++ .../src/main/webapp/css/flow-status.css | 16 +++++++++-- .../nifi-web-ui/src/main/webapp/css/graph.css | 20 +++++++++---- .../nifi-web-ui/src/main/webapp/css/main.css | 8 +++--- .../src/main/webapp/css/navigation.css | 8 ++++++ .../webapp/css/processor-configuration.css | 2 +- .../src/main/webapp/css/provenance.css | 4 +-- .../src/main/webapp/css/queue-listing.css | 2 +- .../remote-process-group-configuration.css | 2 +- .../slickgrid/css/slick-default-theme.css | 2 +- .../nf-ng-canvas-flow-status-controller.js | 6 ++-- .../src/main/webapp/js/nf/canvas/nf-port.js | 10 +++++-- .../main/webapp/js/nf/canvas/nf-processor.js | 10 +++++-- .../src/main/webapp/js/nf/nf-ng-app-config.js | 28 +++++++++---------- .../js/nf/provenance/nf-provenance-lineage.js | 2 +- .../webapp/js/nf/summary/nf-summary-table.js | 6 ++-- .../src/main/webapp/css/main.css | 2 +- 17 files changed, 104 insertions(+), 44 deletions(-) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css index 0466df5b7a..011fa4bf35 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css @@ -523,6 +523,26 @@ div.context-menu-item.hover { left: 2px; } +div.context-menu-item.hover > div.context-menu-item-img.fa.fa-play { + color:#5cb85c; +} + +.running { + color:#5cb85c; +} + +div.context-menu-item.hover > div.context-menu-item-img.fa.fa-stop { + color:#d9534f; +} + +.stopped { + color:#d9534f !important; +} + +.invalid { + color:#f0ad4e !important; +} + .context-menu-item-img.icon { position: relative; top: 1px; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css index 186d9841a8..ceecb8b551 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css @@ -38,6 +38,18 @@ color: #728E9B; /*base-color*/ } +#flow-status .fa.fa-play { + color: #5cb85c; +} + +#flow-status .fa.fa-stop { + color: #d9534f; +} + +#flow-status .fa.fa-warning { + color: #f0ad4e; +} + #flow-status .icon span { font-size: 15px; font-weight: 500; @@ -94,7 +106,7 @@ } #bulletin-button.has-bulletins { - background-color: #ba554a; /*warm-color*/ + background-color: #f0ad4e; /*warm-color*/ } #bulletin-button i.fa { @@ -112,7 +124,7 @@ } #connected-nodes-count.connection-warning { - color: #BA554A; + color: #f0ad4e; } /* search field */ 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 73f44c9087..67ad5bf9f1 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 @@ -114,11 +114,19 @@ text.bulletin-icon { } rect.bulletin-background { - fill: #ba554a; + fill: #f0ad4e; } text.process-group-invalid.has-validation-errors { - fill: #ba554a; + fill: #f0ad4e; +} + +text.process-group-stopped.process-group-contents-icon { + fill: #d9534f; +} + +text.process-group-running.process-group-contents-icon{ + fill: #5cb85c; } text.active-thread-count-icon { @@ -201,7 +209,7 @@ g.connection rect.body.unauthorized { g.connection rect.border.unauthorized { stroke-width: 1.5; - stroke: #ba554a; + stroke: #f0ad4e; stroke-dasharray: 3,3; } @@ -243,7 +251,7 @@ g.connection path.connection-path.full { } g.connection path.connection-path.unauthorized { - stroke: #ba554a; + stroke: #f0ad4e; stroke-dasharray: 3,3; } @@ -254,7 +262,7 @@ text.connection-from-run-status, text.connection-to-run-status, text.expiration- } text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port { - fill: #ba554a; + fill: #f0ad4e; } g.connection rect.backpressure-tick { @@ -430,7 +438,7 @@ text.remote-process-group-transmission-status { } text.remote-process-group-transmission-status.has-authorization-errors { - fill: #ba554a; + fill: #f0ad4e; } text.remote-process-group-transmission-secure { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css index b78a14df79..9ef82beabb 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css @@ -104,13 +104,13 @@ div.running { div.has-errors, div.invalid { float: left; - color: #ba554a !important; + color: #f0ad4e !important; } div.has-errors:before, div.invalid:before { font-family: FontAwesome; content: "\f071"; - color: #ba554a; + color: #f0ad4e; } div.transmitting { @@ -128,7 +128,7 @@ div.valid { } div.has-bulletins { - color: #ba554a !important; + color: #f0ad4e !important; } /* @@ -233,7 +233,7 @@ span.details-title { font-weight: bold; font-family: Roboto; font-size: 13px; - color: #ba554a; + color: #f0ad4e; } #upload-template-container button { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css index 2439d229e1..e986a9bea8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css @@ -213,6 +213,14 @@ div.action-button { text-transform:uppercase; } +#operate-start button:hover { + color:#5cb85c; +} + +#operate-stop button:hover { + color:#d9534f; +} + div.graph-control div.icon-disabled { color: #ddd; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css index e03a698261..b8b6bcffb5 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css @@ -75,7 +75,7 @@ div.processor-configuration-warning-icon:before { font-family: FontAwesome; content: "\f071"; font-size: 16px; - color: #ba554a; + color: #f0ad4e; } #auto-terminate-relationship-names { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css index d787c4b081..c8e26ae6f6 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css @@ -466,11 +466,11 @@ div.lineage-collapse-children:before { } path.link.selected { - stroke: #ba554a; + stroke: #f0ad4e; } g.event circle.selected { - fill: #ba554a; + fill: #f0ad4e; } text.event-type { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css index 92d9997a59..0c45c42d45 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css @@ -75,7 +75,7 @@ #queue-listing-message { position: absolute; top: 36px; - color: #ba554a; + color: #f0ad4e; font-family: Roboto; font-size: 13px; font-weight: 500; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css index 847bdb7605..44d24a3337 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css @@ -100,7 +100,7 @@ div.remote-port-removed:before { font-family: FontAwesome; content: "\f071"; font-size: 16px; - color: #ba554a; + color: #f0ad4e; } div.remote-port-edit-container { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css index 780d0d30ca..1b8503d4af 100755 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css @@ -77,7 +77,7 @@ classes should alter those! } .slick-cell.invalid { - border-color: #ba554a; + border-color: #f0ad4e; -moz-animation-duration: 0.2s; -webkit-animation-duration: 0.2s; -moz-animation-name: slickgrid-invalid-hilite; 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-flow-status-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-flow-status-controller.js index 32bdecadc1..7155e86943 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-flow-status-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-flow-status-controller.js @@ -360,14 +360,14 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) { var connectedNodes = clusterSummary.connectedNodes.split(' / '); if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) { this.clusterConnectionWarning = true; - color = '#BA554A'; + color = '#f0ad4e'; } } this.connectedNodesCount = nf.Common.isDefinedAndNotNull(clusterSummary.connectedNodes) ? clusterSummary.connectedNodes : '-'; } else { this.connectedNodesCount = 'Disconnected'; - color = '#BA554A'; + color = '#f0ad4e'; } // update the color @@ -382,7 +382,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) { update: function (status) { var controllerInvalidCountColor = (nf.Common.isDefinedAndNotNull(status.invalidCount) && (status.invalidCount > 0)) ? - '#BA554A' : '#728E9B'; + '#f0ad4e' : '#728E9B'; $('#controller-invalid-count').parent().css('color', controllerInvalidCountColor); // update the report values diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js index d5e4ac7327..358115d2dd 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js @@ -340,9 +340,15 @@ nf.Port = (function () { .attr({ 'fill': function (d) { var fill = '#728e9b'; - if (d.status.aggregateSnapshot.runStatus === 'Invalid') { - fill = '#ba554a'; + + if (d.status.aggregateSnapshot.runStatus === 'Invalid') { + fill = '#f0ad4e'; + } else if (d.status.aggregateSnapshot.runStatus === 'Running') { + fill = '#5cb85c'; + } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { + fill = '#d9534f'; } + return fill; }, 'font-family': function (d) { 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 bf0f35f841..5cd1da384d 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 @@ -621,9 +621,15 @@ nf.Processor = (function () { .attr({ 'fill': function (d) { var fill = '#728e9b'; - if (d.status.aggregateSnapshot.runStatus === 'Invalid') { - fill = '#ba554a'; + + if (d.status.aggregateSnapshot.runStatus === 'Invalid') { + fill = '#f0ad4e'; + } else if (d.status.aggregateSnapshot.runStatus === 'Running') { + fill = '#5cb85c'; + } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { + fill = '#d9534f'; } + return fill; }, 'font-family': function (d) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js index 54dccde026..effc909b59 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js @@ -61,20 +61,20 @@ nf.ng.AppConfig = function ($mdThemingProvider, $compileProvider) { 'contrastLightColors': undefined }); $mdThemingProvider.definePalette('warnPalette', { - '50': 'BA554A', - '100': 'BA554A', - '200': 'BA554A', - '300': 'BA554A', - '400': 'BA554A', - '500': 'BA554A', /* warn-color */ - '600': 'BA554A', - '700': 'BA554A', - '800': 'BA554A', - '900': 'BA554A', - 'A100': 'BA554A', - 'A200': 'BA554A', - 'A400': 'BA554A', - 'A700': 'BA554A', + '50': 'f0ad4e', + '100': 'f0ad4e', + '200': 'f0ad4e', + '300': 'f0ad4e', + '400': 'f0ad4e', + '500': '2B5C76', /* warn-color */ + '600': 'f0ad4e', + '700': 'f0ad4e', + '800': 'f0ad4e', + '900': 'f0ad4e', + 'A100': 'f0ad4e', + 'A200': 'f0ad4e', + 'A400': 'f0ad4e', + 'A700': 'f0ad4e', 'contrastDefaultColor': 'light', 'contrastDarkColors': ['A100'], 'contrastLightColors': undefined diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js index 4e15cd21fa..b6da60bf58 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js @@ -608,7 +608,7 @@ nf.ng.ProvenanceLineage = function () { 'orient': 'auto', 'fill': function (d) { if (d.indexOf('SELECTED') >= 0) { - return '#ba554a'; + return '#f0ad4e'; } else { return '#000000'; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js index 517e82ffd1..72bd4e6159 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js @@ -266,10 +266,10 @@ nf.SummaryTable = (function () { var classes = nf.Common.escapeHtml(value.toLowerCase()); switch(nf.Common.escapeHtml(value.toLowerCase())) { case 'running': - classes += ' fa fa-play'; + classes = ' fa fa-play running'; break; case 'stopped': - classes += ' fa fa-stop'; + classes = ' fa fa-stop stopped'; break; case 'enabled': classes += ' fa fa-flash'; @@ -278,7 +278,7 @@ nf.SummaryTable = (function () { classes += ' icon icon-enable-false'; break; case 'invalid': - classes += ' fa fa-warning'; + classes = ' fa fa-warning invalid'; break; default: classes += ''; diff --git a/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css index d1debc826b..e82c0e8916 100644 --- a/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css +++ b/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css @@ -250,7 +250,7 @@ div.large-label-container { } #message { - color: #ba554a; + color: #f0ad4e; margin-left: 20px; margin-right: 20px; line-height: 32px;