Align QWord shell with Office ribbon
This commit is contained in:
Курнат Андрей
@@ -0,0 +1,16 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { AppShell } from "./AppShell";
|
||||
|
||||
describe("AppShell", () => {
|
||||
it("не показывает общую ленту навигации между приложениями", () => {
|
||||
const view = render(
|
||||
<AppShell activeApp="word" status={{ savedLabel: "Сохранено локально" }}>
|
||||
<div>Рабочая область QWord</div>
|
||||
</AppShell>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Рабочая область QWord")).toBeInTheDocument();
|
||||
expect(view.container.querySelector(".ribbon")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -57,16 +57,6 @@ export function AppShell({ activeApp, status, children }: AppShellProps) {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="ribbon" aria-label="Лента команд">
|
||||
<div className="ribbon-tabs">
|
||||
{["Файл", "Главная", "Вставка", "Рецензирование", "Вид", "Экспорт"].map((tab, index) => (
|
||||
<button key={tab} className={index === 1 ? "is-active" : ""} type="button">
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="surface-host">{children}</div>
|
||||
|
||||
<footer className="statusbar">
|
||||
|
||||
@@ -134,6 +134,7 @@ const styleGalleryOptions = [
|
||||
{ value: "h6", label: "Заголовок 6" },
|
||||
{ value: "blockquote", label: "Цитата" }
|
||||
];
|
||||
const wordRibbonTabs = ["Файл", "Главная", "Вставка", "Конструктор", "Макет", "Ссылки", "Рассылки", "Рецензирование", "Вид", "Справка"];
|
||||
|
||||
function findInPage(query: string) {
|
||||
return (window as PageSearchWindow).find?.(query) ?? false;
|
||||
@@ -375,6 +376,13 @@ export function QWord({ document, onChange }: QWordProps) {
|
||||
onChange={(event) => void insertImage(event.target.files?.[0])}
|
||||
aria-label="Вставить изображение"
|
||||
/>
|
||||
<div className="word-ribbon-tabs" role="tablist" aria-label="Вкладки QWord">
|
||||
{wordRibbonTabs.map((tab, index) => (
|
||||
<button key={tab} className={index === 1 ? "is-active" : ""} type="button" role="tab" aria-selected={index === 1}>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="word-ribbon" aria-label="Лента команд QWord">
|
||||
<section className="word-ribbon-group word-file-group" aria-label="Файл">
|
||||
<div className="word-file-actions">
|
||||
|
||||
+72
-13
@@ -87,7 +87,7 @@ button {
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-rows: 34px 36px minmax(0, 1fr) 28px;
|
||||
grid-template-rows: 34px minmax(0, 1fr) 28px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
@@ -329,18 +329,53 @@ button {
|
||||
|
||||
.word-module-toolbar {
|
||||
display: block;
|
||||
min-height: 118px;
|
||||
min-height: 154px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.word-ribbon-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 100%;
|
||||
height: 36px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-bottom: 1px solid #d6dde8;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.word-ribbon-tabs button {
|
||||
flex: 0 0 auto;
|
||||
height: 36px;
|
||||
padding: 0 13px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: #2f343c;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.word-ribbon-tabs button.is-active {
|
||||
border-bottom-color: #2f5f9f;
|
||||
color: #1f4f8a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.word-ribbon-tabs button:hover {
|
||||
background: #edf4fb;
|
||||
}
|
||||
|
||||
.word-ribbon {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: 118px;
|
||||
min-height: 118px;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
@@ -349,6 +384,7 @@ button {
|
||||
grid-template-rows: minmax(0, 1fr) 18px;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
height: 118px;
|
||||
min-height: 118px;
|
||||
min-width: 0;
|
||||
padding: 8px 10px 4px;
|
||||
@@ -459,10 +495,17 @@ button {
|
||||
}
|
||||
|
||||
.word-font-group {
|
||||
flex: 1 1 266px;
|
||||
flex: 0 0 266px;
|
||||
grid-template-rows: 28px 28px minmax(0, 1fr) 18px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.word-ribbon select {
|
||||
height: 28px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.word-font-select {
|
||||
min-width: 0;
|
||||
flex: 1 1 170px;
|
||||
@@ -476,16 +519,18 @@ button {
|
||||
.word-format-tools {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-top: 6px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.word-color-row {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 6px;
|
||||
gap: 4px;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.word-color-row .text-color-tools {
|
||||
min-height: 26px;
|
||||
min-height: 22px;
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
@@ -497,6 +542,7 @@ button {
|
||||
|
||||
.word-paragraph-group {
|
||||
flex: 0 0 170px;
|
||||
grid-template-rows: 28px 28px minmax(0, 1fr) 18px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@@ -510,20 +556,22 @@ button {
|
||||
}
|
||||
|
||||
.word-styles-group {
|
||||
flex: 0 1 210px;
|
||||
flex: 0 0 360px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.word-style-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(74px, 1fr));
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.word-style-gallery button {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
flex: 0 0 82px;
|
||||
min-height: 64px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #d6dde8;
|
||||
@@ -563,6 +611,17 @@ button {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.word-ribbon .segmented-tools button {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.word-ribbon .compact-command {
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hidden-file-input {
|
||||
display: none;
|
||||
}
|
||||
@@ -809,7 +868,7 @@ button {
|
||||
.page-ruler {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
width: clamp(794px, calc(100% - 80px), 1000px);
|
||||
width: var(--qword-page-width, 794px);
|
||||
height: 26px;
|
||||
margin: 12px auto 0;
|
||||
color: #7a8797;
|
||||
@@ -845,12 +904,12 @@ button {
|
||||
|
||||
.paper-frame {
|
||||
position: relative;
|
||||
width: clamp(794px, calc(100% - 80px), 1000px);
|
||||
width: var(--qword-page-width, 794px);
|
||||
margin: 0 auto 38px;
|
||||
}
|
||||
|
||||
.paper {
|
||||
--qword-page-height: 1180px;
|
||||
--qword-page-height: 1123px;
|
||||
min-height: var(--qword-page-height);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user