fix(web): clarify focus mode entry
This commit is contained in:
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>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user