Frontend Weblate

Frontend je v súčasnosti zostavený pomocou Bootstrapu, jQuery a niekoľkých knižníc tretích strán.

Podporované prehliadače

Weblate podporuje najnovšie stabilné vydania všetkých hlavných prehliadačov a platforiem.

Alternatívne prehliadače, ktoré používajú najnovšiu verziu WebKit, Blink alebo Gecko, či už priamo alebo cez webové rozhranie API platformy, nie sú explicitne podporované. Weblate by však mal (vo väčšine prípadov) zobrazovať a fungovať správne aj v týchto prehliadačoch.

Staršie prehliadače môžu fungovať, ale niektoré funkcie môžu byť obmedzené.

Prístupnosť

Weblate cieli na WCAG 2.2 úroveň AA pre nové a zmenené funkcie orientované na používateľa, kde je to praktické. Používajte sémantické HTML a komponenty Bootstrap pred pridaním vlastného kódu interakcie.

Pri zmene frontendu:

  • Umožnite dosiahnuť a používať všetky interaktívne ovládacie prvky pomocou klávesnice.

  • Zachovajte logické poradie zamerania a viditeľný štýl zamerania.

  • Uprednostňujte natívne tlačidlá, odkazy, vstupy, výbery a tabuľky pred vlastnými widgetmi.

  • Priraďte každý ovládací prvok formulára k štítku, textu pomocníka a chybám overenia, kde je to vhodné.

  • Nepoužívajte farbu, tvar ikony alebo polohu ako jediný spôsob na vyjadrenie stavu.

  • Oznamujte dynamické zmeny stavu, ktoré nie sú inak viditeľné pre asistenčné technológie.

  • Rešpektujte predvoľby zníženia pohybu pre správanie animácie alebo posúvania.

  • Testujte zmenené pracovné postupy pomocou navigácie iba klávesnicou a, ak je to praktické, bodovou kontrolou čítačky obrazovky.

Konvencie používateľského rozhrania

Správa závislostí

Inštalácia a správa knižníc tretích strán v klientovi projektu Django môže byť trochu zložitá. Táto sekcia poskytuje sprievodcu krok za krokom, ako nainštalovať a spravovať knižnice tretích strán používané klientskou stranou Weblate pomocou Webpacku.

Požiadavky

Pred pokračovaním v inštalácii sa uistite, že máte nasledujúce požiadavky:

  • Podporované vydanie Node.js.

  • Na vašom systéme je nainštalovaný správca balíčkov yarn.

  • Spustite cd client.

  • Spustite yarn install --check-files.

Inštalácia

Na inštaláciu knižnice najprv spustite nasledujúci príkaz:

yarn add <lib-name>

Importovanie knižnice

Potom existujú dva spôsoby importu knižnice:

  1. Ak ide o knižnicu pre celý projekt (používa sa/vyžaduje sa na všetkých/väčšine stránok):

    • Importujte knižnicu v src/main.js.

    • A deklarujte ju v globálnom rozsahu (ak je to potrebné).

  2. Ak ide o knižnicu špecifickú pre stránku (knižnica sa používa na konkrétnej stránke alebo šablóne):

    • Vytvorte nový súbor s názvom src/<lib-name>.js.

    • Importujte doň knižnicu. Potom ju vložte do objektu window, aby bola globálne prístupná.

    • Pridajte položku do webpack.config.js: <lib-name>: "src/<lib-name>.js".

    • Pridajte názov knižnice do poľa excludePrefixes v mainLicenseTransform v webpack.config.js.

    • Pridajte názov licenčného súboru do additionalFiles v LicensePlugin v poli plugins v webpack.config.js.

    • Vytvorte funkciu <lib-name>LicenseTransform pre licenčný súbor zavedený v predchádzajúcich krokoch a použite ju.

    Poznámka: Nahraďte <lib-name> skutočným názvom knižnice tretej strany.

Zostavovanie knižnice

Zostavte knižnice používané projektom spustením nasledujúceho príkazu:

yarn build

Zahrnutie knižnice

Teraz je knižnica zostavená a pripravená na použitie. Ak ju chcete zahrnúť, postupujte podľa týchto krokov:

  1. Ak bola knižnica importovaná v src/main.js, nie sú potrebné žiadne ďalšie kroky (pretože je už zahrnutá v base.html).

  2. Ak bola knižnica importovaná vo svojom špecifickom súbore src/<lib-name>.js, v weblate/templates použite značky include na prepojenie so zostaveným statickým súborom JavaScript:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

Štýl kódovania

Weblate sa spolieha na Biome pre formátovanie a linting kódu JavaScript a CSS. Šablóny Django sú formátované a lintované samostatne pomocou djade a djlint.

Lokalizácia

Ak potrebujete akýkoľvek text viditeľný pre používateľa v kóde frontendu, mal by byť lokalizovateľný. Vo väčšine prípadov stačí zabaliť text do funkcie gettext, ale k dispozícii sú aj zložitejšie funkcie:

document.write(gettext("this is to be translated"));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext("literal for the singular case",
        "literal for the plural case", object_count);

fmts = ngettext("There is %s object. Remaining: %s",
        "There are %s objects. Remaining: %s", 11);
s = interpolate(fmts, [11, 20]);
// s is "There are 11 objects. Remaining: 20"

Viď aj

Téma prekladu v dokumentácii Django

Ikony

Weblate v súčasnosti používa Material Design Icons, ak hľadáte nový symbol, pozrite si to.

Okrem toho existuje scripts/optimize-svg na zmenšenie veľkosti SVG, pretože väčšina ikon je vložená do HTML, aby bolo možné štýlovať cesty.