1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Merge pull request #3170 from node-red/switch-rule-type

Copy previous rule type when adding rule to switch node
This commit is contained in:
Nick O'Leary 2021-10-05 23:32:17 +01:00 committed by GitHub
commit db3688799d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 135 additions and 127 deletions

View File

@ -783,14 +783,14 @@
var typeChanged = !!previousType; var typeChanged = !!previousType;
if (typeChanged) { if (typeChanged) {
if (previousType.options) { if (previousType.options && opt.hasValue !== true) {
this.oldValues[previousType.value] = this.input.val(); this.oldValues[previousType.value] = this.input.val();
} else if (previousType.hasValue === false) { } else if (previousType.hasValue === false) {
this.oldValues[previousType.value] = this.input.val(); this.oldValues[previousType.value] = this.input.val();
} else { } else {
this.oldValues["_"] = this.input.val(); this.oldValues["_"] = this.input.val();
} }
if (opt.options || opt.hasValue === false) { if ((opt.options && opt.hasValue !== true) || opt.hasValue === false) {
this.input.val(this.oldValues.hasOwnProperty(opt.value)?this.oldValues[opt.value]:(opt.default||[]).join(",")) this.input.val(this.oldValues.hasOwnProperty(opt.value)?this.oldValues[opt.value]:(opt.default||[]).join(","))
} else { } else {
this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||"")) this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||""))
@ -1069,6 +1069,9 @@
}, },
disabled: function() { disabled: function() {
return this.uiSelect.attr("disabled") === "disabled"; return this.uiSelect.attr("disabled") === "disabled";
},
focus: function() {
this.input.focus();
} }
}); });
})(jQuery); })(jQuery);

View File

@ -17,11 +17,11 @@
<script type="text/html" data-template-name="switch"> <script type="text/html" data-template-name="switch">
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label> <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"> <input type="text" id="node-input-name" style="width: calc(100% - 105px)" data-i18n="[placeholder]common.label.name">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-property"><i class="fa fa-ellipsis-h"></i> <span data-i18n="switch.label.property"></span></label> <label for="node-input-property"><i class="fa fa-ellipsis-h"></i> <span data-i18n="switch.label.property"></span></label>
<input type="text" id="node-input-property" style="width: 70%"/> <input type="text" id="node-input-property" style="width: calc(100% - 105px)"/>
<input type="hidden" id="node-input-outputs"/> <input type="hidden" id="node-input-outputs"/>
</div> </div>
<div class="form-row node-input-rule-container-row"> <div class="form-row node-input-rule-container-row">
@ -66,6 +66,7 @@
{v:"else",t:"switch.rules.else",kind:'O'} {v:"else",t:"switch.rules.else",kind:'O'}
]; ];
var previousValueType = {value:"prev",label:RED._("node-red:switch.previous"),hasValue:false};
function clipValueLength(v) { function clipValueLength(v) {
if (v.length > 15) { if (v.length > 15) {
return v.substring(0,15)+"..."; return v.substring(0,15)+"...";
@ -86,6 +87,72 @@
} }
return clipValueLength(v); return clipValueLength(v);
} }
function exportRule(rule) {
var type = rule.find("select").val();
var r = {t:type};
if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else")) {
if ((type === "btwn") || (type === "index")) {
r.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
} else if ((type === "head") || (type === "tail")) {
r.v = rule.find(".node-input-rule-num-value").typedInput('value');
r.vt = rule.find(".node-input-rule-num-value").typedInput('type');
} else if (type === "istype") {
r.v = rule.find(".node-input-rule-type-value").typedInput('type');
r.vt = rule.find(".node-input-rule-type-value").typedInput('type');
} else if (type === "jsonata_exp") {
r.v = rule.find(".node-input-rule-exp-value").typedInput('value');
r.vt = rule.find(".node-input-rule-exp-value").typedInput('type');
} else {
r.v = rule.find(".node-input-rule-value").typedInput('value');
r.vt = rule.find(".node-input-rule-value").typedInput('type');
}
if (type === "regex") {
r.case = rule.find(".node-input-rule-case").prop("checked");
}
}
return r;
}
function createValueField(row){
return $('<input/>',{class:"node-input-rule-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
}
function createNumValueField(row){
return $('<input/>',{class:"node-input-rule-num-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'num',types:['flow','global','num','jsonata','env']});
}
function createExpValueField(row){
return $('<input/>',{class:"node-input-rule-exp-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'jsonata',types:['jsonata']});
}
function createBtwnValueField(row){
return $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
}
function createBtwnValue2Field(row3, andLabel){
$('<div/>',{class:"node-input-rule-btwn-label", style:"width: 120px; text-align: right;"}).text(" "+andLabel+" ").appendTo(row3);
var row3InputCell = $('<div/>',{style:"flex-grow:1; margin-left: 5px;"}).appendTo(row3);
return $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 100%"}).appendTo(row3InputCell).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
}
function createTypeValueField(){
return $('<input/>',{class:"node-input-rule-type-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'string',types:[
{value:"string",label:RED._("common.type.string"),hasValue:false,icon:"red/images/typedInput/az.png"},
{value:"number",label:RED._("common.type.number"),hasValue:false,icon:"red/images/typedInput/09.png"},
{value:"boolean",label:RED._("common.type.boolean"),hasValue:false,icon:"red/images/typedInput/bool.png"},
{value:"array",label:RED._("common.type.array"),hasValue:false,icon:"red/images/typedInput/json.png"},
{value:"buffer",label:RED._("common.type.buffer"),hasValue:false,icon:"red/images/typedInput/bin.png"},
{value:"object",label:RED._("common.type.object"),hasValue:false,icon:"red/images/typedInput/json.png"},
{value:"json",label:RED._("common.type.jsonString"),hasValue:false,icon:"red/images/typedInput/json.png"},
{value:"undefined",label:RED._("common.type.undefined"),hasValue:false},
{value:"null",label:RED._("common.type.null"),hasValue:false}
]});
}
RED.nodes.registerType('switch', { RED.nodes.registerType('switch', {
color: "#E2D96E", color: "#E2D96E",
category: 'function', category: 'function',
@ -127,7 +194,7 @@
}, },
oneditprepare: function() { oneditprepare: function() {
var node = this; var node = this;
var previousValueType = {value:"prev",label:this._("switch.previous"),hasValue:false};
$("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata','env']}); $("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata','env']});
var outputCount = $("#node-input-outputs").val("{}"); var outputCount = $("#node-input-outputs").val("{}");
@ -135,49 +202,25 @@
var andLabel = this._("switch.and"); var andLabel = this._("switch.and");
var caseLabel = this._("switch.ignorecase"); var caseLabel = this._("switch.ignorecase");
function resizeRule(rule) { $("#node-input-rule-container").css('min-height','150px').css('min-width','450px').editableList({
var newWidth = rule.width(); addItem: function(container,i,opt) {
var selectField = rule.find("select"); var focusValueField = false;
var type = selectField.val()||""; if (!opt.hasOwnProperty('r')) {
var valueField = rule.find(".node-input-rule-value"); opt.r = {};
var typeField = rule.find(".node-input-rule-type-value"); if (i > 0) {
var numField = rule.find(".node-input-rule-num-value"); var lastRule = $("#node-input-rule-container").editableList('getItemAt',i-1);
var expField = rule.find(".node-input-rule-exp-value"); var exportedRule = exportRule(lastRule.element);
var keyField = rule.find(".node-input-rule-key-value"); opt.r.vt = exportedRule.vt;
var btwnField1 = rule.find(".node-input-rule-btwn-value"); // We could copy the value over as well and preselect it (see the 'activeElement' code below)
var btwnField2 = rule.find(".node-input-rule-btwn-value2"); // But not sure that feels right. Is copying over the last value 'expected' behaviour?
var selectWidth; // It would make sense for an explicit 'copy' action, but not sure where the copy button would
if (type.length < 4) { // go for each rule without being wasted space for most users.
selectWidth = 60; // opt.r.v = exportedRule.v;
} else if (type === "regex") { focusValueField = true;
selectWidth = 147;
} else {
selectWidth = 120;
}
selectField.width(selectWidth);
if ((type === "btwn") || (type === "index")) {
btwnField1.typedInput("width",(newWidth-selectWidth-70));
btwnField2.typedInput("width",(newWidth-selectWidth-70));
} else if ((type === "head") || (type === "tail")) {
numField.typedInput("width",(newWidth-selectWidth-70));
} else if (type === "jsonata_exp") {
expField.typedInput("width",(newWidth-selectWidth-70));
} else if (type === "istype") {
typeField.typedInput("width",(newWidth-selectWidth-70));
} else {
if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else") {
// valueField.hide();
} else {
valueField.typedInput("width",(newWidth-selectWidth-70));
}
} }
} }
$("#node-input-rule-container").css('min-height','150px').css('min-width','450px').editableList({ opt.element = container;
addItem: function(container,i,opt) {
if (!opt.hasOwnProperty('r')) {
opt.r = {};
}
var rule = opt.r; var rule = opt.r;
if (!rule.hasOwnProperty('t')) { if (!rule.hasOwnProperty('t')) {
rule.t = 'eq'; rule.t = 'eq';
@ -187,12 +230,16 @@
} }
container.css({ container.css({
overflow: 'hidden', overflow: 'hidden',
whiteSpace: 'nowrap' whiteSpace: 'nowrap',
display: "flex",
"align-items":"center"
}); });
var row = $('<div/>').appendTo(container); var inputRows = $('<div></div>',{style:"flex-grow:1"}).appendTo(container);
var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container); var row = $('<div></div>',{style:"display: flex;"}).appendTo(inputRows);
var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container); var row2 = $('<div/>',{style:"display: flex; padding-top: 5px; padding-left: 175px;"}).appendTo(inputRows);
var selectField = $('<select/>',{style:"width:120px; margin-left: 5px; text-align: center;"}).appendTo(row); var row3 = $('<div/>',{style:"display: flex; padding-top: 5px; align-items: center"}).appendTo(inputRows);
var selectField = $('<select/>',{style:"width:120px; text-align: center;"}).appendTo(row);
var group0 = $('<optgroup/>', { label: "value rules" }).appendTo(selectField); var group0 = $('<optgroup/>', { label: "value rules" }).appendTo(selectField);
for (var d in operators) { for (var d in operators) {
if(operators[d].kind === 'V') { if(operators[d].kind === 'V') {
@ -211,43 +258,8 @@
} }
} }
function createValueField(){ var rowInputCell = $('<div>',{style:"flex-grow:1; margin-left: 5px;"}).appendTo(row);
return $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
}
function createNumValueField(){
return $('<input/>',{class:"node-input-rule-num-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['flow','global','num','jsonata','env']});
}
function createExpValueField(){
return $('<input/>',{class:"node-input-rule-exp-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'jsonata',types:['jsonata']});
}
function createBtwnValueField(){
return $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
}
function createBtwnAndLabel(){
return $('<span/>',{class:"node-input-rule-btwn-label"}).text(" "+andLabel+" ").appendTo(row3);
}
function createBtwnValue2Field(){
return $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
}
function createTypeValueField(){
return $('<input/>',{class:"node-input-rule-type-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'string',types:[
{value:"string",label:RED._("common.type.string"),hasValue:false,icon:"red/images/typedInput/az.png"},
{value:"number",label:RED._("common.type.number"),hasValue:false,icon:"red/images/typedInput/09.png"},
{value:"boolean",label:RED._("common.type.boolean"),hasValue:false,icon:"red/images/typedInput/bool.png"},
{value:"array",label:RED._("common.type.array"),hasValue:false,icon:"red/images/typedInput/json.png"},
{value:"buffer",label:RED._("common.type.buffer"),hasValue:false,icon:"red/images/typedInput/bin.png"},
{value:"object",label:RED._("common.type.object"),hasValue:false,icon:"red/images/typedInput/json.png"},
{value:"json",label:RED._("common.type.jsonString"),hasValue:false,icon:"red/images/typedInput/json.png"},
{value:"undefined",label:RED._("common.type.undefined"),hasValue:false},
{value:"null",label:RED._("common.type.null"),hasValue:false}
]});
}
var valueField = null; var valueField = null;
var numValueField = null; var numValueField = null;
@ -257,11 +269,14 @@
var btwnValue2Field = null; var btwnValue2Field = null;
var typeValueField = null; var typeValueField = null;
var finalspan = $('<span/>',{style:"float: right;margin-top: 6px;"}).appendTo(row); var finalspan = $('<span/>',{style:"margin-left: 5px;"}).appendTo(container);
finalspan.append(' &#8594; <span class="node-input-rule-index">'+(i+1)+'</span> '); finalspan.append(' &#8594; <span class="node-input-rule-index">'+(i+1)+'</span> ');
var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2); var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2);
$('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2); $('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2);
selectField.on("change", function() { selectField.on("change", function() {
var fieldToFocus;
var type = selectField.val(); var type = selectField.val();
if (valueField){ if (valueField){
valueField.typedInput('hide'); valueField.typedInput('hide');
@ -284,29 +299,35 @@
if ((type === "btwn") || (type === "index")) { if ((type === "btwn") || (type === "index")) {
if (!btwnValueField){ if (!btwnValueField){
btwnValueField = createBtwnValueField(); btwnValueField = createBtwnValueField(rowInputCell);
} }
btwnValueField.typedInput('show'); btwnValueField.typedInput('show');
fieldToFocus = btwnValueField;
} else if ((type === "head") || (type === "tail")) { } else if ((type === "head") || (type === "tail")) {
if (!numValueField){ if (!numValueField){
numValueField = createNumValueField(); numValueField = createNumValueField(rowInputCell);
} }
numValueField.typedInput('show'); numValueField.typedInput('show');
fieldToFocus = numValueField;
} else if (type === "jsonata_exp") { } else if (type === "jsonata_exp") {
if (!expValueField){ if (!expValueField){
expValueField = createExpValueField(); expValueField = createExpValueField(rowInputCell);
} }
expValueField.typedInput('show'); expValueField.typedInput('show');
fieldToFocus = expValueField;
} else if (type === "istype") { } else if (type === "istype") {
if (!typeValueField){ if (!typeValueField){
typeValueField = createTypeValueField(); typeValueField = createTypeValueField();
} }
typeValueField.typedInput('show'); typeValueField.typedInput('show');
fieldToFocus = typeValueField;
} else if (! (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else" )) { } else if (! (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else" )) {
if (!valueField){ if (!valueField){
valueField = createValueField(); valueField = createValueField(rowInputCell);
} }
valueField.typedInput('show'); valueField.typedInput('show');
fieldToFocus = valueField;
} }
if (type === "regex") { if (type === "regex") {
row2.show(); row2.show();
@ -315,32 +336,44 @@
row2.hide(); row2.hide();
row3.show(); row3.show();
if (!btwnValue2Field){ if (!btwnValue2Field){
btwnValue2Field = createBtwnValue2Field(); btwnValue2Field = createBtwnValue2Field(row3, andLabel);
} }
btwnValue2Field.typedInput('show'); btwnValue2Field.typedInput('show');
} else { } else {
row2.hide(); row2.hide();
row3.hide(); row3.hide();
} }
resizeRule(container); var selectedLabel = selectField.find("option:selected").text();
if (selectedLabel.length <= 5) {
selectField.outerWidth(60);
} else if (selectedLabel.length < 12) {
selectField.outerWidth(120);
} else {
selectField.width("auto")
}
fieldToFocus.typedInput("focus");
// Preselect the contents of the element
// if (focusValueField && document.activeElement) {
// document.activeElement.selectionStart = 0;
// document.activeElement.selectionEnd = document.activeElement.value.length;
// }
}); });
selectField.val(rule.t); selectField.val(rule.t);
if ((rule.t == "btwn") || (rule.t == "index")) { if ((rule.t == "btwn") || (rule.t == "index")) {
if (!btwnValueField){ if (!btwnValueField){
btwnValueField = createBtwnValueField(); btwnValueField = createBtwnValueField(rowInputCell);
} }
btwnValueField.typedInput('value',rule.v); btwnValueField.typedInput('value',rule.v);
btwnValueField.typedInput('type',rule.vt||'num'); btwnValueField.typedInput('type',rule.vt||'num');
if (!btwnValue2Field){ if (!btwnValue2Field){
btwnValue2Field = createBtwnValue2Field(); btwnValue2Field = createBtwnValue2Field(row3, andLabel);
} }
btwnValue2Field.typedInput('value',rule.v2); btwnValue2Field.typedInput('value',rule.v2);
btwnValue2Field.typedInput('type',rule.v2t||'num'); btwnValue2Field.typedInput('type',rule.v2t||'num');
} else if ((rule.t === "head") || (rule.t === "tail")) { } else if ((rule.t === "head") || (rule.t === "tail")) {
if (!numValueField){ if (!numValueField){
numValueField = createNumValueField(); numValueField = createNumValueField(row);
} }
numValueField.typedInput('value',rule.v); numValueField.typedInput('value',rule.v);
numValueField.typedInput('type',rule.vt||'num'); numValueField.typedInput('type',rule.vt||'num');
@ -352,13 +385,13 @@
typeValueField.typedInput('type',rule.vt); typeValueField.typedInput('type',rule.vt);
} else if (rule.t === "jsonata_exp") { } else if (rule.t === "jsonata_exp") {
if (!expValueField){ if (!expValueField){
expValueField = createExpValueField(); expValueField = createExpValueField(row);
} }
expValueField.typedInput('value',rule.v); expValueField.typedInput('value',rule.v);
expValueField.typedInput('type',rule.vt||'jsonata'); expValueField.typedInput('type',rule.vt||'jsonata');
} else if (typeof rule.v != "undefined") { } else if (typeof rule.v != "undefined") {
if (!valueField){ if (!valueField){
valueField = createValueField(); valueField = createValueField(rowInputCell);
} }
valueField.typedInput('value',rule.v); valueField.typedInput('value',rule.v);
valueField.typedInput('type',rule.vt||'str'); valueField.typedInput('type',rule.vt||'str');
@ -389,7 +422,6 @@
}); });
outputCount.val(JSON.stringify(currentOutputs)); outputCount.val(JSON.stringify(currentOutputs));
}, },
resizeItem: resizeRule,
sortItems: function(rules) { sortItems: function(rules) {
var currentOutputs = JSON.parse(outputCount.val()||"{}"); var currentOutputs = JSON.parse(outputCount.val()||"{}");
var rules = $("#node-input-rule-container").editableList('items'); var rules = $("#node-input-rule-container").editableList('items');
@ -414,34 +446,7 @@
var node = this; var node = this;
node.rules = []; node.rules = [];
rules.each(function(i) { rules.each(function(i) {
var ruleData = $(this).data('data'); node.rules.push(exportRule($(this)));
var rule = $(this);
var type = rule.find("select").val();
var r = {t:type};
if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else")) {
if ((type === "btwn") || (type === "index")) {
r.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
} else if ((type === "head") || (type === "tail")) {
r.v = rule.find(".node-input-rule-num-value").typedInput('value');
r.vt = rule.find(".node-input-rule-num-value").typedInput('type');
} else if (type === "istype") {
r.v = rule.find(".node-input-rule-type-value").typedInput('type');
r.vt = rule.find(".node-input-rule-type-value").typedInput('type');
} else if (type === "jsonata_exp") {
r.v = rule.find(".node-input-rule-exp-value").typedInput('value');
r.vt = rule.find(".node-input-rule-exp-value").typedInput('type');
} else {
r.v = rule.find(".node-input-rule-value").typedInput('value');
r.vt = rule.find(".node-input-rule-value").typedInput('type');
}
if (type === "regex") {
r.case = rule.find(".node-input-rule-case").prop("checked");
}
}
node.rules.push(r);
}); });
this.propertyType = $("#node-input-property").typedInput('type'); this.propertyType = $("#node-input-property").typedInput('type');
}, },

View File

@ -7,7 +7,7 @@
</style> </style>
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label> <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"> <input type="text" id="node-input-name" style="width: calc(100% - 105px)" data-i18n="[placeholder]common.label.name">
</div> </div>
<div class="form-row" style="margin-bottom:0;"> <div class="form-row" style="margin-bottom:0;">
<label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label> <label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>