Tworzenie i edycja motywów kolorystycznych

Motywów systemowych nie można edytować, jednak użytkownik posiadający uprawnienia administracyjne może je sklonować lub utworzyć nowe motywy od podstaw, a następnie edytować poprzez modyfikację wybranych parametrów.

WEBCON BPS oferuje prosty i intuicyjny interfejs do tworzenia i edycji motywów kolorystycznych, który nie wymaga znajomości arkuszy stylów ani szczegółowych definicji kolorów.

Tworzenie motywów kolorystycznych

1. Nowy motyw – umożliwia utworzenie nowego motywu kolorystycznego od podstaw przy użyciu parametrów opisanych w dalszej części tego rozdziału.
2. Importuj – pozwala zaimportować plik .json zawierający definicję motywu.
3. Klonuj – klonuje istniejący motyw, który następnie można edytować poprzez zmianę wybranych parametrów.
4. Edytuj – otwiera okno edycji danego motywu kolorystycznego.

Tworzenie nowego motywu oraz edycja istniejącego odbywają się w tym samym konfiguratorze, składającym się z kilku głównych sekcji. Ich uzupełnienie pozwala wygenerować spójny motyw kolorystyczny stosowany w całym systemie.

Konfiguracja motywu

1. Nazwa motywu – powinna w możliwie najtrafniejszy sposób odzwierciedlać charakter danego motywu kolorystycznego.
2. Opis motywu – niewidoczny dla użytkownika; służy do przechowywania dodatkowych informacji o stylu i ułatwia administratorom rozróżnianie motywów bez konieczności analizy szczegółowych parametrów.
3. Parametry motywu – cztery podstawowe ustawienia motywu (typ motywu, aktywny, domyślny, domyślny dla elementów osadzonych), określające sposób jego wykorzystania w Portalu. Szczegółowy opis znajduje się w sekcji Ustawienia motywów.
4. Kolory bazowe – sekcja umożliwia zdefiniowanie czterech kluczowych kolorów dla całego systemu:

• Kolor brandowy,

• Kolor tekstu na brandzie,

• Kolor tła,

• Kolor tekstu.

  Na podstawie kolorów bazowych system automatycznie generuje pełną paletę zmiennych kolorystycznych wykorzystywanych w interfejsie Portalu. Jeśli element graficzny interfejsu wymaga innego odcienia, system automatycznie dobiera odpowiedni odcień w oparciu o kolory bazowe, aby zachować widoczność elementów.

  Kolor brandowy – kolor zdefiniowany jako brandowy stanowi główny kolor systemu. Może nie być bezpośrednio stosowany w elementach interfejsu, ale stanowi punkt odniesienia dla algorytmu generującego odcienie poszczególnych składników motywu.

  informacja

  Zmiana koloru brandowego wpływa na wiele elementów interfejsu użytkownika, dlatego należy zachować szczególną ostrożność przy jego modyfikacji.

  Po zaznaczeniu opcji Zdefiniuj paletę niestandardową można doprecyzować odcienie kolorów wchodzących w skład palety brandowej, które zostaną wykorzystane w różnych elementach systemu.

  

  Kolor tekstu na brandzie – kolor tekstu wyświetlanego na elementach w kolorze brandowym. Ustawienie tego koloru zapewnia odpowiedni kontrast i czytelność napisów na przyciskach, aktywnych zakładkach i innych elementach interfejsu wykorzystujących kolor brandowy.

  Kolor tła – określa podstawowy kolor tła interfejsu aplikacji.

  Kolor tekstu – definiuje domyślny kolor tekstu w interfejsie aplikacji.

Logo i grafika

1. Logo – obraz wyświetlany w lewym górnym rogu w rozwiniętym pasku nawigacji. Zalecany rozmiar: 145×32 px. Rekomendowany format: .png. Format .svg nie jest wspierany przez klientów pocztowych.

2. Logo kompaktowe – zminimalizowana forma logo wyświetlana np. w zwiniętym pasku nawigacyjnym lub w interfejsie urządzeń mobilnych. Zalecany rozmiar: 44×32 px.

   Oba rodzaje logo można wczytać na dwa sposoby – poprzez podanie linku lub załadowanie pliku z dysku. Kolor tła pod logo jest domyślnie generowany na podstawie koloru tła, jednak można zdefiniować niestandardowy kolor tła.

3. Grafika strony głównej – obraz wyświetlany w nagłówku strony głównej. Zalecany rozmiar: 1920×270 px. Grafikę można wczytać z dysku lub wkleić link do pliku.

informacja

Użycie plików o rozmiarach innych niż rekomendowane spowoduje automatyczne przeskalowanie obrazu z zachowaniem proporcji. Użycie pliku o większym rozmiarze i zachowanych proporcjach może być uzasadnione w przypadku korzystania z monitorów o dużej rozdzielczości.

Dodatkowe parametry

1. Fokus – określa wygląd (szerokość oraz kolor) wizualnego wyróżnienia elementu interfejsu znajdującego się w stanie aktywności. Wartości te wpływają na widoczność i dostępność elementów zgodnie ze standardami WCAG.

2. Kolor wizualizacji danych

   Główny kolor raportu – podstawowy kolor używany w raportach oraz elementach wizualnych systemu, takich jak dane na raportach graficznych, raporty z widokiem kalendarza czy widżety, w których wybrano opcję Główny kolor raportu. Parametr stanowi ustawienie globalne, które można nadpisać w konfiguracji pojedynczego raportu.

   Alternatywny kolor raportu – kolor używany w raportach i elementach wizualnych systemu, takich jak dane na raportach graficznych, raporty z widokiem kalendarza czy widżety, w których wybrano opcję Alternatywny kolor raportu.

   Kolor elementów wyróżnionych – kolor stosowany do podkreślania wybranych elementów interfejsu, np. zaznaczania Dashboardu w trybie edycji, aktywnej ikony Ulubione, wskaźnika aktywnego zastępstwa.

3. Kolor tła licznika

   Nowe zadania – kolor tła licznika nowych zadań widoczny na stronie głównej i w aplikacjach,

   Aktywne zadania – kolor tła licznika aktywnych zadań,

   Zaległe zadania – kolor tła licznika zaległych zadań.

4. Kolor informujący o statusie

   Sukces – kolor używany do oznaczania elementów i komunikatów informujących o prawidłowym przebiegu operacji, np. poprawnym zapisie danych,

   Ostrzeżenie – kolor stosowany do wyróżniania komunikatów i elementów interfejsu informujących o sytuacjach wymagających uwagi użytkownika.

   Błąd – kolor używany do oznaczania komunikatów i elementów interfejsu informujących o wystąpieniu błędu.

Podgląd motywu

Po prawej stronie okna edycji motywu dostępny jest podgląd w trybie rzeczywistym, umożliwiający natychmiastową weryfikację efektów wprowadzonych zmian. Podgląd pokazuje wyłącznie podstawowe komponenty, jednak sam motyw zostanie zastosowany do wszystkich części systemu. Podgląd nie jest dostępny na wąskich ekranach.

notatka

W ramach tej funkcjonalności nie jest wspierane tworzenie sztywno zdefiniowanych motywów brandowych, czyli takich, w których wartości kolorów są trwale przypisane do identyfikacji wizualnej marki. W przypadku potrzeby zastosowania takiego motywu można zmodyfikować poszczególne kolory poprzez konfigurację niestandardowego arkusza CSS.

W konfiguracji motywów dopuszczalne są wyłącznie kolory w formacie HEX (np. #33ff11). Obowiązują również dodatkowe mechanizmy walidacji – system nie pozwala na tworzenie dwóch motywów o identycznej nazwie. W przypadku wykrycia duplikatu nazwy, do nowego motywu automatycznie zostanie dodany sufiks, np. „(2)”.