Использование стилей Web-клиент в собственных разметках

В Web-клиент для разметок карточек модуля Управление документами были разработаны новые стили, которые по умолчанию используются только в стандартных карточках разметок. Для использования новых стилей в собственных разметках необходимо назначить специальные обработчики и стили на элементы разметок.

  1. Назначьте обработчик на событие Перед открытием карточки корневого элемента разметки documentRoot:

    addNewStyleForControls

    добавляет для разметки и её модальных окон класс new-style-layout. Новые стили могут быть применены только при наличии у разметки данного класса.

  2. Назначьте обработчики на событие После открытия карточки корневого элемента разметки documentRoot:

    addStyleToCard

    Включает в себя три обработчика:

    getControlsForExpanding

    Осуществляет поиск Блоков с классом block-with-border, для которых включает поддержку возможности сворачивания/разворачивания по щелчку на общей кнопке сворачивания/разворачивания всех блоков.

    addGrayBackgroundToCard

    Добавляет в карточку фон серого цвета.

    addShadowBorder

    Осуществляет поиск раскрытых Блоков с классом block-with-border, для которых добавляет серую рамку.

    Вместо одного обработчика addStyleToCard можно указать обработчики getControlsForExpanding, addGrayBackgroundToCard и addShadowBorder. Если отдельные функции не требуются, обработчики можно не указывать.

    outgoingDocument_CardManagementIsVisible

    Загружает почту и телефон контрагентов, указанных в списке Адресаты, при загрузке карточки, а также скрывает пустой блок с примечанием.

    Используется только в разметке Исходящего документа.

  3. Назначьте обработчик на события При сворачивании и При разворачивании элементов Блок, Список файлов, Ссылки и др. сворачиваемых элементов:

    • switchBorderWithShadow — в развернутом состоянии добавляет к элементу рамку с тенью, и скрывает её при сворачивании элемента.

      Обработчик switchBorderWithShadow следует добавлять только к элементам, для которых нужна тень. Например, это блок с информацией о карточке, список файлов или блок, в котором отображается ход исполнения.

      Постоянную рамку для несворачиваемых блоков можно добавить с помощью стиля block-with-shadow: указать в параметре Дополнительные CSS классы требуемого элемента.

      Для устаревших элементов управления TaskCardFilePanel, TaskCardReportPanel и т. п., у которых отсутствуют события При сворачивании / При разворачивании, рамка с тенью может быть добавлена только с помощью стиля block-with-shadow.

  4. Укажите стили в настройке Дополнительные CSS классы:

    • Для корневого элемента documentRoot:

      system-layout-independent-scroll

      Включает отдельную прокрутку для элемента Предпросмотр файла и области с данными карточки.

      expansion-panel-header

      Включает новый дизайн для заголовков Блоков.

      center-screen

      Включает динамическое изменение боковых отступов от края страницы до элементов с данными карточки: чем уже окно браузера, тем меньше отступы.

      control-label-opacity-half

      Включает использование серого цвета для меток элементов управления.

    • Для Блоков:

      block-with-toggle-button

      Добавляет в Блок кнопку сворачивания/разворачивания всех Блоков со стилем block-with-border. Для избежания ошибок: стиль следует использовать только в одном Блоке разметки; у данного блока не должно быть обработчиков события При щелчке.

      top-saving-buttons-block

      Включает выравнивание содержимого по высоте, убирает лишнее пространство у кнопок.

      Следует устанавливать только в Блоке, в котором размещается название карточки и кнопки сохранения, если дизайн пользовательской разметки повторяет дизайн стандартной разметки документов.
      block-with-shadow

      Добавляет тень и рамку к Блоку.

      Если для блока включён обработчик switchBorderWithShadow, добавлять стиль block-with-shadow не нужно.

      Для Блоков, Списка файлов, Ссылок и др. сворачиваемых элементов, для которых назначен обработчик switchBorderWithShadow block-with-border добавляет функцию сворачивания/разворачивания элемента, вызываемую кнопкой сворачивания/разворачивания всех Блоков.

    • Прочие доступные стандартные стили:

      document-name-small

      Устанавливает размер шрифта 1.4rem. В разметках Web-клиент используется в элементе с названием карточки;

      document-name

      Устанавливает размер шрифта 1.6875rem. Стандартные размер для элемента с названием карточки в Web-клиент 14.

      card-kind-large

      При ширине экрана более 420px устанавливает размер шрифта 1.125rem. В разметках Web-клиент используется в элементе Вид карточки.

      document-view-state-wide

      Переводит строчные буквы в прописные и добавляет межбуквенный интервал. В разметках Web-клиент в элементе Состояние.

      taskstable-with-hidden-filters

      Скрывает фильтры в элементе Таблица исполнения.

      colored-button

      Для элемента Кнопка включает использование стандартной цветовой гаммы открытой карточки.

      block-border-top, block-border-right, block-border-bottom, block-border-left

      Добавляет серую линию в 1px по одной из границ элемента соответственно: верхней, правой, нижней, левой.

      block-with-disclosure-body-center

      Для Блоков включает выравнивание содержимого по центру.

      block-with-disclosure-resize

      Для Блока включает особый режим выравнивания дочерних блоков, если у Блока два дочерних блока шириной 50% от родительского и установленной минимальной шириной. Если ширины родительского блока достаточно для отображения обоих блоков в строку — они будут отображаться в строку, иначе — в столбец.

      block-with-one-height

      Для Блока включает особый режим выравнивания дочерних Блоков по высоте. Всем дочерним Блокам будет установлена высота самого высокого Блока.

      block-with-state-buttons

      Для Блока устанавливает особый режим выстраивания элементов Кнопка. При ширине окна меньше 421px кнопки будут размещаться вертикально с выравниванием по ширине родительского Блока.