corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

popover badges

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-10-19 23:19:27 +01:00
parent 58648c8646
commit 6f8098eb12
3 changed files with 62 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/home/static/home/js/tables.js
View File

@ -478,7 +478,7 @@ function renderErrorMessages($modal, errorObj) {
}
// region Table Column Types
// region Table Col Types
function renderEditColumn(data) {
const name = sanitise(data);
@ -551,7 +551,7 @@ function renderHexColourColumn(data, type, row) {
const hexWithHashtag = `#${data}`.toUpperCase();
let icon = $("<div>");
icon.addClass("table-cell-hex");
icon.addClass("col-hex-icon");
icon.css("background-color", hexWithHashtag);
return $(`<span data-bs-toggle="tooltip" data-bs-title="${hexWithHashtag}">${icon.prop("outerHTML")}</span>`).tooltip()[0];
@ -565,6 +565,32 @@ function renderMutatorColumn(data) {
return $(`<span class="badge text-bg-secondary rounded-1">${data.name}</span>`).prop("outerHTML");
}
const renderPopoverBadgesColumn = (items, iconClass) => {
if (!items.length) {
return "";
}
let $span = $("<span>");
$span.attr("data-bs-toggle", "popover");
$span.attr("data-bs-trigger", "hover focus");
$span.attr("data-bs-custom-class", "table-badge-popover")
$span.attr("data-bs-html", "true");
$span.attr("role", "button")
let $placeholderContainer = $("<div>");
items.forEach(item => {
let $badge = $("<div>");
$badge.addClass("badge text-bg-secondary rounded-1 me-2 mb-2 text-wrap mw-100 text-start");
$badge.text(item);
$placeholderContainer.append($badge);
});
$span.attr("data-bs-content", $placeholderContainer.html());
$span.html(`<i class="bi ${iconClass} fs-5"></i>`)
return $span.popover()[0];
}
// region Get Table Parts

14
apps/home/static/home/js/tabs/subs.js
View File

@ -24,25 +24,25 @@ function initSubscriptionsModule() {
{
title: "Channels",
data: "channels_detail",
className: "text-center render-array-dropdown-column",
render: data => renderArrayDropdownColumn(data.map(item => `#${item.name}`), "bi-hash", "Discord Channels")
className: "col-icon",
render: data => renderPopoverBadgesColumn(data.map(item => `#${item.name}`), "bi-hash")
},
{
title: "Filters",
data: "filters_detail",
className: "text-center render-array-dropdown-column",
render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-funnel", "Selected Filters")
className: "col-icon",
render: data => renderPopoverBadgesColumn(data.map(item => item.name), "bi-funnel")
},
{
title: "Rules",
data: "unique_rules_detail",
className: "text-center render-array-dropdown-column",
render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-vr", "Unique Rules")
className: "col-icon",
render: data => renderPopoverBadgesColumn(data.map(item => item.name), "bi-vr")
},
{
title: "Style",
data: "message_style_detail",
className: "text-center",
className: "col-hex",
render: data => renderHexColourColumn(data.colour, null, data)
},
{

33
apps/home/static/home/scss/tables.scss
View File

@ -61,6 +61,16 @@
}
// Badge popover
.table-badge-popover .popover-body {
display: flex;
flex-wrap: wrap;
padding: 1rem 0.5rem 0.5rem 1rem;
max-width: 200px;
}
// Table Button Controls
.table-button-controls > div {
@ -110,12 +120,10 @@
tfoot { }
// Custom column sizes
@mixin col-styles($width, $min-width: null, $max-width: null) {
@mixin col-styles($min-width: null, $max-width: null) {
$min-width: if($min-width == null, $width, $min-width);
$max-width: if($max-width == null, $width, $max-width);
$max-width: if($max-width == null, $min-width, $max-width);
width: $width;
min-width: $min-width;
max-width: $max-width;
text-overflow: ellipsis;
@ -129,14 +137,27 @@
$col-url: 500px;
$col-date: 150px;
$col-switch: 100px;
$col-icon: 120px;
.col {
&-checkbox { @include col-styles($col-check); }
&-name { @include col-styles($col-label); }
&-url { @include col-styles($col-url, $col-url, $col-url * 2); }
&-url { @include col-styles($col-url, $col-url * 2); }
&-date { @include col-styles($col-date); }
&-switch { @include col-styles($col-switch); }
&-icon { text-align: center; @include col-styles($col-icon); }
&-hex {
text-align: center;
@include col-styles($col-icon);
.col-hex-icon {
margin: 0 auto;
width: 25px;
height: 25px;
border-radius: 0.25rem;
}
}
}
@ -153,7 +174,7 @@
// // padding: 2rem 0;
// // border-bottom: none;
// // }
// // }
// // Top & bottom border colour
// &.dataTable > thead > tr > th,