[NIFI-2838] update width of rule name and save message. This closes #1089

This commit is contained in:
Scott Aslan 2016-10-05 16:00:34 -04:00 committed by Matt Gilman
parent da33e2859c
commit 6ad633d174
4 changed files with 37 additions and 20 deletions

View File

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

View File

@ -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>

View File

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

View File

@ -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);
},