ui: bootgrid tooltip improvements and missing action button conversions; closes #4608

This commit is contained in:
Franco Fichtner 2021-06-24 14:05:23 +02:00
parent 115761b143
commit 42dcb68784
13 changed files with 52 additions and 56 deletions

View File

@ -62,7 +62,7 @@ POSSIBILITY OF SUCH DAMAGE.
multiSelect: true,
formatters: {
"commands": function (column, row) {
return '<button type="button" class="btn btn-xs btn-default command-disconnect" data-toggle="tooltip" title="{{ lang._('Disconnect') }}" data-row-id="' + row.sessionId + '"><span class="fa fa-trash-o fa-fw"></span></button>';
return '<button type="button" class="btn btn-xs btn-default command-disconnect bootgrid-tooltip" title="{{ lang._('Disconnect') }}" data-row-id="' + row.sessionId + '"><span class="fa fa-trash-o fa-fw"></span></button>';
}
}
};

View File

@ -192,8 +192,8 @@
<tr>
<td></td>
<td>
<button id="addTemplateAct" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
<button id="downloadTemplateAct" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-download"></span></button>
<button id="addTemplateAct" type="button" class="btn btn-xs btn-primary bootgrid-tooltip" title="{{ lang._('Add template') }}"><span class="fa fa-fw fa-plus"></span></button>
<button id="downloadTemplateAct" type="button" class="btn btn-xs btn-default bootgrid-tooltip" title="{{ lang._('Download default template') }}"><span class="fa fa-fw fa-download"></span></button>
</td>
</tr>
</tfoot>

View File

@ -87,11 +87,6 @@ POSSIBILITY OF SUCH DAMAGE.
ajax: false,
selection: true,
multiSelect: true,
formatters: {
"commands": function (column, row) {
return "<button type=\"button\" class=\"btn btn-xs btn-default command-remove\" data-row-id=\"" + row.username + "\"><span class=\"fa fa-trash-o\"></span></button>";
}
},
converters: {
// convert datetime type fields from unix timestamp to readable format
datetime: {

View File

@ -37,7 +37,7 @@
options:{
formatters:{
commands: function (column, row) {
return '<button type="button" class="btn btn-xs btn-default command-delete" data-toggle="tooltip" title="{{ lang._('Drop') }}" data-row-id="' + row.id + '"><span class="fa fa-trash-o fa-fw"></span></button>';
return '<button type="button" class="btn btn-xs btn-default command-delete bootgrid-tooltip" title="{{ lang._('Drop') }}" data-row-id="' + row.id + '"><span class="fa fa-trash-o fa-fw"></span></button>';
},
rule: function (column, row) {
if (row.label !== "") {

View File

@ -35,9 +35,8 @@
formatters:{
page: function (column, row) {
if ($("input.search-field").val() !== "") {
return "<button type=\"button\" class=\"btn btn-xs btn-default action-page\" data-row-id=\"" +
row.rnum +
"\"><span class=\"fa fa-arrow-right fa-fw\"></span></button>";
return '<button type="button" class="btn btn-xs btn-default action-page bootgrid-tooltip" data-row-id="' +
row.rnum + '" title="{{ lang._('Go to page') }}"><span class="fa fa-arrow-right fa-fw"></span></button>';
} else {
return "";
}

View File

@ -35,8 +35,8 @@ POSSIBILITY OF SUCH DAMAGE.
formatters: {
"commands": function (column, row) {
return "<button type=\"button\" \
class=\"btn btn-xs btn-default command-delete\" \
data-row-id=\"" + row.destination + "," + row.gateway +"\"><span class=\"fa fa-trash-o\"></span></button>";
class=\"btn btn-xs btn-default command-delete bootgrid-tooltip\" \
data-row-id=\"" + row.destination + "," + row.gateway +"\"><span class=\"fa fa-trash-o fa-fw\"></span></button>";
}
}
}).on("loaded.rs.jquery.bootgrid", function(){

View File

@ -17,7 +17,7 @@
rowCount: [20, 50, 100, 200, -1],
formatters: {
commands: function (column, row) {
return '<button type="button" class="btn btn-xs btn-default delete-ip" data-row-id="' + row.ip + '"><span class="fa fa-fw fa-trash-o"></span></button>';
return '<button type="button" class="btn btn-xs btn-default delete-ip bootgrid-tooltip" title="{{ lang._('Delete') }}" data-row-id="' + row.ip + '"><span class="fa fa-fw fa-trash-o"></span></button>';
},
}
}

View File

@ -49,9 +49,9 @@
}
},
commands: function (column, row) {
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-pencil\"></span></button> " +
"<button type=\"button\" class=\"btn btn-xs btn-default command-copy\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-clone\"></span></button>" +
"<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-trash-o\"></span></button>";
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit bootgrid-tooltip\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-pencil fa-fw\"></span></button> " +
"<button type=\"button\" class=\"btn btn-xs btn-default command-copy bootgrid-tooltip\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-clone fa-fw\"></span></button>" +
"<button type=\"button\" class=\"btn btn-xs btn-default command-delete bootgrid-tooltip\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-trash-o fa-fw\"></span></button>";
},
boolean: function (column, row) {
if (parseInt(row[column.id], 2) === 1) {
@ -107,8 +107,8 @@
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>

View File

@ -252,13 +252,13 @@ POSSIBILITY OF SUCH DAMAGE.
navigation:0,
formatters:{
editor: function (column, row) {
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.filename + "\"><span class=\"fa fa-pencil\"></span></button>";
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit bootgrid-tooltip\" data-row-id=\"" + row.filename + "\"><span class=\"fa fa-pencil fa-fw\"></span></button>";
},
boolean: function (column, row) {
if (parseInt(row[column.id], 2) == 1) {
return "<span class=\"fa fa-check command-boolean\" data-value=\"1\" data-row-id=\"" + row.filename + "\"></span>";
return "<span class=\"fa fa-check fa-fw command-boolean\" data-value=\"1\" data-row-id=\"" + row.filename + "\"></span>";
} else {
return "<span class=\"fa fa-times command-boolean\" data-value=\"0\" data-row-id=\"" + row.filename + "\"></span>";
return "<span class=\"fa fa-times fa-fw command-boolean\" data-value=\"0\" data-row-id=\"" + row.filename + "\"></span>";
}
}
},
@ -328,11 +328,11 @@ POSSIBILITY OF SUCH DAMAGE.
rowCount:[10, 25, 50,100,500,1000] ,
formatters:{
rowtoggle: function (column, row) {
var toggle = " <button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.sid + "\"><span class=\"fa fa-pencil\"></span></button> ";
var toggle = " <button type=\"button\" class=\"btn btn-xs btn-default command-edit bootgrid-tooltip\" data-row-id=\"" + row.sid + "\"><span class=\"fa fa-pencil fa-fw\"></span></button> ";
if (parseInt(row[column.id], 2) == 1) {
toggle += "&nbsp; <span style=\"cursor: pointer;\" class=\"fa fa-check-square-o command-toggle\" data-value=\"1\" data-row-id=\"" + row.sid + "\"></span>";
toggle += "&nbsp; <span style=\"cursor: pointer;\" class=\"fa fa-check-square-o fa-fw command-toggle bootgrid-tooltip\" data-value=\"1\" data-row-id=\"" + row.sid + "\"></span>";
} else {
toggle += "&nbsp; <span style=\"cursor: pointer;\" class=\"fa fa-square-o command-toggle\" data-value=\"0\" data-row-id=\"" + row.sid + "\"></span>";
toggle += "&nbsp; <span style=\"cursor: pointer;\" class=\"fa fa-square-o fa-fw command-toggle bootgrid-tooltip\" data-value=\"0\" data-row-id=\"" + row.sid + "\"></span>";
}
return toggle;
}
@ -415,7 +415,7 @@ POSSIBILITY OF SUCH DAMAGE.
requestHandler:addAlertQryFilters,
formatters:{
info: function (column, row) {
return "<button type=\"button\" class=\"btn btn-xs btn-default command-alertinfo\" data-row-id=\"" + row.filepos + "/" + row.fileid + "\"><span class=\"fa fa-pencil\"></span></button> ";
return "<button type=\"button\" class=\"btn btn-xs btn-default command-alertinfo bootgrid-tooltip\" title=\"{{ lang._('View') }}\" data-row-id=\"" + row.filepos + "/" + row.fileid + "\"><span class=\"fa fa-pencil fa-fw\"></span></button> ";
}
},
converters: {
@ -832,10 +832,10 @@ POSSIBILITY OF SUCH DAMAGE.
<tfoot>
<tr>
<td>
<button title="{{ lang._('Disable selected') }}" id="disableSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa fa-square-o"></span></button>
<button title="{{ lang._('Enable selected') }}" id="enableSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa fa-check-square-o"></span></button>
<button title="{{ lang._('Alert selected') }}" id="alertSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa"></span>{{ lang._('alert') }}</button>
<button title="{{ lang._('Drop selected') }}" id="dropSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa"></span>{{ lang._('drop') }}</button>
<button title="{{ lang._('Disable selected') }}" id="disableSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa fa-square-o fa-fw"></span></button>
<button title="{{ lang._('Enable selected') }}" id="enableSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa fa-check-square-o fa-fw"></span></button>
<button title="{{ lang._('Alert selected') }}" id="alertSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa"></span>{{ lang._('Alert') }}</button>
<button title="{{ lang._('Drop selected') }}" id="dropSelectedRules" data-toggle="tooltip" type="button" class="btn btn-xs btn-default"><span class="fa"></span>{{ lang._('Drop') }}</button>
</td>
<td></td>
</tr>
@ -874,8 +874,8 @@ POSSIBILITY OF SUCH DAMAGE.
<tr >
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>

View File

@ -145,8 +145,8 @@ POSSIBILITY OF SUCH DAMAGE.
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>
@ -171,8 +171,8 @@ POSSIBILITY OF SUCH DAMAGE.
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>

View File

@ -283,8 +283,8 @@
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>
@ -307,8 +307,8 @@
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>
@ -331,8 +331,8 @@
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o fa-fw"></span></button>
</td>
</tr>
</tfoot>

View File

@ -377,8 +377,8 @@
<tr>
<td colspan="3"></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button type="button" class="btn btn-xs btn-primary reload-pac-btn"><span class="fa fa-refresh"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button type="button" class="btn btn-xs btn-primary reload-pac-btn" data-toggle="tooltip" title="{{ lang._('Reload') }}"><span class="fa fa-repeat fa-fw"></span></button>
</td>
</tr>
</tfoot>
@ -399,8 +399,8 @@
<tr>
<td colspan="2"></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button type="button" class="btn btn-xs btn-primary reload-pac-btn"><span class="fa fa-refresh"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button type="button" class="btn btn-xs btn-primary reload-pac-btn" data-toggle="tooltip" title="{{ lang._('Reload') }}"><span class="fa fa-repeat fa-fw"></span></button>
</td>
</tr>
</tfoot>
@ -423,8 +423,8 @@
<tr>
<td colspan="3"></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button type="button" class="btn btn-xs btn-primary reload-pac-btn"><span class="fa fa-refresh"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
<button type="button" class="btn btn-xs btn-primary reload-pac-btn" data-toggle="tooltip" title="{{ lang._('Reload') }}"><span class="fa fa-repeat fa-fw"></span></button>
</td>
</tr>
</tfoot>
@ -481,7 +481,7 @@
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus fa-fw"></span></button>
</td>
</tr>
</tfoot>

View File

@ -436,26 +436,28 @@ $.fn.UIBootgrid = function (params) {
grid.on("loaded.rs.jquery.bootgrid", function(){
// toggle all automated tooltips
$(this).find(".bootgrid-tooltip").each(function (index) {
if ($(this).hasClass('command-add')) {
if ($(this).attr('title') !== undefined) {
// keep this tooltip
} else if ($(this).hasClass('command-add')) {
$(this).attr('title', $.fn.UIBootgrid.defaults.addText);
} else if ($(this).hasClass('command-delete-selected')) {
$(this).attr('title', $.fn.UIBootgrid.defaults.deleteSelectedText);
} else if ($(this).hasClass('command-edit')) {
$(this).attr('title', $.fn.UIBootgrid.defaults.editText);
} else if ($(this).hasClass('command-toggle')) {
if ($(this).data('value') == 1) {
if ($(this).data('value') == 1) {
$(this).attr('title', $.fn.UIBootgrid.defaults.disableText);
} else {
} else {
$(this).attr('title', $.fn.UIBootgrid.defaults.enableText);
}
}
} else if ($(this).hasClass('command-delete')) {
$(this).attr('title', $.fn.UIBootgrid.defaults.deleteText);
} else if ($(this).hasClass('command-info')) {
$(this).attr('title', $.fn.UIBootgrid.defaults.infoText);
} else if ($(this).hasClass('command-copy')) {
$(this).attr('title', $.fn.UIBootgrid.defaults.cloneText);
} else if ($(this).attr('title') === undefined) {
$(this).attr('title', 'Error: unregistered tooltip');
} else {
$(this).attr('title', 'Error: no tooltip match');
}
$(this).tooltip();
});