Платформа 3V/Навигатор/Темы навигатора

Тема

Тема это объект представляющий из себя следующие свойства:

Свойство	Описание
name	Идентификатор/имя темы (по которому в дальнейшем тему можно применить)
title	Наименование темы для комбобокса выбора темы
properties	Справочник/мапа css-переменных, содержание темы
parent	Ссылка на родительскую тему, таким образом текущая тема может доопределять/переопределять css-переменные родительской темы
parentName	Тоже что parent, но возможность задать родительскую тему через ее имя

Темы по умолчанию

По умолчанию описаны 3 темы:

• Стандартная (default)
• Классическая (gray)
• Тёмная (black)

Добавление кастомной темы

Есть две возможности добавления кастомных тем:

• В прикладном коде (работает для случая прикладного приложения использующего компоненты навигатора, но не для самого навигатора)
• В конфиге веб-приложения (работает и для навигатора и для прикладного приложения)

Добавление кастомной темы в прикладном коде

import { Theme, themeGray, ThemeService } from '@bsc/common-ui';

  constructor(private themeService: ThemeService) {}

  initTheme() {
    const customTheme: Theme = {
      name: 'testCodeTheme',
      parent: themeGray,
      properties: {
        '--img-cell-pattern': 'none'
      },
    };
    this.themeService.addAvailableTheme(customTheme);
    this.themeService.setActiveTheme(customTheme);
  }

Добавление кастомной темы в конфиге веб-приложения

В конфиг веб-приложения добавлен блок theme. Здесь в свойстве "additionalThemes" можно задать набор тем. А также задать тему по умолчанию "defaultThemeName".

  "theme": {
    "defaultThemeName": "testConfigTheme",
    "additionalThemes": [
      {
        "name": "testConfigTheme",
        "parentName": "gray",
        "properties": {
          "--img-cell-pattern": "none"
        }
      }
    ]
  }

Описание css-переменных темы

Поскольку тема реализована через css-переменные, то ссылаться на значения других переменных можно через var(--имя_переменной), имена css-переменных всегда начинаются с --

Свойство	Значение(из темы default)	Описание
--font-size	"14px"
--font-size-small	"12px"
--regular	"var(--font-size) 'Roboto', sans-serif"
--black	"#000"
--white	"#fff"
--background-color-rgb	255, 255, 255
--background-color	"rgb(var(--background-color-rgb))"
--main-color-rgb	41, 53, 65
--main-color	"rgb(var(--main-color-rgb))"
--sub-color	"#697c8e"
--readonly-color	"#8798a9"
--error-color	"#f37575"
--warning-color	"#f08513"
--expander-color	"rgba(var(--main-color-rgb), 0.6)"
UI
--padding	"8px"
--border-radius	"4px"
--transition	"0.3s"
--transparent-color-rgb	"var(--main-color-rgb)"
--transparent-color	"rgb(var(--transparent-color-rgb))"
--accent-color-rgb	23, 135, 238
--accent-color	"rgb(var(--accent-color-rgb))"
--label-color	"#8798a9"
--hover-bg	"rgba(var(--accent-color-rgb), 0.06)"
--active-bg	"rgba(var(--accent-color-rgb), 0.1)"
--border-color	"#e4ecf3"
--border-disabled-color	"#80b3ee"
Tree
--treeItem-current-color	"var(--hover-bg)"
--treeItem-checked-color	"var(--treeItem-current-color)"
--treeItem-hover-color	"var(--hover-bg)"
Sidebar
--sidebar-bg	"var(--background-color)"
--sidebar-bg-lighten	"#fff"
--sidebar-border	"var(--border-color)"
--sidebar-separator-bg	"var(--sidebar-border)"
--sidebar-input-bg	"var(--background-color)"
--sidebar-input-border	"var(--border-color)"
--sidebar-input-color-rgb	"var(--main-color-rgb)"
--sidebar-input-color	"rgb(var(--sidebar-input-color-rgb))"
Scrollbar
--scrollbar-color-rgb	"var(--main-color-rgb)"
--scrollbar-color	"rgb(var(--scrollbar-color-rgb))"
--scrollbar-size	"14px"
--scrollbar-padding	"4px"
Icon
--icon-color-rgb	"var(--main-color)"
--icon-color	"rgb(var(--icon-color-rgb))"
Input
--input-bg	"var(--background-color)"
--input-color	"var(--main-color)"
--input-border	"var(--border-color)"
--input-padding	"var(--padding)"
--object-bg	"var(--background-color)"
Images
--img-home-bg	"url(~@bsc/trv-theme/images/white-theme/layout/logo-background.svg) bottom right no-repeat / 500px 415px"
--img-home-bg-filter	"grayscale(1)"
--img-home-logo	"url(~@bsc/trv-theme/images/new-design/logo-big.png) center center no-repeat"
--img-home-logo-w	"414px"
--img-home-logo-h	"100px"
--img-bin	"url(~@bsc/trv-theme/images/white-theme/icons/ui/bin-big.svg)"
--img-area-empty	"url(~@bsc/trv-theme/images/constructor/empty.svg)"
--img-refresh-area	"url(~@bsc/trv-theme/images/white-theme/icons/ui/refresh.svg)"	обновить отчет (при изменении параметров)
--img-no-active-area	"url(~@bsc/trv-theme/images/constructor/noActiveArea.svg)"	пустой(еще не настроенный) отчет
--img-no-active-area-indicators	"url(~@bsc/trv-theme/images/constructor/Indicators.svg)"	пустой(еще не настроенный) показатель
--img-loader-gif	"url(~@bsc/trv-theme/images/loader/trivium.gif)"	индикатор загрузки
--img-cell-loader	"url(~@bsc/trv-theme/images/loader/loader.gif)"	картинка, которая отображается в ячейках, данные которых еще грузятся
--img-cell-pattern	"url(~@bsc/trv-theme/images/white-theme/icons/cell-pattern.png)"	картинка, которой заполняется фон заблокированных ячеек
--img-logo-mini	"url(~@bsc/trv-theme/images/new-design/logo.png)"
--img-home	"url(~@bsc/trv-theme/images/white-theme/layout/home.svg)"
--img-toggle-expanded	"url(~@bsc/trv-theme/images/white-theme/icons/ui/arrow-down.svg)"
--img-toggle-collapsed	"url(~@bsc/trv-theme/images/white-theme/icons/ui/arrow-right.svg)"
--img-arrows-updown	"url(~@bsc/trv-theme/images/white-theme/icons/ui/arrows-updown.svg)"
--img-group-1	"url(~@bsc/trv-theme/images/constructor/group1.svg)"
--img-group-2	"url(~@bsc/trv-theme/images/constructor/group2.svg)"
--img-group-3	"url(~@bsc/trv-theme/images/constructor/group3.svg)"
--img-person-svg	"url(~@bsc/trv-theme/images/white-theme/icons/person-white.svg)"
--img-sort	"url(~@bsc/trv-theme/images/white-theme/icons/ui/sort.svg)"
--img-sort-down	"url(~@bsc/trv-theme/images/white-theme/icons/ui/sortDown.svg)"
--img-sort-up	"url(~@bsc/trv-theme/images/white-theme/icons/ui/sortUp.svg)"
--img-checkbox-unchecked	"url(~@bsc/trv-theme/images/white-theme/icons/ui/unchecked.svg)"
--img-checkbox-unchecked-hover	"url(~@bsc/trv-theme/images/white-theme/icons/ui/unchecked_hover.svg)"
--img-checkbox-checked	"url(~@bsc/trv-theme/images/white-theme/icons/ui/checked2.svg)"
--img-checkbox-checked-hover	"url(~@bsc/trv-theme/images/white-theme/icons/ui/checked2_hover.svg)"
--img-checkbox-halfchecked	"url(~@bsc/trv-theme/images/white-theme/icons/ui/halfchecked.svg)"
--img-checkbox-halfchecked-hover	"url(~@bsc/trv-theme/images/white-theme/icons/ui/halfchecked_hover.svg)"
--img-checkbox-falsechecked	"url(~@bsc/trv-theme/images/white-theme/icons/ui/falsechecked.svg)"
--img-checkbox-falsechecked-hover	"url(~@bsc/trv-theme/images/white-theme/icons/ui/falsechecked_hover.svg)"
Tabs
--tabs-bg	"#eef2f8"
Checkbox
--checkbox-color	"#fff"
--checkbox-border	"var(--border-color)"
Button
--btn-bg	"var(--accent-color)"
--btn-color	"#fff"
--btn-default-bg	"transparent"
--btn-default-color	"var(--main-color)"
--btn-default-bordercolor	"var(--border-color)"
Dropzone remove
--remove-zone-border	"#f59e9e"
--remove-zone-bg	"#ffe4e4"
--remove-zone-bg-darken	"#ffcbcb"
Grid
--grid-border-color	"#e5ecf3"
--grid-cell-active	"var(--accent-color)"
--grid-thead-color	"#656565"
--grid-thead-bg	"#f2f5f9"
--grid-abcd-color	"var(--label-color)"
--grid-deleted	"#e84b56"
--grid-wrapper-bg	"#444444"
--grid-sys-number-color	"var(--label-color)"
--grid-tr-bg	"var(--background-color)"
--grid-tr-color	"var(--main-color)"
Home
--home-title-color	"var(--main-color)"
--home-links-color	"var(--sub-color)"
--home-hover-bg	"var(--hover-bg)"
ACE editor
--ace-print-margin	"#ebebeb"
--ace-gutter-active-line	"#dadada"
--ace-selection	"#b5d5ff"
--ace-active-line	"#e8f2fe"
--ace-string	"#2a00ff"
--ace-numeric	"#00008b"
--ace-variable	"#7f0055"
--ace-type	"#7f007f"
--ace-class	"var(--main-color)"
--ace-constant	"var(--main-color)"
--ace-keyword	"#7f0055"
--ace-gutter-color	"#888888"
--ace-cursor	"black"
--ace-step	"#ffff00"
--ace-bracket-border-color	"#c0c0c0"
--ace-selected-word-border-color	"#b5d5ff"
--ace-fold-border-color	"black"
--ace-fold-background-color	"#3c4c72"
--ace-escape	"var(--main-color)"
--ace-other	"var(--main-color)"
--ace-function	"#3c4c72"
--ace-attribute-name	"#7f007f"
--ace-invalid-color	"var(--main-color)"
--ace-invalid-background-color	"transparent"
--ace-invalid-deprecated-background-color	"transparent"
--ace-comment	"#719682"
--ace-invisible	"#ddd"
--ace-variable-parameter	"var(--main-color)"
--ace-tag	"#197674"
--ace-indent-guide	"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==) right repeat-y"
--ace-info	"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII=)"
--ace-fold-widget	"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==)"
--ace-fold-widget-closed	"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAOUlEQVR42jXKwQkAMAgDwKwqKD4EwQ26sSOkVWjgIIHAzPiCgaqiqnJHZnKICBERHN194O5b9vbLuAVRL+l0YWnZAAAAAElFTkSuQmCCXA==)"

Примечания

1. Коллекции в переменных с цветами.
   Некоторые css переменные пришлось сделать не удобными, например:
   

   --accent-color-rgb: 23, 135, 238;
   --accent-color: rgb(var(--accent-color-rgb));
   

   --accent-color-rgb приходится задавать коллекцией(раньше вообще не было --accent-color-rgb, а был только --accent-color), потому что есть достаточно много мест с заданием прозрачности в виде rgba(цвет, 0.5), это работает с цветами, но не работает с переменными внутри которых какой-нибудь шестнадцатиричный цвет, но нашлось решение с коллекцией, в результате такой вариант работает:
   

   --accent-color-rgb: 23, 135, 238;
   --accent-color: rgb(var(--accent-color-rgb));
   --active-bg: rgba(var(--accent-color-rgb), 0.1);
   

   а такой вариант не работал:
   

   --accent-color: #1787ee;
   --active-bg: rgba(var(--accent-color), 0.1);
   

2. Цвета типов объектов.
   Текущий вариант с заданием цветов для разных типов объектов, не получается вынести в таком виде в css переменные:
   

   $object-color: (
    'report': #e84b56,
    'indicator': #ebbb28,
    'operand': #7455f0,
    'dictionary': #1daa5d,
    'dictionary-external': #1daa5d,
    'dictionary-calendar': #1daa5d,
    'calc': #1787ee,
    'dashboard': #933fba,
    'etl': #1aa4b8,
    'workflow': #1787ee,
    'htmlpage': #1787ee,
    'customobject': #1787ee,
    'resource': #15b8ae,
    'number': #1787ee,
    'user-element': #1787ee,
    'layers': #1787ee,
    'dictionary-linked': #1787ee,
    'card-server': #ff7264,
    'client-card': #7455f0,
    'data-source': #fb6900,
    'virtual-top': #0066dd,
    'virtual-bottom': #0066dd,
    'dictionary-relation': #1daa5d,
    'receiver': #1daa5d,
    'warning-line': #e84b56,
   );
   

   проблема еще в том, что в нескольких местах по этому объекту проходят циклом и задают разные классы на основе этого объекта, например:
   

   // Цвета иконок
   @each $name, $color in $object-color {
    .trvi-#{$name} {
    color: $color;
    }
   }