Skip to content

Commit 38ad525

Browse files
anabyealinelariguet
anabye
authored and
alinelariguet
committed
feat(components): reduz espaçamentos e adensa layout de componentes
fixes DTHFUI-11209
1 parent 6b60678 commit 38ad525

File tree

66 files changed

+716
-239
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+716
-239
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,4 @@ Passos para reproduzir:
4343
#### Observações
4444

4545
Issues sem interação do solicitante por mais de 15 dias corridos serão encerradas.
46-
Caso você seja TOTVER favor entrar em contato internamente procurando a space do THF no TDN.
46+
Caso você seja TOTVS favor entrar em contato internamente procurando a space do THF no TDN.

‎.github/ISSUE_TEMPLATE/feature.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ Adicione um outro contexto ou imagens sobre a melhoria.
1818

1919
#### Observações
2020
Issues sem retorno do solicitante por mais de 15 dias corridos serão encerradas.
21-
Caso você seja TOTVER favor entrar em contato internamente procurando a space do THF no TDN
21+
Caso você seja TOTVS favor entrar em contato internamente procurando a space do THF no TDN

‎docs/guides/theme-service.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,12 @@ export const corporateTheme: PoTheme = {
199199
},
200200
onRoot: {
201201
'--font-family': "'Inter', sans-serif",
202-
'--border-radius': '6px'
202+
'--border-radius': '6px',
203+
'--po-density-header-padding': '2rem'; /* Padding em headers (inclui pages, page slide, modal, widget) */
204+
'--po-density-content-padding': '1rem'; /* Padding em contents (inclui pages, container, list view, page slide, widget, stepper, disclaimer-group) */
205+
'--po-density-footer-padding': '1rem'; /* Padding em footers (inclui modal e page slide) */
206+
'--po-density-gap-header-content': '1rem'; /* Espaço interno entre o header e o content (inclui pages, tabs e stepper) */
207+
'--po-density-gap-spacing': '1rem'; /* Espaço interno entre blocos de conteúdo presentes no header e content (inclui dividers e gaps) */
203208
},
204209
perComponent: {
205210
'po-button': {
@@ -270,8 +275,13 @@ setAcessibilidade(nivel: PoThemeA11yEnum) {
270275

271276
```css
272277
/* styles.scss */
273-
:root.override-theme {
278+
:root .override-theme {
274279
--color-brand-01-base: #FF0000;
280+
--po-density-header-padding: 2rem; /* Padding em headers (inclui pages, page slide, modal, widget) */
281+
--po-density-content-padding: 1rem; /* Padding em contents (inclui pages, container, list view, page slide, widget, stepper, disclaimer-group) */
282+
--po-density-footer-padding: 1rem; /* Padding em footers (inclui modal e page slide) */
283+
--po-density-gap-header-content: 1rem; /* Espaço interno entre o header e o content (inclui pages, tabs e stepper) */
284+
--po-density-gap-spacing: 1rem; /* Espaço interno entre blocos de conteúdo presentes no header e content (inclui dividers e gaps) */
275285
}
276286
```
277287

‎projects/portal/src/app/app.component.ts‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
import { Component, OnDestroy, OnInit } from '@angular/core';
22
import { Router } from '@angular/router';
33

4-
import {
5-
PoMenuItem,
6-
PoNavbarIconAction,
7-
PoNavbarItem,
8-
PoNotificationService,
9-
PoThemeA11yEnum
10-
} from '@po-ui/ng-components';
4+
import { PoMenuItem, PoNavbarIconAction, PoNavbarItem, PoThemeA11yEnum } from '@po-ui/ng-components';
115

6+
import { PoDensityMode } from 'projects/ui/src/lib/enums/po-density-mode.enum';
7+
import { firstValueFrom } from 'rxjs';
128
import { PoThemeService, PoThemeTypeEnum } from '../../../ui/src/lib';
139
import { poThemeConstant } from './shared/po-theme.constant';
1410
import { VersionService } from './shared/version.service';
1511

16-
const KEY_STORAGE_REVIEW_SURVEY = 'review_survey_po_ui';
17-
1812
@Component({
1913
selector: 'app-root',
2014
templateUrl: './app.component.html',
@@ -30,14 +24,12 @@ export class AppComponent implements OnInit, OnDestroy {
3024
theme: PoThemeTypeEnum = 0;
3125
a11yLevel: PoThemeA11yEnum;
3226

33-
private location;
3427
private themeChangeListener: any;
3528
private a11yChangeListener: any;
3629

3730
constructor(
38-
private versionService: VersionService,
39-
private notification: PoNotificationService,
40-
private poTheme: PoThemeService,
31+
protected versionService: VersionService,
32+
protected poTheme: PoThemeService,
4133
public router: Router
4234
) {
4335
const _poTheme = this.poTheme.applyTheme();
@@ -50,12 +42,15 @@ export class AppComponent implements OnInit, OnDestroy {
5042
this.theme = typeof _poTheme.active === 'object' ? _poTheme.active.type : _poTheme.active;
5143
}
5244

53-
if (this.a11yLevel === 'AA') {
45+
if (this.a11yLevel === PoThemeA11yEnum.AA) {
5446
this.poTheme.setA11yDefaultSizeSmall(true);
47+
this.poTheme.setDensityMode(PoDensityMode.Small);
48+
} else {
49+
this.poTheme.setDensityMode(PoDensityMode.Medium);
5550
}
5651
}
5752

58-
async ngOnInit() {
53+
ngOnInit() {
5954
if (localStorage.getItem('po-ui-theme')) {
6055
this.themeStorage = localStorage.getItem('po-ui-theme');
6156
}
@@ -64,20 +59,20 @@ export class AppComponent implements OnInit, OnDestroy {
6459
this.a11yStorage = localStorage.getItem('po-ui-a11y');
6560
}
6661

67-
const version = await this.versionService.getCurrentVersion().toPromise();
68-
69-
this.items = [
70-
{ label: 'Iniciar', link: '/' },
71-
{ label: 'Componentes', link: '/documentation' },
72-
{ label: 'Guias', link: '/guides' },
73-
{ label: 'Ícones', link: '/icons' },
74-
{ label: 'Ferramentas', link: '/tools' },
75-
{ label: 'Construtor de temas', link: '/construtor-de-temas' },
76-
{ label: 'Como contribuir', link: 'https://github.com/po-ui/po-angular/blob/master/CONTRIBUTING.md' },
77-
{ label: 'Licença', link: 'https://github.com/po-ui/po-angular/blob/master/LICENSE' },
78-
{ label: 'Core Team', link: 'https://github.com/orgs/po-ui/people' },
79-
{ label: `v${version}`, link: 'https://github.com/po-ui/po-angular/blob/master/CHANGELOG.md' }
80-
];
62+
firstValueFrom(this.versionService.getCurrentVersion()).then(version => {
63+
this.items = [
64+
{ label: 'Iniciar', link: '/' },
65+
{ label: 'Componentes', link: '/documentation' },
66+
{ label: 'Guias', link: '/guides' },
67+
{ label: 'Ícones', link: '/icons' },
68+
{ label: 'Ferramentas', link: '/tools' },
69+
{ label: 'Construtor de temas', link: '/construtor-de-temas' },
70+
{ label: 'Como contribuir', link: 'https://github.com/po-ui/po-angular/blob/master/CONTRIBUTING.md' },
71+
{ label: 'Licença', link: 'https://github.com/po-ui/po-angular/blob/master/LICENSE' },
72+
{ label: 'Core Team', link: 'https://github.com/orgs/po-ui/people' },
73+
{ label: `v${version}`, link: 'https://github.com/po-ui/po-angular/blob/master/CHANGELOG.md' }
74+
];
75+
});
8176

8277
this.iconActions = this.actions;
8378
this.logoPoUI =
@@ -111,7 +106,7 @@ export class AppComponent implements OnInit, OnDestroy {
111106

112107
this.poTheme.setTheme(poThemeConstant, this.theme, this.a11yLevel);
113108

114-
if (this.a11yLevel === 'AA') {
109+
if (this.a11yLevel === PoThemeA11yEnum.AA) {
115110
this.poTheme.setA11yDefaultSizeSmall(true);
116111
}
117112

@@ -128,8 +123,11 @@ export class AppComponent implements OnInit, OnDestroy {
128123

129124
this.poTheme.setTheme(poThemeConstant, this.theme, this.a11yLevel);
130125

131-
if (this.a11yLevel === 'AA') {
126+
if (this.a11yLevel === PoThemeA11yEnum.AA) {
132127
this.poTheme.setA11yDefaultSizeSmall(true);
128+
this.poTheme.setDensityMode(PoDensityMode.Small);
129+
} else {
130+
this.poTheme.setDensityMode(PoDensityMode.Medium);
133131
}
134132

135133
if (dispatchEvent) {
@@ -156,8 +154,8 @@ export class AppComponent implements OnInit, OnDestroy {
156154
},
157155
{
158156
icon: `${this.a11yStorage === 'po-a11y-AAA' ? 'an-fill an-text-aa' : 'an an-text-aa'}`,
159-
label: `Accessibility level ${this.a11yStorage === 'po-a11y-AAA' ? 'AA' : 'AAA'}`,
160-
tooltip: `Accessibility level ${this.a11yStorage === 'po-a11y-AAA' ? 'AAA' : 'AA'}`,
157+
label: `Accessibility level ${this.a11yStorage === 'po-a11y-AAA' ? PoThemeA11yEnum.AA : PoThemeA11yEnum.AAA}`,
158+
tooltip: `Accessibility level ${this.a11yStorage === 'po-a11y-AAA' ? PoThemeA11yEnum.AAA : PoThemeA11yEnum.AA}`,
161159
action: this.changeA11yLevel.bind(this)
162160
}
163161
];

‎projects/portal/src/app/icons/icons.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ <h3 class="po-pt-1">Como Usar?</h3>
101101

102102
<div class="grid grid-flow gap-16 po-pt-3 po-pb-3">
103103
@if (loading) {
104-
<po-loading-overlay p-text="Carregando ícones" p-size="lg"> </po-loading-overlay>
104+
<po-loading-overlay p-text="Carregando ícones"> </po-loading-overlay>
105105
} @else {
106106
@for (icon of filteredItems; track icon) {
107107
<div class="icon-list" (click)="copyClipboard(icon.code)">

‎projects/portal/src/app/shared/version.service.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { Injectable } from '@angular/core';
21
import { HttpClient } from '@angular/common/http';
3-
import { pluck } from 'rxjs/operators';
2+
import { Injectable } from '@angular/core';
3+
import { Observable } from 'rxjs';
4+
import { map } from 'rxjs/operators';
45

56
@Injectable({
67
providedIn: 'root'
78
})
89
export class VersionService {
9-
constructor(private httpClient: HttpClient) {}
10+
constructor(private readonly httpClient: HttpClient) {}
1011

11-
getCurrentVersion() {
12-
return this.httpClient.get('./assets/json/version.json').pipe(pluck('version'));
12+
getCurrentVersion(): Observable<string> {
13+
return this.httpClient.get<{ version: string }>('./assets/json/version.json').pipe(map(res => res.version));
1314
}
1415
}

‎projects/portal/src/styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -488,8 +488,7 @@ a,
488488

489489
.docs-api p,
490490
.app-portal p,
491-
.app-portal ul:not(.po-listbox-list),
492-
.app-portal li:not(.po-listbox-item) {
491+
.app-portal ul:not(.po-listbox-list) {
493492
margin-bottom: 10px;
494493
color: var(--color-neutral-dark-80);
495494
}

‎projects/templates/src/lib/components/po-page-dynamic-detail/po-page-dynamic-detail.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,20 @@ export const poPageDynamicDetailLiteralsDefault = {
142142
* GET {end-point}/metadata?type=detail&version={version}
143143
* ```
144144
*
145+
* #### Tokens customizáveis
146+
*
147+
* > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
148+
*
149+
* | Propriedade | Descrição | Valor Padrão |
150+
* |---------------------|---------------------------------------------|---------------------------------------|
151+
* | **Header** | | |
152+
* | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
153+
* | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
154+
* | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
155+
* | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
156+
* | **Content** | | |
157+
* | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
158+
*
145159
* @example
146160
*
147161
* <example name="po-page-dynamic-detail-user" title="PO Page Dynamic Detail User">

‎projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,18 @@ export const poPageDynamicEditLiteralsDefault = {
176176
* GET {end-point}/metadata?type=edit&version={version}
177177
* ```
178178
*
179+
* #### Tokens customizáveis
180+
*
181+
* | Propriedade | Descrição | Valor Padrão |
182+
* |---------------------|---------------------------------------------|---------------------------------------|
183+
* | **Header** | | |
184+
* | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
185+
* | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
186+
* | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
187+
* | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
188+
* | **Content** | | |
189+
* | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
190+
*
179191
* @example
180192
*
181193
* <example name="po-page-dynamic-edit-basic" title="PO Page Dynamic Edit Basic">

‎projects/templates/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-base.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,20 @@ export const poPageDynamicSearchLiteralsDefault = {
5656
*
5757
* Componente com as ações de pesquisa já definidas, bastando que o desenvolvedor implemente apenas a chamada para as APIs
5858
* e exiba as informações.
59+
*
60+
* #### Tokens customizáveis
61+
*
62+
* > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
63+
*
64+
* | Propriedade | Descrição | Valor Padrão |
65+
* |---------------------|---------------------------------------------|---------------------------------------|
66+
* | **Header** | | |
67+
* | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
68+
* | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
69+
* | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
70+
* | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
71+
* | **Content** | | |
72+
* | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
5973
*/
6074
@Directive()
6175
export abstract class PoPageDynamicSearchBaseComponent {

0 commit comments

Comments
 (0)