Repository: nifi Updated Branches: refs/heads/master da33e2859 -> 6ad633d17
[NIFI-2838] update width of rule name and save message. This closes #1089 Project: http://git-wip-us.apache.org/repos/asf/nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/6ad633d1 Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/6ad633d1 Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/6ad633d1 Branch: refs/heads/master Commit: 6ad633d17422f2110645553cb03ae3b364926eee Parents: da33e28 Author: Scott Aslan <scottyas...@gmail.com> Authored: Wed Oct 5 16:00:34 2016 -0400 Committer: Matt Gilman <matt.c.gil...@gmail.com> Committed: Wed Oct 5 16:40:06 2016 -0400 ---------------------------------------------------------------------- .../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(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi/blob/6ad633d1/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..cf6a7a6 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 { http://git-wip-us.apache.org/repos/asf/nifi/blob/6ad633d1/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/WEB-INF/jsp/worksheet.jsp ---------------------------------------------------------------------- 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 544d706..520b842 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 @@ <div class="clear"></div> </div> <div id="message-and-save-container"> - <div id="selected-rule-save" class="button hidden">Save</div> <div id="message"></div> - <div class="clear"></div> + <div id="selected-rule-save" class="button hidden">Save</div> </div> <div class="clear"></div> <div id="glass-pane"></div> http://git-wip-us.apache.org/repos/asf/nifi/blob/6ad633d1/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css ---------------------------------------------------------------------- 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 c56eafa..b5d315c 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 { http://git-wip-us.apache.org/repos/asf/nifi/blob/6ad633d1/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/js/application.js ---------------------------------------------------------------------- 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 d680067..3f85f07 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); },
