NIFI-140:

- Addressing inconsistent tooltip styles.
This commit is contained in:
Matt Gilman 2015-01-05 07:22:10 -05:00
parent a08d31839e
commit c1eb209d4f
14 changed files with 44 additions and 62 deletions

View File

@ -30,13 +30,10 @@
} }
.tooltip { .tooltip {
padding: 10px;
display: none; display: none;
position: absolute; position: absolute;
padding: 10px;
z-index: 1000; z-index: 1000;
border: 3px solid #959FA9;
background-color: #F9F9F9;
color: #454545;
} }
/* svg styles */ /* svg styles */

View File

@ -111,6 +111,12 @@ div.context-menu-item-text {
font-weight: bold !important; font-weight: bold !important;
} }
div.nifi-tooltip {
border: 1px solid #454545;
background-color: #FFFFA3;
color: #454545;
}
.ellipsis { .ellipsis {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

View File

@ -97,9 +97,9 @@ nf.CanvasHeader = (function () {
}); });
// setup the tooltip for the refresh icon // setup the tooltip for the refresh icon
$('#refresh-required-icon').qtip($.extend(nf.CanvasUtils.config.systemTooltipConfig, { $('#refresh-required-icon').qtip($.extend({
content: 'This flow has been modified by another user. Please refresh.' content: 'This flow has been modified by another user. Please refresh.'
})); }, nf.CanvasUtils.config.systemTooltipConfig));
// setup the refresh link actions // setup the refresh link actions
$('#refresh-required-link').click(function () { $('#refresh-required-link').click(function () {

View File

@ -50,30 +50,9 @@ nf.CanvasUtils = (function () {
return { return {
config: { config: {
cellTooltipConfig: {
style: {
classes: 'ui-tooltip-tipped ui-tooltip-shadow'
},
show: {
solo: true,
effect: false
},
hide: {
effect: false
},
position: {
target: 'mouse',
viewport: $(window),
adjust: {
x: 8,
y: 8,
method: 'flipinvert flipinvert'
}
}
},
systemTooltipConfig: { systemTooltipConfig: {
style: { style: {
classes: 'ui-tooltip-tipped ui-tooltip-shadow' classes: 'nifi-tooltip'
}, },
show: { show: {
solo: true, solo: true,
@ -444,7 +423,7 @@ nf.CanvasUtils = (function () {
.attr('id', function () { .attr('id', function () {
return 'bulletin-tip-' + d.component.id; return 'bulletin-tip-' + d.component.id;
}) })
.attr('class', 'tooltip') .attr('class', 'tooltip nifi-tooltip')
.html(function () { .html(function () {
// format the bulletins // format the bulletins
var bulletins = nf.Common.getFormattedBulletins(d.status.bulletins); var bulletins = nf.Common.getFormattedBulletins(d.status.bulletins);
@ -476,12 +455,12 @@ nf.CanvasUtils = (function () {
target.on('mouseenter', function () { target.on('mouseenter', function () {
tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block'); tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block');
}) })
.on('mousemove', function () { .on('mousemove', function () {
tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px'); tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px');
}) })
.on('mouseleave', function () { .on('mouseleave', function () {
tip.style('display', 'none'); tip.style('display', 'none');
}); });
}, },
/** /**

View File

@ -695,9 +695,9 @@ nf.Canvas = (function () {
bulletinIcon.qtip('option', 'content.text', newBulletins); bulletinIcon.qtip('option', 'content.text', newBulletins);
} else { } else {
// no bulletins before, show icon and tips // no bulletins before, show icon and tips
bulletinIcon.addClass('has-bulletins').qtip($.extend(nf.CanvasUtils.config.systemTooltipConfig, { bulletinIcon.addClass('has-bulletins').qtip($.extend({
content: newBulletins content: newBulletins
})); }, nf.CanvasUtils.config.systemTooltipConfig));
} }
// show the icon // show the icon

View File

@ -1164,9 +1164,9 @@ nf.ConnectionConfiguration = (function () {
// add the description if applicable // add the description if applicable
if (nf.Common.isDefinedAndNotNull(prioritizerType.description)) { if (nf.Common.isDefinedAndNotNull(prioritizerType.description)) {
$('<img class="icon-info" style="float: right; margin-right: 5px;" src="images/iconInfo.png"></img>').appendTo(prioritizer).qtip($.extend(nf.Common.config.tooltipConfig, { $('<img class="icon-info" style="float: right; margin-right: 5px;" src="images/iconInfo.png"></img>').appendTo(prioritizer).qtip($.extend({
content: nf.Common.escapeHtml(prioritizerType.description) content: nf.Common.escapeHtml(prioritizerType.description)
})); }, nf.Common.config.tooltipConfig));
} }
}, },

View File

@ -304,7 +304,7 @@ nf.Port = (function () {
.attr('id', function () { .attr('id', function () {
return 'run-status-tip-' + d.component.id; return 'run-status-tip-' + d.component.id;
}) })
.attr('class', 'tooltip') .attr('class', 'tooltip nifi-tooltip')
.html(function () { .html(function () {
var list = nf.Common.formatUnorderedList(d.component.validationErrors); var list = nf.Common.formatUnorderedList(d.component.validationErrors);
if (list === null || list.length === 0) { if (list === null || list.length === 0) {

View File

@ -302,9 +302,9 @@ nf.ProcessorPropertyTable = (function () {
var tooltip = nf.Common.formatPropertyTooltip(propertyDescriptor, propertyHistory); var tooltip = nf.Common.formatPropertyTooltip(propertyDescriptor, propertyHistory);
if (nf.Common.isDefinedAndNotNull(tooltip)) { if (nf.Common.isDefinedAndNotNull(tooltip)) {
infoIcon.qtip($.extend(nf.Common.config.tooltipConfig, { infoIcon.qtip($.extend({
content: tooltip content: tooltip
})); }, nf.Common.config.tooltipConfig));
} }
} }
}); });

View File

@ -437,7 +437,7 @@ nf.Processor = (function () {
.attr('id', function () { .attr('id', function () {
return 'run-status-tip-' + d.component.id; return 'run-status-tip-' + d.component.id;
}) })
.attr('class', 'tooltip') .attr('class', 'tooltip nifi-tooltip')
.html(function () { .html(function () {
var list = nf.Common.formatUnorderedList(d.component.validationErrors); var list = nf.Common.formatUnorderedList(d.component.validationErrors);
if (list === null || list.length === 0) { if (list === null || list.length === 0) {

View File

@ -231,9 +231,9 @@ nf.RemoteProcessGroupPorts = (function () {
editRemotePort.show(); editRemotePort.show();
} }
} else if (port.exists === false) { } else if (port.exists === false) {
$('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend(nf.Common.config.tooltipConfig, { $('<div class="remote-port-removed"/>').appendTo(portContainerEditContainer).qtip($.extend({
content: 'This port has been removed.' content: 'This port has been removed.'
})); }, nf.Common.config.tooltipConfig));
} }
// only allow modifications to transmission when the swtich is defined // only allow modifications to transmission when the swtich is defined
@ -364,13 +364,13 @@ nf.RemoteProcessGroupPorts = (function () {
// add this ports concurrent tasks // add this ports concurrent tasks
$('<div>' + $('<div>' +
'<div class="setting-name">' + '<div class="setting-name">' +
'Concurrent tasks' + 'Concurrent tasks' +
'<img class="processor-setting concurrent-tasks-info" src="images/iconInfo.png" alt="Info"/>' + '<img class="processor-setting concurrent-tasks-info" src="images/iconInfo.png" alt="Info"/>' +
'</div>' + '</div>' +
'</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('img.concurrent-tasks-info').qtip($.extend(nf.Common.config.tooltipConfig, { '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('img.concurrent-tasks-info').qtip($.extend({
content: 'The number of tasks that should be concurrently scheduled for this port.' content: 'The number of tasks that should be concurrently scheduled for this port.'
})); }, nf.Common.config.tooltipConfig));
var compressionContainer = $('<div class="compression-container"></div>').appendTo(portContainerDetailsContainer); var compressionContainer = $('<div class="compression-container"></div>').appendTo(portContainerDetailsContainer);

View File

@ -568,7 +568,7 @@ nf.RemoteProcessGroup = (function () {
.attr('id', function () { .attr('id', function () {
return 'authorization-issues-' + d.component.id; return 'authorization-issues-' + d.component.id;
}) })
.attr('class', 'tooltip') .attr('class', 'tooltip nifi-tooltip')
.html(function () { .html(function () {
var list = nf.Common.formatUnorderedList(d.status.authorizationIssues); var list = nf.Common.formatUnorderedList(d.status.authorizationIssues);
if (list === null || list.length === 0) { if (list === null || list.length === 0) {
@ -605,7 +605,7 @@ nf.RemoteProcessGroup = (function () {
.attr('id', function () { .attr('id', function () {
return 'transmission-secure-' + d.component.id; return 'transmission-secure-' + d.component.id;
}) })
.attr('class', 'tooltip') .attr('class', 'tooltip nifi-tooltip')
.text(function () { .text(function () {
if (d.component.targetSecure === true) { if (d.component.targetSecure === true) {
return 'Site-to-Site is secure.'; return 'Site-to-Site is secure.';

View File

@ -57,7 +57,7 @@ nf.Common = {
config: { config: {
tooltipConfig: { tooltipConfig: {
style: { style: {
classes: 'ui-tooltip-tipped ui-tooltip-shadow' classes: 'nifi-tooltip'
}, },
show: { show: {
solo: true, solo: true,

View File

@ -381,9 +381,9 @@ nf.ProcessorDetails = (function () {
var tooltip = nf.Common.formatPropertyTooltip(propertyDescriptor, propertyHistory); var tooltip = nf.Common.formatPropertyTooltip(propertyDescriptor, propertyHistory);
if (nf.Common.isDefinedAndNotNull(tooltip)) { if (nf.Common.isDefinedAndNotNull(tooltip)) {
infoIcon.qtip($.extend(nf.Common.config.tooltipConfig, { infoIcon.qtip($.extend({
content: tooltip content: tooltip
})); }, nf.Common.config.tooltipConfig));
} }
} }
}); });

View File

@ -424,7 +424,7 @@ nf.SummaryTable = (function () {
// show the tooltip // show the tooltip
if (nf.Common.isDefinedAndNotNull(tooltip)) { if (nf.Common.isDefinedAndNotNull(tooltip)) {
bulletinIcon.qtip($.extend(nf.Common.config.tooltipConfig, { bulletinIcon.qtip($.extend({
content: tooltip, content: tooltip,
position: { position: {
target: 'mouse', target: 'mouse',
@ -435,7 +435,7 @@ nf.SummaryTable = (function () {
method: 'flipinvert flipinvert' method: 'flipinvert flipinvert'
} }
} }
})); }, nf.Common.config.tooltipConfig));
} }
} }
}); });
@ -817,7 +817,7 @@ nf.SummaryTable = (function () {
// show the tooltip // show the tooltip
if (nf.Common.isDefinedAndNotNull(tooltip)) { if (nf.Common.isDefinedAndNotNull(tooltip)) {
bulletinIcon.qtip($.extend(nf.Common.config.tooltipConfig, { bulletinIcon.qtip($.extend({
content: tooltip, content: tooltip,
position: { position: {
target: 'mouse', target: 'mouse',
@ -828,7 +828,7 @@ nf.SummaryTable = (function () {
method: 'flipinvert flipinvert' method: 'flipinvert flipinvert'
} }
} }
})); }, nf.Common.config.tooltipConfig));
} }
} }
}); });
@ -1010,7 +1010,7 @@ nf.SummaryTable = (function () {
// show the tooltip // show the tooltip
if (nf.Common.isDefinedAndNotNull(tooltip)) { if (nf.Common.isDefinedAndNotNull(tooltip)) {
bulletinIcon.qtip($.extend(nf.Common.config.tooltipConfig, { bulletinIcon.qtip($.extend({
content: tooltip, content: tooltip,
position: { position: {
target: 'mouse', target: 'mouse',
@ -1021,7 +1021,7 @@ nf.SummaryTable = (function () {
method: 'flipinvert flipinvert' method: 'flipinvert flipinvert'
} }
} }
})); }, nf.Common.config.tooltipConfig));
} }
} }
}); });
@ -1243,7 +1243,7 @@ nf.SummaryTable = (function () {
// show the tooltip // show the tooltip
if (nf.Common.isDefinedAndNotNull(tooltip)) { if (nf.Common.isDefinedAndNotNull(tooltip)) {
bulletinIcon.qtip($.extend(nf.Common.config.tooltipConfig, { bulletinIcon.qtip($.extend({
content: tooltip, content: tooltip,
position: { position: {
target: 'mouse', target: 'mouse',
@ -1254,7 +1254,7 @@ nf.SummaryTable = (function () {
method: 'flipinvert flipinvert' method: 'flipinvert flipinvert'
} }
} }
})); }, nf.Common.config.tooltipConfig));
} }
} }
}); });