-ux
-ui ใหม่ ทั้งระบบ (ai little retouch)
This commit is contained in:
x2Skyz
@@ -1,52 +1,45 @@
|
||||
<div class="h-screen bg-gray-100 flex flex-col">
|
||||
|
||||
<!-- Header Section -->
|
||||
<header class="flex justify-between items-center py-4 px-6 bg-white shadow-sm border-b border-gray-200 z-10">
|
||||
<header class="flex justify-between items-center py-4 px-6">
|
||||
@if (mode == 'default') {
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<i class="fas fa-folder text-red-500"></i> โครงการทั้งหมด
|
||||
</h1>
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
|
||||
</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1> -->
|
||||
} @else if (mode == 'add') {
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- ปุ่มย้อนกลับ -->
|
||||
<button (click)="onCancelProject()"
|
||||
class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 text-gray-500 transition-colors hover:text-red-500"
|
||||
title="ย้อนกลับ">
|
||||
<i class="fas fa-arrow-left text-lg"></i>
|
||||
</button>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<i class="fas fa-plus-circle text-red-500"></i> เพิ่มโครงการ
|
||||
</h1>
|
||||
</div>
|
||||
} @else if (mode == 'edit') {
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- ปุ่มย้อนกลับ -->
|
||||
<button (click)="onCancelProject()"
|
||||
class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 text-gray-500 transition-colors hover:text-red-500"
|
||||
title="ย้อนกลับ">
|
||||
<i class="fas fa-arrow-left text-lg"></i>
|
||||
</button>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<i class="fas fa-edit text-red-500"></i> แก้ไขโครงการ
|
||||
</h1>
|
||||
</div>
|
||||
}
|
||||
<div class="flex flex-col md:flex-row justify-between items-end gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<button (click)="onCancelProject()"
|
||||
class="group flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 transition-all mr-1"
|
||||
title="ย้อนกลับ">
|
||||
<i class="fas fa-arrow-left text-gray-400 group-hover:text-red-900 text-lg"></i>
|
||||
</button>
|
||||
<div class="h-6 w-px bg-gray-200 mr-2"></div>
|
||||
|
||||
<span class="w-2 h-8 bg-red-900 rounded-full"></span> เพิ่มโครงการ
|
||||
</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm pl-14">กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Content Area (Scrollable) -->
|
||||
<div class="grow overflow-y-auto px-6 pb-6 pt-6">
|
||||
<div class="grow overflow-y-auto px-6 pb-6">
|
||||
|
||||
@if ( mode == 'default') {
|
||||
<!-- รายการโครงการ (Smart Component ย่อย หรือ Dumb Component ก็ได้) -->
|
||||
<app-main-project></app-main-project>
|
||||
|
||||
} @else if ( mode == 'add') {
|
||||
<!-- หน้าเพิ่มโครงการ (Dumb Component) -->
|
||||
<!-- เชื่อม Event save/cancel กลับมาที่ Parent -->
|
||||
<app-main-project-add
|
||||
(save)="onSaveProject($event)"
|
||||
(cancel)="onCancelProject()">
|
||||
</app-main-project-add>
|
||||
<app-main-project-add
|
||||
(save)="onSaveProject($event)"
|
||||
(cancel)="onCancelProject()">
|
||||
</app-main-project-add>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -67,6 +67,6 @@ export class MainProjectContent implements OnInit {
|
||||
|
||||
// รับ Event (cancel) จากลูก
|
||||
onCancelProject(): void {
|
||||
this.router.navigate(['/main/project']);
|
||||
this.router.navigate(['/main/project']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
.main-container {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
/* เพิ่ม transition ให้ความกว้าง sidebar */
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,62 @@
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar (เฉพาะ main) -->
|
||||
<app-sidebar></app-sidebar>
|
||||
<app-token-timer></app-token-timer>
|
||||
<div class="flex h-screen bg-gray-100 overflow-hidden relative">
|
||||
|
||||
<!-- Mobile Sidebar Backdrop (Overlay) -->
|
||||
<!-- แสดงเฉพาะเมื่อเปิด Sidebar บนมือถือ -->
|
||||
<div *ngIf="!isSidebarCollapsed"
|
||||
class="fixed inset-0 bg-black/50 z-30 md:hidden transition-opacity duration-300"
|
||||
(click)="toggleSidebar()">
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Area -->
|
||||
<!--
|
||||
Mobile: fixed, z-40, transition transform เพื่อให้เลื่อนเข้า-ออกได้
|
||||
Desktop: static, hidden md:block เหมือนเดิม แต่ปรับ logic การซ่อน
|
||||
-->
|
||||
<div [ngClass]="{
|
||||
'translate-x-0': !isSidebarCollapsed,
|
||||
'-translate-x-full': isSidebarCollapsed,
|
||||
'w-64': true
|
||||
}"
|
||||
class="fixed inset-y-0 left-0 z-40 bg-white transition-transform duration-300 ease-in-out md:translate-x-0 md:static md:shrink-0"
|
||||
[class.md:w-20]="isSidebarCollapsed"
|
||||
[class.md:w-64]="!isSidebarCollapsed">
|
||||
|
||||
<!-- ส่งค่า isCollapsed ให้ลูก (บนมือถือถ้าเปิดคือไม่ Collapsed, บน Desktop ตาม State) -->
|
||||
<app-sidebar [isCollapsed]="isSidebarCollapsed"></app-sidebar>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col h-screen overflow-hidden relative w-full transition-all duration-300">
|
||||
|
||||
<!-- Global Navbar / Top Bar -->
|
||||
<header class="bg-white shadow-sm h-16 flex items-center px-4 justify-between z-20 shrink-0 border-b border-gray-200">
|
||||
<div class="flex items-center gap-4">
|
||||
|
||||
<!-- Toggle Button -->
|
||||
<button (click)="toggleSidebar()"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 text-gray-600 focus:outline-none transition-colors">
|
||||
<i class="fas" [ngClass]="isSidebarCollapsed ? 'fa-indent' : 'fa-outdent'"></i>
|
||||
</button>
|
||||
|
||||
<!-- เพิ่ม Logo ตรงนี้แทน -->
|
||||
<div class="flex items-center gap-2 border-l border-gray-200 pl-4">
|
||||
<img src="logo.png" alt="Logo" class="w-8 h-8 object-contain">
|
||||
<span class="text-xl font-bold text-gray-800 tracking-tight">Trang Technical Collage</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Side Navbar Items -->
|
||||
<div class="flex items-center gap-3">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Router Outlet Container -->
|
||||
<main class="flex-1 overflow-hidden relative bg-gray-50">
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 overflow-y-auto bg-gray-50 text-gray-900">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar-content',
|
||||
standalone: false,
|
||||
templateUrl: './sidebar-content.component.html',
|
||||
styleUrl: './sidebar-content.component.css'
|
||||
styleUrls: ['./sidebar-content.component.css']
|
||||
})
|
||||
export class SidebarContentComponent {
|
||||
export class SidebarContentComponent implements OnInit {
|
||||
isSidebarCollapsed = false;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
toggleSidebar() {
|
||||
this.isSidebarCollapsed = !this.isSidebarCollapsed;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user