Создание/Редактирование тем оформления и настройка фоновых изображений

Фоновые изображения

Пользователи Tessa Client могут выбирать фоновые изображения из списка преднастроенных, или же загрузив изображение из файловой системы:

Администраторам системы доступно добавление новых фонов, которые будут доступны всем пользователям для выбора в Tessa Client в меню правой панели - Фон. Для добавления новых изображений необходимо внутри папки Tessa Client создать новую папку и поместить туда желаемые файлы изображений. Далее, в конфигурационном файле app.json, который расположен тут же, в папке Tessa Client, указать имя папки с изображениями (по умолчанию это папка с именем wallpapers):

"WallpaperFolder": "wallpapers"

Изображения из указанной папки (без учета подпапок) будут подгружены в Tessa Client. Если вы хотите указать несколько папок, то можно указать несколько путей, разделенных точкой с запятой.

Для того, чтобы установить всем пользователям изображение в качестве фона по умолчанию (т.е. при первом запуске Tessa Client у пользователя будет указанный в конфигурационном файле фон, однако, при желании пользователь сможет его сменить), то укажите имя данного файла в параметре DefaultWallpaper, например:

"DefaultWallpaper": "wallpapers\\image.jpg"

Warning

Чтобы папка с изображениями и обновленный конфигурационный файл загрузились всем пользователям необходимо заново опубликовать приложение.

Общая информация по темам оформления

В Tessa Client есть три преднастроенные темы оформления: Холодная, Теплая, Светлая. Каждую из них можно настроить или создать новую свою тему. Все настройки тем хранятся в конфигурационных файлах ИмяТемы.json в папке Tessa Client\themes.

Папка theme настраивается в app.json, параметр ThemeFolder, может содержать одну или несколько папок, разделённых точкой с запятой. Папки с содержимым должны быть вложенными в папку TessaClient, тогда они опубликуются вместе с приложением и будут доступны сотрудникам.

В файле темы содержатся следующие настройки:

• Name - имя темы.

• Caption - название темы, которое будет отображаться в Tessa Client. Можно указать строку локализации.

• TessaWallpapers - список фоновых изображений, относящихся к данной теме.

• DefaultWallpaper - фоновое изображение по умолчанию, которое будет отображаться при выборе пользователем данной темы.

• .include и .override - ключи для подключения других .json файлов. В параметрах указывается файл с относительным путём, или же можно указать несколько относительных путей, как json-массив. Параметры поддерживают использование маски в имени файла: символ * заменяет любой набор символов, символ ? заменяет любой единичный символ. Данные параметры не обязательны.

  Note

  При объединении include-ов сначала используются “самые вложенные” json-файлы и в самом конце применяется содержимое текущего файла. Это означает, что в свою тему можно “включить”, например, содержимое темы Light.json, а затем в файле переопределить некоторые цвета, название темы и др. Ключ .override “включает” файлы после объединения include-ов, начиная с “наименее вложенных” json-файлов, переопределяя или дополняя параметры темы.

  По умолчанию все стандартные темы задают include-ом файл shared.json, в котором есть пример нескольких ресурсов темы: цветов и чисел. Так можно сразу во всех стандартных темах переопределить некоторые цвета (например, цвет области с заданием).

Чтобы добавить новую тему, надо сделать файл .json по аналогии с одной из существующих тем (например, Light.json) и переопределить в теме только необходимые цвета (не рекомендуется указывать все цвета, как это сделано в холодной теме).

Холодная тема Cold.json является самой полной, содержит все цвета. Идентичная ей тема является “темой по умолчанию” - если есть какая-то тема, в которой часть цветов не задана, то эти цвета берутся из холодной темы. Но если поменять холодную тему в папке, то цвета по умолчанию всё равно будут браться такими, какими они были указаны в платформе (до изменений).

По аналогии можно добавлять свои цвета, которые использовать в расширениях Tessa.Extensions.Defualt.Client. Они должны быть определены в файлах props*.json внутри папки themes (или других папок с темами). Пример файла props.json уже добавлен в themes. Использовать так: либо в xaml через {tuim:ThemeResource ИмяРесурса} (где tuim соответствует пространству имён Tessa.UI.Markup). Либо в C# через ThemeManager.Current.Theme.Get<SolidColorBrush>("ИмяРесурса") (для типа SolidColorBrush, также возможны LinearGradientBrush, Color, double, bool и др. типы, разрешающие преобразование из json-значения).

Warning

Чтобы новые темы загрузились всем пользователям необходимо заново опубликовать приложения.

Example

Есть необходимость создать новую тему Purple, основанную на тёплой теме, но с фиолетовой областью вкладок рабочих мест. Для этого создадим файл темы Purple.json в папке themes со следующим содержанием:

{
  "Name": "Purple",
  "Caption": "$UI_Tiles_PurpleTheme",

  ".include": [ "Warm.json" ],

  "DocumentTabControlBorderBrush": "#ADA64DFF",
  "DocumentTabControlBackground": {
    "StartPoint": "0,0",
    "EndPoint": "1,1",
    "GradientStops": [
      [ "#BB400080", 0.0 ]
    ]
  }
}

".include": [ "Warm.json" ] означает, что за основу взят файл Warm.json (который может включать в себя другие .json файлы при помощи ключей .include и .override), поверх которого “накладывается” новый файл темы Purple.json, переопределяя настройки, если они повторяются. В данном случае мы переопределили цвет области вкладок рабочих мест на фиолетовый, а также название и заголовок новой темы.

Мы также хотим переопределить цвета в таблице представления, для этого создадим файл Purple-Override-GridView.json в папке themes\overrides со следующим содержанием:

{
    "GridViewHighlightBrush": "#30A64DFF",
    "GridViewHeaderBackground": "#1C9933FF"
}

В файл темы Purple.json добавим строку ".override": [ "override\\Purple-*.json" ]. Теперь, после всех слияний файлов по ключу .include, система будет искать все файлы в папке themes\overrides, подходящие по шаблону Purple-*.json. После чего все найденные файлы (которые могут включать в себя другие json-файлы при помощи ключей .include и .override) будут в порядке от наименее вложенных “записаны” поверх файла Purple.json, переопределяя настройки, если они повторяются. В данном случае мы переопределили цвета в таблице представлений.

Описание цветов, которые можно задать в теме, разделены по блокам и описаны далее. Для того, чтобы убедиться, что меняется цвет в нужном параметре можно, например, выставить красный цвет #FFFF0000 и посмотреть в приложении, где он применился.

Для выбора нужных цветов можно использовать удобные конверторы цветов, например, https://colorscheme.ru/color-converter.html.

Настройка тем

Диалоговые окна

• TessaWindow - цвета для диалоговых окон (например, окно справки, параметров фильтрации и т.д.).

• WindowChromeBackground - Фоновый цвет рамки для окна.

• WindowChromeBorderBrush - Фоновый цвет обводки рамки для окна.

• WindowChromeInactiveBackground - Фоновый цвет рамки для окна, когда оно неактивно.

• WindowChromeInactiveBorderBrush - Фоновый цвет обводки рамки для окна, когда оно неактивно.

Например, красный цвет обводки рамки:

Иконки в сообщениях

• TessaMessageBox - цвета для иконок в сообщениях.

• MessageBoxImageErrorBrush - Цвет заливки для иконки с ошибкой в окне сообщения.

• MessageBoxImageInformationBrush - Цвет заливки для иконки с информацией в окне сообщения.

• MessageBoxImageQuestionBrush - Цвет заливки для иконки с вопросом в окне сообщения.

• MessageBoxImageWarningBrush - Цвет заливки для иконки с предупреждением в окне сообщения.

Например, красный цвет иконки в сообщении с вопросом:

Таблица в представлении

• GridView - цвета для отображения данных в представлении (таблицы).

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

• GridViewForeground - Цвет текста GridView. (1)

• GridViewDisabledForeground - Цвет текста GridView, когда он недоступен. Используется не во всех таблицах.

• GridViewBackground - Фоновый цвет GridView. (2)

• GridViewBorderBrush - Цвет обводки колонок и ячеек GridView.(3)

• GridViewHighlightBrush - Цвет выделения колонок и ячеек GridView. (4)

• GridViewHeaderBackground - Фоновый цвет заголовков GridView. (5)

• GridViewHeaderGripperBrush - Цвет разделителя между заголовками колонок GridView. (6)

Например, красный цвет обводки колонок и ячеек:

Вкладки карточки

• TabControl - цвета вкладок в карточке.

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

• TabControlBorderBrush - Цвет обводки TabControl. (1)

• TabControlBackground - Фоновый цвет TabControl. (2)

• TabControlCardBackground - Фоновый цвет TabControl в карточке. (3)

• TabControlSelectedBackground - Фоновый цвет выбранной вкладки TabControl. (4)

• TabControlHighlightBackground - Фоновый цвет вкладки TabControl, на которую наведена мышь. (5)

Область вкладок

• DocumentTabControl - цвета для области вкладок.

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

• DocumentTabControlBorderBrush - Цвет рамки для области вкладок. (1)

• DocumentTabControlForeground - Цвет текста и изображений для заголовков вкладок. (2)

• DocumentTabControlBackground - Фоновый цвет заголовков для вкладок. (3)

• DocumentTabControlSeparatorLeft - Цвет разделителя между заголовками колонок для вкладок с левой стороны. (4)

• DocumentTabControlSeparatorRight - Цвет разделителя между заголовками колонок для вкладок с правой стороны. (5)

• DocumentTabControlHighlightBrush - Полупрозрачный фон, который накладывается на обычный фон для той вкладки, которая сейчас выбрана. (6)

Карточка

• Cards - цвета в карточке.

• CardControlCaption - Кисть, используемая блоком для отрисовки заголовков его элементов управления.

  Например, красный цвет:

  

• CardDialogBackground - Кисть, используемая в качестве фона для просмотра диалоговых окон с формой карточки (например, в окне с подробностями по строке в истории заданий карточки; в диалоге импорта и создания по шаблону из библиотеки; в окне редактирования номера из контролов нумератора; в окне ввода логина/пароля и т.п.).

  Например, светло-красный цвет фона:

  

• CardDisabledBackground - Фоновой цвет недоступных для редактирования элементов.

  Например, светло-красный цвет фона для полей, не доступных для редактирования:

  

• CardEditorBackground - Кисть, используемая в качестве фона для просмотра диалоговых окон с редактором дополнительных настроек. Используется в TessaAdmin для некоторых диалогов в редакторе типов карточек, например, фон для окна маппинга в ссылочных контролах.

• CardVisualizerBackground - Кисть, используемая в качестве фона для окна визуализации бизнес-процессов карточки.

• CardPreviewBackground - Кисть, используемая в качестве фона для окна предварительного просмотра карточки в TessaAdmin.

• CardRowBackground - Кисть, используемая в качестве фона для окна просмотра строки коллекционной или древовидной секции.

  Например, светло-красный цвет фона в окне добавления новой строки в таблицу:

  

• CardStatusBarForeground - Цвет, используемый для вывода текста в статусной строке в карточке.

  Например, красный цвет текста:

  

• CardStatusBarForegroundHover - Цвет, используемый для вывода текста в статусной строке в карточке в ситуации, когда мышь находится над статусной строкой.

• CardStatusBarBackground - Цвет, используемый для вывода фона в статусной строке в карточке.

• CardStatusBarBackgroundHover - Цвет, используемый для вывода фона в статусной строке в карточке в ситуации, когда мышь находится над статусной строкой.

• CardBlockCaptionBackgroundNormal - Цвет, используемый для фона заголовка блока в обычном состоянии.

  Например, светло-красный цвет фона заголовка блока:

  

• CardBlockCaptionBackgroundHover - Цвет, используемый для фона заголовка блока в ситуации, когда мышь находится над заголовком блока.

• CardBlockCaptionBackgroundPressed - Цвет, используемый для фона заголовка блока в ситуации, когда производится нажатие на данный заголовок блока.

• CardBlockCaptionBorderBrushNormal - Цвет, используемый для отрисовки границы заголовка блока в обычном состоянии.

• CardBlockCaptionBorderBrushHover - Цвет, используемый для отрисовки границы заголовка блока в ситуации, когда мышь находится над заголовком блока.

• CardBlockCaptionBorderBrushPressed - Цвет, используемый для отрисовки границы заголовка блока в ситуации, когда производится нажатие на данный заголовок блока.

Задание

• Tasks - цвета для области задания.

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

• TaskBackground - Цвет, используемый как фоновый цвет заданий. (1)

• TaskBorderBrush - Цвет рамки блока с заданием. (2)

• TaskForeground - Цвет текста для вывода общей информации по заданию. (3)

• TaskSeparatorForeground - Кисть, используемая для вывода полоски-разделителя в информации по заданию. (4)

• TaskLinkForeground - Кисть, используемая для вывода ссылки на задание. (5)

• TaskTypeForeground - Кисть, используемая для вывода типа задания. (6)

• TaskTypeAccessoryForeground - Кисть, используемая для вывода вспомогательного текста в задании. (7)

  

• TaskTypeToggleForeground - Цвет, используемый для вывода текста для переключателя заданий (“полосы” под областью с заданием).

  Например, красный цвет текста:

  

• TaskTypeToggleForegroundHover - Цвет, используемый для вывода текста для переключателя заданий (“полосы” под областью с заданием) в ситуации, когда мышь находится над переключателем.

• TaskTypeToggleForegroundPressed - Цвет, используемый для вывода текста для переключателя заданий (“полосы” под областью с заданием) в ситуации, когда переключатель был нажат, и кнопка мыши ещё не отпущена.

• TaskTypeToggleBackground - Цвет, используемый для вывода фона для переключателя заданий (“полосы” под областью с заданием).

• TaskTypeToggleBackgroundHover - Цвет, используемый для вывода фона для переключателя заданий (“полосы” под областью с заданием) в ситуации, когда мышь находится над переключателем.

• TaskTypeToggleBackgroundPressed - Цвет, используемый для вывода фона для переключателя заданий (“полосы” под областью с заданием) в ситуации, когда переключатель был нажат, и кнопка мыши ещё не отпущена.

• TaskButtonForeground - Кисть, используемая для вывода текста в кнопках в заданиях.

  Например, красный цвет текста:

  

• TaskButtonBackground - Цвет, используемый для вывода фона в кнопках в заданиях, когда мышь не находится в области с заданием.

• TaskButtonBackgroundHover - Цвет, используемый для вывода фона для кнопок в заданиях в ситуации, когда мышь находится над кнопкой.

• TaskButtonBackgroundPressed - Цвет, используемый для вывода фона для кнопок в заданиях в ситуации, когда кнопка задания нажата, и кнопка мыши ещё не отпущена.

• TaskButtonBackgroundWorkspaceHover - Цвет, используемый для вывода фона в кнопках в заданиях, когда мышь находится в области с заданием, но не над кнопкой.

• TaskTagBackground - Цвет, используемый для вывода фона в иконке-теге в заданиях, когда мышь не находится над иконкой.

  Например, красный цвет фона:

  

• TaskTagBackgroundHover - Цвет, используемый для вывода фона в иконке-теге в заданиях, когда мышь находится над иконкой.

• TaskTagBackgroundPressed - Цвет, используемый для вывода фона в иконке-теге в заданиях, когда нажата кнопка мыши на иконке.

Секция файлов

• Files - цвета для секции файлов.

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

• FileListBackground - Кисть, используемая в качестве фона списка файлов, когда в секции есть загруженные файлы (по умолчанию - белое полотно). (1)

• FileVersionsBackground - Кисть, используемая в качестве фона для окна просмотра версий файла.

• FileGroupBackground - Цвет, используемый для заливки разделителей-групп в файлах и кнопки загрузки файлов. (2)

• FileGroupBackgroundHover - Цвет, используемый для заливки при наведении мыши на разделители-группы в файлах и кнопки загрузки файлов.

• FileGroupBackgroundPressed - Цвет, используемый для заливки разделителей-групп в файлах и кнопки загрузки файлов при нажатии мыши.

• FileBackground - Цвет, используемый для фона в файлах. (3)

• FileBusyBackground - Цвет, используемый для фона в файлах при индикации загрузки. Цвет используется совместно со стандартным цветом FileBackground.

• FileModifiedBackground - Кисть, используемая для фона изменённых файлов.

• FileNotReadyBackground - Цвет, используемый для фона файлов, не загруженных на сервер.

• FileErrorBackground - Цвет, используемый для фона файлов с ошибками.

• FileCurrentTaskTagBackground - Кисть, используемая для фона тегов у файлов, принадлежащий текущему заданию. (4)

• FileSignatureNotChecked - Кисть, используемая для вывода иконок для файлов и диалога подписей, если файл или подпись ещё не проверены. (5)

• FileSignatureChecked - Кисть, используемая для вывода иконок для файлов и диалога подписей, если файл или подпись успешно проверены.

• FileSignatureFailed - Кисть, используемая для вывода иконок для файлов и диалога подписей, если файл или подпись проверены с ошибками.

  

• FilePlaceholderBackground - Кисть, используемая для вывода фона в плейсхолдере файлового контрола. Плейсхолдер отображается при отсутствии файлов.

• FilePlaceholderForeground - Кисть, используемая для вывода текста в плейсхолдере файлового контрола. Плейсхолдер отображается при отсутствии файлов.

  Например, красный цвет текста:

  

Боковые панели

• Tiles - цвета для боковых панелей.

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

• TileForeground - Кисть, используемая для отрисовки цвета содержимого в боковых панелях. (1)

• TileBackground - Кисть, используемая для отрисовки цвета фона в боковых панелях. (2)

• TileHoverBackground - Кисть, используемая для отрисовки цвета фона для кнопки в боковых панелях. (3)

• TileDividerBrush - Кисть, используемая для отрисовки разделителя в боковых панелях. (4)

• TileSliderForeground - Кисть, используемая для отрисовки цвета линий в нераскрытой боковой панели. (5)

• TileSliderBackground - Кисть, используемая для отрисовки цвета фона в нераскрытой боковой панели. (6)

  

• WebTileHotkeyForeground - Кисть, используемая для отрисовки текста - подсказок горячих клавиш для кнопок, применяется только в лёгком клиенте. (7)

• WebSidePanelScrollerForeground - Кисть, используемая для отрисовки текста на кнопке прокрутки в боковых меню, применяется только к лёгком клиента. (8)

• WebSidePanelScrollerBackground - Кисть, используемая для отрисовки цвета кнопки прокрутки в боковых меню, применяется только к лёгком клиента. (9)

  

Представление

• Views - цвета для области пейджинга, фильтрации, показа количества строк в области представления.

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

• ViewFilterMenuBackground - Цвет, используемый для отрисовки всплывающих кнопок в области фильтра. Цвет должен быть непрозрачным. (1)

• ViewFilterMenuForeground - Кисть, используемая для отрисовки линий и текста во всплывающих кнопках в области фильтра. (2)

• ViewFilterAreaBackground - Кисть, используемая для отрисовки фона в области фильтра. (3)

• ViewFilterAreaBorderBrush - Кисть, используемая для отрисовки цвета рамки в области фильтра. (4)

• ViewFilterParameterForeground - Кисть, используемая для отрисовки текста с именем параметра фильтрации в области фильтра. (5)

• ViewFilterOperatorForeground - Кисть, используемая для отрисовки текста с названием оператора фильтрации в области фильтра. (6)

• ViewFilterValueForeground - Кисть, используемая для отрисовки текста со значением параметра фильтрации в области фильтра. (7)

  

• ViewToolbarBackground - Кисть, используемая для отрисовки фона в панели тулбара представлений (панель с пейджингом). (8)

• ViewToolbarBorderBrush - Кисть, используемая для отрисовки цвета обводки в панели тулбара представлений (панель с пейджингом). (9)

• ViewToolbarButtonBrush - Кисть, используемая для отрисовки цвета кнопок в панели тулбара представлений (панель с пейджингом). (10)

• ViewToolbarButtonDisabledBrush - Кисть, используемая для отрисовки цвета недоступных кнопок в панели тулбара представлений (панель с пейджингом). (11)

• ViewToolbarQuickSearchForeground - Кисть, используемая для отрисовки цвета текста в области быстрого ввода в панели тулбара представлений (панель с пейджингом). (12)

• ViewToolbarQuickSearchWatermark - Кисть, используемая для отрисовки цвета текста надписи-подсказки для быстрого ввода в панели тулбара представлений (панель с пейджингом).

• ViewToolbarQuickSearchBackground - Кисть, используемая для отрисовки фона области быстрого ввода в панели тулбара представлений (панель с пейджингом). (13)

• ViewToolbarPagingForeground - Кисть, используемая для отрисовки изменяемого номера страницы в панели пейджинга. (14)

• ViewToolbarPagingWatermark - Кисть, используемая для отрисовки общего количества страниц в панели пейджинга. (15)

• ViewToolbarPagingBackground - Кисть, используемая для отрисовки фона в панели пейджинга. (16)

• ViewToolbarPagingBorderBrush - Кисть, используемая для отрисовки цвета обводки в панели пейджинга. (17)

  

• ViewDialogSelectButtonBackground - Кисть, используемая для отрисовки цвета фона кнопки выборки из представления в панели тулбара представлений.

  Кнопка с изображением галочки отображается при заполнении коллекционных полей путем выбора из представления:

  

• ViewRowCountForeground - Кисть, используемая для отрисовки цвета текста в области с количеством строк под представлением. (18)

• ViewRowCountHoverForeground - Кисть, используемая для отрисовки цвета текста в области с количеством строк под представлением при наведении мыши на область.

• ViewRowCountBackground - Кисть, используемая для отрисовки цвета фона в области с количеством строк под представлением. (19)

• ViewRowCountHoverBackground - Кисть, используемая для отрисовки цвета фона в области с количеством строк под представлением при наведении мыши на область.

  

Дерево рабочего места

• WorkplaceTree - цвета для области дерева рабочего места.

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

• WorkplaceTreeForeground - Кисть, используемая для отрисовки содержимого в дереве рабочего места. (1)

• WorkplaceTreeExpanderForeground - Кисть, используемая для отрисовки значков +/- в дереве рабочего места. (2)

• WorkplaceTreeIconForeground - Кисть, используемая для отрисовки содержимого, связанного с иконками, в дереве рабочего места. (3)

• WorkplaceTreeSubsetForeground - Кисть, используемая для отрисовки названий сабсетов в дереве рабочего места. (4)

• WorkplaceTreeBackground - Кисть, используемая для отрисовки фона в дереве рабочего места. (5)

• WorkplaceTreeVerticalOffsetBrush - Цвет, используемый для отрисовки полоски в верхней части дерева рабочего места. (6)

• WorkplaceTreeMenuBackground - Цвет, используемый для отрисовки меню, связанных с рабочими местами, например, контекстное меню добавления сабсета. Цвет должен быть непрозрачным. (7)

• WorkplaceTreeMenuForeground - Кисть, используемая для отрисовки текста в меню, связанных с рабочими местами, например, контекстное меню добавления сабсета. (8)

• WorkplaceTreeExtraBackground - Цвет, используемый для наложения фона при раскрытии узлов дерева рабочего места. Цвет должен быть непрозрачным. (9)

• WorkplaceTreeHightlightBrush - Цвет, используемый для отображения выделения для узла дерева, в т.ч. при наведении мыши.

• WorkplaceTreeSelectedBrush - Цвет, используемый для отображения выбранного узла дерева. (10)

  

• WebWorkplaceTreeBackgroundMobile - Кисть, используемая для отрисовки фона в дереве рабочего места, открытого на мобильном устройстве с небольшим разрешением (т.е. когда по умолчанию дерево скрыто и его можно вызвать нажатием на кнопку с изображением ёлки). На изображении ниже пример легкого клиента, запущенного на мобильном телефоне, где в качестве фона выставлен красный цвет.