Weblate felhasználói felület

A Weblate felhasználói felülete jelenleg a Bootstrap, a jQuery és néhány harmadik féltől származó könyvtár felhasználásával épül fel.

Támogatott böngészők

A Weblate támogatja az összes jelentős böngésző és platform legfrissebb, stabil kiadásait.

Az alternatív böngészők — amelyek a legfrissebb WebKit, Blink vagy Gecko motort használják, akár közvetlenül, akár a platform webes megjelenítő API-ján keresztül — nem tartoznak a hivatalosan támogatott körbe. Ennek ellenére a Weblate általában ezekben is helyesen jelenik meg és működik.

A régebbi böngészők is működhetnek, de bizonyos funkciók korlátozottak lehetnek.

Accessibility

Weblate targets WCAG 2.2 Level AA for new and changed user-facing functionality where practical. Use semantic HTML and Bootstrap components before adding custom interaction code.

When changing the frontend:

  • Make all interactive controls reachable and usable with a keyboard.

  • Keep focus order logical and preserve visible focus styling.

  • Prefer native buttons, links, inputs, selects, and tables over custom widgets.

  • Associate every form control with a label, help text, and validation errors where applicable.

  • Do not use color, icon shape, or position as the only way to convey state.

  • Announce dynamic status changes that are not otherwise visible to assistive technology.

  • Respect reduced-motion preferences for animation or scrolling behavior.

  • Test changed workflows with keyboard-only navigation and, when practical, a screen reader spot check.

Függőségek kezelése

Harmadik féltől származó (3rd party) könyvtárak telepítése és kezelése a Django-projekt client részében némi körültekintést igényel. Ez a szakasz lépésenkénti útmutatást ad arra, hogyan lehet telepíteni és kezelni a Weblate kliensoldalán használt könyvtárakat a Webpack segítségével.

Előfeltételek

A telepítés megkezdése előtt győződjön meg arról, hogy a következő előfeltételek teljesülnek:

  • A supported Node.js release.

  • A yarn csomagkezelő elérhető a rendszeren.

  • Futtassa a következő parancsot: cd client.

  • Run yarn install --check-files.

Telepítés

A könyvtár telepítéséhez először futtassa az alábbi parancsot:

yarn add <lib-name>

A könyvtár importálása

Ezután két lehetőség van a könyvtár importálására:

  1. Ha projektszintű könyvtárról van szó (azaz a legtöbb vagy minden oldalon szükség van rá):

    • Importálja a könyvtárat a src/main.js fájlba.

    • És ha szükséges, deklarálja a globális névtérben.

  2. Ha az adott könyvtár csak egy konkrét oldalhoz vagy sablonhoz szükséges:

    • Hozzon létre egy új fájlt src/<lib-name>.js néven.

    • Importálja a könyvtárat, majd tegye elérhetővé globálisan a window objektumon keresztül.

    • Adjon hozzá egy bejegyzést a webpack.config.js fájlban: <lib-name>: "src/<lib-name>.js".

    • Vegye fel a könyvtár nevét az excludePrefixes tömbbe a mainLicenseTransform részben a webpack.config.js fájlban.

    • Adja hozzá a licenc fájl nevét az additionalFiles részhez a LicensePlugin plugins tömbjében a webpack.config.js fájlban.

    • Create a <lib-name>LicenseTransform function for the license file introduced in the previous steps and use it.

    Megjegyzés: A <lib-name> helyére a tényleges harmadik féltől származó könyvtár neve kerüljön.

Könyvtár felépítése

A projekt által használt könyvtárakat az alábbi paranccsal lehet felépíteni:

yarn build

Könyvtár használata

Miután a könyvtár le lett fordítva, az alábbi módon lehet beilleszteni:

  1. Ha a könyvtárat a src/main.js fájlban importálta, nincs további teendő, mivel az már be van töltve a base.html sablonba.

  2. If the library was imported in its specific file src/<lib-name>.js, in weblate/templates use the include tags to link to the built static JavaScript file:

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

Kódstílus

Weblate relies on Biome for formatting and linting the JavaScript and CSS code. Django templates are formatted and linted separately by djade and djlint.

Lokalizáció

Amennyiben a felhasználó által látható szöveget használ a frontend kódban, azt lokalizálhatóvá kell tenni. A legtöbb esetben elegendő a szöveget gettext függvénybe ágyazni, de további fejlettebb lehetőségek is rendelkezésre állnak:

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"

Lásd még

Fordítási témakör a Django dokumentációban

Ikonok

A Weblate jelenleg a Material Design Icons készletet használja, ha új szimbólumra van szüksége, ott érdemes keresnie.

Emellett a scripts/optimize-svg szkript segítségével csökkenthető az SVG fájlok mérete, mivel a legtöbb ikon közvetlenül a HTML-be van ágyazva, hogy az útvonalak (<path> elemek) egyedileg alakíthatók legyenek.