Weblate-Frontend

Das Frontend wird derzeit mit Bootstrap, jQuery und einigen Bibliotheken von Drittanbietern erstellt.

Unterstützte Browser

Weblate unterstützt die neuesten, stabilen Versionen aller gängigen Browser und Plattformen.

Alternative Browser, welche die neueste Version von WebKit, Blink oder Gecko verwenden, ob direkt oder über die WebView-API der Plattform, werden nicht explizit unterstützt. Weblate sollte jedoch (in den meisten Fällen) auch in diesen Browsern korrekt angezeigt werden und funktionieren.

Ältere Browser könnten funktionieren, aber einige Funktionen sind möglicherweise eingeschränkt.

Barrierefreiheit

Weblate strebt WCAG 2.2 Level AA für neue und geänderte Bedienfunktionen an, wo dies sinnvoll ist. Verwenden Sie semantisches HTML und Bootstrap-Komponenten, bevor Sie eigenen Interaktionscode hinzufügen.

Beim Ändern des Frontends:

  • Sicherstellen, dass alle interaktiven Steuerelemente über die Tastatur erreichbar und bedienbar sind.

  • Die Fokusreihenfolge sollte logisch sein, und die Darstellung des sichtbaren Fokus sollte beibehalten werden.

  • Native Schaltflächen, Links, Eingabefelder, Auswahllisten und Tabellen anstatt benutzerdefinierter Widgets verwenden.

  • Jedem Formularfeld sind ein Label, Hinweistext und gegebenenfalls Validierungsfehler zuzuordnen.

  • Farbe, Symbolform oder Position sollten nicht als einziges Mittel zum Darstellen eines Status verwendet werden.

  • Dynamische Statusänderungen, die für assistive Technologien ansonsten nicht sichtbar sind, melden.

  • Die Präferenzen für eine reduzierte Bewegungsintensität bei Animationen oder beim Bildlauf sind zu berücksichtigen.

  • Geänderte Arbeitsabläufe sollten mithilfe mit der Tastaturnavigation getestet und, sofern möglich, stichprobenartig mit einem Screenreader überprüft werden.

Gepflogenheiten für die Bedienoberfläche

Abhängigkeiten verwalten

Das Installieren und Verwalten von Drittanbieter-Bibliotheken im Client eines Django-Projekts kann ein wenig knifflig sein. Dieser Abschnitt bietet eine Schritt-für-Schritt-Anleitung zum Installieren und Verwalten von Drittanbieter-Bibliotheken, die clientseitig von Weblate mit Webpack verwendet werden.

Voraussetzungen

Bevor Sie mit der Installation fortfahren, sollten sie sicherstellen, dass die folgenden Voraussetzungen erfüllt sind:

  • Eine unterstützte Node.js-Version.

  • Der yarn-Paketmanager ist auf Ihrem System installiert.

  • cd client ausführen.

  • yarn install --check-files ausführen.

Installation

Um eine Bibliothek zu installieren, führen Sie zunächst den folgenden Befehl aus:

yarn add <lib-name>

Die Bibliothek importieren

Dann gibt es zwei Möglichkeiten, die Bibliothek zu importieren:

  1. Wenn es sich um eine projektweite Bibliothek handelt (sie wird auf allen/den meisten Seiten verwendet/benötigt):

    • Die Bibliothek in src/main.js importieren.

    • Und es im globalen Bereich deklarieren (falls nötig).

  2. Wenn es sich um eine seitenspezifische Bibliothek handelt (sie wird auf einer bestimmten Seite oder Vorlage verwendet):

    • Eine neue Datei mit dem Namen src/<lib-name>.js erstellen.

    • Die Bibliothek darin importieren. Diese dann in das window-Objekt injizieren, damit ein globaler Zugriff möglich ist.

    • Einen Eintrag in webpack.config.js: <lib-name>: "src/<lib-name>.js" hinzufügen.

    • Bibliotheksnamen im excludePrefixes-Array in mainLicenseTransform in webpack.config.js hinzufügen.

    • Lizenzdateinamen in additionalFiles in LicensePlugin im plugins-Array in webpack.config.js hinzufügen.

    • Eine <lib-name>LicenseTransform-Funktion für die Lizenzdatei erstellen, die in den vorherigen Schritten eingeführt wurde, und diese verwenden.

    Hinweis: <lib-name> durch den tatsächlichen Namen der Drittanbieter-Bibliothek ersetzen.

Die Bibliothek erstellen

Erstellen Sie die vom Projekt verwendeten Bibliotheken, indem Sie den folgenden Befehl ausführen:

yarn build

Die Bibliothek einbinden

Jetzt ist die Bibliothek erstellt und einsatzbereit. Um sie einzubinden, führen Sie folgende Schritte aus:

  1. Wenn die Bibliothek in src/main.js importiert wurde, sind keine weiteren Schritte erforderlich (da sie bereits in base.html enthalten ist).

  2. Wenn die Bibliothek in ihrer spezifischen Datei src/<lib-name>.js importiert wurde, verwenden Sie in weblate/templates die Include-Tags, um sie mit der erstellten statischen JavaScript-Datei zu verlinken:

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

Programmierstil

Weblate nutzt Biome für Formatierung und Analyse des JavaScript- und CSS-Codes. Django-Vorlagen werden separat von djade und djlint formatiert und analysiert.

Lokalisierung

Sollten Sie einen für den Benutzer sichtbaren Text im Frontend-Code benötigen, sollte dieser lokalisierbar sein. In den meisten Fällen genügt es, den Text in die Funktion gettext einzuschließen, aber es sind auch komplexere Funktionen verfügbar:

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"

Siehe auch

Übersetzungsthema in der Django-Dokumentation

Symbole

Weblate verwendet derzeit Material Design Icons, falls Sie auf der Suche nach einem neuen Symbol sind, sehen Sie sich das an.

Zusätzlich gibt es scripts/optimize-svg, um die Größe der SVG zu reduzieren, da die meisten Symbole in das HTML eingebettet sind, um die Gestaltung der Pfade zu ermöglichen.