Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-2050] update dialog advanced buttons 

[NIFI-2076] fix Add inline controller service dialog description width
[NIFI-2143] update to combo width
[NIFI-2136] [NIFI-2139] [NIFI-2134] update provenance details dialog
[NIFI-2368] add transparent glasspane when in a shell
[NIFI-2134] update flow-file details padding and .unset font-weight
[NIFI-2349] [NIFI-2351] update policies shell styles
[NIFI-2350] update empty queue dialog styles
[NIFI-2367] update links on message pane
This closes #703
This commit is contained in:
Scott Aslan 2016-07-21 18:39:59 -04:00 committed by Matt Gilman
parent 4e08ea6525
commit 26ffc6d7ec
21 changed files with 152 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flowfile-details-dialog.jsp
View File

@ -94,8 +94,8 @@
<div class="clear"></div>
</div>
<div class="flowfile-detail">
<div id="content-download" class="button">Download</div>
<div id="content-view" class="button hidden">View</div>
<div id="content-download" class="secondary-button fa fa-download button-icon"><span>Download</span></div>
<div id="content-view" class="secondary-button fa fa-eye button-icon hidden"><span>View</span></div>
<div class="clear"></div>
</div>
</div>

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-event-details-dialog.jsp
View File

@ -94,8 +94,8 @@
<div id="attributes-details">
<div id="attributes-header" class="event-header">Attribute Values</div>
<div id="modified-attribute-toggle-container">
<div id="modified-attribute-toggle-label">Only show modified</div>
<div id="modified-attribute-toggle" class="nf-checkbox checkbox-unchecked"></div>
<div id="modified-attribute-toggle-label">Show modified attributes only</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
@ -133,8 +133,8 @@
<div class="clear"></div>
</div>
<div class="event-detail">
<div id="input-content-download" class="button hidden">Download</div>
<div id="input-content-view" class="button hidden">View</div>
<div id="input-content-download" class="secondary-button hidden fa fa-download button-icon"><span>Download</span></div>
<div id="input-content-view" class="secondary-button fa fa-eye button-icon hidden"><span>View</span></div>
<div class="clear"></div>
</div>
</div>
@ -170,8 +170,8 @@
<div class="clear"></div>
</div>
<div class="event-detail">
<div id="output-content-download" class="button hidden">Download</div>
<div id="output-content-view" class="button hidden">View</div>
<div id="output-content-download" class="secondary-button fa fa-download button-icon hidden"><span>Download</span></div>
<div id="output-content-view" class="secondary-button fa fa-eye button-icon hidden"><span>View</span></div>
<div class="clear"></div>
</div>
</div>
@ -186,7 +186,7 @@
</div>
<div id="replay-content-message" class="hidden"></div>
<div class="event-detail">
<div id="replay-content" class="button">Submit</div>
<div id="replay-content" class="secondary-button fa fa-repeat button-icon"><span>Replay</span></div>
<div class="clear"></div>
</div>
</div>

21
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
View File

@ -150,9 +150,8 @@ ul.links span.header-link-over {
}
.blank, .unset, .sensitive {
font-style: italic;
font-weight: normal;
color: #aaa;
font-weight: normal !important;
color: #a8a8a8 !important;
}
.required {
@ -352,6 +351,7 @@ input.filter {
.filter-type {
float: left;
width: 148px;
}
.filter-status {
@ -376,6 +376,20 @@ button.icon {
font-size: 16px;
}
div.button-icon span {
padding-left: 5px;
vertical-align: middle;
font-style: normal;
font-family: Roboto;
font-size: 11px;
}
div.button-icon {
float: left !important;
margin-left: 20px;
font-size: 18px !important;
}
div.button {
height: 32px;
width: 90px;
@ -411,6 +425,7 @@ div.secondary-button {
position: relative;
background: #E3E8EB;
color: #004849;
cursor:pointer
}
div.secondary-button:hover {

29
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
View File

@ -214,3 +214,32 @@ div.disable-referencing-components, div.enable-referencing-components {
#enable-controller-service-progress li, #disable-controller-service-progress li {
line-height: 16px;
}
/*
New inline controller service dialog
*/
div.new-inline-controller-service-combo { width: 50%;
margin-bottom: 10px;
}
div.new-inline-controller-service-tags {
height: 18px;
width: 340px;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
}
div.new-inline-controller-service-description {
height: 115px;
overflow: auto;
}
div.new-inline-controller-service-button-container {
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 0 8px 10px;
}

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
View File

@ -152,7 +152,6 @@ div.go-to-link {
#drop-request-percent-complete {
margin-top: 10px;
width: 378px;
border-radius: 0;
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
View File

@ -96,8 +96,8 @@ div.context-menu-provenance {
#user-links-container {
position: absolute;
left: 550px;
top: 100px;
right: 20px;
top: 69px;
z-index: 1300;
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/policy-management.css
View File

@ -123,10 +123,11 @@ div.policy-selected-component-type-icon i.icon {
font-size: 28px;
font-family: flowfont;
color: #ad9897;
margin-left: 2px;
}
div.policy-selected-component-name {
height: 14px;
height: 16px;
font-size: 15px;
font-family: Roboto;
color: #262626;
@ -140,7 +141,6 @@ div.policy-selected-component-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
/*

70
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css
View File

@ -176,33 +176,27 @@ div.searchable-field-value {
div.flowfile-container {
width: 282px;
height: 120px;
overflow: auto;
padding: 5px;
font-family: monospace;
font-size: 12px;
color: #775351;
font-size: 13px;
font-weight: 500;
line-height:1.4
}
#child-flowfiles {
margin-top: 10px;
margin-top: 20px;
}
div.event-header {
color: #728e9b;
font-size: 12pt;
font-size: 15px;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
line-height: 56px;
padding-bottom: 10px;
text-overflow: ellipsis;
}
#attributes-container {
height: 290px;
overflow: auto;
padding: 5px;
}
div.detail-name {
width: 100%;
font-size: 12px;
@ -217,7 +211,9 @@ div.detail-value {
width: 100%;
color: #775351;
font-size: 13px;
font-weight: bold;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
}
div.attribute-detail {
@ -238,7 +234,9 @@ div.attribute-value {
width: 100%;
color: #775351;
font-size: 13px;
font-weight: bold;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
}
#attributes-header {
@ -251,12 +249,15 @@ div.attribute-value {
#modified-attribute-toggle-label {
float: left;
font-size:13px;
line-height: 20px;
}
#modified-attribute-toggle {
float: left;
margin-left: 5px;
margin-right: 0;
margin-right: 5px;
margin-left: 0;
margin-top: 3px;
}
div.modified-attribute-label {
@ -270,11 +271,14 @@ div.modified-attribute-label {
div.modified-attribute-value {
float: left;
width: 490px;
margin-left: 175px;
width: 100%;
overflow: hidden;
white-space: nowrap;
line-height: normal;
color: #ad9897;
padding-top: 2px;
font-size: 13px;
font-weight: 500;
}
div.event-detail {
@ -286,9 +290,13 @@ div.event-detail {
margin: 0;
}
#replay-content-message {
font-size: 13px;
}
#input-content-view, #output-content-view {
float: left;
margin-left: 5px;
margin-left: 10px;
}
div.content-detail-name {
@ -305,7 +313,9 @@ div.content-detail-value {
width: 100%;
color: #775351;
font-size: 13px;
font-weight: bold;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
}
#replay-details {
@ -401,7 +411,9 @@ div.content-detail-value {
#event-timeline {
margin-top: 8px;
color: #9F6000;
font-weight: bold;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
line-height: normal;
}
@ -479,8 +491,10 @@ text.event-type {
}
text.event-type.expand-parents, text.event-type.expand-children {
font-weight: bold;
font-size: 12px;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
font-size: 13px;
}
g.flowfile circle.context, g.event circle.context {
@ -511,3 +525,11 @@ path.flowfile-icon-arc {
path.flowfile-icon-top {
pointer-events: none;
}
#child-flowfile-count {
font-weight: normal;
}
#parent-flowfile-count {
font-weight: normal;
}

14
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css
View File

@ -90,11 +90,11 @@
div.flowfile-header {
color: #728e9b;
font-size: 12pt;
font-size: 15px;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
padding-bottom: 20px;
padding-bottom: 10px;
text-overflow: ellipsis;
}
@ -118,7 +118,9 @@ div.detail-value {
width: 100%;
color: #775351;
font-size: 13px;
font-weight: bold;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
}
div.attribute-detail {
@ -139,7 +141,9 @@ div.attribute-value {
width: 100%;
color: #775351;
font-size: 13px;
font-weight: bold;
font-weight: 500;
font-family: 'Roboto';
font-style: normal;
}
#flowfile-attributes-header {
@ -174,5 +178,5 @@ div.content-detail-value {
width: 100%;
color: #775351;
font-size: 13px;
font-weight: bold;
font-weight: 500;
}

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
View File

@ -26,7 +26,6 @@
height: 30px;
line-height: 30px;
border: 1px solid #eaeef0;
width: 148px;
}
.combo-options {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
View File

@ -55,7 +55,6 @@
right: 0px;
bottom: 0px;
opacity: 0.65;
background-color: #728E9B;
}
.dialog-header {

27
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
View File

@ -79,7 +79,7 @@
* "fullscreen-height": "420px", //optional, default is original dialog height (accepts 'px' values)
* "fullscreen-width": "470px", //optional, default is original dialog width (accepts 'px' values)
* },
* "glasspane": "false" //optional, displays a modal glasspane behind the dialog...default true
* "glasspane": "#728E9B" //optional, set the color of modal glasspane...default if unset is the dialog header color
* }
*
* @argument {jQuery} $
@ -108,15 +108,16 @@
var buttonWrapper = $('<div class="dialog-buttons"></div>');
var button;
$.each(buttonModel, function (i, buttonConfig) {
var clazz = isDefinedAndNotNull(buttonConfig.clazz) ? buttonConfig.clazz : '';
if (buttonConfig.color) {
button = $('<div class="button" style="color:' + buttonConfig.color.text + '; background:' + buttonConfig.color.base + ';"></div>').text(buttonConfig.buttonText);
button = $('<div class="button ' + clazz + '" style="color:' + buttonConfig.color.text + '; background:' + buttonConfig.color.base + ';"><span>' + buttonConfig.buttonText + '</span></div>');
button.hover(function () {
$(this).css("background-color", buttonConfig.color.hover);
}, function () {
$(this).css("background-color", buttonConfig.color.base);
});
} else {
button = $('<div class="button"></div>').text(buttonConfig.buttonText)
button = $('<div class="button ' + clazz + '"><span>' + buttonConfig.buttonText + '</span></div>');
}
button.click(function () {
var handler = $(this).data('handler');
@ -469,23 +470,23 @@
nfDialog = dialog.data('nf-dialog');
}
// determine if dialog needs a glass pane overlay
var hasGlasspane;
var glasspane;
if (isDefinedAndNotNull(nfDialog.glasspane)) {
hasGlasspane = nfDialog.glasspane;
glasspane = nfDialog.glasspane;
} else {
nfDialog.glasspane = hasGlasspane = true;
nfDialog.glasspane = glasspane = dialog.find('.dialog-header').css('background-color'); //default to header color
if(top !== window || !isDefinedAndNotNull(nfDialog.glasspane)) {
nfDialog.glasspane = glasspane = 'transparent';
}
}
//create glass pane overlay
if(hasGlasspane && (top === window)) {
// build the dialog modal
var modalGlassMarkup = '<div data-nf-dialog-parent="' + dialog.attr('id') + '" class="modal-glass"></div>';
var modalGlassMarkup = '<div data-nf-dialog-parent="' +
dialog.attr('id') + '" class="modal-glass" style="background-color: ' + glasspane + ';"></div>';
var modalGlass = $(modalGlassMarkup);
var modalGlass = $(modalGlassMarkup);
modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
}
modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
//persist data attribute
dialog.data('nfDialog', nfDialog);

30
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
View File

@ -69,36 +69,6 @@ div.new-property-button-container {
right: 0;
}
/*
New inline controller service dialog
*/
div.new-inline-controller-service-combo { width: 50%;
margin-bottom: 10px;
}
div.new-inline-controller-service-tags {
height: 18px;
width: 340px;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
}
div.new-inline-controller-service-description {
height: 115px;
width: 340px;
overflow: auto;
}
div.new-inline-controller-service-button-container {
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 0 8px 10px;
}
/*
Styles for the property editor.
*/

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
View File

@ -1774,6 +1774,7 @@ nf.ControllerService = (function () {
if (nf.Common.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
buttons.push({
buttonText: 'Advanced',
clazz: 'fa fa-cog button-icon',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',
@ -1921,6 +1922,7 @@ nf.ControllerService = (function () {
if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(controllerService.customUiUrl) && controllerService.customUiUrl !== '') {
buttons.push({
buttonText: 'Advanced',
clazz: 'fa fa-cog button-icon',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
View File

@ -527,11 +527,11 @@ nf.ControllerServices = (function () {
var hasBulletins = !nf.Common.isEmpty(dataContext.bulletins);
if (hasErrors) {
markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-right: 3px;" ></div>';
markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-right: 3px; float: left;" ></div>';
}
if (hasBulletins) {
markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-right: 3px;"></div>';
markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-right: 3px; float: left;"></div>';
}
if (hasErrors || hasBulletins) {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
View File

@ -749,6 +749,7 @@ nf.ProcessorConfiguration = (function () {
if (nf.Common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
buttons.push({
buttonText: 'Advanced',
clazz: 'fa fa-cog button-icon',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
View File

@ -504,6 +504,7 @@ nf.ReportingTask = (function () {
if (nf.Common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
buttons.push({
buttonText: 'Advanced',
clazz: 'fa fa-cog button-icon',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',
@ -650,6 +651,7 @@ nf.ReportingTask = (function () {
if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') {
buttons.push({
buttonText: 'Advanced',
clazz: 'fa fa-cog button-icon',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
View File

@ -531,9 +531,9 @@ nf.Common = (function () {
*/
populateField: function (target, value) {
if (nf.Common.isUndefined(value) || nf.Common.isNull(value)) {
return $('#' + target).addClass('unset').text('No value set');
return $('#' + target).addClass('unset').text('No value previously set');
} else if (value === '') {
return $('#' + target).addClass('blank').text('Empty string set');
return $('#' + target).addClass('blank').text('Empty string previously set');
} else {
return $('#' + target).text(value);
}
@ -623,12 +623,12 @@ nf.Common = (function () {
formatValue: function (value) {
if (nf.Common.isDefinedAndNotNull(value)) {
if (value === '') {
return '<span class="blank">Empty string set</span>';
return '<span class="blank" style="font-size: 13px; padding-top: 2px;">Empty string previously set</span>';
} else {
return nf.Common.escapeHtml(value);
}
} else {
return '<span class="unset">No value set</span>';
return '<span class="unset" style="font-size: 13px; padding-top: 2px;">No value previously set</span>';
}
},
@ -1023,10 +1023,10 @@ nf.Common = (function () {
if (!nf.Common.isDefinedAndNotNull(rawDateTime)) {
return new Date();
}
if (rawDateTime === 'No value set') {
if (rawDateTime === 'No value previously set') {
return new Date();
}
if (rawDateTime === 'Empty string set') {
if (rawDateTime === 'Empty string previously set') {
return new Date();
}

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
View File

@ -27,9 +27,6 @@ $(document).ready(function () {
$('#nf-ok-dialog-content').empty();
}
}
}).draggable({
containment: 'parent',
handle: '.dialog-header'
});
// configure the yes/no dialog

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
View File

@ -230,6 +230,7 @@ nf.ProcessorDetails = (function () {
if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') {
buttons.push({
buttonText: 'Advanced',
clazz: 'fa fa-cog button-icon',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',

15
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
View File

@ -1345,10 +1345,15 @@ nf.ProvenanceTable = (function () {
// show the previous value if the property has changed
if (attribute.value !== attribute.previousValue) {
attributeRecord
.append('<div class="modified-attribute-label">previous</div>')
.append($('<div class="modified-attribute-value">' + nf.Common.formatValue(attribute.previousValue) + '</div>').ellipsis())
.append('<div class="clear"></div>');
if (nf.Common.isDefinedAndNotNull(attribute.previousValue)) {
attributeRecord
.append($('<div class="modified-attribute-value">' + nf.Common.formatValue(attribute.previousValue) + '<span class="unset"> (previous)</span></div>').ellipsis())
.append('<div class="clear"></div>');
} else {
attributeRecord
.append($('<div class="unset" style="font-size: 13px; padding-top: 2px;">' + nf.Common.formatValue(attribute.previousValue) + '</div>').ellipsis())
.append('<div class="clear"></div>');
}
} else {
// mark this attribute as not modified
attributeRecord.addClass('attribute-unmodified');
@ -1359,7 +1364,7 @@ nf.ProvenanceTable = (function () {
if (nf.Common.isDefinedAndNotNull(value)) {
element.removeClass('unset').text(value);
} else {
element.addClass('unset').text('No value set');
element.addClass('unset').text('No value previously set');
}
};