From 736a581a61b68a783a91fae9c0f80cd3ae1aea87 Mon Sep 17 00:00:00 2001
From: Kritkhanin Anantakul <65160144@go.buu.ac.th>
Date: Sun, 23 Mar 2025 20:45:40 +0700
Subject: [PATCH] fix color and add animation
---
src/App.vue | 3 ---
src/components/GanttChart/GanttChart.vue | 4 ++--
src/components/GanttChart/SettingBtn.vue | 5 +++--
src/components/GanttChart/ganttChart.css | 11 +++++++++++
4 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index c328c79..43c739a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,13 +14,10 @@ provide('drawer', drawer)
</script>
<template>
<v-container fluid style="background-color: #7E9CD3; min-height: 100vh;">
- <!-- <FullLayout v-if="route.meta.layout === 'FullLayout'"></FullLayout>
- <MainLayout v-if="route.meta.layout === 'MainLayout'"></MainLayout> -->
<component :is="route.meta.layout === 'MainLayout' ? MainLayout : FullLayout"></component>
<LoadingDialog></LoadingDialog>
<LoginMessage />
</v-container>
-
</template>
<style scoped></style>
diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index be1272a..d30c1c8 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -81,7 +81,7 @@
<!-- Pagination -->
<div class="pagination-container">
- <div class="pagination">
+ <transition-group name="fade" tag="div" class="pagination">
<button
v-for="p in pages"
:key="p"
@@ -101,7 +101,7 @@
<button class="page-btn add-page" @click="addPage" :disabled="pages.length >= 10">
+
</button>
- </div>
+ </transition-group>
<div class="pagination-right">
<v-btn class="add-page-btn" @click="openAddQueueDialog" icon>
<v-icon>mdi-plus</v-icon>
diff --git a/src/components/GanttChart/SettingBtn.vue b/src/components/GanttChart/SettingBtn.vue
index 238cb47..3d3c132 100644
--- a/src/components/GanttChart/SettingBtn.vue
+++ b/src/components/GanttChart/SettingBtn.vue
@@ -7,13 +7,14 @@
</v-btn>
</template>
- <v-list>
+ <v-list style="background-color: #4F5473">
<v-list-item
+ style="background-color: #4F5473"
v-for="(item, index) in items"
:key="index"
@click="handleMenuClick(index)"
>
- <v-list-item-title>{{ item.title }}</v-list-item-title>
+ <v-list-item-title style="color: white">{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
diff --git a/src/components/GanttChart/ganttChart.css b/src/components/GanttChart/ganttChart.css
index 0175699..3206452 100644
--- a/src/components/GanttChart/ganttChart.css
+++ b/src/components/GanttChart/ganttChart.css
@@ -183,6 +183,17 @@
position: relative;
}
+.fade-enter-active,
+.fade-leave-active {
+ transition: all 0.4s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+ opacity: 0;
+ transform: scale(0.8);
+}
+
.page-btn.active {
background: #007bff;
border-radius: 6px;
--
GitLab