Przejdź do treści
Wszystkie projekty

09Portfolio

Topic icons — ikony tematów dla forum NodeBB

Wtyczka do NodeBB 4, dzięki której autor wybiera ikonę dla swojego tematu: pytanie, poradnik, problem, ogłoszenie i inne. Lista tematów na forum wirelab jest przez to czytelna na pierwszy rzut oka, na komputerze i na telefonie.

W liczbach

Wbudowane ikony
8
Maksymalny rozmiar ikony (KB)
256
Testy automatyczne
39
01

Problem

Na liście tematów forum wszystko wygląda podobnie: tytuł, awatar autora i kilka liczb. Pytanie początkującego, poradnik i ogłoszenie trudno odróżnić bez czytania tytułów. NodeBB pozwala dodać miniaturę do tematu, ale każdy wgrywa wtedy własny obrazek, więc lista szybko robi się niespójna, a administrator nie ma nad tym kontroli.

02

Podejście

Ikony pochodzą z biblioteki, którą prowadzi administrator: wgrywa je, nazywa, ustawia kolejność i decyduje, w których kategoriach są dostępne. Na start jest osiem wbudowanych ikon. Przy zakładaniu tematu autor klika „Wybierz ikonę” obok tytułu, wybiera ikonę z siatki i od razu widzi, jak temat będzie wyglądał na liście. Administrator ustala, kto może wybierać ikony (wszyscy, jedna grupa albo tylko moderatorzy), a każda kategoria może mieć ikonę domyślną. Serwer sprawdza każdy wybór jeszcze raz, także w tematach czekających na zatwierdzenie, więc nie da się ustawić ikony spoza kategorii ani zmienić jej w cudzym temacie. Użytkownicy nie wgrywają własnych plików, a pliki od administratora są sprawdzane pod kątem typu, zawartości i rozmiaru. Wtyczka nie zakłada własnych tabel, działa z każdą bazą obsługiwaną przez NodeBB, a lista tematów nie wymaga dodatkowych zapytań do bazy.

03

Efekt

Wersja 1.0.0 działa na forum.wirelab.pl z motywem wirelab, w którym ikona zastępuje awatar na liście tematów, a awatar autora jest małą plakietką w rogu. Z motywem Harmony ikona stoi przed tytułem. Wtyczka ma tłumaczenia polskie i angielskie, a 39 automatycznych testów sprawdza między innymi wybór ikony, wgrywanie plików i pamięć podręczną. Kod jest otwarty na licencji MIT, w npm i na GitHubie jako nodebb-plugin-topic-icons. W planach są oznaczenia tematów przypiętych, zamkniętych i rozwiązanych na samej ikonie.

Jak to działa

  1. 01

    Wybór przy pisaniu tematu

    Przycisk „Wybierz ikonę” obok tytułu otwiera siatkę ikon dostępnych w wybranej kategorii, z podglądem wiersza tematu. Działa z klawiatury, wybór zostaje w szkicu, a ikonę można zmienić później, edytując pierwszy post.

    Wybór przy pisaniu tematu
  2. 02

    Biblioteka pod kontrolą administratora

    Administrator wgrywa ikony w formatach PNG, WebP i SVG, zmienia ich nazwy i kolejność, przypisuje je do kategorii, wyłącza albo usuwa. Każda kategoria i całe forum mogą mieć ikonę domyślną. Usunięta ikona znika z tematów, które jej używały, razem z plikiem.

  3. 03

    Uprawnienia sprawdzane na serwerze

    Ikona musi istnieć, być włączona i dostępna w danej kategorii, a autor musi mieć prawo wyboru. Zmienić ją może tylko autor tematu albo moderator. Temat przeniesiony do kategorii, w której jego ikona nie jest dostępna, dostaje ikonę domyślną nowej kategorii.

  4. 04

    Na komputerze i na telefonie

    Ikona stoi przy tytule na liście tematów i w nagłówku tematu, a okno wyboru na telefonie zajmuje cały ekran. Nazwa ikony trafia do opisu obrazka w języku czytelnika, więc czytniki ekranu też wiedzą, co oznacza.

    Na komputerze i na telefonie
  5. 05

    Kod i instalacja

    Wtyczka jest otwarta na licencji MIT. Kod i zgłoszenia: github.com/nairdaweb/nodebb-plugin-topic-icons. Pakiet npm: npmjs.com/package/nodebb-plugin-topic-icons. W działaniu można ją zobaczyć na forum.wirelab.pl.

Napisz