From e499c5d061953b9a579df18e659f6cfe27ab8049 Mon Sep 17 00:00:00 2001 From: Atchara Bunserm <65160207@go.buu.ac.th> Date: Mon, 10 Mar 2025 21:50:07 +0700 Subject: [PATCH] Dialog Add queue design --- package-lock.json | 1 - src/components/GanttChart/AddQueueDialog.vue | 69 +++++++++++++------- 2 files changed, 47 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 518706d..e9d153d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2841,7 +2841,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", - "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/kossnocorp" diff --git a/src/components/GanttChart/AddQueueDialog.vue b/src/components/GanttChart/AddQueueDialog.vue index 92a78ec..2b32699 100644 --- a/src/components/GanttChart/AddQueueDialog.vue +++ b/src/components/GanttChart/AddQueueDialog.vue @@ -1,11 +1,11 @@ <template> <div class="add-queue-dialog-overlay" v-if="visible"> <div class="add-queue-dialog"> - <h3>{{ isEditing ? "Edit Queue" : "Add New Queue" }}</h3> + <h3 class="white-text">{{ isEditing ? "Edit Queue" : "Add New Queue" }}</h3> <form @submit.prevent="handleSubmit"> <div class="form-group"> - <label>Machine ID:</label> - <select v-model="form.machineID" required> + <label class="white-text">Machine ID:</label> + <select v-model="form.machineID" required class="selete-mec-color-text"> <option disabled value="">Select Machine</option> <option v-for="machine in machines" :key="machine.machineID" :value="machine.machineID"> {{ machine.name }} @@ -13,32 +13,32 @@ </select> </div> <div class="form-group"> - <label>Order ID:</label> - <input v-model.number="form.orderID" type="number" required /> + <label class="white-text">Order ID:</label> + <input class="border-input" v-model.number="form.orderID" type="number" required /> </div> <div class="form-group"> - <label>Page Number:</label> - <input v-model.number="form.pageNumber" type="number" required /> + <label class="white-text">Page Number:</label> + <input class="border-input" v-model.number="form.pageNumber" type="number" required /> </div> <div class="form-group"> - <label>Start Time:</label> - <input v-model="form.startTime" type="text" required /> + <label class="white-text">Start Time:</label> + <input class="border-input" v-model="form.startTime" type="text" required /> </div> <div class="form-group"> - <label>Finish Time:</label> - <input v-model="form.finishTime" type="text" required /> + <label class="white-text">Finish Time:</label> + <input class="border-input" v-model="form.finishTime" type="text" required /> </div> <div class="form-group"> - <label>Status:</label> - <input v-model="form.status" type="text" required /> + <label class="white-text">Status:</label> + <input class="border-input" v-model="form.status" type="text" required /> </div> <div class="form-group"> - <label>Bottle Size:</label> - <input v-model="form.bottleSize" type="text" required /> + <label class="white-text">Bottle Size:</label> + <input class="border-input" v-model="form.bottleSize" type="text" required /> </div> <div class="form-group"> - <label>Produced Quantity:</label> - <input v-model.number="form.producedQuantity" type="number" required /> + <label class="white-text">Produced Quantity:</label> + <input class="border-input" v-model.number="form.producedQuantity" type="number" required /> </div> <!-- ปุ่ม Add หรือ Save Changes --> @@ -140,10 +140,10 @@ export default { } .add-queue-dialog { - background: #fff; + background: #2B2E3F; padding: 20px; border-radius: 8px; - width: 400px; + width: 450px; position: relative; } @@ -171,7 +171,7 @@ export default { } .primary-btn { - background-color: #2B2E3F; + background-color: #49E060; color: white; border: none; padding: 8px 16px; @@ -180,8 +180,8 @@ export default { } .secondary-btn { - background-color: #ccc; - color: #333; + background-color: #F58181; + color: white; border: none; padding: 8px 16px; border-radius: 4px; @@ -201,4 +201,29 @@ export default { font-size: 24px; color: #2B2E3F; } + +.white-text { + color: white; + } + +.selete-mec-color-text { + color:rgb(0, 204, 255) +} + +.border-input { + background-color: white; + border: 1px solid #ccc; + border-radius: 4px; + padding: 8px 12px; + width: 100%; + color: #333; + font-size: 16px; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.border-input:focus { + outline: none; + border-color: #4299e1; + box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); +} </style> \ No newline at end of file -- GitLab