Список тем

Для создания темы необходимо перейти в блок "Библиотека компонентов" и нажать на кнопку "Темы". Откроется окно со списком созданных тем: 


Список тем


Список тем представляет собой таблицу, содержащую сведения о каждом компоненте.

Сведения о компонентах включают в себя следующие колонки:

  • Цветовая палитра. Цвета, которые используются в теме;
  • Название. Наименование темы;
  • Описание. Описание темы;
  • Автор. Пользователь, который создал тему;
  • Дата создания. Дата и время создания темы;
  • Дата изменения. Дата и время внесения изменений в настройки темы;
  • Действия. Редактирование и удаление темы.

Поиск по названию

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

Для применения фильтрации следует нажать на кнопку "", расположенную над списком компонентов.

После нажатия на кнопку откроется окно для ввода значения:


Фильтрация


В поле «Введите запрос» следует ввести необходимое значение и нажать кнопку «Применить». Окно для ввода значения для применения фильтрации скроется, список отфильтруется в соответствии с введенным значением в поле «Поиск».

Для сбора примененной фильтрации поиска снова следует нажать на красный крестик на кнопке , или нажать и в появившемся окне нажать кнопку «Сбросить». Окно для ввода значения для применения фильтрации скроется, список вернется к первоначальному состоянию.

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

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


Окно создания темы


Окно для создания темы состоит из следующих блоков:

  • Название темы. Указывается название темы;
  • Описание темы. Указывается описание темы;
  • Палитра. Набор цветов, используемый на виджетах.
  • Права доступа. Управление правами доступа к теме.
  • CSS.
  • JavaScript. 

Пользовательская тема. CSS код.

Для настройки пользовательской темы необходимо перейти в раздел «Темы» и добавить новую тему. На примере разберем раннее созданный проект со стандартной темой:

Проект. Стандартная тема


В данном проекте применена стандартная тема, с белым фоном. Разберем пример, где необходимо задать персональные настройки темы. Для этого необходимо перейти в раздел «Темы» и в правом верхнем углу нажать на кнопку . После нажатия откроется окно настройки темы. Далее необходимо воспользоваться пространством для написания CSS кода. Кликните внутри поля CSS. Для применения персональных настроек, нужно указать определенный CSS код:


Настройка темы с помощью CSS кода
/* Цвет сетки в режиме редактирования */
gridster .gridster-column {
  border-left: 1px solid #ffffff87;
  border-right: 1px solid #ffffff87;
}
gridster .gridster-row {
    border-top: 1px solid #ffffff87;
    border-bottom: 1px solid #ffffff87;
}

/* Общие настройки */
.content app-dashboard {/* Фон проекта*/
background: rgb(251,254,176);
background: linear-gradient(170deg, rgba(251,254,176,1) 15%, rgba(253,202,97,1) 47%, rgba(255,148,14,1) 68%);

}
.content app-project-header .box,
.content app-layers-bar {
  --sl-color-secondary-900: #000; /* Цвет текста кнопок в шапке проекта: поделиться, экспорт и тд */
  --sl-input-color: #000; /* цвет текста во всех инпутах */
  background: #fff; /* фон панели слоев и шапки проекта */
  color: #000 !important; /* Цвет текста в наименовании проекта */
}
app-pages core-navigation .wrap{
  box-shadow: none !important; /* Убрать тень под шапкой модуля */
}

/* скрытие шапки модуля: логотип, кнопки Проекты, Виджеты и тд */
core-navigation {
  // display: none; /* скрыть шапку модуля */
}
core-content {
  // height: 100vh !important; /* чтобы при скрытии шапки модуля не образовывалась пустая полоска снизу */
}

/* Слои (панель снизу) */
.content app-layers-container .layer {
  color: #000; /* Цвет наименования неактивных слоев в панели снизу */
}
.content app-layers-container .layer:hover,
.content app-layers-container .layer.selected {
  color: #000; /* Цвет наименования активного слоя в панели снизу */
  background: #ff7f0090; /* Цвет фона активного слоя в панели снизу */
}

/* Фильтры на проекте */
.dx-texteditor.dx-editor-outlined {
  background: #FFFFFFB2; /* фон внутри фильтра */
  border: 2px solid #fff; /* размер и цвет рамки ГФ */
  border-radius: 4px; /* скругление рамки ГФ */
}
/* Наименование глобального фильтра */
sl-input::part(form-control-label), sl-select::part(form-control-label), sl-textarea::part(form-control-label), label {
  color: #000; /* Цвет */
  text-align: center; /* Выравнивание */
  font-weight: bold; /* Стиль */
}
/* Цвет иконки календаря */
.dx-dropdowneditor-icon {
  color: #000;
}
/* Цвет текста Выбрать в фильтре с селектором  */
.dx-placeholder {
  color: #000;
}
/* Цвет текста выбранного в фильтре с селектором значения */
.dx-tag-content {
  background-color: #0001;
  color: #000;
}
/* Цвет иконки "крестик" (сбросить весь фильтр) в фильтре с селектором */
.dx-show-clear-button .dx-icon-clear {
  color: #000;
}
/* Цвет иконки "крестик" (сбросить конкретный фильтр) в фильтре с селектором */
.dx-tag-remove-button::after, .dx-tag-remove-button::before {
  background: #000;
}

/*
.content app-grid-item gridster-item.show-tile {
  background: rgba(33, 41, 70, 0.8);
}
.content app-grid-item gridster-item.show-tile:hover {
  background: rgba(33, 41, 70, 1);
}
.content app-grid-item gridster-item {
  background: rgba(33, 41, 70, 0.2);
  border-radius: 4px;
}
*/
Внешние отступы
margin: 5px 5px 5px 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
Внутренние отступы
padding: 5px 5px 5px 5px; 
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
Размеры блока
width: 50px; 
height: 50px;
Цвет текст
color: red; 
color: #000;
Текст
font-size: 14px; 
font-weight: bold;
font-style: italic;
Фон
background: ...;
background-color: #567895;
background-image: url(https://i.pinimg.com/originals/c7/8a/1f/c78a1ff26086681a2712a0477504b785.jpg);
background-position: 25% 75%;
background-repeat: no-repeat;
background-size: cover;
Обводка блока
border: 4px solid red;
border-top: 4px solid red;
border-left: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
Селекторы
div найти все <div></div>
.my-class найти все <div class="my-class">
#my-id найти <div id="my-id">
Тень
box-shadow: 10px 5px 5px red;


После ввода CSS кода, необходимо нажать на кнопку «Сохранить». Далее нужно перейти в раздел «Проекты» и выбрать тот проект, где необходимо применить настроенную ранее тему. После применения настройки темы, проект будет выглядеть таким образом:


Результат применения настроек


Все настройки которые были указаны в CSS коде были применены.

Права доступа

Вы можете ограничить возможность использования, редактирования, и удаления темы посредством прав доступа.

Чтобы настроить права доступа к теме, откройте вкладку "Права доступа" и настройте доступ, следуя общим правилам настройки доступа к объекту приложения. Права доступа к теме определяют следующие возможности.

  • "Просмотр" – можно применять тему в проекте и видеть её в реестре тем.
  • "Редактирование" – то же, что предыдущее, а также можно редактировать тему (кроме прав доступа).
  • "Полный" – то же, что предыдущее, а также можно редактировать права доступа и удалять тему.

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

Сохранение

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

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

  • Нет меток