Skip to content

Commit b9f0bdf

Browse files
rbaletrbalet
committed
refactor(test-app): unify & template syntax
1 parent bc8d191 commit b9f0bdf

File tree

12 files changed

+183
-206
lines changed

12 files changed

+183
-206
lines changed

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,28 @@ <h1>ngx-translate</h1>
55
<p>Demo & Visualization of Hierarchy and Isolation</p>
66
</div>
77

8-
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
8+
<div style="display: flex; justify-content: space-between; align-items: flex-end">
99
<nav>
1010
<button routerLink="/global" routerLinkActive="routeActive">Global</button>
1111
<button routerLink="/extended" routerLinkActive="routeActive">Extended</button>
1212
<button routerLink="/isolated" routerLinkActive="routeActive">Isolated</button>
1313
</nav>
1414

15-
<div style="display: flex; gap: 1rem; align-items: center;">
15+
<div style="display: flex; gap: 1rem; align-items: center">
1616
<app-language-switch></app-language-switch>
17-
<button (click)="reloadLang()" class="sub-card" style="padding: 0.5rem 1rem; margin: 0; min-width: auto; min-height: auto; font-size: 0.75rem; color: var(--text-muted); border-radius: 8px;">
17+
<button
18+
(click)="reloadLang()"
19+
class="sub-card"
20+
style="
21+
padding: 0.5rem 1rem;
22+
margin: 0;
23+
min-width: auto;
24+
min-height: auto;
25+
font-size: 0.75rem;
26+
border-radius: 8px;
27+
cursor: pointer;
28+
"
29+
>
1830
Reload
1931
</button>
2032
</div>
@@ -25,7 +37,16 @@ <h1>ngx-translate</h1>
2537
<router-outlet></router-outlet>
2638
</main>
2739

28-
<footer style="margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.875rem; text-align: center;">
40+
<footer
41+
style="
42+
margin-top: 4rem;
43+
padding-top: 2rem;
44+
border-top: 1px solid var(--border);
45+
color: var(--text-muted);
46+
font-size: 0.875rem;
47+
text-align: center;
48+
"
49+
>
2950
<p>Built with ❤️ for ngx-translate hierarchy demo</p>
3051
</footer>
3152
</div>

‎projects/test-app/src/app/app.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { LanguageSwitchComponent } from "./components/language-switch/language-s
66

77
@Component({
88
selector: "app-root",
9-
standalone: true,
109
imports: [
1110
RouterModule,
1211

‎projects/test-app/src/app/components/hierarchy-viz/hierarchy-viz.component.ts‎

Lines changed: 105 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,115 @@
11
import { Component, inject } from "@angular/core";
2-
import { CommonModule } from "@angular/common";
32
import { TranslateService } from "@ngx-translate/core";
43

54
@Component({
65
selector: "app-hierarchy-viz",
7-
standalone: true,
8-
imports: [CommonModule],
96
template: `
10-
<div class="hierarchy-container">
11-
<h3>Service Hierarchy</h3>
12-
<div class="hierarchy-tree">
13-
<ng-container *ngFor="let service of hierarchy; let last = last">
14-
<div class="service-node" [class.current]="last">
15-
<div class="node-icon">
16-
<span *ngIf="service.isRoot; else childIcon">🏠</span>
17-
<ng-template #childIcon>📦</ng-template>
7+
<div class="hierarchy-container">
8+
<h3>Service Hierarchy</h3>
9+
<div class="hierarchy-tree">
10+
@for (service of hierarchy; track service; let last = $last) {
11+
<div class="service-node" [class.current]="last">
12+
<div class="node-icon">
13+
<span>
14+
@if (service.isRoot) {
15+
🏠
16+
} @else {
17+
📦
18+
}
19+
</span>
20+
</div>
21+
<div class="node-info">
22+
<span class="node-type">{{
23+
service.isRoot ? "Root Service" : "Child Service"
24+
}}</span>
25+
<span class="node-lang"
26+
>Lang: <code>{{ service.currentLang }}</code></span
27+
>
28+
@if (service.fallbackLang) {
29+
<span class="node-fallback"
30+
>Fallback: <code>{{ service.fallbackLang }}</code></span
31+
>
32+
}
33+
</div>
34+
</div>
35+
@if (!last) {
36+
<div class="connector">
37+
<div class="line"></div>
38+
</div>
39+
}
40+
}
1841
</div>
19-
<div class="node-info">
20-
<span class="node-type">{{ service.isRoot ? 'Root Service' : 'Child Service' }}</span>
21-
<span class="node-lang">Lang: <code>{{ service.currentLang }}</code></span>
22-
<span class="node-fallback" *ngIf="service.fallbackLang">Fallback: <code>{{ service.fallbackLang }}</code></span>
23-
</div>
24-
</div>
25-
<div class="connector" *ngIf="!last">
26-
<div class="line"></div>
27-
</div>
28-
</ng-container>
29-
</div>
30-
</div>
31-
`,
42+
</div>
43+
`,
3244
styles: `
33-
.hierarchy-container {
34-
background: var(--surface);
35-
border-radius: var(--radius-lg);
36-
border: 1px solid var(--border);
37-
padding: 1.5rem;
38-
margin-top: 2rem;
39-
box-shadow: var(--shadow-sm);
40-
}
41-
h3 {
42-
font-size: 1rem;
43-
font-weight: 600;
44-
margin-bottom: 1rem;
45-
color: var(--text-muted);
46-
text-transform: uppercase;
47-
letter-spacing: 0.05em;
48-
}
49-
.hierarchy-tree {
50-
display: flex;
51-
flex-direction: column;
52-
align-items: flex-start;
53-
}
54-
.service-node {
55-
display: flex;
56-
align-items: center;
57-
gap: 1rem;
58-
padding: 0.75rem 1rem;
59-
background: #f1f5f9;
60-
border-radius: var(--radius-md);
61-
border: 1px solid var(--border);
62-
width: 100%;
63-
transition: all 0.2s;
64-
}
65-
.service-node.current {
66-
background: #eef2ff;
67-
border-color: var(--primary);
68-
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
69-
}
70-
.node-icon {
71-
font-size: 1.25rem;
72-
}
73-
.node-info {
74-
display: flex;
75-
flex-direction: column;
76-
gap: 0.25rem;
77-
}
78-
.node-type {
79-
font-size: 0.875rem;
80-
font-weight: 600;
81-
color: var(--text-main);
82-
}
83-
.node-lang, .node-fallback {
84-
font-size: 0.75rem;
85-
color: var(--text-muted);
86-
}
87-
.connector {
88-
display: flex;
89-
justify-content: center;
90-
width: 3rem;
91-
height: 1.5rem;
92-
margin-left: 0.5rem;
93-
}
94-
.line {
95-
width: 2px;
96-
height: 100%;
97-
background: var(--border);
98-
}
99-
`
45+
.hierarchy-container {
46+
background: var(--surface);
47+
border-radius: var(--radius-lg);
48+
border: 1px solid var(--border);
49+
padding: 1.5rem;
50+
margin-top: 2rem;
51+
box-shadow: var(--shadow-sm);
52+
}
53+
h3 {
54+
font-size: 1rem;
55+
font-weight: 600;
56+
margin-bottom: 1rem;
57+
color: var(--text-muted);
58+
text-transform: uppercase;
59+
letter-spacing: 0.05em;
60+
}
61+
.hierarchy-tree {
62+
display: flex;
63+
flex-direction: column;
64+
align-items: flex-start;
65+
}
66+
.service-node {
67+
display: flex;
68+
align-items: center;
69+
gap: 1rem;
70+
padding: 0.75rem 1rem;
71+
background: #f1f5f9;
72+
border-radius: var(--radius-md);
73+
border: 1px solid var(--border);
74+
width: 100%;
75+
transition: all 0.2s;
76+
}
77+
.service-node.current {
78+
background: #eef2ff;
79+
border-color: var(--primary);
80+
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
81+
}
82+
.node-icon {
83+
font-size: 1.25rem;
84+
}
85+
.node-info {
86+
display: flex;
87+
flex-direction: column;
88+
gap: 0.25rem;
89+
}
90+
.node-type {
91+
font-size: 0.875rem;
92+
font-weight: 600;
93+
color: var(--text-main);
94+
}
95+
.node-lang,
96+
.node-fallback {
97+
font-size: 0.75rem;
98+
color: var(--text-muted);
99+
}
100+
.connector {
101+
display: flex;
102+
justify-content: center;
103+
width: 3rem;
104+
height: 1.5rem;
105+
margin-left: 0.5rem;
106+
}
107+
.line {
108+
width: 2px;
109+
height: 100%;
110+
background: var(--border);
111+
}
112+
`,
100113
})
101114
export class HierarchyVizComponent {
102115
private currentService = inject(TranslateService);
@@ -109,7 +122,7 @@ export class HierarchyVizComponent {
109122
list.unshift({
110123
isRoot: current.isRoot,
111124
currentLang: current.getCurrentLang(),
112-
fallbackLang: current.getFallbackLang()
125+
fallbackLang: current.getFallbackLang(),
113126
});
114127
current = current.parent;
115128
}

‎projects/test-app/src/app/components/language-switch/language-switch.component.html‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎projects/test-app/src/app/components/language-switch/language-switch.component.scss‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎projects/test-app/src/app/components/language-switch/language-switch.component.ts‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,49 @@ import { TranslateService } from "@ngx-translate/core";
33

44
@Component({
55
selector: "app-language-switch",
6-
standalone: true,
7-
styleUrl: "./language-switch.component.scss",
8-
templateUrl: "./language-switch.component.html",
6+
template: `
7+
@for (lang of translate.getLangs(); track lang) {
8+
<button
9+
(click)="translate.use(lang)"
10+
[class.active]="translate.getCurrentLang() === lang"
11+
>
12+
{{ lang }}
13+
</button>
14+
}
15+
`,
16+
styles: `
17+
:host {
18+
display: flex;
19+
gap: 0.5rem;
20+
}
21+
22+
button {
23+
background: white;
24+
border: 1px solid var(--border);
25+
padding: 0.5rem 1rem;
26+
font-size: 0.875rem;
27+
font-weight: 600;
28+
color: var(--text-muted);
29+
border-radius: var(--radius-sm);
30+
cursor: pointer;
31+
transition: all 0.2s;
32+
text-transform: uppercase;
33+
letter-spacing: 0.025em;
34+
35+
&:hover {
36+
background: #f8fafc;
37+
color: var(--text-main);
38+
border-color: var(--secondary);
39+
}
40+
41+
&.active {
42+
background: var(--primary);
43+
color: white;
44+
border-color: var(--primary);
45+
box-shadow: var(--shadow-sm);
46+
}
47+
}
48+
`,
949
})
1050
export class LanguageSwitchComponent {
1151
translate = inject(TranslateService);

‎projects/test-app/src/app/components/page-content/page-content.component.html‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎projects/test-app/src/app/components/page-content/page-content.component.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)