add sidebar and various component
This commit is contained in:
pratik
@@ -0,0 +1,134 @@
|
|||||||
|
/* App Layout */
|
||||||
|
.app-layout {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #0f172a;
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 280px;
|
||||||
|
transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content.sidebar-collapsed {
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Top Header */
|
||||||
|
.top-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 32px;
|
||||||
|
background: #1e293b;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
color: #3b82f6;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
padding: 6px 14px;
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
color: #3b82f6;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Area */
|
||||||
|
.content-area {
|
||||||
|
flex: 1;
|
||||||
|
padding: 24px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Adjustments */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.main-content {
|
||||||
|
margin-right: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main-content {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header h1 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth Scrolling */
|
||||||
|
.content-area::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(59, 130, 246, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global Material Icons Sizing */
|
||||||
|
.material-icons.md-16 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons.md-18 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons.md-20 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons.md-24 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,10 +2,14 @@ import { Routes } from '@angular/router';
|
|||||||
import { ArtifactsListComponent } from './components/artifacts-list/artifacts-list';
|
import { ArtifactsListComponent } from './components/artifacts-list/artifacts-list';
|
||||||
import { UploadFormComponent } from './components/upload-form/upload-form';
|
import { UploadFormComponent } from './components/upload-form/upload-form';
|
||||||
import { QueryFormComponent } from './components/query-form/query-form';
|
import { QueryFormComponent } from './components/query-form/query-form';
|
||||||
|
import { SettingsComponent } from './components/settings/settings';
|
||||||
|
import { ProfileComponent } from './components/profile/profile';
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{ path: '', redirectTo: '/artifacts', pathMatch: 'full' },
|
{ path: '', redirectTo: '/artifacts', pathMatch: 'full' },
|
||||||
{ path: 'artifacts', component: ArtifactsListComponent },
|
{ path: 'artifacts', component: ArtifactsListComponent },
|
||||||
{ path: 'upload', component: UploadFormComponent },
|
{ path: 'upload', component: UploadFormComponent },
|
||||||
{ path: 'query', component: QueryFormComponent }
|
{ path: 'query', component: QueryFormComponent },
|
||||||
|
{ path: 'settings', component: SettingsComponent },
|
||||||
|
{ path: 'profile', component: ProfileComponent }
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -1,36 +1,30 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
import { provideHttpClient } from '@angular/common/http';
|
|
||||||
import { ArtifactService } from './services/artifact';
|
import { ArtifactService } from './services/artifact';
|
||||||
|
import { NavSidebarComponent } from './components/nav-sidebar/nav-sidebar';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
|
imports: [CommonModule, RouterOutlet, NavSidebarComponent],
|
||||||
template: `
|
template: `
|
||||||
<div class="container">
|
<div class="app-layout">
|
||||||
<header>
|
<app-nav-sidebar (sidebarToggled)="onSidebarToggle($event)"></app-nav-sidebar>
|
||||||
<h1><span class="logo">[W13]</span></h1>
|
|
||||||
<div class="header-info">
|
<main class="main-content" [class.sidebar-collapsed]="isSidebarCollapsed">
|
||||||
<span class="badge">{{ deploymentMode }}</span>
|
<header class="top-header">
|
||||||
<span class="badge">{{ storageBackend }}</span>
|
<h1><span class="logo">[W13]</span> Warehouse13</h1>
|
||||||
|
<div class="header-info">
|
||||||
|
<span class="badge">{{ deploymentMode }}</span>
|
||||||
|
<span class="badge">{{ storageBackend }}</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content-area">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</main>
|
||||||
|
|
||||||
<nav class="tabs">
|
|
||||||
<a routerLink="/artifacts" routerLinkActive="active" class="tab-button">
|
|
||||||
<span class="material-icons md-16">storage</span> Artifacts
|
|
||||||
</a>
|
|
||||||
<a routerLink="/upload" routerLinkActive="active" class="tab-button">
|
|
||||||
<span class="material-icons md-16">upload</span> Upload
|
|
||||||
</a>
|
|
||||||
<a routerLink="/query" routerLinkActive="active" class="tab-button">
|
|
||||||
<span class="material-icons md-16">search</span> Query
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
styleUrls: ['./app.css']
|
styleUrls: ['./app.css']
|
||||||
@@ -38,6 +32,7 @@ import { ArtifactService } from './services/artifact';
|
|||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
deploymentMode: string = '';
|
deploymentMode: string = '';
|
||||||
storageBackend: string = '';
|
storageBackend: string = '';
|
||||||
|
isSidebarCollapsed: boolean = false;
|
||||||
|
|
||||||
constructor(private artifactService: ArtifactService) {}
|
constructor(private artifactService: ArtifactService) {}
|
||||||
|
|
||||||
@@ -50,4 +45,8 @@ export class AppComponent implements OnInit {
|
|||||||
error: (err) => console.error('Failed to load API info:', err)
|
error: (err) => console.error('Failed to load API info:', err)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onSidebarToggle(isCollapsed: boolean) {
|
||||||
|
this.isSidebarCollapsed = isCollapsed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
276
frontend/src/app/components/nav-sidebar/nav-sidebar.css
Normal file
276
frontend/src/app/components/nav-sidebar/nav-sidebar.css
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
|
||||||
|
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
|
||||||
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
width: 280px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
z-index: 1000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle Button */
|
||||||
|
.toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
left: -18px;
|
||||||
|
top: 20px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #3b82f6;
|
||||||
|
border: 2px solid #0f172a;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 2px 12px rgba(59, 130, 246, 0.5);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
z-index: 1001;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn:hover {
|
||||||
|
background: #2563eb;
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn .material-icons {
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* User Section */
|
||||||
|
.user-section {
|
||||||
|
padding: 24px 16px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed .user-section {
|
||||||
|
padding: 24px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed .user-avatar {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-text {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-email {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-role {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Items */
|
||||||
|
.nav-items {
|
||||||
|
flex: 1;
|
||||||
|
padding: 16px 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #cbd5e1;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed .nav-item {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
background: rgba(59, 130, 246, 0.15);
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 24px;
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed .nav-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.sidebar-footer {
|
||||||
|
padding: 16px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-info {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-version {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar:not(.collapsed) {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed {
|
||||||
|
width: 60px;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn {
|
||||||
|
left: auto;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-label,
|
||||||
|
.user-info {
|
||||||
|
animation: slideIn 0.3s ease;
|
||||||
|
}
|
||||||
40
frontend/src/app/components/nav-sidebar/nav-sidebar.html
Normal file
40
frontend/src/app/components/nav-sidebar/nav-sidebar.html
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<aside class="sidebar" [class.collapsed]="isCollapsed">
|
||||||
|
<!-- Toggle Button -->
|
||||||
|
<button class="toggle-btn" (click)="toggleSidebar()" aria-label="Toggle sidebar">
|
||||||
|
<span class="material-icons">{{ isCollapsed ? 'chevron_right' : 'chevron_left' }}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- User Profile Section -->
|
||||||
|
<div class="user-section">
|
||||||
|
<div class="user-avatar">
|
||||||
|
<span class="avatar-text">{{ user.avatar }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="user-info" *ngIf="!isCollapsed">
|
||||||
|
<div class="user-name">{{ user.name }}</div>
|
||||||
|
<div class="user-email">{{ user.email }}</div>
|
||||||
|
<div class="user-role">{{ user.role }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Items -->
|
||||||
|
<nav class="nav-items">
|
||||||
|
<a
|
||||||
|
*ngFor="let item of navItems"
|
||||||
|
[routerLink]="item.route"
|
||||||
|
routerLinkActive="active"
|
||||||
|
class="nav-item"
|
||||||
|
[attr.aria-label]="item.label"
|
||||||
|
>
|
||||||
|
<span class="material-icons nav-icon">{{ item.icon }}</span>
|
||||||
|
<span class="nav-label" *ngIf="!isCollapsed">{{ item.label }}</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- App Info Footer -->
|
||||||
|
<div class="sidebar-footer" *ngIf="!isCollapsed">
|
||||||
|
<div class="app-info">
|
||||||
|
<div class="app-name">Warehouse13</div>
|
||||||
|
<div class="app-version">v1.0.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
43
frontend/src/app/components/nav-sidebar/nav-sidebar.ts
Normal file
43
frontend/src/app/components/nav-sidebar/nav-sidebar.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { Component, Output, EventEmitter } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||||
|
|
||||||
|
interface NavItem {
|
||||||
|
route: string;
|
||||||
|
label: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-nav-sidebar',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, RouterLink, RouterLinkActive],
|
||||||
|
templateUrl: './nav-sidebar.html',
|
||||||
|
styleUrls: ['./nav-sidebar.css']
|
||||||
|
})
|
||||||
|
export class NavSidebarComponent {
|
||||||
|
isCollapsed = false;
|
||||||
|
|
||||||
|
@Output() sidebarToggled = new EventEmitter<boolean>();
|
||||||
|
|
||||||
|
// Hardcoded user data for now (will be replaced with OAuth)
|
||||||
|
user = {
|
||||||
|
name: 'John Doe',
|
||||||
|
email: 'john.doe@warehouse13.com',
|
||||||
|
avatar: 'JD',
|
||||||
|
role: 'Administrator'
|
||||||
|
};
|
||||||
|
|
||||||
|
navItems: NavItem[] = [
|
||||||
|
{ route: '/artifacts', label: 'Artifacts', icon: 'inventory_2' },
|
||||||
|
{ route: '/upload', label: 'Upload', icon: 'cloud_upload' },
|
||||||
|
{ route: '/query', label: 'Query', icon: 'search' },
|
||||||
|
{ route: '/profile', label: 'Profile', icon: 'person' },
|
||||||
|
{ route: '/settings', label: 'Settings', icon: 'settings' }
|
||||||
|
];
|
||||||
|
|
||||||
|
toggleSidebar() {
|
||||||
|
this.isCollapsed = !this.isCollapsed;
|
||||||
|
this.sidebarToggled.emit(this.isCollapsed);
|
||||||
|
}
|
||||||
|
}
|
||||||
395
frontend/src/app/components/profile/profile.css
Normal file
395
frontend/src/app/components/profile/profile.css
Normal file
@@ -0,0 +1,395 @@
|
|||||||
|
.profile-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 .material-icons {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #94a3b8;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile Card */
|
||||||
|
.profile-card {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 32px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-avatar-large {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 4px 24px rgba(59, 130, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-text {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-info h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email {
|
||||||
|
color: #94a3b8;
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-role {
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.department {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.department .material-icons {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-edit {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #3b82f6;
|
||||||
|
background: transparent;
|
||||||
|
color: #3b82f6;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-edit:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-details {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item > .material-icons {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #64748b;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item label {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item span {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Grid */
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
font-size: 36px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Activity Section */
|
||||||
|
.activity-section,
|
||||||
|
.security-section {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-section h2,
|
||||||
|
.security-section h2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-section h2 .material-icons,
|
||||||
|
.security-section h2 .material-icons {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
background: rgba(15, 23, 42, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon .material-icons {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-details {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-action {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-file {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #64748b;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Security Section */
|
||||||
|
.security-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px;
|
||||||
|
background: rgba(15, 23, 42, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-info > .material-icons {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #64748b;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-info h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-info p {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
background: transparent;
|
||||||
|
color: #cbd5e1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
border-color: #3b82f6;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.profile-container {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-header {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-avatar-large {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-info {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-meta {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-edit {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
128
frontend/src/app/components/profile/profile.html
Normal file
128
frontend/src/app/components/profile/profile.html
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<div class="profile-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1>
|
||||||
|
<span class="material-icons">person</span>
|
||||||
|
Profile
|
||||||
|
</h1>
|
||||||
|
<p class="subtitle">Manage your account information</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="profile-content">
|
||||||
|
<!-- User Info Card -->
|
||||||
|
<section class="profile-card">
|
||||||
|
<div class="profile-header">
|
||||||
|
<div class="profile-avatar-large">
|
||||||
|
<span class="avatar-text">{{ user.avatar }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="profile-info">
|
||||||
|
<h2>{{ user.name }}</h2>
|
||||||
|
<p class="email">{{ user.email }}</p>
|
||||||
|
<div class="profile-meta">
|
||||||
|
<span class="badge badge-role">{{ user.role }}</span>
|
||||||
|
<span class="department">
|
||||||
|
<span class="material-icons">business</span>
|
||||||
|
{{ user.department }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn-edit">
|
||||||
|
<span class="material-icons">edit</span>
|
||||||
|
Edit Profile
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-details">
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="material-icons">event</span>
|
||||||
|
<div>
|
||||||
|
<label>Joined</label>
|
||||||
|
<span>{{ user.joinDate }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="material-icons">schedule</span>
|
||||||
|
<div>
|
||||||
|
<label>Last Login</label>
|
||||||
|
<span>{{ user.lastLogin }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Stats Grid -->
|
||||||
|
<section class="stats-grid">
|
||||||
|
<div class="stat-card" *ngFor="let stat of stats">
|
||||||
|
<span class="material-icons stat-icon">{{ stat.icon }}</span>
|
||||||
|
<div class="stat-info">
|
||||||
|
<div class="stat-value">{{ stat.value }}</div>
|
||||||
|
<div class="stat-label">{{ stat.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Recent Activity -->
|
||||||
|
<section class="activity-section">
|
||||||
|
<h2>
|
||||||
|
<span class="material-icons">history</span>
|
||||||
|
Recent Activity
|
||||||
|
</h2>
|
||||||
|
<div class="activity-list">
|
||||||
|
<div class="activity-item" *ngFor="let activity of recentActivity">
|
||||||
|
<div class="activity-icon">
|
||||||
|
<span class="material-icons">{{
|
||||||
|
activity.action.includes('Uploaded') ? 'cloud_upload' :
|
||||||
|
activity.action.includes('query') ? 'search' :
|
||||||
|
activity.action.includes('Downloaded') ? 'cloud_download' :
|
||||||
|
'settings'
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="activity-details">
|
||||||
|
<div class="activity-action">{{ activity.action }}</div>
|
||||||
|
<div class="activity-file">{{ activity.file }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="activity-time">{{ activity.time }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Security Section -->
|
||||||
|
<section class="security-section">
|
||||||
|
<h2>
|
||||||
|
<span class="material-icons">security</span>
|
||||||
|
Security
|
||||||
|
</h2>
|
||||||
|
<div class="security-content">
|
||||||
|
<div class="security-item">
|
||||||
|
<div class="security-info">
|
||||||
|
<span class="material-icons">lock</span>
|
||||||
|
<div>
|
||||||
|
<h3>Password</h3>
|
||||||
|
<p>Last changed 3 months ago</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn-secondary">Change Password</button>
|
||||||
|
</div>
|
||||||
|
<div class="security-item">
|
||||||
|
<div class="security-info">
|
||||||
|
<span class="material-icons">verified_user</span>
|
||||||
|
<div>
|
||||||
|
<h3>Two-Factor Authentication</h3>
|
||||||
|
<p>Add an extra layer of security</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn-secondary">Enable 2FA</button>
|
||||||
|
</div>
|
||||||
|
<div class="security-item">
|
||||||
|
<div class="security-info">
|
||||||
|
<span class="material-icons">devices</span>
|
||||||
|
<div>
|
||||||
|
<h3>Active Sessions</h3>
|
||||||
|
<p>Manage your active login sessions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn-secondary">View Sessions</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
36
frontend/src/app/components/profile/profile.ts
Normal file
36
frontend/src/app/components/profile/profile.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-profile',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule],
|
||||||
|
templateUrl: './profile.html',
|
||||||
|
styleUrls: ['./profile.css']
|
||||||
|
})
|
||||||
|
export class ProfileComponent {
|
||||||
|
// Hardcoded user data (will be replaced with OAuth integration)
|
||||||
|
user = {
|
||||||
|
name: 'John Doe',
|
||||||
|
email: 'john.doe@warehouse13.com',
|
||||||
|
avatar: 'JD',
|
||||||
|
role: 'Administrator',
|
||||||
|
department: 'Engineering',
|
||||||
|
joinDate: 'January 15, 2024',
|
||||||
|
lastLogin: 'October 16, 2025, 2:30 PM'
|
||||||
|
};
|
||||||
|
|
||||||
|
stats = [
|
||||||
|
{ label: 'Artifacts Uploaded', value: '1,234', icon: 'cloud_upload' },
|
||||||
|
{ label: 'Queries Run', value: '567', icon: 'search' },
|
||||||
|
{ label: 'Storage Used', value: '45.2 GB', icon: 'storage' },
|
||||||
|
{ label: 'Active Since', value: '9 months', icon: 'schedule' }
|
||||||
|
];
|
||||||
|
|
||||||
|
recentActivity = [
|
||||||
|
{ action: 'Uploaded artifact', file: 'test_results.csv', time: '2 hours ago' },
|
||||||
|
{ action: 'Ran query', file: 'integration tests', time: '5 hours ago' },
|
||||||
|
{ action: 'Downloaded artifact', file: 'performance_metrics.json', time: '1 day ago' },
|
||||||
|
{ action: 'Updated settings', file: 'notification preferences', time: '2 days ago' }
|
||||||
|
];
|
||||||
|
}
|
||||||
227
frontend/src/app/components/settings/settings.css
Normal file
227
frontend/src/app/components/settings/settings.css
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
.settings-container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 .material-icons {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #94a3b8;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info > .material-icons {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #64748b;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info p {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle Switch */
|
||||||
|
.toggle-switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 48px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #334155;
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background-color: white;
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
transform: translateX(22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Buttons */
|
||||||
|
.theme-btn {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
background: transparent;
|
||||||
|
color: #cbd5e1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-btn:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
border-color: #3b82f6;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-btn.active {
|
||||||
|
background: #3b82f6;
|
||||||
|
border-color: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
background: transparent;
|
||||||
|
color: #cbd5e1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 13px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
border-color: #3b82f6;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge */
|
||||||
|
.badge {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-success {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code */
|
||||||
|
.endpoint {
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: #0f172a;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.settings-container {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-control {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
167
frontend/src/app/components/settings/settings.html
Normal file
167
frontend/src/app/components/settings/settings.html
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
<div class="settings-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1>
|
||||||
|
<span class="material-icons">settings</span>
|
||||||
|
Settings
|
||||||
|
</h1>
|
||||||
|
<p class="subtitle">Manage your Warehouse13 preferences</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="settings-content">
|
||||||
|
<!-- General Settings -->
|
||||||
|
<section class="settings-section">
|
||||||
|
<h2>General</h2>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">palette</span>
|
||||||
|
<div>
|
||||||
|
<h3>Theme</h3>
|
||||||
|
<p>Choose your preferred color scheme</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<button
|
||||||
|
[class.active]="settings.theme === 'dark'"
|
||||||
|
(click)="changeTheme('dark')"
|
||||||
|
class="theme-btn">
|
||||||
|
Dark
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
[class.active]="settings.theme === 'light'"
|
||||||
|
(click)="changeTheme('light')"
|
||||||
|
class="theme-btn">
|
||||||
|
Light
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">notifications</span>
|
||||||
|
<div>
|
||||||
|
<h3>Notifications</h3>
|
||||||
|
<p>Enable desktop notifications for updates</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
[checked]="settings.notifications"
|
||||||
|
(change)="toggleNotifications()">
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">refresh</span>
|
||||||
|
<div>
|
||||||
|
<h3>Auto Refresh</h3>
|
||||||
|
<p>Automatically refresh artifact list</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
[checked]="settings.autoRefresh"
|
||||||
|
(change)="toggleAutoRefresh()">
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Storage Settings -->
|
||||||
|
<section class="settings-section">
|
||||||
|
<h2>Storage</h2>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">storage</span>
|
||||||
|
<div>
|
||||||
|
<h3>Default Storage Backend</h3>
|
||||||
|
<p>Currently using: MinIO</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<span class="badge badge-success">Connected</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">cloud</span>
|
||||||
|
<div>
|
||||||
|
<h3>Upload Limit</h3>
|
||||||
|
<p>Maximum file size: 500MB</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- API Settings -->
|
||||||
|
<section class="settings-section">
|
||||||
|
<h2>API</h2>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">link</span>
|
||||||
|
<div>
|
||||||
|
<h3>API Endpoint</h3>
|
||||||
|
<p>Backend service endpoint</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<code class="endpoint">/api/v1</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">key</span>
|
||||||
|
<div>
|
||||||
|
<h3>API Keys</h3>
|
||||||
|
<p>Manage API authentication tokens</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<button class="btn-secondary">Manage Keys</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section class="settings-section">
|
||||||
|
<h2>About</h2>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">info</span>
|
||||||
|
<div>
|
||||||
|
<h3>Version</h3>
|
||||||
|
<p>Warehouse13 v1.0.0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<span class="material-icons">description</span>
|
||||||
|
<div>
|
||||||
|
<h3>Documentation</h3>
|
||||||
|
<p>View API documentation and guides</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-control">
|
||||||
|
<a href="/docs" target="_blank" class="btn-secondary">
|
||||||
|
View Docs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
30
frontend/src/app/components/settings/settings.ts
Normal file
30
frontend/src/app/components/settings/settings.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-settings',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule],
|
||||||
|
templateUrl: './settings.html',
|
||||||
|
styleUrls: ['./settings.css']
|
||||||
|
})
|
||||||
|
export class SettingsComponent {
|
||||||
|
settings = {
|
||||||
|
theme: 'dark',
|
||||||
|
notifications: true,
|
||||||
|
autoRefresh: false,
|
||||||
|
refreshInterval: 30
|
||||||
|
};
|
||||||
|
|
||||||
|
toggleNotifications() {
|
||||||
|
this.settings.notifications = !this.settings.notifications;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleAutoRefresh() {
|
||||||
|
this.settings.autoRefresh = !this.settings.autoRefresh;
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme(theme: string) {
|
||||||
|
this.settings.theme = theme;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user