Темы навигатора

Материал из 3v-wiki
Перейти к навигации Перейти к поиску


Тема

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

Свойство Описание
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)"
--btn-primary-hover "#107adb"
--btn-primary-active "#0e6dc4"
--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)"
--img-checkbox-unchecked-disabled "var(--img-checkbox-unchecked)"
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/Pivot
--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)"
--grid-scrollbar-size "18px"
--grid-scrollbar-padding "4px"
Home
--home-title-color "var(--main-color)"
--home-links-color "var(--sub-color)"
--home-hover-bg "var(--hover-bg)"
ACE(json/html) 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==)"

Настройка оформления строки с фокусной ячейкой и самой фокусной ячейки

Чтобы задать кастомное оформление для строки с фокусной ячейкой или самой фокусной ячейки нужно в теме задать css-переменные вида:

--grid-focused-row-ИМЯ-CSS-СВОЙСТВА (для оформления строки с фокусной ячейкой)

--grid-focused-cell-ИМЯ-CSS-СВОЙСТВА (для оформления фокусной ячейки)

например:

'--grid-focused-row-background-color': 'green',
'--grid-focused-row-color': 'magenta',
'--grid-focused-cell-border-color': 'red',
'--grid-focused-cell-color': 'blue',
'--grid-focused-cell-background-color': 'yellow'

Примечания

  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;
 }
}
Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Навигатор/Темы_навигатора&oldid=1669