mirror of https://github.com/usememos/memos.git
feat(web): add Focus Mode UI entry in Insert Menu
Add discoverable UI entry point for Focus Mode via Insert Menu submenu: UI Changes: - Add "View" submenu to Insert Menu (+ button dropdown) - Nested menu with Focus Mode option (ChatGPT-style pattern) - Display keyboard shortcut hint (⌘⇧F) next to menu item - Uses DropdownMenuSub components from Radix UI User Access Methods: 1. Keyboard: Cmd/Ctrl+Shift+F (primary, power users) 2. Mouse: + menu → View → Focus Mode (discoverable) 3. Mobile: Touch-friendly menu access Benefits: - Improves discoverability for new users - Doesn't clutter main editor UI - Educates users about keyboard shortcut - Extensible for future view options (typewriter, reading mode, etc.) - Follows familiar UI patterns (ChatGPT, Notion) Files Modified: - web/src/components/MemoEditor/ActionButton/InsertMenu.tsx * Add DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent * Add View submenu with Focus Mode entry * Add onToggleFocusMode prop - web/src/components/MemoEditor/index.tsx * Pass toggleFocusMode to InsertMenu component - web/src/locales/en.json * Add "editor.view" translation key
This commit is contained in:
parent
c8162ff3cc
commit
357118804e
|
|
@ -1,10 +1,18 @@
|
|||
import { LatLng } from "leaflet";
|
||||
import { uniqBy } from "lodash-es";
|
||||
import { FileIcon, LinkIcon, LoaderIcon, MapPinIcon, PlusIcon } from "lucide-react";
|
||||
import { FileIcon, LinkIcon, LoaderIcon, MapPinIcon, Maximize2Icon, MoreHorizontalIcon, PlusIcon } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useContext, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Attachment } from "@/types/proto/api/v1/attachment_service";
|
||||
import { Location, MemoRelation } from "@/types/proto/api/v1/memo_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
|
@ -19,6 +27,7 @@ interface Props {
|
|||
isUploading?: boolean;
|
||||
location?: Location;
|
||||
onLocationChange: (location?: Location) => void;
|
||||
onToggleFocusMode?: () => void;
|
||||
}
|
||||
|
||||
const InsertMenu = observer((props: Props) => {
|
||||
|
|
@ -124,6 +133,20 @@ const InsertMenu = observer((props: Props) => {
|
|||
<MapPinIcon className="w-4 h-4" />
|
||||
{t("tooltip.select-location")}
|
||||
</DropdownMenuItem>
|
||||
{/* View submenu with Focus Mode */}
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<MoreHorizontalIcon className="w-4 h-4" />
|
||||
{t("common.more")}
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem onClick={props.onToggleFocusMode}>
|
||||
<Maximize2Icon className="w-4 h-4" />
|
||||
{t("editor.focus-mode")}
|
||||
<span className="ml-auto text-xs text-muted-foreground opacity-60">⌘⇧F</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
|
|
|
|||
|
|
@ -591,6 +591,7 @@ const MemoEditor = observer((props: Props) => {
|
|||
location,
|
||||
}))
|
||||
}
|
||||
onToggleFocusMode={toggleFocusMode}
|
||||
/>
|
||||
</div>
|
||||
<div className="shrink-0 flex flex-row justify-end items-center">
|
||||
|
|
|
|||
|
|
@ -102,7 +102,8 @@
|
|||
"username": "Username",
|
||||
"version": "Version",
|
||||
"visibility": "Visibility",
|
||||
"yourself": "Yourself"
|
||||
"yourself": "Yourself",
|
||||
"more": "More"
|
||||
},
|
||||
"days": {
|
||||
"fri": "Fri",
|
||||
|
|
|
|||
Loading…
Reference in New Issue