148 lines
6.8 KiB
Markdown
148 lines
6.8 KiB
Markdown
|
---
|
||
|
|
title: Principais Mudanças de Front-end - Fluig Voyager 2.0.0
|
||
|
|
source: https://tdn.totvs.com/pages/viewpage.action?pageId=976127718
|
||
|
|
path: \Plataforma Documentação técnica\Desenvolvimento sobre a plataforma\Principais Mudanças de Front-end - Fluig Voyager 2.0.0.md
|
||
|
|
---
|
||
|
|
|
||
|
|
- [Descrição](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Descrição)
|
||
|
|
- [Migração do Rich Editor](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-MigraçãodoRichEditor)
|
||
|
|
- [Mudanças no Style Guide e CSS](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-MudançasnoStyleGuideeCSS)
|
||
|
|
- [Alterações visuais e de acessibilidade](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Alteraçõesvisuaisedeacessibilidade)
|
||
|
|
- [Manutenção de estilos legados](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Manutençãodeestiloslegados)
|
||
|
|
- [Paths descontinuados](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Pathsdescontinuados)
|
||
|
|
- [Path recomendado](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Pathrecomendado)
|
||
|
|
- [Iconografia e ícones](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Iconografiaeícones)
|
||
|
|
- [Menus](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Menus)
|
||
|
|
- [Mudança de fonte padrão](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Mudançadefontepadrão)
|
||
|
|
- [Melhorias gerais](#PrincipaisMudançasdeFrontendFluigVoyager2.0.0-Melhoriasgerais)
|
||
|
|
|
||
|
|
## Descrição
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
A versão **2.0.0** do produto traz mudanças estruturais e visuais importantes no frontend, com foco em modernização de bibliotecas, otimização de carregamento, reorganização de paths e introdução de novos recursos como classes helpers, variáveis CSS e modo escuro no tema responsivo.
|
||
|
|
O objetivo é melhorar desempenho, consistência visual e preparar o produto para evoluções futuras, reduzindo dependências legadas.
|
||
|
|
|
||
|
|
Importante:
|
||
|
|
|
||
|
|
Algumas alterações afetam compatibilidade com códigos customizados e temas antigos, exigindo ajustes manuais descritos abaixo.
|
||
|
|
|
||
|
|
## Migração do Rich Editor
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Agora o componente de FLUIGC.richeditor é baseado no plugin **Kendo UI**.
|
||
|
|
|
||
|
|
- **Impactos:**
|
||
|
|
|
||
|
|
- Variáveis globais `CKEDITOR` e `CKEDITOR_BASEPATH` **não existem mais**.
|
||
|
|
- Configurações aplicadas **após** a inicialização **não terão suporte**.
|
||
|
|
- Plugins personalizados devem seguir a nova API do `FLUIGC.richeditor`.
|
||
|
|
|
||
|
|
**Exemplo de implementação de ação personalizada:**
|
||
|
|
|
||
|
|
```
|
||
|
|
var richeditor = FLUIGC.richeditor('docConteudoCK', {
|
||
|
|
extraPlugins: 'fluigimage, fluigvideo, printDocument',
|
||
|
|
addExternal: [{
|
||
|
|
id: 'printDocument',
|
||
|
|
title: 'Imprimir documento',
|
||
|
|
icon: 'k-i-print',
|
||
|
|
callback: function(editor) {
|
||
|
|
console.log('Callback do plugin printDocument', editor);
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Mudanças no Style Guide e CSS
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Abaixo estão listadas as principais mudanças visuais nessa nova atualização.
|
||
|
|
|
||
|
|
### Alterações visuais e de acessibilidade
|
||
|
|
|
||
|
|
Como parte da implementação do **Animalia Design System (Animalia DS)**, realizamos ajustes visuais em diversos elementos da interface. Essas alterações têm como objetivo melhorar a **experiência do usuário** e garantir maior aderência às práticas de **acessibilidade**.
|
||
|
|
|
||
|
|
- **Tamanhos dos elementos:** botões, campos e demais componentes foram ampliados para facilitar a interação, especialmente em dispositivos móveis e para pessoas com necessidades específicas.
|
||
|
|
- **Cores e contrastes:** paleta de cores revisada para assegurar legibilidade e conformidade com recomendações de acessibilidade (WCAG).
|
||
|
|
- **Outros ajustes visuais:** espaçamentos, ícones e tipografia foram atualizados para proporcionar uma interface mais consistente, clara e inclusiva.
|
||
|
|
|
||
|
|
### Manutenção de estilos legados
|
||
|
|
|
||
|
|
Para mitigar impactos em cenários específicos, os estilos visuais da versão **1.8.2 ou inferior** foram preservados em um diretório dedicado. Esses arquivos devem ser utilizados **exclusivamente em formulários** e apenas em casos excepcionais, quando a adoção imediata dos novos padrões do **Animalia Design System** não for viável.
|
||
|
|
|
||
|
|
**Arquivos disponíveis em `/old/*`:**
|
||
|
|
|
||
|
|
- `/style-guide/css/old/fluig-style-guide.min.css` (Classic)
|
||
|
|
- `/style-guide/css/old/fluig-style-guide-flat.min.css` (Flat)
|
||
|
|
|
||
|
|
Importante:
|
||
|
|
|
||
|
|
O uso desses estilos antigos é **temporário** e não recomendado como solução definitiva. Recomendamos planejar a migração completa para o novo padrão visual o quanto antes.
|
||
|
|
|
||
|
|
### Paths descontinuados
|
||
|
|
|
||
|
|
Alguns caminhos antigos foram removidos e não estão mais disponíveis, retornando **erro 404**:
|
||
|
|
|
||
|
|
- `/style-guide/css/fluig-style-guide.min.css`
|
||
|
|
- `/portal/resources/style-guide/css/fluig-style-guide-flat.min.css`
|
||
|
|
- `/portal/resources/style-guide/css/fluig-style-guide.min.css`
|
||
|
|
|
||
|
|
### Path recomendado
|
||
|
|
|
||
|
|
O caminho oficial e suportado para utilização de estilos é:
|
||
|
|
|
||
|
|
- `/style-guide/css/fluig-style-guide-flat.min.css`
|
||
|
|
|
||
|
|
Recomendação:
|
||
|
|
|
||
|
|
Utilize sempre o path acima em em formulários, garantindo compatibilidade com as versões atuais do produto.
|
||
|
|
|
||
|
|
### Iconografia e ícones
|
||
|
|
|
||
|
|
A utilização de ícones também passou por ajustes com a implementação do **Animalia Design System** no Fluig.
|
||
|
|
|
||
|
|
- **Ícones antigos (Fluig Icons):** Os ícones legados (fluigicon) foram movidos para um arquivo separado. Caso ainda sejam utilizados em **formulários**, é necessário importá-los manualmente:
|
||
|
|
|
||
|
|
- `/style-guide/css/fluig-icons.min.css`
|
||
|
|
- **Nova biblioteca de ícones (Animalia Icons):** O padrão recomendado são os **Animalia Icons** (animaliaicon). Assim como no caso dos ícones legados, em **formulários** eles devem ser importados manualmente:
|
||
|
|
|
||
|
|
- `/style-guide/css/animalia-icons.min.css`
|
||
|
|
|
||
|
|
Observação:
|
||
|
|
|
||
|
|
Essa configuração é exclusiva para formulários. Na plataforma (desenvolvimento de widgets) a importação ocorre automaticamente, não sendo necessário nenhum ajuste adicional.
|
||
|
|
|
||
|
|
## Menus
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Os menus **Liquid** e **Responsive** foram atualizados e agora utilizam ícones da biblioteca **Animalia Icons**.
|
||
|
|
|
||
|
|
## Mudança de fonte padrão
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
No **Tema Responsivo**, a fonte padrão do sistema passou a ser **Lato Regular** (`font-family`).
|
||
|
|
|
||
|
|
Atenção:
|
||
|
|
|
||
|
|
Essa alteração pode impactar o **espaçamento** e o **alinhamento** em temas customizados. Recomenda-se revisar estilos personalizados após a atualização.
|
||
|
|
|
||
|
|
## Melhorias gerais
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Foram aplicadas diversas melhorias de desempenho e organização do código:
|
||
|
|
|
||
|
|
- **Otimização de carregamento**
|
||
|
|
|
||
|
|
- Inclusão de estilos críticos do sistema com `rel="preload"`
|
||
|
|
- Scripts secundários do sistema carregados com `defer`
|
||
|
|
- **Novas utilitárias no Style Guide**
|
||
|
|
|
||
|
|
- Classes *helpers* adicionais adicionadas no Style Guide. Consulte a [documentação](https://style.fluig.com/css.html#helpers) para mais detalhes.
|
||
|
|
- Classes responsivas para **fontes, margens e paddings**, disponível na mesma [documentação](https://style.fluig.com/css.html#helpers).
|
||
|
|
- Novas variáveis de **CSS de tema**. Consulte a [documentação de temas](https://style.fluig.com/css.html#themes) para mais detalhes.
|