[NIFI-3154] display ellipsis when text is sufficiently long in connection details and connection configuration dialogs. This closes #1305
Project: http://git-wip-us.apache.org/repos/asf/nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/7c213deb Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/7c213deb Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/7c213deb Branch: refs/heads/support/nifi-1.0.x Commit: 7c213deb6ba001169c27b97a4f28608851582902 Parents: ed17df5 Author: Scott Aslan <scottyas...@gmail.com> Authored: Thu Dec 8 10:46:26 2016 -0500 Committer: jpercivall <jperciv...@apache.org> Committed: Wed Dec 14 16:23:55 2016 -0500 ---------------------------------------------------------------------- .../canvas/connection-configuration.jsp | 18 ++++----- .../WEB-INF/partials/connection-details.jsp | 4 +- .../src/main/webapp/css/common-ui.css | 1 + .../webapp/css/connection-configuration.css | 2 - .../src/main/webapp/css/connection-details.css | 2 - .../main/webapp/css/processor-configuration.css | 1 + .../js/nf/canvas/nf-connection-configuration.js | 14 +++---- .../main/webapp/js/nf/nf-connection-details.js | 40 ++++++++++---------- 8 files changed, 40 insertions(+), 42 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp index a93bea0..9e65743 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp @@ -95,7 +95,7 @@ <div id="read-only-output-port-source" class="setting hidden"> <div class="setting-name">From output</div> <div class="setting-field connection-terminal-label"> - <div id="read-only-output-port-name"></div> + <div id="read-only-output-port-name" class="ellipsis"></div> </div> </div> <div id="output-port-source" class="setting hidden"> @@ -107,21 +107,21 @@ <div id="input-port-source" class="setting hidden"> <div class="setting-name">From input</div> <div class="setting-field connection-terminal-label"> - <div id="input-port-source-name" class="label"></div> + <div id="input-port-source-name" class="label ellipsis"></div> </div> </div> <div id="funnel-source" class="setting hidden"> <div class="setting-name">From funnel</div> <div class="setting-field connection-terminal-label"> - <div id="funnel-source-name" class="label">funnel</div> + <div id="funnel-source-name" class="label ellipsis" title="funnel">funnel</div> </div> </div> <div id="processor-source" class="setting hidden"> <div class="setting-name">From processor</div> <div class="setting-field connection-terminal-label"> <div id="processor-source-details"> - <div id="processor-source-name" class="label"></div> - <div id="processor-source-type"></div> + <div id="processor-source-name" class="label ellipsis"></div> + <div id="processor-source-type" class="ellipsis"></div> </div> </div> </div> @@ -149,21 +149,21 @@ <div id="output-port-destination" class="setting hidden"> <div class="setting-name">To output</div> <div class="setting-field connection-terminal-label"> - <div id="output-port-destination-name" class="label"></div> + <div id="output-port-destination-name" class="label ellipsis"></div> </div> </div> <div id="funnel-destination" class="setting hidden"> <div class="setting-name">To funnel</div> <div class="setting-field connection-terminal-label"> - <div id="funnel-source-name" class="label">funnel</div> + <div id="funnel-destination-name" class="label ellipsis" title="funnel">funnel</div> </div> </div> <div id="processor-destination" class="setting hidden"> <div class="setting-name">To processor</div> <div class="setting-field connection-terminal-label"> <div id="processor-destination-details"> - <div id="processor-destination-name" class="label"></div> - <div id="processor-destination-type"></div> + <div id="processor-destination-name" class="label ellipsis"></div> + <div id="processor-destination-type" class="ellipsis"></div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp index 2bbd480..f7637a2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp @@ -24,7 +24,7 @@ <div class="setting"> <div id="read-only-connection-source-label" class="setting-name"></div> <div class="setting-field connection-terminal-label"> - <div id="read-only-connection-source"></div> + <div id="read-only-connection-source" class="ellipsis"></div> </div> </div> <div class="setting"> @@ -48,7 +48,7 @@ <div class="setting"> <div id="read-only-connection-target-label" class="setting-name"></div> <div class="setting-field connection-terminal-label"> - <div id="read-only-connection-target"></div> + <div id="read-only-connection-target" class="ellipsis"></div> </div> </div> <div class="setting"> http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css ---------------------------------------------------------------------- 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 9eac226..7dec556 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 @@ -162,6 +162,7 @@ ul.links span.header-link-over { .ellipsis { white-space: nowrap; overflow: hidden; + text-overflow: ellipsis; } .ellipsis.multiline { http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css index 30487f9..b18da8d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css @@ -46,7 +46,6 @@ div.connection-terminal-label { #relationship-names { padding: 2px; height: 150px; - width: 274px; overflow-y: auto; overflow-x: hidden; border: 0 solid #cccccc; @@ -61,7 +60,6 @@ div.available-relationship-container { #connection-configuration div.relationship-name { display: inline-block; line-height: normal; - width: 240px; } #connection-name-container { http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css index 61d9109..ce94485 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css @@ -35,11 +35,9 @@ overflow-x: hidden; overflow-y: auto; padding: 2px 2px 0; - width: 274px; } #connection-details div.relationship-name { display: inline-block; line-height: normal; - width: 240px; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css ---------------------------------------------------------------------- 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 e03a698..0115287 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 @@ -110,6 +110,7 @@ div.relationship-description { #run-duration-slider { margin-top: 5px; border-radius: 0; + margin-right: 2px; } #run-duration-slider .ui-slider-handle { http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js index b9672a2..74fc03d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js @@ -189,7 +189,7 @@ nf.ConnectionConfiguration = (function () { // populate the port information $('#input-port-source').show(); - $('#input-port-source-name').text(inputPortName); + $('#input-port-source-name').text(inputPortName).attr('title', inputPortName); // populate the connection source details $('#connection-source-id').val(inputPortData.id); @@ -244,8 +244,8 @@ nf.ConnectionConfiguration = (function () { // populate the source processor information $('#processor-source').show(); - $('#processor-source-name').text(processorName); - $('#processor-source-type').text(processorType); + $('#processor-source-name').text(processorName).attr('title', processorName); + $('#processor-source-type').text(processorType).attr('title', processorType); // populate the connection source details $('#connection-source-id').val(processorData.id); @@ -443,7 +443,7 @@ nf.ConnectionConfiguration = (function () { var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id; $('#output-port-destination').show(); - $('#output-port-destination-name').text(outputPortName); + $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName); // populate the connection destination details $('#connection-destination-id').val(outputPortData.id); @@ -482,8 +482,8 @@ nf.ConnectionConfiguration = (function () { var processorType = processorData.permissions.canRead ? nf.Common.substringAfterLast(processorData.component.type, '.') : 'Processor'; $('#processor-destination').show(); - $('#processor-destination-name').text(processorName); - $('#processor-destination-type').text(processorType); + $('#processor-destination-name').text(processorName).attr('title', processorName); + $('#processor-destination-type').text(processorType).attr('title', processorType); // populate the connection destination details $('#connection-destination-id').val(processorData.id); @@ -1307,7 +1307,7 @@ nf.ConnectionConfiguration = (function () { if (nf.CanvasUtils.isProcessGroup(source) || nf.CanvasUtils.isRemoteProcessGroup(source)) { // populate the connection source details $('#connection-source-id').val(connection.source.id); - $('#read-only-output-port-name').text(connection.source.name); + $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name); } // if the destination is a process gorup or remote process group, select the appropriate port if applicable http://git-wip-us.apache.org/repos/asf/nifi/blob/7c213deb/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js index 7c671ab..caed999 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js @@ -53,8 +53,8 @@ nf.ConnectionDetails = (function () { dataType: 'json' }).done(function (response) { var processor = response.component; - var processorName = $('<div class="label"></div>').text(processor.name); - var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')); + var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name); + var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.')); // populate source processor details $('#read-only-connection-source-label').text('From processor'); @@ -64,8 +64,8 @@ nf.ConnectionDetails = (function () { deferred.resolve(); }).fail(function (xhr, status, error) { if (xhr.status === 403) { - var processorName = $('<div class="label"></div>').text(source.name); - var processorType = $('<div></div>').text('Processor'); + var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name); + var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor'); // populate source processor details $('#read-only-connection-source-label').text('From processor'); @@ -90,7 +90,7 @@ nf.ConnectionDetails = (function () { var initializeSourceFunnel = function (groupId, groupName, source) { return $.Deferred(function (deferred) { $('#read-only-connection-source-label').text('From funnel'); - $('#read-only-connection-source').append('funnel'); + $('#read-only-connection-source').text('funnel').attr('title', 'funnel'); $('#read-only-connection-source-group-name').text(groupName); deferred.resolve(); }).promise(); @@ -114,13 +114,13 @@ nf.ConnectionDetails = (function () { // populate source port details $('#read-only-connection-source-label').text('From output'); - $('#read-only-connection-source').text(source.name); + $('#read-only-connection-source').text(source.name).attr('title', source.name); $('#read-only-connection-source-group-name').text(remoteProcessGroup.name); }).fail(function (xhr, status, error) { if (xhr.status === 403) { // populate source processor details $('#read-only-connection-source-label').text('From output'); - $('#read-only-connection-source').append(source.name); + $('#read-only-connection-source').text(source.name).attr('title', source.name); $('#read-only-connection-source-group-name').text(source.groupId); deferred.resolve(); @@ -143,7 +143,7 @@ nf.ConnectionDetails = (function () { if (groupId === source.groupId) { // populate source port details $('#read-only-connection-source-label').text('From input'); - $('#read-only-connection-source').text(source.name); + $('#read-only-connection-source').text(source.name).attr('title', source.name); $('#read-only-connection-source-group-name').text(groupName); deferred.resolve(); @@ -157,7 +157,7 @@ nf.ConnectionDetails = (function () { // populate source port details $('#read-only-connection-source-label').text('From output'); - $('#read-only-connection-source').text(source.name); + $('#read-only-connection-source').text(source.name).attr('title', source.name); $('#read-only-connection-source-group-name').text(processGroup.name); deferred.resolve(); @@ -165,7 +165,7 @@ nf.ConnectionDetails = (function () { if (xhr.status === 403) { // populate source processor details $('#read-only-connection-source-label').text('From output'); - $('#read-only-connection-source').append(source.name); + $('#read-only-connection-source').text(source.name).attr('title', source.name); $('#read-only-connection-source-group-name').text(source.groupId); deferred.resolve(); @@ -211,8 +211,8 @@ nf.ConnectionDetails = (function () { dataType: 'json' }).done(function (response) { var processor = response.component; - var processorName = $('<div class="label"></div>').text(processor.name); - var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')); + var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name); + var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.')); // populate destination processor details $('#read-only-connection-target-label').text('To processor'); @@ -222,8 +222,8 @@ nf.ConnectionDetails = (function () { deferred.resolve(); }).fail(function (xhr, status, error) { if (xhr.status === 403) { - var processorName = $('<div class="label"></div>').text(destination.name); - var processorType = $('<div></div>').text('Processor'); + var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name); + var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor'); // populate destination processor details $('#read-only-connection-target-label').text('To processor'); @@ -248,7 +248,7 @@ nf.ConnectionDetails = (function () { var initializeDestinationFunnel = function (groupId, groupName, destination) { return $.Deferred(function (deferred) { $('#read-only-connection-target-label').text('To funnel'); - $('#read-only-connection-target').append('funnel'); + $('#read-only-connection-target').text('funnel').attr('title', 'funnel'); $('#read-only-connection-target-group-name').text(groupName); deferred.resolve(); }).promise(); @@ -272,7 +272,7 @@ nf.ConnectionDetails = (function () { // populate source port details $('#read-only-connection-target-label').text('To input'); - $('#read-only-connection-target').text(destination.name); + $('#read-only-connection-target').text(destination.name).attr('title', destination.name); $('#read-only-connection-target-group-name').text(remoteProcessGroup.name); deferred.resolve(); @@ -280,7 +280,7 @@ nf.ConnectionDetails = (function () { if (xhr.status === 403) { // populate source port details $('#read-only-connection-target-label').text('To input'); - $('#read-only-connection-target').append(destination.name); + $('#read-only-connection-target').text(destination.name).attr('title', destination.name); $('#read-only-connection-target-group-name').text(destination.groupId); deferred.resolve(); @@ -303,7 +303,7 @@ nf.ConnectionDetails = (function () { if (groupId === destination.groupId) { // populate destination port details $('#read-only-connection-target-label').text('To output'); - $('#read-only-connection-target').text(destination.name); + $('#read-only-connection-target').text(destination.name).attr('title', destination.name); $('#read-only-connection-target-group-name').text(groupName); deferred.resolve(); @@ -317,7 +317,7 @@ nf.ConnectionDetails = (function () { // populate destination port details $('#read-only-connection-target-label').text('To input'); - $('#read-only-connection-target').text(destination.name); + $('#read-only-connection-target').text(destination.name).attr('title', destination.name); $('#read-only-connection-target-group-name').text(processGroup.name); deferred.resolve(); @@ -325,7 +325,7 @@ nf.ConnectionDetails = (function () { if (xhr.status === 403) { // populate source port details $('#read-only-connection-target-label').text('To input'); - $('#read-only-connection-target').append(destination.name); + $('#read-only-connection-target').text(destination.name).attr('title', destination.name); $('#read-only-connection-target-group-name').text(destination.groupId); deferred.resolve();