Weblate front-end

Frontend-ul este construit în prezent folosind Bootstrap, jQuery și câteva biblioteci terțe.

Browsere acceptate

Weblate este compatibil cu cele mai recente versiuni stabile ale tuturor browserelor și platformelor majore.

Browserele alternative care utilizează cea mai recentă versiune de WebKit, Blink sau Gecko, fie direct, fie prin intermediul API-ului de vizualizare web al platformei, nu sunt acceptate în mod explicit. Cu toate acestea, Weblate ar trebui (în majoritatea cazurilor) să se afișeze și să funcționeze corect și în aceste browsere.

Este posibil ca browserele mai vechi să funcționeze, dar unele caracteristici pot fi limitate.

Gestionarea dependențelor

Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This document provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.

Prerequisites

Before proceeding with an installation, make sure you have the following prerequisites:

  • Node.js.

  • Yarn package manager installed on your system.

  • Run cd client.

  • Run yarn install

1- Installation

To install a library, 1st run the following command:

yarn add lib

2- Importing the Library

Then, there are two ways to import the library:

  1. If it is a project-wide library (it is used/needed in all/most pages):

    • Import the library in src/main.js.

  2. If it is page-specific library (library is used in a specific page or template):

    • Create a new file named src/<lib-name>.js.

    • Import the library in it.

    • Add an entry in webpack.config.js: <lib-name>: "src/<lib-name>.js".

    Note: Replace <lib-name> with the actual name of the 3rd party library.

3- Building the Library

Build the libraries used by the project, run the following command:

yarn build

4- Including the Library

Now the library is built and ready for use. To include it follow these steps:

  1. If the library was imported in src/main.js, no further steps are required (as it is already included in base.html).

  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>

Stil de codificare

Weblate relies on Biome for formatting and linting the JavaScript and CSS code.

Localizare

În cazul în care aveți nevoie de text vizibil pentru utilizator în codul front-end, acesta trebuie să fie localizabil. În cele mai multe cazuri, tot ceea ce aveți nevoie este să înfășurați textul în interiorul funcției gettext, dar sunt disponibile funcții mai complexe:

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'

Vezi și

Subiectul traducerii în documentația Django <django:topics/i18n/translation>`

Pictograme

Weblate folosește în prezent pictograme de design material. În cazul în care căutați un nou simbol, consultați Material Design Icons sau Material Design Resources.

În plus, există scripts/optimize-svg pentru a reduce dimensiunea SVG, deoarece majoritatea pictogramelor sunt încorporate în HTML pentru a permite stilizarea căilor de acces.