Перейти к содержанию

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

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

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

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

wallpapers"/>

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

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

wallpapers\image.jpg"/>

Warning

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

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

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

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

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

  • Name - имя темы.

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

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

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

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

    Note

    При объединении include-ов сначала используются “самые вложенные” json-файлы, и в самом конце применяется содержимое текущего файла. Это означает, что в свою тему можно “включить”, например. содержимое темы Light.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

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

Описание цветов, которые можно задать в теме, разделены по блокам и описаны далее. Для того, чтобы убедиться, что вы меняете цвет в нужном параметре можно, например, выставить красный цвет #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 - Фоновый цвет редактируемых элементов управления, отображаемый при значении свойства IsEnabled = false.

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

    • 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 - Цвет, используемый для фона в файлах при индикации загрузки. Цвет используется совместно со стандартным <see cref=”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 - Кисть, используемая для отрисовки фона в дереве рабочего места, открытого на мобильном устройстве с небольшим разрешением (т.е. когда по умолчанию дерево скрыто и его можно вызвать нажатием на кнопку с изображением ёлки). На скрине ниже пример легкого клиента, запущенного на мобильном телефоне, где в качестве фона выставлен красный цвет.

Back to top