diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index a5ed1aa6e..912fcdae2 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -30,5 +30,8 @@ }, waitForChange: () => {}, }, + OS: { + isWindows11: () => false, + }, }; diff --git a/app/main.ts b/app/main.ts index fb1a10d62..a5853af23 100644 --- a/app/main.ts +++ b/app/main.ts @@ -626,7 +626,7 @@ async function getTitleBarOverlay(): Promise { // Should match stylesheets/components/TitleBarContainer.scss minus the // border - height: 28 - 1, + height: (OS.isWindows11() ? 29 : 28) - 1, }; } @@ -1261,7 +1261,8 @@ async function showStickerCreator() { const { x = 0, y = 0 } = windowConfig || {}; - // TODO: DESKTOP-3670 + const titleBarOverlay = await getTitleBarOverlay(); + const options = { x: x + 100, y: y + 100, @@ -1269,6 +1270,8 @@ async function showStickerCreator() { minWidth: 800, height: 650, title: getLocale().i18n('signalDesktopStickerCreator'), + titleBarStyle: nonMainTitleBarStyle, + titleBarOverlay, autoHideMenuBar: true, backgroundColor: await getBackgroundColor(), show: false, @@ -1286,7 +1289,7 @@ async function showStickerCreator() { stickerCreatorWindow = new BrowserWindow(options); setupSpellChecker(stickerCreatorWindow, getLocale()); - handleCommonWindowEvents(stickerCreatorWindow); + handleCommonWindowEvents(stickerCreatorWindow, titleBarOverlay); const appUrl = process.env.SIGNAL_ENABLE_HTTP ? prepareUrl( diff --git a/scripts/esbuild.js b/scripts/esbuild.js index e4b1aa0ca..cebacaa02 100644 --- a/scripts/esbuild.js +++ b/scripts/esbuild.js @@ -80,6 +80,6 @@ esbuild.build({ esbuild.build({ ...bundleDefaults, mainFields: ['browser', 'main'], - entryPoints: [path.join(ROOT_DIR, 'ts/windows/main/preload.ts')], + entryPoints: [path.join(ROOT_DIR, 'ts', 'windows', 'main', 'preload.ts')], outfile: path.join(ROOT_DIR, 'preload.bundle.js'), }); diff --git a/sticker-creator/app/index.scss b/sticker-creator/app/index.scss index 311888d09..0dd6c01a9 100644 --- a/sticker-creator/app/index.scss +++ b/sticker-creator/app/index.scss @@ -6,8 +6,8 @@ .container { display: grid; - height: 100vh; - grid-template-rows: 47px calc(100vh - 47px - 68px) 68px; + height: var(--window-height); + grid-template-rows: 47px calc(var(--window-height) - 47px - 68px) 68px; @include light-theme() { background-color: $color-white; diff --git a/sticker-creator/app/index.tsx b/sticker-creator/app/index.tsx index 4058ffdeb..68c6b503f 100644 --- a/sticker-creator/app/index.tsx +++ b/sticker-creator/app/index.tsx @@ -11,31 +11,53 @@ import { ShareStage } from './stages/ShareStage'; import * as styles from './index.scss'; import { PageHeader } from '../elements/PageHeader'; import { useI18n } from '../util/i18n'; +import { TitleBarContainer } from '../../ts/components/TitleBarContainer'; +import type { ExecuteMenuRoleType } from '../../ts/components/TitleBarContainer'; +import { useTheme } from '../../ts/hooks/useTheme'; -export const App: React.ComponentType = () => { +export type AppPropsType = Readonly<{ + platform: string; + executeMenuRole: ExecuteMenuRoleType; + isWindows11: boolean; +}>; + +export const App = ({ + platform, + executeMenuRole, + isWindows11, +}: AppPropsType): JSX.Element => { const i18n = useI18n(); + const theme = useTheme(); return ( -
- {i18n('StickerCreator--title')} - - - - - - - - - - - - - - - - - - -
+ +
+ {i18n('StickerCreator--title')} + + + + + + + + + + + + + + + + + + +
+
); }; diff --git a/sticker-creator/components/ConfirmModal.scss b/sticker-creator/components/ConfirmModal.scss index 7e30f69df..0c220f61d 100644 --- a/sticker-creator/components/ConfirmModal.scss +++ b/sticker-creator/components/ConfirmModal.scss @@ -4,7 +4,7 @@ .facade { background: rgba(0, 0, 0, 0.33); width: 100vw; - height: 100vh; + height: var(--window-height); display: flex; justify-content: center; align-items: center; diff --git a/sticker-creator/index.html b/sticker-creator/index.html index 66d69be14..e5115d817 100644 --- a/sticker-creator/index.html +++ b/sticker-creator/index.html @@ -5,7 +5,7 @@ @@ -14,6 +14,7 @@
+