Expandir |
---|
| Todas as legendas ou status utilizados em um Browse devem seguir seguintes orientações: - Alinhamento a esquerda da tabela;
- Utilizar preferencialmente o formato “labels”;
- Evitar legendas/status compridos
- Utilização de tooltip para detalhar o status, caso necessario.
- Tamanho do label fixo, considerando o texto de maior comprimento.
|
Expandir |
---|
| As colunas de um browse, devem seguir a mesma formatação e nome do Protheus. • Títulos de campos utilizar do dicionário SX3 • Ordenação, lista de campos da SX3
|
Expandir |
---|
title | Busca / Filtro Avançado |
---|
| Foi definido que para a opção de filtro avançado deve ser utilizado o padrão de slide, conforme modelo proposto abaixo:
|
Expandir |
---|
title | Seleção/Filtros de filiais. |
---|
| Ao criar uma interface de seleção de filiais tanto para filtro de relatório quanto um CRUD de uma rotina, devemos colocar o código e a descrição da filial para melhor localização dos registro e também com o intuito de respeitar o legado do sistema Protheus. Image Added Image Added |
Expandir |
---|
title | Busca / Comportamento do Filtro |
---|
| Para o comportamento do filtro do Browse em PO UI, ficou definido que o mesmo ocorrerá de forma automática, ou seja, quando o usuário ficar sem digitar no campo de busca por um intervalo superior a de 3 segundos deverá ser executada uma nova busca no Back-End automaticamente, sendo interrompida caso o usuário continuar a digitação, aguardando assim um novo intervalo sem digitação para que a busca seja realizada novamente. Segue abaixo exemplo do comportamento de pesquisa automática sem a necessidade de informar o código completo e de acionar o botão de busca:
Image Added
|
Expandir |
---|
title | Posicionamento- Botões e filtro |
---|
| - Os botões de um browser que definem as ações iniciais, posiciona-se a esquerda seguido de um filtro com a opção de busca avançada.
- Um Browser que não tenha em suas definições iniciais botões porem apresenta a opção de busca e busca avançada alinhamos junto ao titulo.
- Os botões posicionado no footer (rodapé) alinhar a direita e caso tenha muitas opções utilizar dropdown com ações relacionadas porem não colocar todas as ações da tela em um único para não perder o dinamismo da tela.
Referencias:
|
Expandir |
---|
| Aviso |
---|
Quando for necessário definir alguma cor manualmente através de algum componente, card ou gráfico | . Deverão , deverão ser priorizadas as cores padrão do PO UI | que são:Image Removed Expandir |
---|
| | Cor | Código Hexadecimal | Código RGBA | Exemplo Cor |
---|
color-01 | #0c9abe | rgba( 12, 154, 190, 1) | Image Removed | color-02 | #2c85c8 | rgba( 44, 133, 200, 1) | Image Removed | color-03 | #2c43c8 | rgba( 44, 67, 200, 1) | Image Removed | color-04 | #5843c8 | rgba( 88, 67, 200, 1) | Image Removed | color-05 | #ab43c8 | rgba( 171, 67, 200, 1) | Image Removed | color-06 | #ab4391 | rgba( 171, 67, 145, 1) | Image Removed | color-07 | #c64840 | rgba( 198, 72, 64, 1) | Image Removed | color-08 | #ea9b3e | rgba( 234, 155, 62, 1) | Image Removed | color-09 | #abc249 | rgba( 171, 194, 73, 1) | Image Removed | color-10 | #56b96b | rgba( 86, 185, 107, 1) | Image Removed | color-11 | #00b28e | rgba( 0, 178, 142, 1) | Image Removed | color-12 | #06a6a5 | rgba( 6, 166, 165, 1) | Image Removed |
Para rotinas onde haja uma necessidade maior de cores ou variações de tonalidade poderá ser utilizadas as cores padronizadas no método GetColorChart da classe CoreDash, conforme detalhamento da classe. Caso haja a necessidade de um número maior de cores, deverá ser alinhado previamente e incluídas as novas cores na paleta de cores abaixo para utilização de todo o BackOffice.
Expandir |
---|
| Sintaxe:CoreDash():GetColorChart() Descrição:Método responsável por retornar em um array todas as cores padronizadas para uso de gráficos DASH. Se for passado ao metodo o ID da cor, será retornado somente a cor solicitada. CoreDash():GetColorChart(X); Onde X é o ID da cor solicitada. Parâmetros: Cor (Variável) | Descrição da Cor | ID | Código RGBA | Posição Array | Exemplo Cor |
---|
cGreenDk | Verde Escuro | 1 | rgba( 0,178,142, 1) | aArray[1][3] | Image Removed | cGreenLht | Verde Claro | 2 | rgba( 0,201,161, 1) | aArray[2][3] | Image Removed | cRedDk | Vermelho Escuro | 3 | rgba(198, 72, 64, 1) | aArray[3][3] | Image Removed | cRedLht | Vermelho Claro | 4 | rgba(227, 73, 64, 1) | aArray[4][3] | Image Removed | cYellDk | Amarelo Escuro | 5 | rgba(252,203, 76, 1) | aArray[5][3] | Image Removed | cYellLht | Amarelo Claro | 6 | rgba(255,212,100, 1) | aArray[6][3] | Image Removed | cOrangeDk | Laranja Escuro | 7 | rgba(234,155, 62, 1) | aArray[7][3] | Image Removed | cOrangeLht | Laranja Claro | 8 | rgba(255,162, 54, 1) | aArray[8][3] | Image Removed | cBlueDk | Azul Escuro | 9 | rgba( 0,120,255, 1) | aArray[9][3] | Image Removed | cBlueLht | Azul Claro | 10 | rgba( 50,165,255, 1) | aArray[10][3] | Image Removed | cGreyDk | Cinza Escuro | 11 | rgba(192,192,192, 1) | aArray[11][3] | Image Removed | cGreyLht | Cinza Claro | 12 | rgba(200,200,210, 1) | aArray[12][3] | Image Removed | cPurpleDk | Roxo Escuro | 13 | rgba(128, 0,128, 1) | aArray[13][3] | Image Removed | cPurpleLht | Roxo Claro | 14 | rgba(185, 35,185, 1) | aArray[14][3] | Image Removed | cBrownDk | Marron Escuro | 15 | rgba(128, 0, 0, 1) | aArray[15][3] | Image Removed | cBrownLht | Marron Claro | 16 | rgba(160, 80, 40, 1) | aArray[16][3] | Image Removed | cFuchsiaDk | Pink Escuro | 17 | rgba(255, 0,255, 1) | aArray[17][3] | Image Removed | cFuchsiaLht | Pink Claro | 18 | rgba(255,120,255, 1) | aArray[18][3] | Image Removed | cMnightBlue | Azul Meia Noite | 19 | rgba( 25, 25,112, 1) | aArray[19][3] | Image Removed | cMediumBlue | Azul Médio | 20 | rgba( 0, 0,205, 1) | aArray[20][3] | Image Removed | cDGreen | Verde | 21 | rgba( 0,100, 0, 1) | aArray[21][3] | Image Removed | cFGreen | Verde Floresta | 22 | rgba( 34,139, 34, 1) | aArray[22][3] | Image Removed | cGreenYel | Verde Limão | 23 | rgba(173,255, 47, 1) | aArray[23][3] | Image Removed | cSalmon | Salmão | 24 | rgba(250,128,114, 1) | aArray[24][3] | Image Removed | cTan | Rosa Queimado | 25 | rgba(210,180,140, 1) | aArray[25][3] | Image Removed | cWheat | Rosa Trigo | 26 | rgba(245,222,179, 1) | aArray[26][3] | Image Removed | cSlateGray | Cinza Ardósia | 27 | rgba(112,128,144, 1) | aArray[27][3] | Image Removed | cMistyRose | Rosa Claro | 28 | rgba(255,228,225, 1) | aArray[28][3] | Image Removed | Expandir |
---|
title | Tabela de Cores Padrão |
---|
| | Tons de CinzaCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Image Added | #c8c8d2 | 200, 200, 210, 1 | - | 12 | Image Added | | 192, 192, 192, 1 | - | 11 | Image Added | #708090 | 112, 128, 144, 1 | - | 27 |
Tons de AzulCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Image Added | #32a5ff | 50, 165, 255, 1 | - | | Image Added | #0078ff | 0, 120, 255, 1 | - | | Image Added | #0c9abe | 12, 154, 190, 1 | color-01 | - | Image Added | #2c85c8 | 44, 133, 200, 1 | color-02 | - | Image Added | #2c43c8 | 44, 67, 200, 1 | color-03 | - | Image Added | #5843c8 | 88, 67, 200, 1 | color-04 | - | Image Added | #0000cd | 0, 0, 205, 1 | - | 20 | Image Added | #191970 | 25, 25, 112, 1 | - | 19 |
Tons de VerdeCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Image Added | #abc249 | 171, 194, 73, 1 | color-09 | - | Image Added | #56b96b | 86, 185, 107, 1 | color-10 | - | Image Added | #00b28e | 0, 178, 142, 1 | color-11 | 1 | Image Added | #06a6a5 | 6, 166, 165, 1 | color-12 | - | Image Added | #00c9a1 | 0, 201, 161, 1 | - | 2 | Image Added | #adff2f | 173, 255, 47, 1 | - | 23 | Image Added | #228b22 | 34, 139, 34, 1 | - | 22 | Image Added | #006400 | 0, 100, 0, 1 | - | 21 |
Tons de MarromCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Image Added | #a05028 | 160, 80, 40, 1 | - | 16 | Image Added | #800000 | 128, 0, 0, 1 | - | 15 |
Tons de RoxoCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Image Added | #ab43c8 | 171, 67, 200, 1 | color-05 | - | Image Added | #ab4391 | 171, 67, 145, 1 | color-06 | - | Image Added | #b923b9 | 185, 35, 185, 1 | - | 14 | Image Added | #800080 | 128, 0, 128, 1 | - | 13 |
Tons de RosaTons de CinzaCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Tons de Azul |
---|
Image Added | #ff78ff | 255, 120, 255, 1 | - | 18 | Image Added | #ff00ff | 255, 0, 255, 1 | - | 17 |
Tons de Vermelho | Cor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard | Tons de Verde
Cor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Tons de Marrom |
---|
Image Added | #fa8072 | 250, 128, 114, 1 | - | 24 | Image Added | #c64840 | 198, 72, 64, 1 | color-07 | 3 | Image Added | #e34940 | 227, 73, 64, 1 | - | 4 |
Tons de LaranjaCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard | Tons de RoxoCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Tons de Rosa |
---|
Image Added | #ffa236 | 255, 162, 54, 1 | - | 8 | Image Added | #ea9b3e | 234, 155, 62, 1 | color-08 | 7 |
Tons de AmareloCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard | Tons de VermelhoCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Tons de LaranjaImage Added | #fccb4c | 252, 203, 76, 1 | - | 5 | Image Added | #ffd464 | 255, 212, 100, 1 | - | 6 |
Tons de PastelCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard | Tons de AmareloCor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
Tons de PastelImage Added | #d2b48c | 210, 180, 140, 1 | - | 25 | Image Added | #f5deb3 | 245, 222, 179, 1 | - | 26 | Image Added | #ffe4e1 | 255, 228, 225, 1 | - | 28 |
Cor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard
Expandir |
---|
| Apesar de cada projeto ter suas particularidades, reservamos algumas cores de legenda que devem ser utilizadas sempre que for necessário representar o status a ela atribuído. Demais status que não foram definidos nessa padronização terão suas cores atribuídas pelo produto de maneira individual, considerando suas necessidades. Os status definidos são: - "Desabilitado" e "Encerrado" - Cor Vermelha (color-10)
- "Habilitado" e "Em aberto" - Cor Verde (color-07)
Cor | Código Hexadecimal | Código RGBA | Exemplo Cor |
---|
color-07 | #c64840 | rgba( 198, 72, 64, 1) | | color-10 | #56b96b | rgba( 86, 185, 107, 1) | |
|
Expandir |
---|
| Ficou definido em reuniao que as telas que possuem a coluna de ações da linha, devem posicionar essa coluna à esquerda, conforme exemplo:
Image Added
|
|