oscript-ui
oscript-ui

Шапка объекта

Шапка объекта — первый экран его страницы: имя заголовком , значок и подпись вида, плашки состояния, описание, ряд меты и главное действие. Каким бывает объект, кит не знает: значок, подпись вида и слаг приходят в модели.

Когда использовать#

  • У объекта есть своя страница: проект, документ, группа, пакет.
  • Человеку нужно сразу понять, что перед ним, в каком оно состоянии и что с ним можно сделать.
  • У объекта есть одно главное действие — команда установки, «Настройки», «Опубликовать».

Не берите шапку объекта для страницы-списка или раздела настроек — там нужен заголовок страницы. Запись внутри списка показывает сводка.

Полная шапка#

Имя обязательно. Иконка стоит перед именем, Подпись — вид объекта мелко рядом. Под ними идут Плашки, Описание, Мета и Команда — блок команды с копированием.

Со значком, подписью и командой

отчётдокумент

внешнийустаревший

Сводный отчёт за период

автор: а.ивановасрок: бессрочноисточник
приложение установить отчёт
Плашки = Новый Массив(); Плашки.Добавить(Новый Структура("Текст, Вид", "внешний", "accent")); Плашки.Добавить(Новый Структура("Текст, Вид", "устаревший", "warn")); Мета = Новый Массив(); Мета.Добавить(Новый Структура("Подпись, Значение, Значок", "автор", "а.иванова", "аккаунт")); Мета.Добавить(Новый Структура("Подпись, Значение", "срок", "бессрочно")); Мета.Добавить(Новый Структура("Подпись, Адрес", "источник", "https://пример.рф/источник")); HTML = Набор.ШапкаОбъекта().Отрисовать( Новый Структура("Имя, Вид, Иконка, Подпись, Описание, Плашки, Мета, Команда", "отчёт", "document", "куб", "документ", "Сводный отчёт за период", Плашки, Мета, "приложение установить отчёт"));

В дереве холста шапка собирается словами: имя позицией, действия — детьми, а каждая плашка и каждый пункт меты — своим словом (см. Язык узлов).

Узлом холста — словами

отчётдокумент

внешнийустаревший

Сводный отчёт за период

автор: а.ивановасрок: бессрочноисточник
приложение установить отчёт
HTML = Кит.ШапкаОбъекта("отчёт") .Вид("document").Иконка("куб").Подпись("документ") .Описание("Сводный отчёт за период") .Плашка(Кит.Плашка("внешний").Вид("accent")) .Плашка(Кит.Плашка("устаревший").Вид("warn")) .Мета("автор", "а.иванова", "аккаунт") .Мета("срок", "бессрочно") .Мета("источник", "", "", "https://пример.рф/источник") .Команда("приложение установить отчёт").Рендер();

Вид — слаг объекта для атрибута data-kind: строчная латиница, цифры и дефис. Своего оформления у вида нет, атрибут нужен листу и скриптам инсталляции. Слаг с другими символами в разметку не попадает.

Другой объект#

Другой объект — другой значок, подпись и слаг. Шапка та же: кит не держит словаря видов.

Другой объект — другой значок

альфапроект

внешний
Плашки = Новый Массив(); Плашки.Добавить(Новый Структура("Текст, Вид", "внешний", "accent")); HTML = Набор.ШапкаОбъекта().Отрисовать( Новый Структура("Имя, Вид, Иконка, Подпись, Плашки", "альфа", "project", "куб", "проект", Плашки));

Признак у имени#

Признаки — значки сразу за именем, в той же строке заголовка: подписан, закреплён, проверен. Это свойство самого имени, поэтому место ему — у имени, а не среди плашек состояния. Значок размером с букву стоит по средней линии и держится за последний символ имени: на новую строку один он не уходит.

С признаком у имени — значок, а не плашка

годовой-отчётВыпуск подписан ключом издателядокумент

Признаки = Новый Массив(); Признаки.Добавить(Новый Структура("Иконка, Подпись", "замок", "Выпуск подписан ключом издателя")); HTML = Набор.ШапкаОбъекта().Отрисовать( Новый Структура("Имя, Иконка, Подпись, Признаки", "годовой-отчёт", "куб", "документ", Признаки));

Подпись признака обязательна: без неё кит бросает исключение. Признак с неизвестным глифом не печатается.

Действия#

Действия — кнопки справа от имени; на узком экране они переносятся под него. Это доверенная разметка, собранная компонентом кнопка.

Без значка и подписи, с действием

группа-разработки

Действия = Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант, Иконка, Адрес", "Настройки", "вторичная", "шестерёнка", "/настройки/проекты")); HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Действия", "группа-разработки", Действия));

Гайдлайны#

годовой-отчётдокумент

ДелайтеОдно главное действие, остальные легче
Код
Действия = Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Настройки", "вторичная"))
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Иконка", "Опубликовать", "стрелка"));

HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Подпись, Действия",
	"годовой-отчёт", "документ", Действия));

годовой-отчётдокумент

Не делайтеРяд основных кнопок: шапка спорит сама с собой
Код
Действия = Набор.Кнопка().Отрисовать("Настройки")
	+ Набор.Кнопка().Отрисовать("Опубликовать")
	+ Набор.Кнопка().Отрисовать("Скачать");

HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Подпись, Действия",
	"годовой-отчёт", "документ", Действия));

годовой-отчётПодписан ключом издателя

устаревший
ДелайтеПризнак имени — значком с подписью у имени
Код
Признаки = Новый Массив();
Признаки.Добавить(Новый Структура("Иконка, Подпись", "замок", "Подписан ключом издателя"));

Плашки = Новый Массив();
Плашки.Добавить(Новый Структура("Текст, Вид", "устаревший", "warn"));

HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Признаки, Плашки",
	"годовой-отчёт", Признаки, Плашки));

годовой-отчёт

подписанустаревший
Не делайтеПризнак плашкой среди состояний: смешаны «что это» и «как оно»
Код
Плашки = Новый Массив();
Плашки.Добавить(Новый Структура("Текст, Вид", "подписан", "ok"));
Плашки.Добавить(Новый Структура("Текст, Вид", "устаревший", "warn"));

HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Плашки",
	"годовой-отчёт", Плашки));

отчётдокумент

Сводный отчёт за период

ДелайтеОписание — одна фраза о том, что это
Код
HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Подпись, Описание",
	"отчёт", "документ", "Сводный отчёт за период"));

отчётдокумент

Этот документ содержит сводный отчёт за выбранный период, собранный из всех проектов, в которых вы участвуете, с учётом прав доступа, фильтров и настроек, сохранённых в вашем профиле, и обновляется каждую ночь.

Не делайтеОписание в абзац: первый экран уходит на чтение
Код
HTML = Набор.ШапкаОбъекта().Отрисовать(Новый Структура("Имя, Подпись, Описание",
	"отчёт", "документ", "Этот документ содержит сводный отчёт за выбранный период, "
	+ "собранный из всех проектов, в которых вы участвуете, с учётом прав доступа, "
	+ "фильтров и настроек, сохранённых в вашем профиле, и обновляется каждую ночь."));

Доступность#

  • Имя печатается <h1>. На странице объекта это единственный <h1>: другие заголовки — второго уровня и ниже.
  • Шапка печатается <header> с классом objhead.
  • Признак у имени — значок с role="img" и <title> из подписи: это и доступное имя, и всплывающая подсказка.
  • Значок перед именем и значки меты декоративны. В мете подпись звучит скрытым текстом, как в ряду меты.
  • Без Имени кит шапку не соберёт: страница объекта осталась бы без заголовка.

Узлом холста#

На холсте действия шапки кладут детьми узла, а признак у имени — словом Знак(Иконка, Подпись).

Узлом дерева — действия кладут детьми

отчётдокумент

HTML = Кит.ШапкаОбъекта("отчёт", Кит.Кнопка("Настройки").Вторичная()).Подпись("документ").Рендер();

Модель#

Структура ниже — прежний вид модели; в дереве холста её поля пишут слова Кит.ШапкаОбъекта, а Действия становятся детьми узла.

ШапкаОбъекта.Отрисовать()src/Классы/компоненты/ШапкаОбъекта.os

Отрисовывает шапку объекта.

Параметры:
 Модель - Структура - Имя (ОБЯЗАТЕЛЬНО), Вид (слаг для data-kind: строчная латиница,
          цифры и дефис; всё прочее в разметку не попадает), Иконка (имя из НаборИконок),
          Подпись (подпись вида рядом с именем), Описание, Плашки (массив моделей
          компонента Плашка), Мета (массив структур Подпись, Значение, Значок, Адрес —
          с адресом значение становится ссылкой), Команда (модель БлокКоманды, главный
          CTA), Действия (ДОВЕРЕННЫЙ HTML кнопок), Признаки (массив структур Иконка,
          Подпись — значки сразу за именем в той же строке: имя глифа из НаборИконок
          и подпись, она же доступное имя и всплывающая подсказка значка; значок
          держится за последний символ имени и на новую строку один не уходит;
          признак с неизвестным глифом не печатается).

Возвращаемое значение:
 Строка - фрагмент <header class="objhead">. Кидается исключением, если Имя пусто
          либо у признака нет подписи.

Кит.ШапкаОбъекта()src/Классы/холст/Кит.os

Шапка объекта — первый экран проекта, группы, участника; дети узла становятся её
действиями. Слова: Иконка, Описание, Подпись, Вид (слаг для data-kind), Знак(Иконка,
Подпись), Мета(Подпись, Значение, Значок, Адрес), Плашка(узел | текст), Команда(Текст).

Параметры:
 Модель - Строка, Структура - имя объекта; Структура — прежний вид модели без Действий.
 Р1…Р8  - ЭлементЭкрана - (необязательные) действия.

Возвращаемое значение:
 ЭлементЭкрана