From 500d368af4f1f862a46e3b602e0b83700c6b662b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D1=83=D1=80=D0=BD=D0=B0=D1=82=20=D0=90=D0=BD=D0=B4?= =?UTF-8?q?=D1=80=D0=B5=D0=B9?= Date: Thu, 4 Jun 2026 21:20:29 +0300 Subject: [PATCH] Sync QWord statusbar view modes --- src/App.test.tsx | 43 ++++++++++++++++++++++++++++++- src/App.tsx | 49 +++++++++++++++++++++++++----------- src/features/qword/QWord.tsx | 27 ++++++++++++++------ 3 files changed, 95 insertions(+), 24 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index fd4d244..a11e9ce 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,4 +1,4 @@ -import { cleanup, render, waitFor } from "@testing-library/react"; +import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; import { afterEach, describe, expect, it } from "vitest"; import { initialState } from "./data/sampleData"; import type { QOfficeState } from "./types"; @@ -64,4 +64,45 @@ describe("qofficeWindowTitle", () => { window.requestAnimationFrame = originalRequestAnimationFrame; } }); + + it("syncs QWord statusbar view buttons with the active document view mode", () => { + const originalResizeObserver = globalThis.ResizeObserver; + const originalRequestAnimationFrame = window.requestAnimationFrame; + + globalThis.ResizeObserver = class { + observe() {} + disconnect() {} + } as unknown as typeof ResizeObserver; + window.requestAnimationFrame = ((callback: FrameRequestCallback) => { + callback(0); + return 1; + }) as typeof window.requestAnimationFrame; + window.history.pushState({}, "", "/qword"); + + try { + render(); + const stage = screen.getByLabelText("Редактор QWord"); + const printButton = screen.getByRole("button", { name: "Разметка страницы" }); + const webButton = screen.getByRole("button", { name: "Веб-документ" }); + + expect(stage).toHaveClass("qword-view-print"); + expect(printButton).toHaveAttribute("aria-pressed", "true"); + expect(screen.queryByRole("button", { name: "Черновик" })).not.toBeInTheDocument(); + + fireEvent.click(webButton); + + expect(stage).toHaveClass("qword-view-web"); + expect(webButton).toHaveAttribute("aria-pressed", "true"); + expect(printButton).toHaveAttribute("aria-pressed", "false"); + + fireEvent.click(screen.getByRole("tab", { name: "Вид" })); + fireEvent.click(screen.getByRole("button", { name: "Чтение" })); + + expect(stage).toHaveClass("qword-view-read"); + expect(screen.getByRole("button", { name: "Режим чтения" })).toHaveAttribute("aria-pressed", "true"); + } finally { + globalThis.ResizeObserver = originalResizeObserver; + window.requestAnimationFrame = originalRequestAnimationFrame; + } + }); }); diff --git a/src/App.tsx b/src/App.tsx index 1fccdbb..856e45a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,9 @@ import { useCallback, useEffect, useMemo, useState } from "react"; -import { BookOpen, Columns2, FileText, Minus, Plus, Rows3 } from "lucide-react"; +import { BookOpen, Columns2, FileText, Minus, Plus } from "lucide-react"; import { AppShell } from "./components/AppShell"; import { QOutlook } from "./features/qoutlook/QOutlook"; import { QPowerPoint } from "./features/qpowerpoint/QPowerPoint"; -import { QWord, type QWordStatus } from "./features/qword/QWord"; +import { QWord, type QWordStatus, type WordViewMode } from "./features/qword/QWord"; import { QExcell } from "./features/qexcell/QExcell"; import { initialState } from "./data/sampleData"; import { usePersistentState } from "./hooks/usePersistentState"; @@ -12,6 +12,11 @@ import type { MailMessage, QOfficeState, SlideDeck, WordDocument, Workbook } fro const STORAGE_KEY = "qoffice-state-v1"; const defaultQWordStatus: QWordStatus = { currentPage: 1, pageCount: 1, wordCount: 0 }; +const wordStatusbarViewModes = [ + { id: "print", label: "Разметка страницы", Icon: FileText }, + { id: "read", label: "Режим чтения", Icon: BookOpen }, + { id: "web", label: "Веб-документ", Icon: Columns2 } +] as const; function clampedWordZoom(value: number) { return Math.min(200, Math.max(50, value)); @@ -122,6 +127,7 @@ export function App() { const [state, setState] = usePersistentState(STORAGE_KEY, initialState, migrateQOfficeState); const [wordStatus, setWordStatus] = useState(defaultQWordStatus); const [wordZoom, setWordZoom] = useState(100); + const [wordViewMode, setWordViewMode] = useState("print"); const activeApp = activeAppFromLocation(window.location); const windowTitle = qofficeWindowTitle(state, activeApp); @@ -164,18 +170,23 @@ export function App() { trailing: (
- - - - + {wordStatusbarViewModes.map((mode) => { + const Icon = mode.Icon; + const isActive = wordViewMode === mode.id; + return ( + + ); + })}