-
Johnny authored
Add keyboard-activated Focus Mode to provide an immersive writing experience: Features: - Toggle with Cmd/Ctrl+Shift+F (matches GitHub, Google Docs) - Exit with Escape, toggle shortcut, button click, or backdrop click - Expands editor to ~80-90% of viewport with centered layout - Semi-transparent backdrop with blur effect - Maintains all editor functionality (attachments, shortcuts, etc.) - Smooth 300ms transitions Responsive Design: - Mobile (< 640px): 8px margins, 50vh min-height - Tablet (640-768px): 16px margins - Desktop (> 768px): 32px margins, 60vh min-height, 1024px max-width Implementation: - Centralized constants for easy maintenance (FOCUS_MODE_STYLES) - Extracted keyboard shortcuts and heights to named constants - JSDoc documentation for all new functions and interfaces - TypeScript type safety with 'as const' - Explicit positioning (top/left/right/bottom) to avoid width overflow Files Modified: - web/src/components/MemoEditor/index.tsx - Main Focus Mode logic - web/src/components/MemoEditor/Editor/index.tsx - Height adjustments - web/src/locales/en.json - Translation keys Design follows industry standards (GitHub Focus Mode, Notion, Obsidian) and maintains code quality with single source of truth pattern.
c8162ff3
| Name |
Last commit
|
Last update |
|---|---|---|
| .github | ||
| cmd/memos | ||
| internal | ||
| plugin | ||
| proto | ||
| scripts | ||
| server | ||
| store | ||
| web | ||
| .dockerignore | ||
| .gitignore | ||
| .golangci.yaml | ||
| .goreleaser.yaml | ||
| CLAUDE.md | ||
| CODEOWNERS | ||
| LICENSE | ||
| README.md | ||
| SECURITY.md | ||
| go.mod | ||
| go.sum |