[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

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>

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>

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 {

View File

@ -213,4 +213,33 @@ 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;
}

View File

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

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;
}

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;
}
/*

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 {
@ -510,4 +524,12 @@ path.flowfile-icon-arc {
path.flowfile-icon-top {
pointer-events: none;
}
#child-flowfile-count {
font-weight: normal;
}
#parent-flowfile-count {
font-weight: normal;
}

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;
}

View File

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

View File

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

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);

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.
*/

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',

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) {

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',

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',

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();
}

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

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',

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');
}
};