From 466c6ea8673d03843024231f9f48b9ae6ac05c7c Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Fri, 30 Jun 2023 10:37:51 +0800
Subject: [PATCH] Scrollbar: change color

---
 src/assets/components.css                         |  5 ++---
 .../Discover/Conformance/ConformanceResults.vue   | 15 ++++++---------
 .../Discover/Conformance/ConformanceSidebar.vue   |  2 +-
 .../Conformance/ConformanceSidebar/ActList.vue    |  2 +-
 src/components/Discover/Conformance/MoreModal.vue | 13 +++++++++++++
 src/main.js                                       |  2 ++
 src/views/Discover/Conformance/index.vue          |  2 +-
 7 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Discover/Conformance/MoreModal.vue

diff --git a/src/assets/components.css b/src/assets/components.css
index b27d650..5a6b80f 100644
--- a/src/assets/components.css
+++ b/src/assets/components.css
@@ -43,12 +43,11 @@
   }
 
   .scrollbar::-webkit-scrollbar-thumb {
-    /* @apply  rounded-full */
-    @apply bg-primary rounded-full
+    @apply bg-neutral-300 rounded-full
   }
 
   .scrollbar::-webkit-scrollbar-thumb:hover {
-    @apply bg-primary
+    @apply bg-neutral-400
   }
 }
 
diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue
index 9dec08d..24487bd 100644
--- a/src/components/Discover/Conformance/ConformanceResults.vue
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -91,7 +91,7 @@
                 <td class="p-2 text-right truncate">{{ trace.count }}</td>
                 <td class="p-2 text-center">{{ trace.ratio }}%</td>
                 <td class="p-2 text-center">
-                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="issusModal = true">More</div>
                 </td>
               </tr>
             </tbody>
@@ -190,7 +190,7 @@
                 <td class="p-2 text-right truncate">{{ trace.count }}</td>
                 <td class="p-2 text-center">{{ trace.ratio }}%</td>
                 <td class="p-2 text-center">
-                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="issusModal = true">More</div>
                 </td>
               </tr>
             </tbody>
@@ -198,14 +198,17 @@
       </div>
     </div>
   </section>
+  <MoreModal :issusModal="issusModal"></MoreModal>
 </section>
 </template>
 <script>
 import iconNA from '@/components/icons/IconNA.vue';
+import MoreModal from './MoreModal.vue';
 
 export default {
   data() {
     return {
+      issusModal: false,
       traceList: [
         {
           id: 1,
@@ -241,6 +244,7 @@ export default {
   },
   components: {
     iconNA,
+    MoreModal,
   },
   methods: {
     /**
@@ -251,13 +255,6 @@ export default {
      progressWidth(value){
       return `width:${value}%;`
     },
-    /**
-     * switch case data
-     * @param {number} id
-     */
-    switchCaseData(id) {
-      console.log(id);
-    },
   }
 }
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index c0db16b..90bcf4c 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 " :class="isShowBar?'w-full':'w-[300px]'">
+<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0" :class="isShowBar?'w-full':'w-[300px]'">
   <!-- header -->
   <div class="bg-neutral-200 px-4">
     <p class="h2">Rule Settings</p>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
index 4e2f0a1..e5c6fbd 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
@@ -4,7 +4,7 @@
     <p class="h2 pl-2 border-b mb-3">Activity</p>
     <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
         <div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index">
-            <Checkbox v-model="actList" :inputId="index" name="actList" :value="act" />
+            <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" />
             <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}{{ index }}</label>
         </div>
     </div>
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
new file mode 100644
index 0000000..e2f6252
--- /dev/null
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -0,0 +1,13 @@
+<template>
+<Dialog :visible="issusModal" modal header="Header" :style="{ width: '50vw' }">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+</template>
+<script>
+export default {
+  props: ['issusModal'],
+}
+</script>
diff --git a/src/main.js b/src/main.js
index 1229f99..6ccc44a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -44,6 +44,7 @@ import Slider from 'primevue/slider';
 import Calendar from 'primevue/calendar';
 import Tooltip from 'primevue/tooltip';
 import Checkbox from 'primevue/checkbox';
+import Dialog from 'primevue/dialog';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -93,6 +94,7 @@ app.component('Chart', Chart);
 app.component('Slider', Slider);
 app.component('Calendar', Calendar);
 app.component('Checkbox', Checkbox);
+app.component('Dialog', Dialog);
 app.component('Draggable', draggable);  // 拖曳
 app.directive('tooltip', Tooltip);
 
diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue
index 506d990..f6f4051 100644
--- a/src/views/Discover/Conformance/index.vue
+++ b/src/views/Discover/Conformance/index.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="h-screen-main">
-    <!-- <StatusBar></StatusBar> -->
+    <StatusBar></StatusBar>
     <div class="h-full relative bg-neutral-50">
       <ConformanceSidebar></ConformanceSidebar>
       <ConformanceResults></ConformanceResults>