Skip to content

Commit cab054b

Browse files
nicoleoliveirarafaellmarques
nicoleoliveira
authored and
rafaellmarques
committed
feat(theme-builder): cria pagina de theme builder
Cria funcionalidade theme builder no portal fixes DTHFUI-6021
1 parent b5a94a6 commit cab054b

File tree

9 files changed

+1921
-3
lines changed

9 files changed

+1921
-3
lines changed

‎projects/portal/src/app/app-routing.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ const routes: Routes = [
99
},
1010
{ path: 'guides', loadChildren: () => import('./guide/guide.module').then(m => m.GuideModule) },
1111
{ path: 'tools', loadChildren: () => import('./tools/tools.module').then(m => m.ToolsModule) },
12+
{
13+
path: 'construtor-de-temas',
14+
loadChildren: () => import('./theme-builder/theme-builder.module').then(m => m.ThemeBuilderModule)
15+
},
1216
{ path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
1317
{ path: '**', redirectTo: '/', pathMatch: 'full' }
1418
];

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
<po-navbar p-logo="./assets/graphics/po.png" p-shadow [p-icon-actions]="iconActions" [p-items]="items"> </po-navbar>
1+
<po-navbar
2+
*ngIf="router.url !== '/construtor-de-temas'"
3+
p-logo="./assets/graphics/po.png"
4+
p-shadow
5+
[p-icon-actions]="iconActions"
6+
[p-items]="items"
7+
>
8+
</po-navbar>
29

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

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
23

34
import { PoMenuItem, PoNavbarItem, PoNavbarIconAction, PoNotificationService } from '@po-ui/ng-components';
45

@@ -17,7 +18,11 @@ export class AppComponent implements OnInit {
1718

1819
private location;
1920

20-
constructor(private versionService: VersionService, private notification: PoNotificationService) {}
21+
constructor(
22+
private versionService: VersionService,
23+
private notification: PoNotificationService,
24+
public router: Router
25+
) {}
2126

2227
async ngOnInit() {
2328
const version = await this.versionService.getCurrentVersion().toPromise();
@@ -27,6 +32,7 @@ export class AppComponent implements OnInit {
2732
{ label: 'Componentes', link: '/documentation' },
2833
{ label: 'Guias', link: '/guides' },
2934
{ label: 'Ferramentas', link: '/tools' },
35+
{ label: 'Construtor de temas', link: '/construtor-de-temas' },
3036
{ label: 'Como contribuir', link: 'https://github.com/po-ui/po-angular/blob/master/CONTRIBUTING.md' },
3137
{ label: 'Licença', link: 'https://github.com/po-ui/po-angular/blob/master/LICENSE' },
3238
{ label: 'Core Team', link: 'https://github.com/orgs/po-ui/people' },

‎projects/portal/src/app/theme-builder/theme-builder-routing.module.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { RouterModule, Routes } from '@angular/router';
2+
import { NgModule } from '@angular/core';
3+
import { ThemeBuilderComponent } from './theme-builder.component';
4+
5+
export const toolsRoutes: Routes = [{ path: '', component: ThemeBuilderComponent }];
6+
7+
@NgModule({
8+
imports: [RouterModule.forChild(toolsRoutes)],
9+
exports: [RouterModule]
10+
})
11+
export class ThemeBuilderRoutingModule {}

‎projects/portal/src/app/theme-builder/theme-builder.component.css‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
.tools-jumbotron {
2+
overflow-y: scroll;
3+
max-height: calc(100vh - 400px);
4+
}
5+
6+
.tools-jumbotron pre {
7+
background-color: #060402c7;
8+
color: #f7f6f5;
9+
}
10+
11+
.tools-jumbotron {
12+
background-color: black;
13+
}
14+
15+
.pre-none {
16+
display: none;
17+
}
18+
19+
.style-inputColor {
20+
-webkit-animation: none;
21+
-moz-appearance: none;
22+
min-width: 32px;
23+
max-width: 32px;
24+
min-height: 32px;
25+
max-height: 32px;
26+
border: none;
27+
cursor: pointer;
28+
background-color: transparent;
29+
}
30+
31+
.style-inputColor::-webkit-color-swatch {
32+
border-radius: 5px;
33+
border: none;
34+
}
35+
36+
.style-inputColor::-moz-color-swatch {
37+
border-radius: 15px;
38+
border: none;
39+
}
40+
41+
.container {
42+
display: flex;
43+
align-items: center;
44+
flex-direction: row;
45+
justify-content: space-between;
46+
}
47+
48+
.container-item {
49+
display: flex;
50+
align-items: center;
51+
flex-direction: row;
52+
}
53+
54+
.po-tag-container-theme {
55+
display: inline-flex;
56+
flex-direction: column;
57+
gap: 0.5em;
58+
min-height: 1.5em;
59+
min-width: max-content;
60+
}
61+
62+
.po-tag-theme {
63+
border-radius: 400px;
64+
border-style: solid;
65+
border-color: transparent;
66+
max-width: 15em;
67+
align-items: center;
68+
border-width: 5px;
69+
display: flex;
70+
gap: 0.25em;
71+
height: 1.5em;
72+
justify-content: center;
73+
overflow: hidden;
74+
background: #e3e9f7;
75+
color: #173782;
76+
font-size: 24px;
77+
padding-left: 0.5rem;
78+
padding-right: 0.5rem;
79+
}
80+
81+
.version {
82+
font-size: 1.125rem;
83+
}
84+
85+
.container-between {
86+
display: flex;
87+
align-items: center;
88+
}
89+
90+
.container-between po-button {
91+
margin-right: auto;
92+
}
93+
94+
.vertical-line {
95+
margin-left: 15px;
96+
margin-right: 5px;
97+
height: 32px;
98+
border-left: 1px solid rgb(177, 169, 169);
99+
}
100+
101+
.container-space-between {
102+
display: flex;
103+
align-items: center;
104+
justify-content: space-between;
105+
padding: 0 4% 0 0;
106+
}
107+
108+
.hide {
109+
display: none;
110+
}
111+
112+
.arrow-back {
113+
display: flex;
114+
align-items: center;
115+
justify-content: center;
116+
position: relative;
117+
padding-left: 1.5rem;
118+
padding-right: 0.5rem;
119+
min-width: 75px;
120+
}
121+
122+
.arrow-back:before {
123+
content: '\e913';
124+
color: #753399;
125+
font-weight: 900;
126+
font-size: 2em;
127+
font-family: PoIcon !important;
128+
position: absolute;
129+
left: 0;
130+
top: 25%;
131+
}
132+
133+
.text-back {
134+
color: #753399;
135+
font-weight: bolder;
136+
text-decoration: none;
137+
}
138+
139+
.text-back:hover {
140+
text-decoration: none;
141+
color: #5e1f80 !important;
142+
}
143+
144+
.text-get-css {
145+
color: #fff;
146+
font-weight: bolder;
147+
text-decoration: none !important;
148+
text-align: center;
149+
}
150+
151+
.text-get-css:hover {
152+
color: #fff;
153+
text-decoration: none;
154+
}
155+
156+
.po-button-primary-theme {
157+
background-color: #753399;
158+
border-color: #753399;
159+
color: #fff;
160+
cursor: pointer;
161+
margin-right: 15px;
162+
min-width: 85px;
163+
}
164+
165+
.po-button-secondary-theme {
166+
margin-left: 10px;
167+
margin-right: 10px;
168+
background-color: transparent;
169+
border-color: #753399;
170+
color: #753399;
171+
cursor: pointer;
172+
min-width: max-content;
173+
}
174+
175+
.po-button-secondary-theme:not(:disabled):hover {
176+
background-color: #d9c2e5;
177+
border-color: #260538;
178+
color: #260538;
179+
}
180+
181+
.btn-disabled {
182+
background-color: transparent;
183+
border-color: #b6bdbf;
184+
color: #b6bdbf;
185+
cursor: not-allowed;
186+
}
187+
188+
.po-button-primary-theme:hover {
189+
background-color: #5b1c7d;
190+
border-color: #5b1c7d;
191+
}
192+
193+
.widget-sticky {
194+
position: sticky;
195+
top: 0;
196+
z-index: 999;
197+
}
198+
199+
#myRadio {
200+
margin-right: 2rem;
201+
}
202+
203+
po-disclaimer {
204+
display: inline-block;
205+
}
206+
207+
.container-component {
208+
display: flex;
209+
justify-content: center;
210+
}
211+
212+
.container-around-button {
213+
display: flex;
214+
justify-content: space-around;
215+
}
216+
217+
.container-overflow {
218+
overflow: scroll;
219+
overflow-x: hidden;
220+
overflow-y: scroll;
221+
height: 90vh !important;
222+
padding-top: 6px;
223+
}
224+
225+
/* width */
226+
::-webkit-scrollbar {
227+
width: 6px;
228+
border-radius: 2px;
229+
}
230+
231+
/* Track */
232+
::-webkit-scrollbar-track {
233+
background: white;
234+
}
235+
236+
/* Handle */
237+
::-webkit-scrollbar-thumb {
238+
background: #753399;
239+
border-radius: 4px;
240+
}
241+
242+
input[type='range'] {
243+
accent-color: #753399;
244+
}
245+
246+
@media (max-width: 960px) {
247+
.container-overflow {
248+
height: 30vh !important;
249+
}
250+
}

0 commit comments

Comments
 (0)