Skip to content

Commit ed0349d

Browse files
Klath123Klath123
committed
refactor mapping page
1 parent 39a85d2 commit ed0349d

4 files changed

Lines changed: 654 additions & 363 deletions

File tree

‎src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
44
import { MatToolbarModule } from '@angular/material/toolbar';
5+
import { MatPaginatorModule } from '@angular/material/paginator';
56
import { MatMenuModule } from '@angular/material/menu';
6-
77
import { AppRoutingModule } from './app-routing.module';
88
import { AppComponent } from './app.component';
99
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -71,6 +71,7 @@ import { ColResizeDirective } from './directive/col-resize.directive';
7171
AppRoutingModule,
7272
BrowserAnimationsModule,
7373
MaterialModule,
74+
MatPaginatorModule,
7475
MatDialogModule,
7576
ReactiveFormsModule,
7677
MatToolbarModule,

‎src/app/pages/mapping/mapping.component.css‎

Lines changed: 260 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,284 @@
1-
.content{
1+
.page-root {
2+
display: flex;
3+
flex-direction: column;
24
width: 100%;
5+
min-height: 0;
36
}
47

5-
.actions-row {
8+
.toolbar {
69
display: flex;
7-
align-items: center;
10+
align-items: flex-start;
811
gap: 16px;
9-
margin: 0 20px;
12+
padding: 16px 24px 12px;
13+
}
14+
15+
.search-wrap {
16+
flex: 1 1 360px;
17+
min-width: 260px;
18+
display: flex;
19+
flex-direction: column;
20+
gap: 6px;
21+
}
22+
23+
.search-field { width: 100%; }
24+
25+
.search-field .mat-form-field-wrapper,
26+
.search-field .mat-mdc-form-field-subscript-wrapper {
27+
display: none !important;
28+
}
29+
30+
.search-icon {
31+
color: var(--text-secondary, #757575);
32+
font-size: 18px;
33+
margin-right: 4px;
34+
}
35+
36+
.search-chip {
37+
font-size: 0.76rem !important;
38+
height: 22px !important;
39+
background: rgba(255,255,255,0.1) !important;
40+
color: var(--text-primary, #e0e0e0) !important;
41+
border: 1px solid rgba(255,255,255,0.18) !important;
42+
letter-spacing: 0.01em;
43+
}
44+
.search-chip .mat-chip-remove,
45+
.search-chip button[matChipRemove] {
46+
color: var(--text-secondary, #9e9e9e) !important;
47+
opacity: 1 !important;
48+
}
49+
50+
.clear-btn { color: var(--text-tertiary, #616161) !important; }
51+
.clear-btn:hover { color: var(--text-secondary, #9e9e9e) !important; }
52+
53+
.search-status {
54+
font-size: 0.76rem;
55+
line-height: 1.4;
56+
padding-left: 1px;
57+
min-height: 18px;
58+
}
59+
60+
.status-idle { color: var(--text-tertiary, #616161); }
61+
62+
.status-idle kbd {
63+
display: inline-flex;
64+
align-items: center;
65+
padding: 0 4px;
66+
border: 1px solid rgba(255,255,255,0.12);
67+
border-radius: 3px;
68+
font-family: inherit;
69+
font-size: 0.72rem;
70+
background: rgba(255,255,255,0.05);
71+
color: var(--text-secondary, #9e9e9e);
72+
vertical-align: middle;
73+
}
74+
75+
.status-active {
76+
color: var(--text-secondary, #9e9e9e);
77+
display: flex;
78+
align-items: center;
1079
flex-wrap: wrap;
80+
gap: 4px;
1181
}
1282

13-
.search-box {
14-
flex: 1 1 320px;
15-
min-width: 220px;
16-
max-width: 400px;
83+
.match-count {
84+
font-weight: 600;
85+
color: var(--accent-green, #4caf50);
1786
}
1887

19-
.export-btn {
88+
.term-list {
89+
font-weight: 600;
90+
color: var(--text-primary, #e0e0e0);
91+
}
92+
93+
.clear-link {
94+
background: none;
95+
border: none;
96+
padding: 0;
97+
cursor: pointer;
98+
font-size: inherit;
99+
color: var(--text-tertiary, #616161);
100+
text-decoration: underline;
101+
text-underline-offset: 2px;
102+
}
103+
.clear-link:hover { color: var(--text-secondary, #9e9e9e); }
104+
105+
.toolbar-actions {
20106
margin-left: auto;
21-
min-width: 140px;
107+
display: flex;
108+
align-items: center;
109+
align-self: flex-start;
110+
margin-top: 4px;
111+
}
112+
113+
.export-btn {
114+
font-size: 0.82rem;
115+
height: 36px;
116+
gap: 4px;
117+
background: var(--accent-green, #4caf50) !important;
118+
color: #071a09 !important;
119+
border-color: transparent !important;
120+
}
121+
.export-btn:not([disabled]):hover { background: #66bb6a !important; }
122+
.export-btn[disabled] { opacity: 0.35; }
123+
124+
.table-wrap {
125+
position: relative;
126+
display: flex;
127+
flex-direction: column;
128+
margin: 0 24px 32px;
129+
border-radius: 6px;
130+
overflow: hidden;
131+
border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
132+
min-height: 200px;
133+
flex: 1;
22134
}
23135

24-
.matrix-table {
25-
margin: 20px;
136+
.loading-overlay {
137+
position: absolute;
138+
inset: 0;
139+
z-index: 10;
140+
display: flex;
141+
flex-direction: column;
142+
align-items: center;
143+
justify-content: center;
144+
gap: 14px;
145+
background: var(--surface-00, rgba(28,28,28,0.9));
146+
}
147+
.loading-text {
148+
font-size: 0.84rem;
149+
color: var(--text-secondary, #9e9e9e);
26150
}
27151

28-
.mat-cell, .mat-header-cell {
29-
padding: 20px 10px;
30-
width: 12.5%;
31-
max-width: 12.5%;
32-
word-wrap: break-word;
152+
.mapping-table {
153+
width: 100%;
154+
table-layout: fixed;
33155
}
34156

157+
.mapping-table .mat-column-dimension { width: 12%; }
158+
.mapping-table .mat-column-subDimension { width: 15%; }
159+
.mapping-table .mat-column-activityName { width: 26%; }
160+
.mapping-table .mat-column-samm2 { width: 14%; }
161+
.mapping-table .mat-column-ISO17 { width: 16%; }
162+
.mapping-table .mat-column-ISO22 { width: 17%; }
163+
35164
.mat-header-cell {
36-
font-size: 16px;
165+
font-size: 0.68rem;
166+
font-weight: 700;
167+
letter-spacing: 0.08em;
168+
text-transform: uppercase;
169+
color: var(--text-tertiary, #757575);
170+
padding: 10px 12px;
171+
background: var(--surface-01, #272727);
172+
border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
173+
white-space: nowrap;
174+
}
175+
.mat-sort-header-container { overflow: visible; }
176+
.mat-header-cell .mat-sort-header-button { padding-right: 18px; }
177+
.mat-sort-header[disabled] { cursor: default; pointer-events: none; }
178+
179+
.mat-cell {
180+
padding: 11px 12px;
181+
vertical-align: top;
182+
font-size: 0.84rem;
183+
line-height: 1.55;
184+
color: var(--text-primary, #e0e0e0);
185+
border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
186+
word-break: break-word;
187+
}
188+
189+
.data-row { transition: background 80ms ease; }
190+
.data-row:hover { background: rgba(255,255,255,0.04); }
191+
.data-row:nth-child(even) { background: rgba(255,255,255,0.015); }
192+
.data-row:nth-child(even):hover { background: rgba(255,255,255,0.045); }
193+
194+
.cell-dimension { color: var(--text-secondary, #9e9e9e); font-size: 0.80rem; }
195+
.cell-subdimension { color: var(--text-secondary, #9e9e9e); font-size: 0.82rem; }
196+
197+
.activity-link {
198+
display: block;
199+
color: var(--accent-green, #4caf50);
200+
text-decoration: none;
37201
font-weight: 500;
202+
font-size: 0.85rem;
203+
line-height: 1.45;
204+
}
205+
.activity-link:hover {
206+
text-decoration: underline;
207+
text-underline-offset: 2px;
208+
color: #6fcf73;
209+
}
210+
211+
.level-pill {
212+
display: inline-block;
213+
margin-top: 3px;
214+
font-size: 0.70rem;
215+
letter-spacing: 0.04em;
216+
color: var(--text-tertiary, #616161);
217+
font-weight: 500;
218+
}
219+
220+
.cell-refs { vertical-align: top; }
221+
.refs-text {
222+
font-size: 0.78rem;
223+
color: var(--text-secondary, #9e9e9e);
224+
line-height: 1.6;
225+
}
226+
227+
.cell-empty {
228+
color: var(--text-tertiary, #424242);
229+
user-select: none;
230+
font-size: 0.85rem;
231+
}
232+
233+
.no-data-cell { border: none !important; padding: 0 !important; }
234+
235+
.no-data {
236+
display: flex;
237+
flex-direction: column;
238+
align-items: center;
239+
justify-content: center;
240+
gap: 10px;
241+
padding: 60px 20px;
242+
text-align: center;
243+
}
244+
245+
.no-data mat-icon {
246+
font-size: 2rem;
247+
width: 2rem;
248+
height: 2rem;
249+
color: var(--text-tertiary, #424242);
250+
}
251+
252+
.no-data p {
253+
margin: 0;
254+
font-size: 0.88rem;
255+
color: var(--text-secondary, #9e9e9e);
256+
}
257+
258+
.no-data button {
259+
font-size: 0.80rem;
260+
border-color: var(--border-subtle, rgba(255,255,255,0.12)) !important;
261+
color: var(--text-secondary, #9e9e9e) !important;
262+
}
263+
.no-data button:hover {
264+
border-color: rgba(255,255,255,0.25) !important;
265+
color: var(--text-primary, #e0e0e0) !important;
266+
}
267+
268+
mat-paginator {
269+
background: var(--surface-01, #272727);
270+
border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
271+
font-size: 0.80rem;
272+
color: var(--text-secondary, #9e9e9e);
38273
}
39274

40-
.content ::ng-deep .mat-form-field-wrapper {
41-
padding-bottom: 0;
275+
@media (max-width: 900px) {
276+
.toolbar { flex-wrap: wrap; }
277+
.toolbar-actions { margin-left: 0; align-self: flex-end; }
42278
}
43279

44-
.hide{
45-
display: none;
280+
@media (max-width: 700px) {
281+
.table-wrap { margin: 0 8px 24px; overflow-x: auto; }
282+
.mapping-table { table-layout: auto; min-width: 680px; }
283+
.export-btn { width: 100%; }
46284
}

0 commit comments

Comments
 (0)