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

Managerul de pachete yarn este utilizat pentru a actualiza bibliotecile terților. Configurația se află în scripts/yarn și există un script de tip wrapper scripts/yarn-update care actualizează bibliotecile, le construiește și le copiază în locațiile corecte din weblate/static/vendor, unde se află tot codul frontend parțial terț. Codul specific Weblate ar trebui plasat direct în weblate/static sau în subdirectoare specifice caracteristicilor (de exemplu weblate/static/editor).

Adăugarea unei noi biblioteci terțe constă, de obicei, în:

# Add a yarn package
yarn --cwd scripts/yarn add PACKAGE
# Edit the script to copy package to the static folder
edit scripts/yarn-update
# Run the update script
./scripts/yarn-update
# Add files to git
git add .

Stil de codificare

Weblate se bazează pe Prettier pentru formatarea codului atât pentru fișierele JavaScript, cât și pentru cele CSS.

De asemenea, folosim ESLint pentru a verifica codul JavaScript.

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.