diff options
| -rw-r--r-- | interface/css/rspamd.css | 93 | ||||
| -rw-r--r-- | interface/index.html | 37 | ||||
| -rw-r--r-- | interface/js/app/rspamd.js | 2 | ||||
| -rw-r--r-- | interface/js/app/selectors.js | 63 |
4 files changed, 190 insertions, 5 deletions
diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css index c7335e558..e8ed19381 100644 --- a/interface/css/rspamd.css +++ b/interface/css/rspamd.css @@ -493,6 +493,99 @@ input.radio { width: 1% !important; } +#row-main { + margin-top: -12px; + margin-bottom: -12px; + display: flex; + flex-wrap: wrap; + /* necessary to hide collapsed sidebar */ + overflow-x: hidden; +} +@media (min-width: 992px) { + #content > div { + display: flex; + } +} +#content { + transition: width 0.3s ease; +} #content label { font-weight: normal; } + +.sidebar { + padding: 8px; + background-color: #ffe; + transition: margin 0.3s ease; +} +.sidebar > div.table-responsive { + max-height: 610px; + background-color: white; +} +.collapsed { + /* hide it for small displays */ + display: none; +} +@media (min-width: 992px) { + .collapsed { + display: block; + } + #sidebar-left.collapsed { + /* same width as sidebar */ + margin-left: -25%; + } + #sidebar-right.collapsed { + /* same width as sidebar */ + margin-right: -25%; + } +} + +.sidebar-nav { + width: 20px; + border-bottom: none; +} +#sidebar-tab-left > a, +#sidebar-tab-right > a { + background-color: #ffe; + padding-top: 0; + padding-bottom: 0; + margin-left: 12px; + margin-right: 12px; +} +#sidebar-tab-left { + transform: rotate(180deg); +} +#sidebar-tab-text-left { + transform: rotate(180deg); +} +@media (min-width: 992px) { + .sidebar-nav { + margin-left: -2px; + margin-right: -2px; + } + #content { + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + } + #sidebar-tab-left { + transform: translateX(-50%) rotate(90deg) translate(50%, -50%); + } + #sidebar-tab-right { + float: right; + transform: translateX(50%) rotate(-90deg) translate(-50%, -50%); + } +} +@media (max-width: 991.98px) { + .sidebar-nav { + margin-top: -2px; + margin-bottom: -2px; + } + #content { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + } + #sidebar-tab-right { + bottom: 0; + right: 0; + } +} diff --git a/interface/index.html b/interface/index.html index b8df750e2..d2931ffba 100644 --- a/interface/index.html +++ b/interface/index.html @@ -329,7 +329,25 @@ </div> <div class="widget-content"> <div class="row" id="row-main"> - <div class="col-xs-12" id="content"> + <div class="col-md-3 sidebar" id="sidebar-left"> + <div class="nopadding table-responsive"> + <table class="table table-condensed small table-striped table-hover table-bordered" id="selectorsTable-extractors"> + <thead><tr><th>Name</th><th>Description</th></tr></thead> + <tbody/> + </table> + </div> + </div> + + <div class="col-md-6 col-xs-12" id="content"> + + <div class="row"> + <ul class="nav nav-tabs sidebar-nav"> + <li class="active text-nowrap" id="sidebar-tab-left"> + <a><div id="sidebar-tab-text-left">↕ List of extractors</div></a> + </li> + </ul> + + <div class="col-xs-12"> <form class="col-xs-12"> <div class="form-group row"> <div class="form-group"> @@ -357,6 +375,23 @@ <textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea> </div> </form> + </div> + + <ul class="nav nav-tabs sidebar-nav"> + <li class="active text-nowrap" id="sidebar-tab-right"> + <a>↕ List of transforms</a> + </li> + </ul> + </div> + </div> + + <div class="col-md-3 sidebar" id="sidebar-right"> + <div class="nopadding table-responsive"> + <table class="table table-condensed small table-striped table-hover table-bordered" id="selectorsTable-transforms"> + <thead><tr><th>Name</th><th>Description</th></tr></thead> + <tbody/> + </table> + </div> </div> </div> </div> diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js index ffd3173d9..e4d9176a2 100644 --- a/interface/js/app/rspamd.js +++ b/interface/js/app/rspamd.js @@ -266,7 +266,7 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_ $('#selSrv [value="' + e.name + '"]').prop("disabled", true); } }); - tab_selectors.checkSelectors(ui); + tab_selectors.displayUI(ui); }, errorMessage: "Cannot get server status", server: "All SERVERS" diff --git a/interface/js/app/selectors.js b/interface/js/app/selectors.js index 69fcd3ed4..600259e18 100644 --- a/interface/js/app/selectors.js +++ b/interface/js/app/selectors.js @@ -34,7 +34,7 @@ define(["jquery"], }); } - ui.checkSelectors = function (rspamd) { + function checkSelectors(rspamd) { function toggle_form_group_class(remove, add) { var icon = { error: "remove", @@ -63,9 +63,66 @@ define(["jquery"], $("#selector-feedback-icon").hide(); enable_disable_check_btn(); } + } + + function buildLists(rspamd) { + function build_table_from_json(json, table_id) { + Object.keys(json).forEach(function (key) { + var td = $("<td/>"); + var tr = $("<tr/>") + .append(td.clone().html("<code>" + key + "</code>")) + .append(td.clone().html(json[key].description)); + $(table_id + " tbody").append(tr); + }); + } + + function getList(list) { + rspamd.query("plugins/selectors/list_" + list, { + method: "GET", + success: function (neighbours_status) { + var json = neighbours_status[0].data; + build_table_from_json(json, "#selectorsTable-" + list); + }, + server: get_server(rspamd) + }); + } + + getList("extractors"); + getList("transforms"); + } + + ui.displayUI = function (rspamd) { + buildLists(rspamd); + checkSelectors(rspamd); }; ui.setup = function (rspamd) { + function toggleSidebar(side) { + $("#sidebar-" + side).toggleClass("collapsed"); + var contentClass = "col-md-6"; + var openSidebarsCount = $("#sidebar-left").hasClass("collapsed") + + $("#sidebar-right").hasClass("collapsed"); + switch (openSidebarsCount) { + case 1: + contentClass = "col-md-9"; + break; + case 2: + contentClass = "col-md-12"; + break; + default: + } + $("#content").removeClass("col-md-12 col-md-9 col-md-6") + .addClass(contentClass); + } + $("#sidebar-tab-left>a").click(function () { + toggleSidebar("left"); + return false; + }); + $("#sidebar-tab-right>a").click(function () { + toggleSidebar("right"); + return false; + }); + $("#selectorsMsgClean").on("click", function () { $("#selectorsChkMsgBtn").attr("disabled", true); $("#selectorsMsgArea").val(""); @@ -73,7 +130,7 @@ define(["jquery"], }); $("#selectorsClean").on("click", function () { $("#selectorsSelArea").val(""); - ui.checkSelectors(rspamd); + checkSelectors(rspamd); return false; }); $("#selectorsChkMsgBtn").on("click", function () { @@ -86,7 +143,7 @@ define(["jquery"], enable_disable_check_btn(); }); $("#selectorsSelArea").on("input", function () { - ui.checkSelectors(rspamd); + checkSelectors(rspamd); }); }; |