diff --git a/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts b/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts index a47b89a107..87f64dc1f1 100644 --- a/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts +++ b/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts @@ -2,6 +2,7 @@ import { join } from 'node:path'; import { app, + BrowserWindow, Menu, MenuItem, session, @@ -38,7 +39,6 @@ import { type WorkbenchViewMeta, } from '../shared-state-schema'; import { globalStateStorage } from '../shared-storage/storage'; -import { getCustomThemeWindow } from './custom-theme-window'; import { getMainWindow, MainWindowManager } from './main-window'; async function getAdditionalArguments() { @@ -1083,24 +1083,19 @@ export const onActiveTabChanged = (fn: (tabId: string) => void) => { export const showDevTools = (id?: string) => { // use focusedWindow? - // const focusedWindow = BrowserWindow.getFocusedWindow() - - // workaround for opening devtools for theme-editor window - // there should be some strategy like windows manager, so we can know which window is active - getCustomThemeWindow() - .then(w => { - if (w && w.isFocused()) { - w.webContents.openDevTools(); - } else { - const view = id - ? WebContentViewsManager.instance.getViewById(id) - : WebContentViewsManager.instance.activeWorkbenchView; - if (view) { - view.webContents.openDevTools(); - } - } - }) - .catch(console.error); + const focusedWindow = BrowserWindow.getFocusedWindow(); + // check if focused window is main window + const mainWindow = WebContentViewsManager.instance.mainWindow; + if (focusedWindow && focusedWindow.id !== mainWindow?.id) { + focusedWindow.webContents.openDevTools(); + } else { + const view = id + ? WebContentViewsManager.instance.getViewById(id) + : WebContentViewsManager.instance.activeWorkbenchView; + if (view) { + view.webContents.openDevTools(); + } + } }; export const pingAppLayoutReady = (wc: WebContents, ready: boolean) => { diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-1.png index f851b00fe8..130be3af9c 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-2.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-2.png index ab343f364c..5f4440525f 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-2.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-2.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-embed-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-embed-1.png index 587d8fe737..caa0603057 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-embed-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-embed-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-bookmark-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-bookmark-1.png index 97d9f131fc..bd71f79b5c 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-bookmark-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-bookmark-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-illustration-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-illustration-1.png index ad608c5803..173c526421 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-illustration-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-1-illustration-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-embed-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-embed-1.png index 10a2384deb..ccb82d17a2 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-embed-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-embed-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-1.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-1.jpg index 9a5f86ba06..43dfe35ece 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-1.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-1.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-2.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-2.jpg index cb7e33bea4..24c2084a2b 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-2.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-illustration-2.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-1.png index 1d51ab4769..ad0ad9b933 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-2.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-2.png index 6de96a4785..b1175513c0 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-2.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-2-note-2.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-bookmark-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-bookmark-1.png index 35eb2e01b1..2d7a1a4095 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-bookmark-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-bookmark-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-1.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-1.jpg index 1d4d3bc1b2..ab6b014c4f 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-1.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-1.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-2.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-2.jpg index 8f473f59d0..b4d33d7aab 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-2.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-2.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-3.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-3.jpg index be37b7d5ed..ae6e511bbf 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-3.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-3.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-4.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-4.jpg index 7436423282..6d1597d6de 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-4.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-4.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-5.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-5.jpg index 9c26eac2b3..e6f450cd65 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-5.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-3-illustration-5.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-1.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-1.png index 6c022ccfb2..e068a37501 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-1.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-1.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-2.png b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-2.png index c6af08f99a..7b1f6cd3a7 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-2.png and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-bookmark-2.png differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-1.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-1.jpg index eaa923bd2d..4290115631 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-1.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-1.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-2.jpg b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-2.jpg index 1e9e153d17..b7e0abdeee 100644 Binary files a/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-2.jpg and b/packages/frontend/core/src/components/affine/onboarding/articles/assets/article-4-illustration-2.jpg differ diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts index 006f773618..6e1499e2cb 100644 --- a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts @@ -52,6 +52,7 @@ export const orbitItem = style({ flexShrink: 0, flexGrow: 0, overflow: 'hidden', + position: 'relative', }); export const doc = style({ selectors: { @@ -171,6 +172,7 @@ export const noDragWrapper = style({ position: 'absolute', inset: 0, pointerEvents: 'none', + width: '100%', }); globalStyle(`${noDragWrapper} > *`, { pointerEvents: 'auto', diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx index aa72a81b10..f32534b9c0 100644 --- a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx +++ b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx @@ -113,7 +113,6 @@ export const EdgelessSwitch = ({ turnOffScalingRef.current?.(); }; - // TODO(@catsjuice): mobile support const onMouseDown = (e: MouseEvent) => { const target = e.target as HTMLElement; if (target.closest('[data-no-drag]')) return; diff --git a/packages/frontend/core/src/components/affine/onboarding/style.css.ts b/packages/frontend/core/src/components/affine/onboarding/style.css.ts index a4b8d15e85..058bda2724 100644 --- a/packages/frontend/core/src/components/affine/onboarding/style.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/style.css.ts @@ -61,10 +61,6 @@ export const onboardingVars = { nextButtonShowUpDelay: '20s', }, }; -export const perspective = style({ - perspective: '10000px', - transformStyle: 'preserve-3d', -}); export const fadeIn = keyframes({ from: { opacity: 0, @@ -73,38 +69,39 @@ export const fadeIn = keyframes({ opacity: 1, }, }); -export const onboarding = style([ - perspective, - { - width: '100vw', - height: '100vh', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - position: 'relative', - selectors: { - // hack background color for web - '&::after': { - content: '', - position: 'absolute', - inset: 0, - background: onboardingVars.web.bg, - transform: 'translateZ(-1000px) scale(2)', - transition: 'opacity 0.3s ease', - }, - '&[data-is-desktop="true"]::after': { - animation: `${fadeIn} 0.8s linear`, - // content: 'unset', - background: - 'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)', - }, - '&[data-is-window="true"][data-is-desktop="true"]::after': { - opacity: 0, - }, +export const onboarding = style({ + width: '100vw', + height: '100vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + position: 'relative', + selectors: { + '&[data-is-window="false"]': { + perspective: '10000px', + transformStyle: 'preserve-3d', + }, + // hack background color for web + '&::after': { + content: '', + position: 'absolute', + inset: 0, + background: onboardingVars.web.bg, + transform: 'translateZ(-1000px) scale(2)', + transition: 'opacity 0.3s ease', + }, + '&[data-is-desktop="true"]::after': { + animation: `${fadeIn} 0.8s linear`, + // content: 'unset', + background: + 'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)', + }, + '&[data-is-window="true"][data-is-desktop="true"]::after': { + opacity: 0, }, }, -]); -globalStyle(`${onboarding} *`, { +}); +globalStyle(`${onboarding}[data-is-window="false"] *`, { perspective: '10000px', transformStyle: 'preserve-3d', }); @@ -146,3 +143,7 @@ globalStyle(`${tipsWrapper} > *`, { globalStyle(`${tipsWrapper}[data-visible="true"] > *`, { pointerEvents: 'auto', }); +// transparent background for onboarding window +globalStyle(`:root`, { + backgroundColor: 'transparent', +}); diff --git a/packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx b/packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx index 5b72a9f7bf..5780991e0e 100644 --- a/packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx +++ b/packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx @@ -1,3 +1,4 @@ +import { cssVarV2 } from '@toeverything/theme/v2'; import { keyframes, style } from '@vanilla-extract/css'; import { block } from '../articles/blocks.css'; @@ -33,24 +34,21 @@ export const switchButtons = style({ }); export const switchButton = style({ - width: 24, - height: 24, - transform: 'scale(2)', + width: 48, + height: 48, + fontSize: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'none', opacity: 0.6, cursor: 'pointer', + color: cssVarV2('switch/iconColor/default'), + position: 'relative', selectors: { - '&:nth-child(1)': { - transformOrigin: 'left', - }, - '&:nth-child(2)': { - transformOrigin: 'right', - }, '&[data-active="true"]': { opacity: 1, + color: cssVarV2('switch/iconColor/active'), }, }, }); diff --git a/packages/frontend/core/src/components/affine/onboarding/switch-widgets/switch.tsx b/packages/frontend/core/src/components/affine/onboarding/switch-widgets/switch.tsx index d56de516c0..50038b9d8f 100644 --- a/packages/frontend/core/src/components/affine/onboarding/switch-widgets/switch.tsx +++ b/packages/frontend/core/src/components/affine/onboarding/switch-widgets/switch.tsx @@ -1,10 +1,7 @@ +import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc'; import clsx from 'clsx'; import type { HTMLAttributes } from 'react'; -import { - EdgelessSwitchItem, - PageSwitchItem, -} from '../../../blocksuite/block-suite-mode-switch/switch-items'; import type { EdgelessSwitchMode } from '../types'; import * as styles from './style.css'; @@ -27,16 +24,20 @@ export const EdgelessSwitchButtons = ({ className={clsx(styles.switchButtons, className)} {...attrs} > - - + + +
+ > + +
); }; diff --git a/packages/frontend/core/src/components/affine/onboarding/switch-widgets/toolbar.tsx b/packages/frontend/core/src/components/affine/onboarding/switch-widgets/toolbar.tsx index 16e3e24eb1..5c116afc5f 100644 --- a/packages/frontend/core/src/components/affine/onboarding/switch-widgets/toolbar.tsx +++ b/packages/frontend/core/src/components/affine/onboarding/switch-widgets/toolbar.tsx @@ -349,7 +349,6 @@ export const ToolbarSVG = memo(function ToolbarSVG() { fillRule="evenodd" clipRule="evenodd" d="M378.235 49.6273C377.131 49.6273 376.235 50.5228 376.235 51.6273V77.6087H448.178V51.6273C448.178 50.5227 447.283 49.6273 446.178 49.6273H378.235ZM399.765 53.9412C398.205 53.9412 396.941 55.2053 396.941 56.7647C396.941 58.3241 398.205 59.5883 399.765 59.5883H425.177C426.736 59.5883 428 58.3241 428 56.7647C428 55.2053 426.736 53.9412 425.177 53.9412H399.765Z" - fill="url(#pattern0)" fillOpacity="0.24" /> - - - -