Skip to content

Commit a4b3c95

Browse files
wakonigwakonig
committed
wip - feat(dashboard): new styling
1 parent 67e1ef0 commit a4b3c95

5 files changed

Lines changed: 1107 additions & 237 deletions

File tree

‎frontend/bec_atlas/src/app/dashboard/dashboard.component.html‎

Lines changed: 174 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,196 @@
1-
<mat-sidenav-container class="sidenav-container">
2-
<mat-sidenav mode="side" opened>
3-
<div>
4-
<img
5-
src="assets/BEC-Atlas-full-transparent.png"
6-
alt="BEC"
7-
width="80"
8-
height="80"
9-
style="margin: 10px"
10-
/>
1+
<div class="dashboard-layout">
2+
<!-- Left Icon Sidebar -->
3+
<div class="icon-sidebar">
4+
<!-- Logo -->
5+
<div class="logo-section">
6+
<div class="logo-icon">
7+
<img
8+
src="assets/BEC-Atlas-full-transparent.png"
9+
alt="Atlas"
10+
class="logo-img"
11+
/>
12+
</div>
1113
</div>
12-
<mat-divider></mat-divider>
1314

14-
<!-- Username expansion panel -->
15-
<mat-expansion-panel>
16-
<mat-expansion-panel-header>
17-
<mat-icon>account_circle</mat-icon>
18-
<span class="menu-text">Username</span>
19-
</mat-expansion-panel-header>
20-
21-
<button mat-button>Profile</button>
22-
<button mat-button>Settings</button>
23-
<button mat-button (click)="logout()">Logout</button>
24-
</mat-expansion-panel>
25-
26-
<mat-divider></mat-divider>
27-
28-
<!-- Data Browser -->
29-
<mat-expansion-panel>
30-
<mat-expansion-panel-header>
31-
<mat-icon>table_chart</mat-icon>
32-
<span class="menu-text">Data Browser</span>
33-
</mat-expansion-panel-header>
15+
<!-- Navigation Icons -->
16+
<nav class="nav-icons">
17+
<button
18+
class="nav-icon-btn"
19+
[class.active]="selectedNavItem() === 'analytics'"
20+
(click)="
21+
selectNavItem({
22+
id: 'analytics',
23+
label: 'Analytics',
24+
icon: 'analytics'
25+
})
26+
"
27+
>
28+
<mat-icon>analytics</mat-icon>
29+
<span class="nav-label">Analytics</span>
30+
</button>
3431

3532
<button
36-
mat-button
37-
class="menu-item"
38-
[routerLink]="['/dashboard/scan-table']"
33+
class="nav-icon-btn"
34+
[class.active]="selectedNavItem() === 'data'"
35+
(click)="
36+
selectNavItem({
37+
id: 'data',
38+
label: 'Data Browser',
39+
icon: 'table_chart'
40+
})
41+
"
3942
>
40-
Scan Data
43+
<mat-icon>table_chart</mat-icon>
44+
<span class="nav-label">Data</span>
4145
</button>
42-
<button mat-button class="menu-item">Device Data</button>
43-
</mat-expansion-panel>
4446

45-
<!-- Experiment Control Expansion -->
46-
<mat-expansion-panel
47-
(opened)="panelOpened()"
48-
[hideToggle]="hideExperimentPanel"
49-
>
50-
<mat-expansion-panel-header>
47+
<button
48+
class="nav-icon-btn"
49+
[class.active]="selectedNavItem() === 'control'"
50+
(click)="
51+
selectNavItem({
52+
id: 'control',
53+
label: 'Experiment Control',
54+
icon: 'science'
55+
})
56+
"
57+
>
5158
<mat-icon>science</mat-icon>
52-
<span class="menu-text">Experiment Control</span>
53-
</mat-expansion-panel-header>
59+
<span class="nav-label">Control</span>
60+
</button>
5461

5562
<button
56-
mat-button
57-
class="menu-item"
58-
[routerLink]="['/dashboard/overview-grid']"
63+
class="nav-icon-btn"
64+
[class.active]="selectedNavItem() === 'settings'"
65+
(click)="
66+
selectNavItem({ id: 'settings', label: 'Settings', icon: 'settings' })
67+
"
5968
>
60-
<span class="menu-text">Control</span>
69+
<mat-icon>settings</mat-icon>
70+
<span class="nav-label">Settings</span>
6171
</button>
72+
</nav>
73+
74+
<!-- Bottom Icons -->
75+
<div class="bottom-icons">
6276
<button
63-
mat-button
64-
class="menu-item"
65-
[routerLink]="['/dashboard/deployment-admin']"
77+
class="nav-icon-btn"
78+
(click)="openDeploymentDialog()"
6679
>
67-
<span class="menu-text">Admin</span>
80+
<mat-icon>help_outline</mat-icon>
81+
<span class="nav-label">Help</span>
6882
</button>
6983

70-
<button mat-button class="menu-item" (click)="openDeploymentDialog()">
71-
<span class="menu-text">{{ selectOrSwitchButtonTitle }}</span>
84+
<button
85+
class="nav-icon-btn"
86+
(click)="logout()"
87+
>
88+
<mat-icon>account_circle</mat-icon>
89+
<span class="nav-label">Profile</span>
7290
</button>
73-
</mat-expansion-panel>
91+
</div>
92+
</div>
93+
94+
<!-- Main Content with Navigation Panel -->
95+
<div class="main-area">
96+
<!-- Navigation Panel -->
97+
@if (showNavPanel()) {
98+
<div class="nav-panel">
99+
<div class="panel-header">
100+
<h2>{{ getCurrentNavContent()?.label || "Navigation" }}</h2>
101+
</div>
74102

75-
<!-- Help -->
76-
<button mat-button class="menu-item">
77-
<mat-icon>help</mat-icon>
78-
<span class="menu-text">Help</span>
79-
</button>
80-
<div class="spacer"></div>
81-
@if ((realm_name) && (deployment_name)) {
82-
<div class="footer">
83-
<mat-divider></mat-divider>
84-
<div class="menu-text">{{ realm_name }}</div>
85-
<div class="menu-text">{{ deployment_name }}</div>
103+
<div class="panel-content">
104+
@if (getCurrentNavContent()?.children) {
105+
<!-- Show navigation sections based on selected item -->
106+
<div class="section-items">
107+
@for (child of getCurrentNavContent()!.children; track child.id) {
108+
<div
109+
class="nav-item"
110+
[class.active]="selectedSubItem() === child.id"
111+
(click)="navigateToChild(child)"
112+
>
113+
<mat-icon class="item-icon">{{ child.icon }}</mat-icon>
114+
<span class="item-label">{{ child.label }}</span>
115+
</div>
116+
}
117+
</div>
118+
} @else {
119+
<!-- For items without children, show a simple message or content -->
120+
<div class="section-items">
121+
<div class="nav-item">
122+
<mat-icon class="item-icon">{{
123+
getCurrentNavContent()?.icon
124+
}}</mat-icon>
125+
<span class="item-label"
126+
>{{ getCurrentNavContent()?.label }} Dashboard</span
127+
>
128+
</div>
129+
</div>
130+
}
131+
</div>
86132
</div>
87133
}
88-
</mat-sidenav>
89134

90-
<mat-sidenav-content>
91-
<div class="content">
92-
<router-outlet></router-outlet>
135+
<!-- Content Area -->
136+
<div class="content-area">
137+
<!-- Content Header -->
138+
<div class="content-header">
139+
<div class="header-title">
140+
<h1>{{ getCurrentNavContent()?.label || "Dashboard" }}</h1>
141+
<p class="header-subtitle">
142+
Manage and monitor your
143+
{{ getCurrentNavContent()?.label?.toLowerCase() || "workspace" }}
144+
</p>
145+
</div>
146+
<div class="header-actions">
147+
<button mat-raised-button color="primary" class="action-btn">
148+
<mat-icon>add</mat-icon>
149+
New Report
150+
</button>
151+
<button mat-stroked-button class="action-btn">
152+
<mat-icon>filter_list</mat-icon>
153+
Filter
154+
</button>
155+
<button mat-stroked-button class="action-btn">
156+
<mat-icon>file_download</mat-icon>
157+
Export
158+
</button>
159+
</div>
160+
</div>
161+
162+
<!-- Main Content -->
163+
<div class="main-content">
164+
<router-outlet></router-outlet>
165+
166+
<!-- Empty State (shown when no specific route content) -->
167+
<div class="empty-state" *ngIf="!getCurrentNavContent()">
168+
<div class="empty-state-content">
169+
<div class="empty-state-icon">
170+
<mat-icon>analytics</mat-icon>
171+
</div>
172+
<h2>Welcome to BEC Atlas</h2>
173+
<p>
174+
Select a section from the sidebar to get started with your data
175+
analytics and experiment control.
176+
</p>
177+
<button
178+
mat-raised-button
179+
color="primary"
180+
(click)="
181+
selectNavItem({
182+
id: 'analytics',
183+
label: 'Analytics',
184+
icon: 'analytics'
185+
})
186+
"
187+
>
188+
<mat-icon>trending_up</mat-icon>
189+
Explore Analytics
190+
</button>
191+
</div>
192+
</div>
193+
</div>
93194
</div>
94-
</mat-sidenav-content>
95-
</mat-sidenav-container>
195+
</div>
196+
</div>

0 commit comments

Comments
 (0)