Skip to content

Commit 6896a38

Browse files
jcorrea97anderson-gregorio-totvs
jcorrea97
authored and
anderson-gregorio-totvs
committed
docs(portal): insere tema dark no portal
fixes DTHFUI-9407
1 parent e215947 commit 6896a38

File tree

35 files changed

+790
-204
lines changed

35 files changed

+790
-204
lines changed

‎docs/guides/browser-support.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Atualmente o PO está homologado para os seguintes navegadores:
55

66
<div class="po-row">
77
<div class="po-xl-6 po-lg-8 po-md-10 po-sm-12">
8-
<table class="po-table">
8+
<table class="po-table po-text-color-neutral-dark-40">
99
<thead>
1010
<tr class="po-table-header">
1111
<th class="po-table-header-ellipsis">Navegadores</th>

‎docs/guides/deprecations.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ A tabela a seguir lista todos os recursos depreciados, organizados pelo release
1616

1717
<div class="po-row">
1818
<div class="po-xl-6 po-lg-8 po-md-10 po-sm-12">
19-
<table class="po-table">
19+
<table class="po-table po-text-color-neutral-dark-40">
2020
<thead>
2121
<tr class="po-table-header">
2222
<th class="po-table-header-ellipsis">Área</th>
@@ -70,7 +70,7 @@ Esta seção contém uma lista completa de todos os recursos obsoletos com detal
7070

7171
<div class="po-row">
7272
<div class="po-xl-6 po-lg-8 po-md-10 po-sm-12">
73-
<table class="po-table">
73+
<table class="po-table po-text-color-neutral-dark-40">
7474
<thead>
7575
<tr class="po-table-header">
7676
<th class="po-table-header-ellipsis">Recurso</th>
@@ -191,7 +191,7 @@ export class AppModule { }
191191

192192
<div class="po-row">
193193
<div class="po-xl-6 po-lg-8 po-md-10 po-sm-12">
194-
<table class="po-table">
194+
<table class="po-table po-text-color-neutral-dark-40">
195195
<thead>
196196
<tr class="po-table-header">
197197
<th class="po-table-header-ellipsis">Área</th>

‎docs/guides/development-flow.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ Este guia tem por objetivo definir as regras para criação de *Issues* relacion
7979
<div class="po-pl-md-5 po-pr-lg-5">
8080
<img class="card-list-icon" src="./assets/graphics/contribute/setup.png">
8181
<h3 class="po-font-subtitle po-pb-1">Setup Inicial</h3>
82-
<blockquote>Para seguir o guia é fundamental o conhecimento da <a href="https://git-scm.com/book/en/v2">ferramenta Git.</a>
82+
<blockquote class="po-text-color-neutral-dark-40">Para seguir o guia é fundamental o conhecimento da <a href="https://git-scm.com/book/en/v2">ferramenta Git.</a>
8383
</blockquote>
8484
<ul>
8585
<li>Para utilizar o PO UI, é pré-requisito ter o <code>Node.js</code> instalado (versão 18.13.0 ou acima) e o seu gerenciador de pacote favorito na versão mais atual.</li>

‎docs/guides/migration-poui-v2.md‎

Lines changed: 113 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,29 +42,100 @@ Para poder utilizar o comando e realizar a migração, execute os comandos abaix
4242

4343
Nesta nova versão o nome dos pacotes foram alterados, de acordo com a tabela abaixo:
4444

45-
| Pacotes | Substituído por |
46-
| --------------------------------------------------------| -------------------------------------|
47-
| `@portinari/portinari-ui` | `@po-ui/ng-components` |
48-
| `@portinari/portinari-templates` | `@po-ui/ng-templates` |
49-
| `@portinari/portinari-code-editor` | `@po-ui/ng-code-editor` |
50-
| `@portinari/tslint` | `@po-ui/ng-tslint` |
51-
| `@portinari/style` | `@po-ui/style` |
45+
<table>
46+
<thead>
47+
<tr>
48+
<th class="po-text-color-neutral-dark-40">Pacotes</th>
49+
<th class="po-text-color-neutral-dark-40">Substituído por</th>
50+
</tr>
51+
</thead>
52+
<tbody>
53+
<tr>
54+
<td><code>@portinari/portinari-ui</code></td>
55+
<td><code>@po-ui/ng-components</code></td>
56+
</tr>
57+
<tr>
58+
<td><code>@portinari/portinari-templates</code></td>
59+
<td><code>@po-ui/ng-templates</code></td>
60+
</tr>
61+
<tr>
62+
<td><code>@portinari/portinari-code-editor</code></td>
63+
<td><code>@po-ui/ng-code-editor</code></td>
64+
</tr>
65+
<tr>
66+
<td><code>@portinari/tslint</code></td>
67+
<td><code>@po-ui/ng-tslint</code></td>
68+
</tr>
69+
<tr>
70+
<td><code>@portinari/style</code></td>
71+
<td><code>@po-ui/style</code></td>
72+
</tr>
73+
</tbody>
74+
</table>
5275

5376
Também foi realizado remoções das propriedades, onde passam a valer as novas definições, veja a tabela abaixo:
5477

55-
| Componentes | Anteriormente | Substituído por |
56-
| ---------------------------------------| -----------------------------------------| ----------------------------------|
57-
| `PoFieldModule` | `[p-focus]` | `[p-auto-focus]` |
58-
| `PoHttpResquestInterceptor` | `X-Portinari-Screen-Lock` | `X-PO-Screen-Lock` |
59-
| `PoHttpResquestInterceptor` | `X-Portinari-No-Count-Pending-Requests` | `X-PO-No-Count-Pending-Requests` |
60-
| `PoHttpInterceptor` | `X-Portinari-No-Message` | `X-PO-No-Message` |
61-
| `PoPageEdit` | Possuir a ação `cancel() {}` no TS | `(p-cancel)` |
62-
| `PoPageEdit` | Possuir a ação `save() {}` no TS | `(p-save)` |
63-
| `PoPageEdit` | Possuir a ação `saveNew() {}` no TS | `(p-save-new)` |
64-
| `PoPageDetail` | Possuir a ação `back() {}` no TS | `(p-back)` |
65-
| `PoPageDetail` | Possuir a ação `edit() {}` no TS | `(p-edit)` |
66-
| `PoPageDetail` | Possuir a ação `remove() {}` no TS | `(p-remove)` |
67-
78+
<table>
79+
<thead>
80+
<tr>
81+
<th class="po-text-color-neutral-dark-40">Componentes</th>
82+
<th class="po-text-color-neutral-dark-40">Anteriormente</th>
83+
<th class="po-text-color-neutral-dark-40">Substituído por</th>
84+
</tr>
85+
</thead>
86+
<tbody>
87+
<tr>
88+
<td><code>PoFieldModule</code></td>
89+
<td><code>[p-focus]</code></td>
90+
<td><code>[p-auto-focus]</code></td>
91+
</tr>
92+
<tr>
93+
<td><code>PoHttpResquestInterceptor</code></td>
94+
<td><code>X-Portinari-Screen-Lock</code></td>
95+
<td><code>X-PO-Screen-Lock</code></td>
96+
</tr>
97+
<tr>
98+
<td><code>PoHttpResquestInterceptor</code></td>
99+
<td><code>X-Portinari-No-Count-Pending-Requests</code></td>
100+
<td><code>X-PO-No-Count-Pending-Requests</code></td>
101+
</tr>
102+
<tr>
103+
<td><code>PoHttpInterceptor</code></td>
104+
<td><code>X-Portinari-No-Message</code></td>
105+
<td><code>X-PO-No-Message</code></td>
106+
</tr>
107+
<tr>
108+
<td><code>PoPageEdit</code></td>
109+
<td class="po-text-color-neutral-dark-40">Possuir a ação <code>cancel() {}</code> no TS</td>
110+
<td><code>(p-cancel)</code></td>
111+
</tr>
112+
<tr>
113+
<td><code>PoPageEdit</code></td>
114+
<td class="po-text-color-neutral-dark-40">Possuir a ação <code>save() {}</code> no TS</td>
115+
<td><code>(p-save)</code></td>
116+
</tr>
117+
<tr>
118+
<td><code>PoPageEdit</code></td>
119+
<td class="po-text-color-neutral-dark-40">Possuir a ação <code>saveNew() {}</code> no TS</td>
120+
<td><code>(p-save-new)</code></td>
121+
</tr>
122+
<tr>
123+
<td><code>PoPageDetail</code></td>
124+
<td class="po-text-color-neutral-dark-40">Possuir a ação <code>back() {}</code> no TS</td>
125+
<td><code>(p-back)</code></td>
126+
</tr>
127+
<tr>
128+
<td><code>PoPageDetail</code></td>
129+
<td class="po-text-color-neutral-dark-40">Possuir a ação <code>edit() {}</code> no TS</td>
130+
<td><code>(p-edit)</code></td>
131+
</tr>
132+
<tr>
133+
<td><code>PoPageDetail</code></td>
134+
<td class="po-text-color-neutral-dark-40">Possuir a ação <code>remove() {}</code> no TS</td>
135+
<td><code>(p-remove)</code></td>
136+
</tr>
137+
</tbody>
138+
</table>
68139

69140
#### Depreciação
70141

@@ -161,12 +232,28 @@ Para poder utilizar o comando e realizar a migração, execute os comandos abaix
161232

162233
Nesta nova versão o nome dos pacotes foram alterados, de acordo com a tabela abaixo:
163234

164-
| Pacotes | Substituído por |
165-
| --------------------------------------------------------| ------------------------------------ |
166-
| `@portinari/portinari-sync` | `@po-ui/ng-sync` |
167-
| `@portinari/portinari-storage` | `@po-ui/ng-storage` |
168-
| `@portinari/tslint` | `@po-ui/ng-tslint` |
169-
235+
<table>
236+
<thead>
237+
<tr>
238+
<th class="po-text-color-neutral-dark-40">Pacotes</th>
239+
<th class="po-text-color-neutral-dark-40">Substituído por</th>
240+
</tr>
241+
</thead>
242+
<tbody>
243+
<tr>
244+
<td><code>@portinari/portinari-sync</code></td>
245+
<td><code>@po-ui/ng-sync</code></td>
246+
</tr>
247+
<tr>
248+
<td><code>@portinari/portinari-storage</code></td>
249+
<td><code>@po-ui/ng-storage</code></td>
250+
</tr>
251+
<tr>
252+
<td><code>@portinari/tslint</code></td>
253+
<td><code>@po-ui/ng-tslint</code></td>
254+
</tr>
255+
</tbody>
256+
</table>
170257

171258
#### Depreciação
172259

‎docs/guides/releases.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Consulte abaixo nossos guias de migração de versão para obter mais informaç
2929

3030
<div class="po-row">
3131
<div class="po-xl-6 po-lg-8 po-md-10 po-sm-12">
32-
<table class="po-table">
32+
<table class="po-table po-text-color-neutral-dark-40">
3333
<thead>
3434
<tr class="po-table-header">
3535
<th class="po-table-header-ellipsis">Angular</th>

‎docs/guides/schematics.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ ng generate @po-ui/ng-components:<schematic-name>
5252

5353
<div class="po-row">
5454
<div class="po-sm-12">
55-
<table class="po-table">
55+
<table class="po-table po-text-color-neutral-dark-40">
5656
<thead>
5757
<tr class="po-table-header">
5858
<th class="po-table-header-ellipsis">Nome</th>
@@ -95,7 +95,7 @@ ng generate @po-ui/ng-templates:<schematic-name>
9595

9696
<div class="po-row">
9797
<div class="po-sm-12">
98-
<table class="po-table">
98+
<table class="po-table po-text-color-neutral-dark-40">
9999
<thead>
100100
<tr class="po-table-header">
101101
<th class="po-table-header-ellipsis">Nome</th>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<i class="ph ph-sun"></i>
2+
3+
<i class="ph ph-moon"></i>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<po-navbar p-logo="./assets/po-logos/po_black.png" p-shadow [p-icon-actions]="iconActions" [p-items]="items">
2-
</po-navbar>
1+
<po-navbar [p-logo]="logoPoUI" p-shadow [p-icon-actions]="iconActions" [p-items]="items"> </po-navbar>
32

43
<!-- <po-menu #userMenu [p-menus]="menus" p-filter></po-menu> -->
54

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

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

4-
import { PoMenuItem, PoNavbarItem, PoNavbarIconAction, PoNotificationService } from '@po-ui/ng-components';
4+
import { PoMenuItem, PoNavbarIconAction, PoNavbarItem, PoNotificationService } from '@po-ui/ng-components';
55

6+
import { PoThemeService, PoThemeTypeEnum } from '../../../ui/src/lib';
7+
import { poThemeConstant } from './shared/po-theme.constant';
68
import { VersionService } from './shared/version.service';
79

810
const KEY_STORAGE_REVIEW_SURVEY = 'review_survey_po_ui';
@@ -11,20 +13,38 @@ const KEY_STORAGE_REVIEW_SURVEY = 'review_survey_po_ui';
1113
selector: 'app-root',
1214
templateUrl: './app.component.html'
1315
})
14-
export class AppComponent implements OnInit {
16+
export class AppComponent implements OnInit, OnDestroy {
1517
menus: Array<PoMenuItem> = [];
1618
items: Array<PoNavbarItem> = [];
1719
iconActions: Array<PoNavbarIconAction> = [];
20+
themeStorage = 'po-theme-default';
21+
logoPoUI = './assets/po-logos/po_black.png';
22+
theme: PoThemeTypeEnum = 0;
1823

1924
private location;
25+
private themeChangeListener: any;
2026

2127
constructor(
2228
private versionService: VersionService,
2329
private notification: PoNotificationService,
30+
private poTheme: PoThemeService,
2431
public router: Router
25-
) {}
32+
) {
33+
const _poTheme = this.poTheme.persistThemeActive();
34+
if (!_poTheme) {
35+
this.theme = poThemeConstant.active;
36+
} else {
37+
this.theme = _poTheme.active || 0;
38+
}
39+
40+
this.poTheme.setTheme(poThemeConstant, this.theme);
41+
}
2642

2743
async ngOnInit() {
44+
if (localStorage.getItem('po-ui-theme')) {
45+
this.themeStorage = localStorage.getItem('po-ui-theme');
46+
}
47+
2848
const version = await this.versionService.getCurrentVersion().toPromise();
2949

3050
this.items = [
@@ -39,14 +59,49 @@ export class AppComponent implements OnInit {
3959
{ label: `v${version}`, link: 'https://github.com/po-ui/po-angular/blob/master/CHANGELOG.md' }
4060
];
4161

42-
this.iconActions = [
62+
this.iconActions = this.actions;
63+
this.logoPoUI =
64+
this.themeStorage === 'po-theme-default' ? './assets/po-logos/po_black.png' : './assets/po-logos/po_white.png';
65+
66+
this.themeChangeListener = () => {
67+
this.changeTheme(false);
68+
};
69+
window.addEventListener('po-sample-change-theme', this.themeChangeListener);
70+
}
71+
72+
openExternalLink(url) {
73+
window.open(url, '_blank');
74+
}
75+
76+
changeTheme(dispatchEvent = true) {
77+
this.themeStorage = this.themeStorage === 'po-theme-default' ? 'po-theme-dark' : 'po-theme-default';
78+
localStorage.setItem('po-ui-theme', this.themeStorage);
79+
this.theme = this.themeStorage === 'po-theme-default' ? 0 : 1;
80+
this.logoPoUI =
81+
this.themeStorage === 'po-theme-default' ? './assets/po-logos/po_black.png' : './assets/po-logos/po_white.png';
82+
this.iconActions = this.actions;
83+
84+
this.poTheme.setTheme(poThemeConstant, this.theme);
85+
86+
if (dispatchEvent) {
87+
window.dispatchEvent(new Event(this.themeStorage));
88+
}
89+
}
90+
91+
get actions() {
92+
return [
4393
{ icon: 'ph ph-github-logo', link: 'https://github.com/po-ui', label: 'Github' },
4494
{ icon: 'ph ph-x-logo', link: 'https://twitter.com/@pouidev', label: 'Twitter' },
45-
{ icon: 'ph ph-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' }
95+
{ icon: 'ph ph-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' },
96+
{
97+
icon: `${this.themeStorage === 'po-theme-dark' ? 'ph ph-sun' : 'ph ph-moon'}`,
98+
label: 'tema',
99+
action: this.changeTheme.bind(this)
100+
}
46101
];
47102
}
48103

49-
openExternalLink(url) {
50-
window.open(url, '_blank');
104+
ngOnDestroy(): void {
105+
window.removeEventListener('po-sample-change-theme', this.themeChangeListener);
51106
}
52107
}

‎projects/portal/src/app/home/home-colorful/home-colorful.component.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@
2525
}
2626

2727
.title {
28-
color: #1d2426;
28+
color: var(--color-neutral-dark-80);
2929
font-size: 50px;
3030
margin: 0px;
3131
padding-top: 100px;
3232
font-family: var(--font-family-po-ui-light);
3333
}
3434

3535
.library {
36-
color: #1d2426;
36+
color: var(--color-neutral-dark-70);
3737
font-size: 34px;
3838
font-family: var(--font-family-po-ui-light);
3939
}

0 commit comments

Comments
 (0)