Вкладка «Оформление»

На вкладке «Оформление» пользователь может задать настройки оформления интерфейса системы:

Окно «Настройки». Вкладка «Оформление»

Настройки на вкладке «Оформление» задаются с помощью следующих элементов:

  • Поле «Иконка вкладки». Используется для загрузки файла в формате ICO с изображением для иконки вкладки браузера.

Иконка вкладки браузера, установленная по умолчанию
  • Поле «Логотип в окнах авторизации и загрузки». Используется для загрузки файла в формате PNG, JPEG, JPG или SVG c изображением для логотипа в окне авторизации и в окнах загрузки данных. Рекомендуемая минимальная высота логотипа — 12 px, а рекомендуемая максимальная ширина логотипа — 336 px.

Логотип в окне авторизации, установленный по умолчанию

Логотип в окне загрузки данных, установленный по умолчанию
  • Поле «Логотип на главной панели». Используется для загрузки файла в формате PNG, JPEG, JPG или SVG c изображением для логотипа на главной панели системы.

Логотип на главной панели системы, установленный по умолчанию
  • Поле для ввода кода JavaScript. Используется для настройки отображения некоторых элементов интерфейса. Например, посредством ввода кода в это поле можно изменить или удалить текст «Добро пожаловать», отображаемый в правой части окна «Мультисферы».
  • Поле для ввода кода CSS. Используется для таких настроек оформления, как, например, цвета текста и фона верхней панели окон системы. 
  • Кнопка «Сбросить». Используется для сброса настроек оформления и возврата к исходным настройкам, заданным по умолчанию. После подтверждения сброса выполняется автоматическая перезагрузка страницы.
  • Кнопка «Применить». Используется для сохранения и применения настроек, заданных на вкладке «Оформление». После нажатия выполняется автоматическая перезагрузка страницы.
  • Кнопка «Отменить». Используется для отмены изменений, внесенных на вкладке «Оформление». 

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

  1. Нажать на кнопку  в поле «Логотип на главной панели» и в открывшемся окне выбрать нужный файл подходящего формата.
  2. В поле для ввода CSS-кода ввести следующий код:
    #tool {
   background: #556B2F;    
}

    В полях для ввода кода CSS и JavaScript настройка цвета может производиться с указанием кода HEX, RGB, RGBA или c указанием названия цвета на английском. Например, #556B2F, rgb(85,107,47), rgba(85,107,47,0.1) или darkolivegreen.

  3. Нажать на кнопку «Применить». Выполнится автоматическая перезагрузка страницы, после чего изменения будут применены. При повторном открытии вкладки «Оформление» окна «Настройки» пользователь увидит в поле «Логотип на главной панели» название загруженного им файла, а в поле для ввода кода CSS — введенный код.

Пример настройки логотипа и фона главной панели

Для того, чтобы сбросить все текущие настройки оформления системы до настроек по умолчанию, требуется:

  1. Открыть окно «Настройки» и перейти на вкладку «Оформление».
  2. Нажать на кнопку «Сбросить» в правом верхнем углу. Откроется диалоговое окно:

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

Также пользователь может сбросить настройки частично. Для сброса настроек в любом из полей ввода кода нужно нажать на кнопку в соответствующем поле, а для удаления файла в любом из полей для загрузки файла нужно нажать на иконку корзины справа от названия файла. Последующее нажатие на кнопку «Применить» подтвердит сброс настроек в соответствующих полях, а нажатие на «Отменить» отменит сброс.

В случае ввода некорректного кода JavaScript в соответствующее поле отображается сообщение об ошибке:

Сообщение об ошибке


Шаблоны кода

Ниже приведены шаблоны кода для полей JavaScript и CSS. В шаблонах можно менять конкретные данные, такие как код цвета или целевой текст. Например, чтобы изменить текст «Добро пожаловать», отображаемый в правой части окна мультисфер, необходимо в шаблоне вместо «Новый текст» ввести требующийся:

Код JavaScript
localStorage.setItem("welcome_text", "Новый текст");

Настройка блока авторизации

Настройка блока кнопок для входа через внешнего провайдера

Для настройки текста перед кнопками и на кнопках, а также для настройки форматирования этого текста можно использовать следующий код JavaScript:

Код JavaScript
var $ = jQuery;
var $auth = $(".auth");
 
$auth.find(".auth-text").text("Вход через:");
$auth.css("font-size", "16");
$auth.css("font-family", "Arial");
$auth.css("font-weight", "bold");
$auth.css("font-style", "italic");
$auth.css("color", "black");
 
var $authButtons = $auth.find("button");
var $targetButton = $($authButtons[0]);
 
$targetButton.css("background", "#90ee90");
$targetButton.text("Провайдер 1");
$targetButton.css("font-size", "12");
$targetButton.css("font-family", "Arial");
$targetButton.css("font-weight", "bold");
$targetButton.css("font-style", "italic");
$targetButton.css("color", "white");

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

Код JavaScript
$auth.find(".auth-text").text("Вход через:");
$auth.css("font-size", "16");
$auth.css("font-family", "Arial");
$auth.css("font-weight", "bold");
$auth.css("font-style", "italic");
$auth.css("color", "black");

Текст «Войти через:» в блоке авторизации

По умолчанию текст отображается прописными буквами.

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

Код JavaScript
 $auth.find(".auth-text").hide()

Следующие строки шаблона отвечают за настройку кнопки входа через внешнего провайдера:

Код JavaScript
var $authButtons = $auth.find("button");
var $targetButton = $($authButtons[0]);
 
$targetButton.css("background", "#90ee90");
$targetButton.text("Провайдер 1");
$targetButton.css("font-size", "12");
$targetButton.css("font-family", "Arial");
$targetButton.css("font-weight", "bold");
$targetButton.css("font-style", "italic");
$targetButton.css("color", "white");

Если кнопок несколько, указанный выше блок из девяти строк нужно использовать для каждой кнопки. Для этого нужно скопировать строки данного блока и заполнить их нужными значениями.

Во второй строке данного блока необходимо задать порядковый номер кнопки. Порядковые номера соответствуют расположению кнопок на странице авторизации слева направо, при этом первой кнопке соответствует номер 0.

В последних семи строках задается цвет фона на кнопке (может быть "none"), текст на кнопке, кегль, шрифт, форматирование и цвет данного текста.

Вместо текста на кнопке может быть изображение. Для этого вместо последних семи строк шаблона можно использовать следующий код, подставив туда адрес требующегося изображения:

Код JavaScript
$targetButton.css("background-image", "url('https://example_path_to_picture.jpg')")


Для настройки размеров кнопок можно использовать следующий код CSS:

.window.login .login-container .login-tag-line .auth button {
    min-width: 70px;
    max-width: 132px;
    min-height: 24px;
    max-height: 60px;
    width: 70px;
    height: 40px;    
}

В последних двух строках шаблона задаются значения для ширины (width) и высоты (height) кнопок, которые требуется применить. При этом также нужно задать минимально и максимально допустимые значения ширины и высоты (в строках 2–5). Рекомендуемые размеры: ширина — от 70 до 132 px, высота — от 24 до 60 px.


Пример настройки блока кнопок


Настройка текста на странице авторизации

Для скрытия текста «Аналитическая платформа», «Бизнес-подход к анализу данных» и «ООО Полиматика Рус» используется следующий код:

Код CSS
#logoNote,
#loginTagLineText,
#copyRight {
    display:none;
}

Для изменения текста «Бизнес-подход к анализу данных» можно использовать следующий шаблон, подставив в третью строку нужный текст:

Код JavaScript
const changeText1 = () => {
  document.querySelector('.login-tag-line').setAttribute("style", "display: flex !important");
  document.querySelector('.login-tag-line > span').textContent = "Пример текста";
}  

changeText1();


Настройка главной панели системы

Код CSS
#tool {
    background: #245449;
    button {
        color: white;
        background: #245449;
     }
}

Во второй строке шаблона выбирается фон для главной панели системы, в четвертой строке — цвет кнопок на главной панели, а в пятой — фон кнопок на главной панели. В приведенном примере фон кнопок и фон самой панели одинаковый:

Пример настройки главной панели


Настройка верхней панели окон

Окна, сохраняемые на слое

Массив цветов для динамической окраски заголовков окон, сохраняемых на слое, состоит из объектов, где каждый объект описывает:

  • background — цвет фона панели;
  • text — цвет, в который будет окрашен текст и кнопки заголовка окна.

В первых двух строках шаблона задаются:

  • темный цвет для светлого фона (textColorBlack);
  • светлый цвет для темного фона (textColorWhite).

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

Код JavaScript
var textColorBlack = "#25282a";
var textColorWhite = "#ffffff";
 
var olapWindowColors = [
{background: "#613D2B", text: textColorWhite},
{background: "#8A6249", text: textColorWhite},
{background: "#9F8164", text: textColorWhite},
{background: "#B6981D", text: textColorWhite},
{background: "#B34D1A", text: textColorWhite},
{background: "#934545", text: textColorWhite},
{background: "#714584", text: textColorWhite},
{background: "#5C548D", text: textColorWhite},
{background: "#269A9A", text: textColorWhite},
{background: "#18876E", text: textColorWhite},
];
 
localStorage.setItem("custom", JSON.stringify({
  olapWindowColors: olapWindowColors,
}))

Код применяется только к окнам мультисферы, графики, карт и ассоциативных правил. При этом настройки верхней панели каждого окна графики, карт или ассоциативных правил совпадают с настройками верхней панели соответствующего окна мультисферы. 

Пример оформления верхней панели окон, сохраняемых на слое


Другие окна системы

Код CSS
.stack-window {    
    .title-text,
    .title {
         background-color: #0a554e !important;
 
         color: #fff !important;;
     }
     .title-buttons {
         button {
 
             color: #fff !important;
         }
     }
}

.window.title-tool .title .tool-buttons button.ui-button.ui-state-default,
.window.title-tool .title .tool-buttons label.ui-button.ui-state-default,
.window.title-tool .title .tool-buttons input[type="submit"].ui-state-default {
color: #fff;
}

Данный шаблон можно использовать для настройки верхней панели всех окон системы, за исключением окон, сохраняемых на слое. 
В данном шаблоне background-color определяет фон верхней панели, а color — цвет текста и кнопок на ней.

Пример настройки верхней панели окон системы


Настройка приветственного текста в правой части окна «Мультисферы»

Код JavaScript
localStorage.setItem("welcome_text", "Новый текст");

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

Пример измененного приветственного текста

Настройка полос прокрутки

Код CSS
:root {
    --scrollbar-color: rgba(193, 199, 222, 0.8);
    --scrollbar-width: 8px;
    --scrollbar-height: 8px;
    --scrollbar-radius: 4px;
     
    ::-webkit-scrollbar {
        width: var(--scrollbar-width);
        height: var(--scrollbar-height);
    }
 
    ::-webkit-scrollbar-track {
        width: var(--scrollbar-width);
        height: var(--scrollbar-height);
    }
 
    ::-webkit-scrollbar-thumb {
        width: var(--scrollbar-width);
        height: var(--scrollbar-height);
        background: var(--scrollbar-color);
        border-radius: var(--scrollbar-radius);
        color: var(--scrollbar-color);
    }
}
 
.scroll-bar.vertical div {
    border-radius: var(--scrollbar-radius);
    background: var(--scrollbar-color) !important;
    width: var(--scrollbar-width) !important;
}
.scroll-bar.horizontal div {
    border-radius: var(--scrollbar-radius);
    background: var(--scrollbar-color) !important;
    height: var(--scrollbar-height) !important;
}

Во второй строке данного шаблона можно задать цвет для полос прокрутки.
В третьей строке можно настроить ширину вертикальных полос прокрутки, а в четвертой строке — ширину горизонтальных полос прокрутки.
В пятой строке задается радиус, с помощью которого можно настроить скругление углов полос прокрутки. При значении в 0 px полосы прокрутки будут иметь прямые углы. 

  • Нет меток