Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-26 05:40:15 +01:00
Code Issues Packages Projects Releases Activity

feat(desktop/setup): add background effects

Browse Source
This commit is contained in:
Elian Doran
2026-03-26 00:13:03 +02:00
parent db6f034cb5
commit cd97e2c861
3 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/setup.css
View File

@@ -245,6 +245,11 @@ body.setup {
}
}
body.setup.background-effects,
body.setup.background-effects .setup-container {
background: transparent;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);

30
apps/client/src/setup.tsx
View File

@@ -26,7 +26,7 @@ async function main() {
bodyWrapper.classList.add("setup-outer-wrapper");
document.body.classList.add("setup");
if (isElectron()) {
document.body.classList.add("electron");
document.body.classList.add("electron", `platform-${window.process.platform}`, "background-effects");
}
render(<App />, bodyWrapper);
document.body.replaceChildren(bodyWrapper);
@@ -51,7 +51,7 @@ function renderState(state: State, setState: (state: State) => void) {
}
function App() {
const [state, setState] = useState<State>("syncFromDesktop");
const [state, setState] = useState<State>("selectLanguage");
const [prevState, setPrevState] = useState<State | null>(null);
const [transitioning, setTransitioning] = useState(false);
const prevStateRef = useRef<State>(state);
@@ -365,21 +365,21 @@ function SyncFromDesktop({ setState }: { setState: (state: State) => void }) {
onBack={() => setState("firstOptions")}
>
<div class="card-columns">
<Card heading="On the other device">
<CardSection>1. {t("setup.sync-from-desktop-step1")}</CardSection>
<CardSection>2. {t("setup.sync-from-desktop-step2")}</CardSection>
<CardSection>3. {t("setup.sync-from-desktop-step3")}</CardSection>
<Card heading="On the other device">
<CardSection>1. {t("setup.sync-from-desktop-step1")}</CardSection>
<CardSection>2. {t("setup.sync-from-desktop-step2")}</CardSection>
<CardSection>3. {t("setup.sync-from-desktop-step3")}</CardSection>
<CardSection>4. {t("setup.sync-from-desktop-step4")}</CardSection>
<CardSection>5. {t("setup.sync-from-desktop-step5")}</CardSection>
</Card>
{networkAddresses.length > 0 && (
<Card heading={t("setup.your-ip-addresses")} className="ip-addresses">
{networkAddresses.map((addr) => (
<CardSection key={addr}>{addr}</CardSection>
))}
<CardSection>5. {t("setup.sync-from-desktop-step5")}</CardSection>
</Card>
)}
{networkAddresses.length > 0 && (
<Card heading={t("setup.your-ip-addresses")} className="ip-addresses">
{networkAddresses.map((addr) => (
<CardSection key={addr}>{addr}</CardSection>
))}
</Card>
)}
</div>
<div class="sync-from-desktop-waiting">

3
apps/server/src/services/window.ts
View File

@@ -395,6 +395,9 @@ async function createSetupWindow() {
autoHideMenuBar: true,
title: "Trilium Notes Setup",
icon: getIcon(),
// Background effects (Mica on Windows, vibrancy on macOS)
...(isWindows && { backgroundMaterial: "mica" as const }),
...(isMac && { transparent: true, visualEffectState: "active" as const, vibrancy: "under-window" as const }),
webPreferences: {
// necessary for e.g. utils.isElectron()
nodeIntegration: true,