www/caddy: Allow tooltips of caddy widgets to break out of modal (#4100)

* www/caddy: Allow tooltips of caddy widgets to break out of modal.

* www/caddy: Allow all resizes.

* www/caddy: Hide tooltip when the UI gets updated.
This commit is contained in:
Monviech 2024-07-18 14:41:08 +02:00 committed by GitHub
parent 26d89ffaec
commit 32ba9bfe23
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 8 deletions

View file

@ -29,7 +29,6 @@ import BaseTableWidget from "./BaseTableWidget.js";
export default class CaddyCertificate extends BaseTableWidget {
constructor() {
super();
this.resizeHandles = "e, w";
this.tickTimeout = 30;
}
@ -80,6 +79,8 @@ export default class CaddyCertificate extends BaseTableWidget {
return;
}
$('.caddy-certificate-tooltip').tooltip('hide');
let rows = certificates.map(certificate => {
let colorClass = 'text-success';
if (certificate.remaining_days === 0) {
@ -93,8 +94,8 @@ export default class CaddyCertificate extends BaseTableWidget {
let row = `
<div>
<i class="fa fa-lock ${colorClass}" style="cursor: pointer;"
data-toggle="tooltip" title="${statusText}">
<i class="fa fa-lock ${colorClass} caddy-certificate-tooltip" style="cursor: pointer;"
data-tooltip="caddy-certificate-${certificate.hostname}" title="${statusText}">
</i>
&nbsp;
<span><b>${certificate.hostname}</b></span>
@ -112,6 +113,6 @@ export default class CaddyCertificate extends BaseTableWidget {
super.updateTable('caddyCertificateTable', sortedRows);
// Initialize tooltips for new elements
$('[data-toggle="tooltip"]').tooltip();
$('.caddy-certificate-tooltip').tooltip({container: 'body'});
}
}

View file

@ -29,7 +29,6 @@ import BaseTableWidget from "./BaseTableWidget.js";
export default class CaddyDomain extends BaseTableWidget {
constructor() {
super();
this.resizeHandles = "e, w";
}
getGridOptions() {
@ -73,6 +72,8 @@ export default class CaddyDomain extends BaseTableWidget {
return;
}
$('.caddy-domain-tooltip').tooltip('hide');
let rows = [];
// Assuming domains is a combination of both reverse and subdomains
for (const key in domains) {
@ -88,8 +89,8 @@ export default class CaddyDomain extends BaseTableWidget {
let row = $(`
<div class="caddy-info">
<div class="caddy-enabled">
<i class="fa fa-globe ${colorClass}" style="cursor: pointer;"
data-toggle="tooltip" title="${tooltipText}">
<i class="fa fa-globe ${colorClass} caddy-domain-tooltip" style="cursor: pointer;"
data-tooltip="caddy-domain-${domainPort}" title="${tooltipText}">
</i>
&nbsp;
<a class="caddy-domainport" href="/ui/caddy/reverse_proxy">
@ -109,6 +110,6 @@ export default class CaddyDomain extends BaseTableWidget {
super.updateTable('caddyDomainTable', rows.map(row => [row.html]));
// Initialize tooltips for interactivity
$('[data-toggle="tooltip"]').tooltip();
$('.caddy-domain-tooltip').tooltip({container: 'body'});
}
}