Frontend do Weblate¶

O frontend atualmente é construído usando Bootstrap, jQuery e algumas bibliotecas de terceiros.

Navegadores suportados¶

Weblate oferece suporte às versões mais recentes e estáveis de todos os principais navegadores e plataformas.

Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko, seja diretamente ou por meio da API de visualização da web da plataforma, não são explicitamente suportados. No entanto, o Weblate deve (na maioria dos casos) ser exibido e funcionar corretamente nesses navegadores também.

Navegadores mais antigos podem funcionar, mas alguns recursos podem ser limitados.

Acessibilidade¶

O Weblate tem como objetivo o WCAG 2.2 Nível AA para funcionalidade para utilizadores quando é prático. Utilize HTML semântico e componentes Bootstrap antes de adicionar código de interação personalizado.

Ao mudar o frontend:

Torne todos os controlos alcançáveis e utilizáveis com um teclado.
Mantenha a ordem de foco lógica e preserve estilização de foco visível.
Preferir botões nativos, links, seleções, e tabelas em vez de widgets personalizados.
Associa cada forma de controlo com uma etiqueta, texto auxiliar, e erros de validação quando aplicável.
Não utilize cor, formato do ícone, ou posição como a única maneira de transmitir o estado.
Anuncia mudanças de estado dinâmicas que caso contrário não estão visíveis a tecnologia de apoio.
Respeite preferências de movimento reduzido para comportamento de animação ou deslize.
Teste fluxos de trabalhos mudados com navegação apenas de teclado e, quando prático, uma verificação pontual do leitor de ecrã.

Convenções de interface de utilizador¶

Links de documentação¶

Utilize o ícone de informação para links contextuais da documentação Weblate em vez do botão textual Documentação. Nos modelos Django, utilize a etiqueta modelo documentation_icon para que o link tenha estilização consistente, etiquetagem, e comportamento de link externo. Ícones de documentação são links interativos e têm de continuar a poder receber o foco do teclado. Mantém os links da documentação textual quando são parte de prosa explicativa, em vez de uma ação contextual.

Gestão de dependências¶

Instalar e gerir bibliotecas de terceiros no cliente de um projeto Django pode ser um pouco complicado. Esta secção fornece um guia passo a passo sobre como instalar e gerir bibliotecas de terceiros usadas pelo lado do cliente do Weblate usando Webpack.

Pré-requisitos¶

Antes de prosseguir com a instalação, certifique-se de ter os seguintes pré-requisitos:

Um lançamento Node.js suportado.
O gestor de pacotes yarn esteja instalado no seu sistema.
Execute cd client.
Executar yarn install --check-files.

Instalação¶

Para instalar uma biblioteca, primeiro execute o seguinte comando:

yarn add <lib-name>

Importar a biblioteca¶

Em seguida, existem duas maneiras de importar a biblioteca:

Se for uma biblioteca para todo o projeto (é usada/necessária em todas/na maioria das páginas):
- Importe a biblioteca em src/main.js.
- E declare-a no escopo global (se for necessário).
Se for uma biblioteca específica de página (a biblioteca é usada numa página ou modelo específico):
- Crie um novo ficheiro chamado src/<nome-da-biblioteca>.js.
- Importe a biblioteca nele. Então injete-a no objeto window para ser acessível globalmente.
- Adicione uma entrada em webpack.config.js: <nome-da-biblioteca>: "src/<nome-da-biblioteca>.js".
- Adicione o nome da biblioteca no array excludePrefixes em mainLicenseTransform em webpack.config.js.
- Adicione o nome do ficheiro de licença em additionalFiles em LicensePlugin no array plugins em webpack.config.js.
- Crie uma função <nome-da-biblioteca>LicenseTransform para o ficheiro de licença introduzido nas etapas anteriores e use-a.
Observação: Substitua <nome-da-biblioteca> pelo nome real da biblioteca de terceiros.

Construir a biblioteca¶

Crie as bibliotecas usadas pelo projeto executando o seguinte comando:

yarn build

Incluir a biblioteca¶

Agora a biblioteca está construída e pronta para uso. Para incluí-la siga estes passos:

Se a biblioteca foi importada em src/main.js, nenhuma etapa adicional é necessária (pois ela já está incluída em base.html).
Se a biblioteca foi importada no seu ficheiro específico src/<nome-da-biblioteca>.js, em weblate/templates use as tags include para vincular ao ficheiro JavaScript estático criado:

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

Estilo de codificação¶

Weblate depende do Biome para a formatação e linting do código JavaScript e CSS. Modelos Django são formatados e linted separadamente pelo djade e pelo djlint.

Tradução¶

Se precisar de qualquer texto visível para o utilizador no código do frontend, ele deve ser localizável. Na maioria dos casos, tudo o que precisa é envolver o seu texto na função gettext, mas existem recursos mais complexos disponíveis:

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"

Veja também

Tópico sobre tradução na documentação do Django

Ícones¶

O Weblate atualmente utiliza o Material Design Icons, caso esteja à procura de um símbolo novo, verifique-o.

Além disso, existe scripts/optimize-svg para reduzir o tamanho do SVG, já que a maioria dos ícones são embutidos no HTML para permitir estilização dos caminhos.