Список тем

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


Список тем


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

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

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


Фильтрация списка

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

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

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


Фильтрация


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

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


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

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


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


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

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

Пользовательская тема. 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 коде были применены.

Сохранение

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

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

  • Нет меток