Interfaz de Weblate

El interfaz de usuario actualmente es elaborado utilizando Bootstrap, jQuery y unas pocas bibliotecas de terceros.

Navegadores admitidos

Weblate es compatible con las versiones estables más recientes de todos los navegadores web principales, en todas las plataformas.

No se brinda servicio técnico explícito al emplear navegadores alternativos que hacen uso (directo o a través del API de visualización web de la plataforma) de la versión más reciente de WebKit, Blink o Gecko. Sin embargo, Weblate se visualizará y funcionará correctamente en esos navegadores, en la mayoría de los casos.

Es posible que navegadores más antiguos funcionen, pero determinadas funciones se verán limitadas.

Gestión de dependencias

Puede ser un poco complicado instalar y administrar bibliotecas de terceros en el cliente de un proyecto Django. Esta sección proporciona una guía paso a paso sobre como instalar y administrar bibliotecas de terceros utilizadas por el lado del cliente de Weblate mediante Webpack.

Pre‐requisitos

Antes de proceder con una instalación, asegúrese que tenga los siguientes pre‐requisitos:

  • A supported Node.js release.

  • El gestor del paquete yarn está instalado en su sistema.

  • Ejecute cd client.

  • Run yarn install --check-files.

Instalación

Para instalar una biblioteca, primero ejecuta las instrucciones siguientes:

yarn add <lib-name>

Importar la Biblioteca

Después, hay dos maneras para mejorar la biblioteca:

  1. Si es una biblioteca de proyecto-amplio (es utilizada/necesaria en todas/mayoría de páginas):

    • Importa la biblioteca en src/main.js.

    • Y decláralo dentro del ámbito global (si es necesario).

  2. Si es la biblioteca específica de la página (se utiliza la biblioteca dentro de una página específica o plantilla):

    • Crea un archivo nuevo nombrado src/<lib-name>.js.

    • Importa la biblioteca dentro de ello. Después inyéctalo en el objeto ventana para ser accesible globalmente.

    • Añade un apunte en webpack.config.js: <nombre-lib>: "src/<nombre-lib>.js".

    • Agrega nombre de biblioteca en formación excludePrefixes en mainLicenseTransform en webpack.config.js.

    • Añade el archivo de la licencia en additionalFiles en LicensePlugin dentro del plugins de formación en webpack.config.js.

    • Crea una función <lib-name>LicenseTransform para el archivo de la licencia introducida en los pasos anteriores y utilízalo.

    Nota: Remplaza <lib-name> con el nombre actual de la biblioteca de terceros.

Compilar la Biblioteca

Compila las bibliotecas utilizadas por el proyecto, ejecutando la instrucción siguiente:

yarn build

Incluyendo la Biblioteca

Ahora la biblioteca está construida y preparada para su uso. Para incluirla siga estos pasos:

  1. Si la biblioteca fue importada en src/main.js, ningún paso más se requiere (como ya está incluido en base.html).

  2. Si la biblioteca fue importada en su archivo src/<lib-nombre>.js específico, en weblate/plantillas utilice las etiquetas incluidas para enlazar la construcción estática del archivo JavaScript:

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

Estilo de codificación

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

Localización

Si necesitaría texto visible para el usuario en el código frontend, éste sería localizable. En la mayoría de los casos, basta con encapsular el texto dentro de la función gettext, pero hay disponibles características más complejas:

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"

Ver también

Tema de traducción en la documentación de Django

Iconos

Weblate actualmente utiliza Iconos de Diseño Material, en caso que esté buscando símbolo nuevo, compruebe ese.

Adicionalmente, hay scripts/optimize-svg para reducir el tamaño del SVG tanto de los iconos estén embebidos por dentro del HTML para conceder estilo de las rutas.