Skip to content

Commit

Permalink
Merge pull request #4444 from moisseev/bootstrap-v5
Browse files Browse the repository at this point in the history 
[WebUI] Migrate to Bootstrap v5.2
  • Loading branch information
@vstakhov
vstakhov committed Mar 25, 2023
2 parents 53abb8d + 603bcba commit 457e17c
Show file tree
Hide file tree
Showing 11 changed files with 275 additions and 268 deletions.
6 changes: 3 additions & 3 deletions interface/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

41 changes: 21 additions & 20 deletions interface/css/rspamd.css
View file
Expand Up @@ -70,6 +70,12 @@ td.warning {
}
}

/* Tweak FooTable for Bootstrap 5 */
.footable .btn,
.footable .form-control {
border-radius: 0.375rem;
}

/* bootstrap 4 additionals */
.btn-group-xs > .btn,
.btn-xs {
Expand All @@ -81,6 +87,7 @@ td.warning {
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: auto;
cursor: not-allowed;
}
.w-1 {
Expand Down Expand Up @@ -126,7 +133,8 @@ textarea {

input.form-control[type="number"] {
width: 4em;
padding: 2px 0;
padding-left: 0;
padding-right: 0;
text-align: center;
}
input.action-scores {
Expand Down Expand Up @@ -188,13 +196,6 @@ table#symbolsTable input[type="number"] {
.alert-info h4 {
color: #3a87ad;
}
.alert-block .close {
right: -1px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}

.pager li > a,
.pager li > span {
Expand Down Expand Up @@ -225,7 +226,7 @@ table#symbolsTable input[type="number"] {
background-image: linear-gradient(to bottom, #f9f9f9, #ededed);
line-height: 1;
}
.stat-box:not(.float-right) {
.stat-box:not(.float-end) {
min-width: 90px;
}
.stat-box .widget {
Expand Down Expand Up @@ -336,6 +337,7 @@ table#symbolsTable input[type="number"] {
z-index: 100;
}
#rrd-table td {
color: inherit;
padding-top: 2px;
padding-bottom: 2px;
}
Expand Down Expand Up @@ -397,17 +399,17 @@ table#symbolsTable input[type="number"] {
color: #468847;
}

#learnServers {
display: flex;
}

#nprogress .bar {
height: 1px;
}

#row-main {
margin-left: -17.5px;
margin-right: -17.5px;
}
@media (min-width: 992px) {
#selectors > .card {
height: calc(100vh - 91px);
height: calc(100vh - 96px);
}
#row-main {
/* necessary to hide collapsed sidebar */
Expand Down Expand Up @@ -445,6 +447,10 @@ table#symbolsTable input[type="number"] {
}
}

#selectors > .card > .card-body {
min-height: 0;
}

.sidebar-nav {
width: 20px;
}
Expand Down Expand Up @@ -472,8 +478,7 @@ table#symbolsTable input[type="number"] {
border-bottom-right-radius: 3.5px;
}
.sidebar-nav {
margin-left: -1px;
margin-right: -1px;
padding-right: 0;
display: block;
}
#content {
Expand All @@ -494,10 +499,6 @@ table#symbolsTable input[type="number"] {
border-bottom-left-radius: 3.5px;
border-bottom-right-radius: 3.5px;
}
.sidebar-nav {
margin-top: -1px;
margin-bottom: -1px;
}
#content {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
Expand Down
421 changes: 213 additions & 208 deletions interface/index.html
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions interface/js/app/config.js
View file
Expand Up @@ -40,7 +40,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
idx: idx,
html:
'<div class="form-group">' +
'<label class="col-form-label col-md-2 float-left">' + item.action + "</label>" +
'<label class="col-form-label col-md-2 float-start">' + item.action + "</label>" +
'<div class="controls slider-controls col-md-10">' +
'<input class="action-scores form-control" data-id="action" type="number" value="' +
item.value + '">' +
Expand Down Expand Up @@ -124,13 +124,13 @@ define(["jquery", "codejar", "linenumbers", "prism"],
var $tbody = $("<tbody>");

$.each(data, function (i, item) {
var $td = '<td><span class="badge badge-secondary">Read</span></td>';
var $td = '<td><span class="badge bg-secondary">Read</span></td>';
if (!(item.editable === false || rspamd.read_only)) {
$td = $($td).append('&nbsp;<span class="badge badge-success">Write</span>');
$td = $($td).append('&nbsp;<span class="badge bg-success">Write</span>');
}
var $tr = $("<tr>").append($td);

var $span = $('<span class="map-link" data-toggle="modal" data-target="#modalDialog">' + item.uri + "</span>").data("item", item);
var $span = $('<span class="map-link" data-bs-toggle="modal" data-bs-target="#modalDialog">' + item.uri + "</span>").data("item", item);
$span.wrap("<td>").parent().appendTo($tr);
$("<td>" + item.description + "</td>").appendTo($tr);
$tr.appendTo($tbody);
Expand Down Expand Up @@ -169,7 +169,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
}

// Modal form for maps
$(document).on("click", "[data-toggle=\"modal\"]", function () {
$(document).on("click", "[data-bs-toggle=\"modal\"]", function () {
var checked_server = rspamd.getSelector("selSrv");
var item = $(this).data("item");
rspamd.query("getmap", {
Expand Down
8 changes: 4 additions & 4 deletions interface/js/app/history.js
View file
Expand Up @@ -144,13 +144,13 @@ define(["jquery", "footable"],
title: "Symbols" +
'<div class="sym-order-toggle">' +
'<br><span style="font-weight:normal;">Sort by:</span><br>' +
'<div class="btn-group btn-group-toggle btn-group-xs btn-sym-order-history" data-toggle="buttons">' +
'<div class="btn-group btn-group-xs btn-sym-order-history">' +
'<label type="button" class="btn btn-outline-secondary btn-sym-history-magnitude">' +
'<input type="radio" value="magnitude">Magnitude</label>' +
'<input type="radio" class="btn-check" value="magnitude">Magnitude</label>' +
'<label type="button" class="btn btn-outline-secondary btn-sym-history-score">' +
'<input type="radio" value="score">Value</label>' +
'<input type="radio" class="btn-check" value="score">Value</label>' +
'<label type="button" class="btn btn-outline-secondary btn-sym-history-name">' +
'<input type="radio" value="name">Name</label>' +
'<input type="radio" class="btn-check" value="name">Name</label>' +
"</div>" +
"</div>",
breakpoints: "all",
Expand Down
18 changes: 9 additions & 9 deletions interface/js/app/rspamd.js
View file
Expand Up @@ -330,7 +330,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,

function alertMessage(alertClass, alertText) {
var a = $("<div class=\"alert " + alertClass + " alert-dismissible fade in show\">" +
"<button type=\"button\" class=\"close\" data-dismiss=\"alert\" title=\"Dismiss\">&times;</button>" +
"<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" title=\"Dismiss\"></button>" +
"<strong>" + alertText + "</strong>");
$(".notification-area").append(a);

Expand Down Expand Up @@ -510,7 +510,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
// Button (or icon within a button) that triggers the popover.
$(e.target).closest("button").attr("aria-describedby") === this.id
) return;
$(this).popover("hide");
$("#settings").popover("hide");
});
});
}());
Expand All @@ -529,7 +529,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
}, 1000);
});

$('a[data-toggle="tab"]').on("shown.bs.tab", function () {
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function () {
tabClick("#" + $(this).attr("id"));
});
$("#refresh, #disconnect").on("click", function (e) {
Expand All @@ -553,7 +553,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
} else {
$("#learnServers").hide();
}
tabClick("#" + $("#navBar > ul > .nav-item > .nav-link.active").attr("id"));
tabClick("#" + $("#tablist > .nav-item > .nav-link.active").attr("id"));
});

// Radio buttons
Expand Down Expand Up @@ -779,7 +779,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
})).prependTo(self.$form);

self.$action = $("<select/>", {
class: "form-control"
class: "form-select"
}).on("change", {
self: self
}, self._onStatusDropdownChanged).append(
Expand Down Expand Up @@ -906,13 +906,13 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
}

if (item.action === "clean" || item.action === "no action") {
item.action = "<div style='font-size:11px' class='badge badge-success'>" + item.action + "</div>";
item.action = "<div style='font-size:11px' class='badge bg-success'>" + item.action + "</div>";
} else if (item.action === "rewrite subject" || item.action === "add header" || item.action === "probable spam") {
item.action = "<div style='font-size:11px' class='badge badge-warning'>" + item.action + "</div>";
item.action = "<div style='font-size:11px' class='badge bg-warning'>" + item.action + "</div>";
} else if (item.action === "spam" || item.action === "reject") {
item.action = "<div style='font-size:11px' class='badge badge-danger'>" + item.action + "</div>";
item.action = "<div style='font-size:11px' class='badge bg-danger'>" + item.action + "</div>";
} else {
item.action = "<div style='font-size:11px' class='badge badge-info'>" + item.action + "</div>";
item.action = "<div style='font-size:11px' class='badge bg-info'>" + item.action + "</div>";
}

var score_content = (item.score < item.required_score)
Expand Down
20 changes: 10 additions & 10 deletions interface/js/app/stats.js
View file
Expand Up @@ -71,21 +71,21 @@ define(["jquery", "d3pie"],
function widget(k, v, cls) {
var c = (typeof cls === "undefined") ? "" : cls;
var titleAtt = d3.format(",")(v) + " " + k;
return '<div class="card stat-box d-inline-block text-center shadow-sm mr-3 px-3">' +
return '<div class="card stat-box d-inline-block text-center shadow-sm me-3 px-3">' +
'<div class="widget overflow-hidden p-2' + c + '" title="' + titleAtt +
'"><strong class="d-block mt-2 mb-1 font-weight-bold">' +
'"><strong class="d-block mt-2 mb-1 fw-bold">' +
d3.format(".3~s")(v) + "</strong>" + k + "</div></div>";
}

if (i === "auth" || i === "error") return; // Skip to the next iteration
if (i === "uptime" || i === "version") {
var cls = "border-right ";
var cls = "border-end ";
var val = item;
if (i === "uptime") {
cls = "";
val = msToTime(item);
}
$('<div class="' + cls + 'float-left px-3"><strong class="d-block mt-2 mb-1 font-weight-bold">' +
$('<div class="' + cls + 'float-start px-3"><strong class="d-block mt-2 mb-1 fw-bold">' +
val + "</strong>" + i + "</div>")
.appendTo("#statWidgets");
} else if (i === "actions") {
Expand All @@ -100,9 +100,9 @@ define(["jquery", "d3pie"],
$(item).appendTo("#statWidgets");
});
$("#statWidgets > div:not(.stat-box)")
.wrapAll('<div class="card stat-box text-center shadow-sm float-right">' +
.wrapAll('<div class="card stat-box text-center shadow-sm float-end">' +
'<div class="widget overflow-hidden p-2 text-capitalize"></div></div>');
$("#statWidgets").find("div.float-right").appendTo("#statWidgets");
$("#statWidgets").find("div.float-end").appendTo("#statWidgets");
$("#statWidgets").show();

$("#clusterTable tbody").empty();
Expand Down Expand Up @@ -157,7 +157,7 @@ define(["jquery", "d3pie"],
"<td>" + val.host + "</td>" +
'<td class="text-center"><span class="icon"><i class="' + glyph_status + '"></i></span></td>' +
'<td class="text-center"' + scan_times.title + ">" + scan_times.data + "</td>" +
'<td class="text-right' +
'<td class="text-end' +
((Number.isFinite(val.data.uptime) && val.data.uptime < 3600)
? ' warning" title="Has been restarted within the last hour"'
: "") +
Expand Down Expand Up @@ -192,8 +192,8 @@ define(["jquery", "d3pie"],
(i === 0 ? '<td rowspan="' + statfiles.length + '">' + server + "</td>" : "") +
'<td class="' + cls + '">' + statfile.symbol + "</td>" +
'<td class="' + cls + '">' + statfile.type + "</td>" +
'<td class="text-right ' + cls + '">' + statfile.revision + "</td>" +
'<td class="text-right ' + cls + '">' + statfile.users + "</td></tr>");
'<td class="text-end ' + cls + '">' + statfile.revision + "</td>" +
'<td class="text-end ' + cls + '">' + statfile.users + "</td></tr>");
});
}

Expand All @@ -203,7 +203,7 @@ define(["jquery", "d3pie"],
$("#fuzzyTable tbody").append("<tr>" +
(i === 0 ? '<td rowspan="' + Object.keys(storages).length + '">' + server + "</td>" : "") +
"<td>" + storage + "</td>" +
'<td class="text-right">' + hashes + "</td></tr>");
'<td class="text-end">' + hashes + "</td></tr>");
i++;
});
}
Expand Down
2 changes: 1 addition & 1 deletion interface/js/app/symbols.js
View file
Expand Up @@ -162,7 +162,7 @@ define(["jquery", "footable"],
})).prependTo(self.$form);

self.$group = $("<select/>", {
class: "form-control"
class: "form-select"
}).on("change", {
self: self
}, self._onStatusDropdownChanged).append(
Expand Down
8 changes: 4 additions & 4 deletions interface/js/app/upload.js
View file
Expand Up @@ -103,13 +103,13 @@ define(["jquery"],
title: "Symbols" +
'<div class="sym-order-toggle">' +
'<br><span style="font-weight:normal;">Sort by:</span><br>' +
'<div class="btn-group btn-group-toggle btn-group-xs btn-sym-order-scan" data-toggle="buttons">' +
'<div class="btn-group btn-group-xs btn-sym-order-scan">' +
'<label type="button" class="btn btn-outline-secondary btn-sym-scan-magnitude">' +
'<input type="radio" value="magnitude">Magnitude</label>' +
'<input type="radio" class="btn-check" value="magnitude">Magnitude</label>' +
'<label type="button" class="btn btn-outline-secondary btn-sym-scan-score">' +
'<input type="radio" value="score">Value</label>' +
'<input type="radio" class="btn-check" value="score">Value</label>' +
'<label type="button" class="btn btn-outline-secondary btn-sym-scan-name">' +
'<input type="radio" value="name">Name</label>' +
'<input type="radio" class="btn-check" value="name">Name</label>' +
"</div>" +
"</div>",
breakpoints: "all",
Expand Down
4 changes: 2 additions & 2 deletions interface/js/lib/bootstrap.bundle.min.js
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions interface/js/main.js
View file
Expand Up @@ -20,8 +20,9 @@ requirejs.config({
stickytabs: "jquery.stickytabs.min"
},
shim: {
app: {deps:["jquery"]},
codejar: {exports: "CodeJar", deps:["linenumbers"]},
bootstrap: {exports:"bootstrap", deps:["jquery"]},
bootstrap: {exports:"bootstrap"},
d3evolution: {exports:"D3Evolution", deps:["d3", "jquery"]},
d3pie: {exports:"D3Pie", deps:["d3.global", "jquery"]},
fontawesome: {exports: "FontAwesome", deps:["fontawesome_solid"]},
Expand Down Expand Up @@ -50,7 +51,7 @@ requirejs.onError = function (e) {
document.getElementsByClassName("notification-area")[0].innerHTML =
"<div class=\"alert alert-error\">" +
"<strong>Module loading error: " + e.requireType + ", module: " + e.requireModules + "</strong>" +
"<button type=\"button\" class=\"btn btn-info btn-xs float-right\" " +
"<button type=\"button\" class=\"btn btn-info btn-xs float-end\" " +
"onClick=\"window.location.reload(); this.parentNode.parentNode.removeChild(this.parentNode);\" " +
"title=\"Reload current page\">" +
"<i class=\"glyphicon glyphicon-repeat\"></i> Reload" +
Expand Down

0 comments on commit 457e17c

Please sign in to comment.