Popup mapy jako React, edytor tekstu z kolorami i ujednolicenie tabel
Filip Borkowski, Backend/Frontend/Fullstack Engineer
W tej aktualizacji skupiliśmy się na poprawie prezentacji danych na mapie, rozbudowie edytora tekstu oraz ujednoliceniu kolorystyki tabel w panelach Czas pracy i Pracownicy.
Popup ograniczeń ciężarówek — prostokąt React
Dotychczasowy natywny popup MapLibreGL przy kliknięciu w ograniczenie dla ciężarówek zastąpiliśmy stylowym prostokątem React renderowanym przez createPortal. Nowy popup:
- wyświetla nagłówek w kolorze #dc2626 (czerwony) z informacją o typie ograniczenia
- prezentuje dane w wierszach: masa, oś, wysokość, szerokość, długość, typ drogi, hazmat
- aktualizuje pozycję w czasie rzeczywistym podczas przesuwania i przybliżania mapy
- zawiera trójkątny wskaźnik na dole wskazujący punkt na mapie
Wygląd i zachowanie jest spójne z kartami pojazdów wyświetlanymi na mapie.
Edytor dokumentów — przycisk + i kolory tekstu
Przycisk + do szybkiego wstawiania bloków
Podczas pisania, po lewej stronie aktywnego bloku pojawia się przycisk +. Kliknięcie go wstawia / i otwiera menu slash commands, pozwalając szybko dodać nowy typ bloku (nagłówek, lista, tabela, cytat itp.) bez odrywania rąk od klawiatury.
Przycisk zastąpił poprzedni uchwyt przeciągania (DragHandle), który wymagał niedostępnych publicznie pakietów TipTap Pro.
Kolor tekstu
W pasku narzędzi i menu kontekstowym (BubbleMenu) pojawił się nowy komponent ColorPicker z 9 kolorami do wyboru: czarny, czerwony, zielony, niebieski, pomarańczowy, fiolet, różowy, szary — oraz opcja resetu do koloru domyślnego.
Obramowania tabel
Tailwind CSS v4 Preflight resetował border-width: 0 na wszystkich elementach, przez co linie tabel w edytorze były niewidoczne. Problem rozwiązano dodając !important do reguł CSS obramowań w .ProseMirror table.
Czas pracy — kolory kolumn
- Kolumna 13 (Suma tydzień): dane wierszy wyświetlane szarym kolorem (
text-muted-foreground) dla lepszego odróżnienia od wartości aktywnych - Kolumny 16, 17, 18 (Pozostały czas tygodniowy, Może pracować dzień/tydzień): bazowy kolor ustawiony na czarny (
text-black dark:text-white), kolory semantyczne (czerwony/żółty/zielony) zachowane
Pracownicy — ujednolicenie tabeli
Tabela pracowników otrzymała jednolite formatowanie:
- Czcionka: zamieniono Open Sans na Saira — globalną czcionkę tabel w aplikacji
- Nagłówki: wszystkie kolumny wyświetlane czarnym tekstem (
text-black dark:text-white) - Dane: L.P., data utworzenia i informacja o twórcy konta — czarny tekst zamiast wygaszonego szarego