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

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

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

• Поле «Иконка вкладки». Используется для загрузки файла в формате 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. В шаблонах можно менять конкретные данные, такие как код цвета или целевой текст. Например, чтобы изменить текст «Добро пожаловать», отображаемый в правой части окна мультисфер, необходимо в шаблоне вместо «Новый текст» ввести требующийся:

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

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

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

Для настройки текста перед кнопками и на кнопках, а также для настройки форматирования этого текста можно использовать следующий код 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");

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

$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");

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

 $auth.find(".auth-text").hide()

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

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"), текст на кнопке, кегль, шрифт, форматирование и цвет данного текста.

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

$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.

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

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

#logoNote,
#loginTagLineText,
#copyRight {
    display:none;
}

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

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

changeText1();

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

#tool {
    background: #245449;
    button {
        color: white;
        background: #245449;
     }
}

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

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

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

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

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

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

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

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

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,
}))

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

.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 — цвет текста и кнопок на ней.

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

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

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

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

: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 полосы прокрутки будут иметь прямые углы.