Фронтэнд Weblate

Фронтэнд в данный момент написан на Bootstrap, jQuery и паре других сторонних библиотек.

Поддерживаемые браузеры

Weblate поддерживает последние стабильные релизы всех основных браузеров и платформ.

Альтернативные браузеры, которые используют последние версии WebKit, Blink, или Gecko (не важно, напрямую ли или опосредованно через API платформы) в явном виде не поддерживаются. Однако Weblate должен (в большинстве случаев) отображаться и функционировать корректно и в них.

Более старые браузеры, хотя и могут всё ещё работать, но некоторый функционал в них может быть ограничен.

Управление зависимостями

Для обновления сторонних библиотек используется менеджер пакетов yarn. Его настройки находятся в файле scripts/yarn, а для обновления, сборки и копирования библиотек в корректное место в каталоге weblate/static/vendor, где располагаются все сторонние библиотеки фронтэнда, есть скрипт-обёртка scripts/yarn-update. Код, специфичный для Weblate, должен быть размещён непосредственно в weblate/static или в подкаталогах, специфичных для данной функции (например, weblate/static/editor).

Добавление новой сторонней библиотеки обычно заключается в:

# 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 .

Оформление кода

Weblate полагается на Prettier как для форматирования кода JavaScript, так и CSS-файлов.

Мы также используем ESLint для проверки кода на JavaScript.

Перевод

Если вам надо добавить какой-либо текст, который будет показываться пользователю, то он должен быть локализуемым. В большинстве случаев будет достаточно просто обернуть свой текст в вызов gettext, но для более сложных случаев есть и более интересные возможности:

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'

Иконки

В данный момент Weblate использует иконки в стиле Material Design. Если вам нужны какие-то дополнительные эмблемки, то обратите внимание на Material Design Icons или на Material Design Resources.

В дополнение к этому есть скрипт scripts/optimize-svg, который уменьшает размер этих SVG-иконок, так как большинство из них встраиваются внутрь HTML, чтобы возможно было задавать стиль контурам.