daenamnu/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2026-06-02 08:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

aio-interface: improve overlay log appearance (#8093)

Browse Source
This commit is contained in:
Simon L.
2026-06-01 10:27:33 +02:00
committed by GitHub
parent 4f4420c713 f178b49cc1
commit 71b2ae78c4
7 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
php/public/apply-theme.js Normal file
View File

@@ -0,0 +1,14 @@
"use strict";
// Apply the saved theme immediately to avoid a flash of the wrong theme.
try { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') ?? ''); } catch (e) {}
// React when the user toggles the theme on the parent page while this page is
// open in an iframe. localStorage.setItem() fires a 'storage' event on every
// other window / frame that shares the same origin, so we can keep in sync
// without the parent having to know about us.
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
document.documentElement.setAttribute('data-theme', e.newValue ?? '');
}
});

4
php/public/logs.css
View File

@@ -10,6 +10,7 @@ pre {
margin: 0;
padding: 1rem;
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#floating-box {
position: fixed;
@@ -26,7 +27,8 @@ pre {
gap: 0.5rem;
font-size: large;
border: solid thin gray;
background-color: #f9f9f9;
background-color: var(--color-main-background);
color: var(--color-main-text);
width: 10rem;
padding: 0.5rem 1rem;
margin: 0 0 0 1rem;

4
php/public/style.css
View File

@@ -483,8 +483,8 @@ input[type="checkbox"]:disabled:not(:checked) + label {
visibility: hidden;
opacity: 0;
align-self: start;
width: 300px;
height: 200px;
width: min(700px, calc(100vw - 4rem));
height: min(400px, calc(100vh - 14rem));
border-radius: var(--border-radius-large);
border: solid thin rgb(192, 192, 192);
}

4
php/public/toggle-dark-mode.js
View File

@@ -11,7 +11,7 @@ function toggleTheme() {
function setThemeToDOM(value) {
// Set the theme to the root document and all possible iframe documents (so they can adapt their styling, too).
const documents = [document, Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument)].flat()
const documents = [document, ...Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument).filter(Boolean)]
documents.forEach((doc) => doc.documentElement.setAttribute('data-theme', value));
}
@@ -35,4 +35,6 @@ setThemeToDOM(getSavedTheme());
document.addEventListener('DOMContentLoaded', () => {
setThemeIcon(getSavedTheme())
document.querySelector('button#theme-toggle')?.addEventListener('click', () => toggleTheme());
// Re-apply theme when the overlay-log iframe navigates (e.g. after a form submission).
document.querySelector('iframe#overlay-log')?.addEventListener('load', () => setThemeToDOM(getSavedTheme()));
});