From 6ad633d17422f2110645553cb03ae3b364926eee Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Wed, 5 Oct 2016 16:00:34 -0400 Subject: [PATCH] [NIFI-2838] update width of rule name and save message. This closes #1089 --- .../src/main/webapp/css/common-ui.css | 5 ++- .../src/main/webapp/WEB-INF/jsp/worksheet.jsp | 3 +- .../src/main/webapp/css/main.css | 12 ++++-- .../src/main/webapp/js/application.js | 37 ++++++++++++------- 4 files changed, 37 insertions(+), 20 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 9eac22615e..cf6a7a6558 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 @@ -208,7 +208,7 @@ input[type=text], input[type=password], textarea { border: 1px solid #eaeef0; font-family: Roboto, sans-serif; font-size: 13px; - padding: 0px 0px 0px 10px; + padding: 0px 10px 0px 10px; resize: none; height: 32px; width: 100%; @@ -216,6 +216,9 @@ input[type=text], input[type=password], textarea { -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; color: #262626; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } input:focus, textarea:focus { diff --git a/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/WEB-INF/jsp/worksheet.jsp b/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/WEB-INF/jsp/worksheet.jsp index 544d7060d9..520b8425b1 100644 --- a/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/WEB-INF/jsp/worksheet.jsp +++ b/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/WEB-INF/jsp/worksheet.jsp @@ -125,9 +125,8 @@
-
-
+
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 c56eafa09c..b5d315cb27 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 @@ -135,6 +135,7 @@ div.label { padding: 0px 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.4); margin-bottom: 5px; + display: flex; } #rule-list li.selected { @@ -158,6 +159,7 @@ div.label { div.rule-label { float: left; + flex-grow: 1; } div.remove-rule { @@ -249,11 +251,14 @@ div.large-label-container { #message { color: #ba554a; margin-left: 20px; - float: right; margin-right: 20px; - line-height: 28px; + line-height: 32px; font-size: 13px; font-weight: bold; + flex-grow: 1; + overflow: auto; + width: 100%; + height: 41px; } #message-and-save-container { @@ -261,11 +266,12 @@ div.large-label-container { right: 0px; left: 0px; bottom: 0px; + display: flex; } #selected-rule-save { margin-right: 20px; - float: right; + margin-top: 10px; } input.editor-text { diff --git a/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/js/application.js b/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/js/application.js index d680067482..3f85f070fa 100644 --- a/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/js/application.js +++ b/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/js/application.js @@ -22,6 +22,27 @@ $(document).ready(function () { ua.init(); }); +/** + * Determine if an `element` has content overflow and adds a colored bottom border if it does. + * + * @param {HTMLElement} element The DOM element to toggle .scrollable upon. + */ +var toggleScrollable = function (element) { + if ($(element).is(':visible')){ + if (element.offsetHeight < element.scrollHeight || + element.offsetWidth < element.scrollWidth) { + // your element has overflow + $(element).css({ + 'border-bottom': '1px solid #d0dbe0' + }); + } else { + $(element).css({ + 'border-bottom': '1px solid #ffffff' + }); + } + } +}; + var ua = { newRuleIndex: 0, editable: false, @@ -44,18 +65,6 @@ var ua = { var conditionsGrid = ua.initConditionsGrid(); var actionsGrid = ua.initActionsGrid(); - var toggleScrollable = function(element) { - if ($(element).is(':visible')){ - if (element.offsetHeight < element.scrollHeight || - element.offsetWidth < element.scrollWidth) { - // your element has overflow - $(element).addClass('scrollable'); - } else { - $(element).removeClass('scrollable'); - } - } - }; - // enable grid resizing $(window).resize(function (e) { if (e.target === window) { @@ -1519,9 +1528,9 @@ var ua = { * @returns {undefined} */ showMessage: function (text) { - $('#message').text(text); + toggleScrollable($('#message').text(text).get(0)); setTimeout(function () { - $('#message').text(''); + toggleScrollable($('#message').text('').get(0)); }, 10000); },