fix(web): clarify focus mode entry

This commit is contained in:
tianma-if committed 2026-09-06 23:34:02 +08:00
1 parent e691453aac
commit 2adfd7deea
3 files changed
+44 -19

No files matched your search

@@ -2077,8 +2077,9 @@ export const DiagramEditorPane = ({
<div className="hidden items-center gap-1 lg:flex">
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant={desktopFocusMode ? "soft" : "ghost"} aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")} aria-pressed={desktopFocusMode} onClick={onToggleDesktopFocusMode}>
<Button size="sm" variant={desktopFocusMode ? "soft" : "ghost"} aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")} aria-pressed={desktopFocusMode} onClick={onToggleDesktopFocusMode}>
{desktopFocusMode ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
<span>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</span>
</Button>
</TooltipTrigger>
<TooltipContent>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</TooltipContent>
+12 -18
View File
@@ -3853,24 +3853,6 @@ const RichEditorPane = ({
</button>
</div>
<div className="hidden items-center gap-1 lg:flex">
<TooltipProvider delayDuration={0} skipDelayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button
size="icon"
variant={desktopFocusMode ? "soft" : "ghost"}
aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}
aria-pressed={desktopFocusMode}
onClick={onToggleDesktopFocusMode}
>
{desktopFocusMode ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<IconTooltip label={t("editor.previousMemo")}>
<Button size="icon" variant="ghost" aria-label={t("editor.previousMemo")} onClick={onOpenPreviousMemo} disabled={!hasPreviousMemo}>
<ChevronLeft className="h-4 w-4" />
@@ -4295,6 +4277,18 @@ const RichEditorPane = ({
</Button>
</IconTooltip>
)}
<Button
className="hidden shrink-0 lg:inline-flex"
size="sm"
variant={desktopFocusMode ? "soft" : "ghost"}
title={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}
aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}
aria-pressed={desktopFocusMode}
onClick={onToggleDesktopFocusMode}
>
{desktopFocusMode ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
<span>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</span>
</Button>
</div>
</div>
{noteSearchOpen ? (
@@ -0,0 +1,30 @@
import { describe, expect, test } from "bun:test";
import { readFileSync } from "node:fs";
const editorPaneSource = readFileSync(new URL("./EditorPane.tsx", import.meta.url), "utf8");
const diagramEditorPaneSource = readFileSync(new URL("./DiagramEditorPane.tsx", import.meta.url), "utf8");
const expectDiscoverableFocusModeEntry = (source) => {
const normalizedSource = source.replace(/\s+/g, " ");
expect(normalizedSource).toContain('size="sm" variant={desktopFocusMode ? "soft" : "ghost"}');
expect(normalizedSource).toContain('<span>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</span>');
expect(source).not.toContain('size="sm"\n variant="solid"');
};
describe("focus mode entry", () => {
test("labels a restrained action in every desktop note editor instead of relying on an ambiguous icon", () => {
expectDiscoverableFocusModeEntry(editorPaneSource);
expectDiscoverableFocusModeEntry(diagramEditorPaneSource);
});
test("groups the standard editor entry with note view controls instead of top-level navigation", () => {
const readingProtectionIconIndex = editorPaneSource.indexOf(
'{desktopReadingProtection ? <Lock className="h-4 w-4" /> : <LockOpen className="h-4 w-4" />}',
);
const focusModeEntryIndex = editorPaneSource.indexOf(
'title={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}',
);
expect(readingProtectionIconIndex).toBeGreaterThan(-1);
expect(focusModeEntryIndex).toBeGreaterThan(readingProtectionIconIndex);
});
});