Skip to content

Commit ebf5a63

Browse files
mnvrmnvr
authored
[desktop] Use custom theme-aware titlebar for end-to-end display (#4981)
2 parents a3adec3 + d707b76 commit ebf5a63

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+617
-667
lines changed

‎desktop/src/main.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -326,8 +326,6 @@ const attachProcessHandlers = () => {
326326
*/
327327
const waitForRendererDevServer = () => wait(1000);
328328

329-
const wipDesktopCustomTitlebar = process.env.ENTE_WIP_TITLEBAR == "1";
330-
331329
/**
332330
* Create an return the {@link BrowserWindow} that will form our app's UI.
333331
*
@@ -364,12 +362,8 @@ const createMainWindow = () => {
364362
// do it (Step 2) unconditionally (i.e., on macOS too).
365363
//
366364
// https://www.electronjs.org/docs/latest/tutorial/custom-title-bar#create-a-custom-title-bar
367-
...(wipDesktopCustomTitlebar
368-
? {
369-
titleBarStyle: "hidden",
370-
titleBarOverlay: true,
371-
}
372-
: {}),
365+
titleBarStyle: "hidden",
366+
titleBarOverlay: true,
373367
// The color to show in the window until the web content gets loaded.
374368
// https://www.electronjs.org/docs/latest/api/browser-window#setting-the-backgroundcolor-property
375369
//

‎web/apps/accounts/src/pages/_app.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { staticAppTitle } from "@/base/app";
22
import { CustomHead } from "@/base/components/Head";
3-
import { LoadingOverlay } from "@/base/components/loaders";
3+
import { LoadingIndicator } from "@/base/components/loaders";
44
import { AttributedMiniDialog } from "@/base/components/MiniDialog";
55
import { useAttributedMiniDialog } from "@/base/components/utils/dialog";
66
import { useSetupI18n, useSetupLogs } from "@/base/components/utils/hooks-app";
@@ -32,7 +32,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
3232
<AttributedMiniDialog {...miniDialogProps} />
3333

3434
<AppContext.Provider value={appContext}>
35-
{!isI18nReady && <LoadingOverlay />}
35+
{!isI18nReady && <LoadingIndicator />}
3636
{isI18nReady && <Component {...pageProps} />}
3737
</AppContext.Provider>
3838
</ThemeProvider>

‎web/apps/accounts/src/pages/passkeys/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { EnteLogo } from "@/base/components/EnteLogo";
12
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
2-
import { AppNavbarNormalFlow } from "@/base/components/Navbar";
3+
import { NavbarBase } from "@/base/components/Navbar";
34
import {
45
RowButton,
56
RowButtonDivider,
@@ -116,7 +117,9 @@ const Page: React.FC = () => {
116117

117118
return (
118119
<Stack sx={{ minHeight: "100svh" }}>
119-
<AppNavbarNormalFlow />
120+
<NavbarBase>
121+
<EnteLogo />
122+
</NavbarBase>
120123
<Stack
121124
sx={{ alignSelf: "center", m: 3, maxWidth: "375px", gap: 3 }}
122125
>

‎web/apps/auth/src/pages/_app.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { accountLogout } from "@/accounts/services/logout";
22
import { clientPackageName, staticAppTitle } from "@/base/app";
33
import { CustomHead } from "@/base/components/Head";
44
import {
5-
LoadingOverlay,
5+
LoadingIndicator,
66
TranslucentLoadingOverlay,
77
} from "@/base/components/loaders";
88
import { AttributedMiniDialog } from "@/base/components/MiniDialog";
@@ -68,7 +68,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
6868

6969
<AppContext.Provider value={appContext}>
7070
{!isI18nReady ? (
71-
<LoadingOverlay />
71+
<LoadingIndicator />
7272
) : (
7373
<>
7474
{isChangingRoute && <TranslucentLoadingOverlay />}

‎web/apps/auth/src/pages/auth.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,19 @@ const AuthNavbar: React.FC = () => {
134134
const { logout } = useAppContext();
135135

136136
return (
137-
<NavbarBase>
138-
<Stack direction="row" sx={{ flex: 1, justifyContent: "center" }}>
139-
<EnteLogo />
140-
</Stack>
141-
<Stack direction="row" sx={{ position: "absolute", right: "24px" }}>
137+
<NavbarBase
138+
sx={{
139+
position: "sticky",
140+
top: 0,
141+
left: 0,
142+
mb: 2,
143+
zIndex: 1,
144+
backgroundColor: "backdrop.muted",
145+
backdropFilter: "blur(7px)",
146+
}}
147+
>
148+
<EnteLogo />
149+
<Box sx={{ position: "absolute", right: "24px" }}>
142150
<OverflowMenu ariaID="auth-options">
143151
<OverflowMenuOption
144152
color="critical"
@@ -148,7 +156,7 @@ const AuthNavbar: React.FC = () => {
148156
{t("logout")}
149157
</OverflowMenuOption>
150158
</OverflowMenu>
151-
</Stack>
159+
</Box>
152160
</NavbarBase>
153161
);
154162
};

‎web/apps/auth/src/pages/share.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const Page: React.FC = () => {
147147
backgroundColor: "#1c1c1e",
148148
}),
149149
borderRadius: "10px",
150-
paddingBottom: "20px",
150+
pb: "20px",
151151
position: "relative",
152152
})}
153153
>

‎web/apps/photos/src/components/Collections/AlbumCastDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
44
import log from "@/base/log";
55
import type { Collection } from "@/media/collection";
66
import { useSettingsSnapshot } from "@/new/photos/components/utils/use-snapshot";
7-
import { aboveGalleryContentZ } from "@/new/photos/components/utils/z-index";
7+
import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
88
import {
99
publishCastPayload,
1010
revokeAllCastTokens,
@@ -134,7 +134,7 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
134134
open={open}
135135
onClose={onClose}
136136
title={t("cast_album_to_tv")}
137-
sx={{ zIndex: aboveGalleryContentZ }}
137+
sx={{ zIndex: aboveFileViewerContentZ }}
138138
>
139139
{view == "choose" && (
140140
<Stack sx={{ py: 1, gap: 4 }}>

‎web/apps/photos/src/components/Collections/CollectionHeader.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { assertionFailed } from "@/base/assert";
2-
import { SpaceBetweenFlex } from "@/base/components/containers";
2+
import { SpacedRow } from "@/base/components/containers";
33
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
44
import {
55
OverflowMenu,
@@ -103,14 +103,14 @@ export const CollectionHeader: React.FC<CollectionHeaderProps> = (props) => {
103103

104104
return (
105105
<GalleryItemsHeaderAdapter>
106-
<SpaceBetweenFlex>
106+
<SpacedRow>
107107
<GalleryItemsSummary
108108
name={name}
109109
fileCount={fileCount}
110110
endIcon={<EndIcon type={type} />}
111111
/>
112112
{shouldShowOptions(type) && <CollectionOptions {...props} />}
113-
</SpaceBetweenFlex>
113+
</SpacedRow>
114114
</GalleryItemsHeaderAdapter>
115115
);
116116
};

‎web/apps/photos/src/components/FilesDownloadProgress.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Notification } from "@/new/photos/components/Notification";
2-
import { aboveGalleryContentZ } from "@/new/photos/components/utils/z-index";
2+
import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
33
import { useAppContext } from "@/new/photos/types/context";
44
import { t } from "i18next";
55
import { GalleryContext } from "pages/gallery";
@@ -120,7 +120,7 @@ export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
120120
horizontal="left"
121121
sx={{
122122
"&&": { bottom: `${index * 80 + 20}px` },
123-
zIndex: aboveGalleryContentZ,
123+
zIndex: aboveFileViewerContentZ,
124124
}}
125125
open={isFilesDownloadStarted(attributes)}
126126
onClose={handleClose(attributes)}

‎web/apps/photos/src/components/FixCreationTime.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ export const FixCreationTime: React.FC<FixCreationTimeProps> = ({
8282
onClose();
8383
}}
8484
>
85-
<DialogTitle sx={{ marginBlockStart: "4px" }}>{title}</DialogTitle>
85+
<DialogTitle sx={{ mt: "4px" }}>{title}</DialogTitle>
8686
<DialogContent
87-
style={{
87+
sx={{
8888
minWidth: "310px",
89-
paddingBlockStart: "6px",
89+
pt: "6px",
9090
display: "flex",
9191
flexDirection: "column",
9292
...(step == "running" ? { alignItems: "center" } : {}),
@@ -181,7 +181,7 @@ const OptionsForm: React.FC<OptionsFormProps> = ({
181181
name={"option"}
182182
value={values.option}
183183
onChange={handleChange}
184-
sx={{ paddingBlockStart: 1 }}
184+
sx={{ pt: 1 }}
185185
>
186186
<FormControlLabel
187187
value={"date-time-original"}

0 commit comments

Comments
 (0)