Commit a7f39ca2 authored by Яков's avatar Яков
Browse files

Панель инструментов: пресеты по контекстам и понятные подписи



Пресеты (было два, и хост не передавал их ни разу):
  lesson  — урок, полный набор без произвольного размера шрифта
  text    — описания, инфо, глоссарий, база знаний
  comment — комментарий проверяющего
  answer  — ответ учащегося, с audio

Заголовки вынесены из выпадающего списка на верхний уровень: на боевой базе
жирный абзац вместо заголовка встречается в 289 уроках, настоящий h2 — в 31.

Нативный browser title заменён на подсказку с названием и пояснением
«что я получу». Кнопки получили role/tabIndex/aria-label и видимый фокус.

Палитра цветов сведена с 12 произвольных оттенков к 6 семантическим
из темы платформы.

Удалена кнопка pdfToText: её onClick дублировал кнопку pdf, в пресетах
она не значилась и автору не показывалась.

Новый проп labels — словарь подписей от хоста: своей локализации у пакета нет.
Co-Authored-By: default avatarClaude Opus 5 (1M context) <noreply@anthropic.com>
parent bb440fff
...@@ -188,7 +188,10 @@ const QEditor = ({ ...@@ -188,7 +188,10 @@ const QEditor = ({
toolsOptions = {type: 'all'}, toolsOptions = {type: 'all'},
onInfo, onInfo,
// Режим оформления контента, задаётся хостом: 'atma-content--lesson' | 'atma-content--compact' | '' // Режим оформления контента, задаётся хостом: 'atma-content--lesson' | 'atma-content--compact' | ''
contentClass = '' contentClass = '',
// Словарь подписей от хоста: { [ключ кнопки]: { title, hint } }.
// Нужен для перевода — своей локализации у пакета нет. Пусто — встроенные русские.
labels = {}
}) => { }) => {
global.uploadUrl = uploadOptions.url global.uploadUrl = uploadOptions.url
...@@ -358,36 +361,27 @@ const QEditor = ({ ...@@ -358,36 +361,27 @@ const QEditor = ({
setInnerModalType(type) setInnerModalType(type)
setModalIsOpen(true) setModalIsOpen(true)
} }
// Палитра сведена к шести семантическим значениям (решение владельца, §12 ТЗ,
// вопрос 3). Было по двенадцать произвольных оттенков на каждый список —
// с ними «заголовок выглядит одинаково во всех уроках» недостижимо.
// Значения взяты из темы платформы (_variables.scss / _content.scss),
// а не подобраны заново.
const colors = { const colors = {
color: [ color: [
'none', 'none', // обычный текст
'#8a8a8a', '#6B7280', // приглушённый
'#afafaf', '#1790FF', // акцент
'#44d724', '#09C358', // успех
'#0bd9b2', '#F6993F', // предупреждение
'#4fb7ff', '#FF5F56' // ошибка
'#226aff',
'#b153e5',
'#f54f8e',
'#f34c37',
'#ee7027',
'#d27303',
'#ffd102'
], ],
highlight: [ highlight: [
'none', 'none',
'#9B9B9B', '#E3E7EC', // нейтральное выделение
'#CCCCCC', '#CDE8FF', // акцент
'#9ee191', '#C9F2D8', // успех
'#43e7bf', '#FFE9B8', // предупреждение
'#4fb7ff', '#FFD9D6' // ошибка
'#6d9ef5',
'#cd92e8',
'#f597bc',
'#fa9084',
'#ef9558',
'#dea75b',
'#ffe672'
] ]
} }
const fontSizes = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px'] const fontSizes = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px']
...@@ -515,10 +509,9 @@ const QEditor = ({ ...@@ -515,10 +509,9 @@ const QEditor = ({
title: 'Эмодзи', title: 'Эмодзи',
render: ({ key }) => <EmojiPicker key={key} editor={editor} /> render: ({ key }) => <EmojiPicker key={key} editor={editor} />
}, },
pdfToText: { // pdfToText удалён: его onClick вызывал modalOpener('pdf', …) — тот же модал
title: 'Загрузить pdf', // с тем же аргументом, что и кнопка pdf, то есть буквальный дубль.
onClick: () => modalOpener('pdf', 'Загрузить pdf') // В пресетах он не значился, автору не показывался никогда.
},
interactiveImage: { interactiveImage: {
title: 'Интерактивное изображение', title: 'Интерактивное изображение',
onClick: () => { onClick: () => {
...@@ -1932,7 +1925,7 @@ const QEditor = ({ ...@@ -1932,7 +1925,7 @@ const QEditor = ({
return ( return (
<div className='atma-editor-wrap' style={style}> <div className='atma-editor-wrap' style={style}>
<div className='atma-editor'> <div className='atma-editor'>
<ToolBar editor={editor} {...{toolsOptions}} {...{toolsLib}} onInfo={onInfo} /> <ToolBar editor={editor} {...{toolsOptions}} {...{toolsLib}} onInfo={onInfo} labels={labels} />
<BubbleMenu <BubbleMenu
typpyOptions={{followCursor: true}} typpyOptions={{followCursor: true}}
editor={editor} editor={editor}
......
This diff is collapsed.
...@@ -1811,3 +1811,44 @@ body{ ...@@ -1811,3 +1811,44 @@ body{
max-height: min(52vh, 320px); max-height: min(52vh, 320px);
} }
} }
// ─────────────────────────────────────────────────────────────────────────────
// Подсказка у кнопки панели.
//
// Заменяет нативный browser title: у того задержка около секунды, серый
// системный вид и невозможность показать вторую строку. Именно он давал
// ощущение «панель из 2003 года».
// ─────────────────────────────────────────────────────────────────────────────
.atma-editor-tip {
max-width: 280px;
.ant-tooltip-inner {
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.45;
}
}
.atma-editor-tip-body {
display: block;
}
.atma-editor-tip-title {
display: block;
font-weight: 600;
margin-bottom: 2px;
}
.atma-editor-tip-hint {
display: block;
opacity: 0.8;
}
// Кнопка панели должна быть доступна с клавиатуры: теперь у неё role="button"
// и tabIndex, значит нужен видимый фокус.
.qicon:focus-visible {
outline: 2px solid #1790FF;
outline-offset: 1px;
border-radius: 4px;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment