Merge pull request #345 from laradumps/improve-colors

Improve colors filters

package.json

@@ -1,6 +1,6 @@
 {
     "name": "laradumps",
-    "version": "3.5.0",
+    "version": "3.6.0",
     "private": false,
     "description": "LaraDumps a friendly app designed to boost your PHP coding and debugging experience. https://github.com/laradumps/app",
     "author": "Luan Freitas <[email protected]>",

src/renderer/components/DumpItem.vue

@@ -113,6 +113,29 @@ const isDuplicated = (sql) => {
     return duplicatesStore.duplicatesInfo.some((info) => info.request_id === timeStore.selected && info.sql === sql && info.has_duplicated);
 };
 
+const badgeClasses = computed(() => {
+    const { label, color } = props.payload;
+
+    const baseClass =
+        "badge font-medium text-xs text-neutral-content bg-neutral border border-neutral-content/20 shadow-lg rounded-box w-auto";
+
+    const dynamicClass = {
+        '!bg-error !text-error-content': ['error', 'emergency'].includes(label) || color === 'red',
+        '!bg-info !text-info-content': label === 'info' || color === 'blue',
+        '!bg-warning !text-warning-content': label === 'warning' || color === 'orange',
+        '!bg-gray-400! text-warning-content': label === 'debug',
+        '!bg-success !text-success-content': color === 'green',
+        '!bg-black': color === 'black',
+    };
+
+    const additionalClasses = Object.entries(dynamicClass)
+        .filter(([_, condition]) => condition)
+        .map(([className]) => className)
+        .join(' ');
+
+    return `${baseClass} ${additionalClasses}`;
+});
+
 watch(collapseStore, (value) => {
     open.value = value.open;
 });
@@ -180,8 +203,7 @@ watch(collapseStore, (value) => {
 
                         <div
                             v-if="props.payload.type !== `queries`"
-                            class="badge text-xs text-neutral-content bg-neutral border border-neutral-content/20 shadow-lg rounded-box w-auto"
-                        >
+                            :class="badgeClasses">
                             {{ props.payload.label ?? props.payload.type }}
                         </div>
 

src/renderer/components/HeaderColorsFilter.vue

@@ -17,33 +17,33 @@ defineProps({
 });
 
 const isDark = computed(() => ({
-    "bg-black": selectedColors.colors.includes("black")
+    "!bg-black": selectedColors.colors.includes("black")
 }));
 
 const isRed = computed(() => ({
-    "bg-error": selectedColors.colors.includes("red")
+    "!bg-error": selectedColors.colors.includes("red")
 }));
 
 const isGray = computed(() => ({
-    "bg-gray-500": selectedColors.colors.includes("gray")
+    "!bg-gray-600": selectedColors.colors.includes("gray")
 }));
 
 const isBlue = computed(() => ({
-    "bg-info": selectedColors.colors.includes("blue")
+    "!bg-info": selectedColors.colors.includes("blue")
 }));
 
 const isGreen = computed(() => ({
-    "bg-success": selectedColors.colors.includes("green")
+    "!bg-success": selectedColors.colors.includes("green")
 }));
 
 const isOrange = computed(() => ({
-    "bg-warning": selectedColors.colors.includes("orange")
+    "!bg-warning": selectedColors.colors.includes("orange")
 }));
 </script>
 
 <template>
     <div
-        class="space-x-2 flex justify-end items-center"
+        class="space-x-2 flex justify-end items-center border-r border-base-content/50 pr-5 mr-5"
         v-if="screenStore.screen !== 'Queries' && hasColor"
     >
         <div class="h-full flex gap-3 px-2">
@@ -52,43 +52,43 @@ const isOrange = computed(() => ({
                 @click="selectedColors.add('black')"
                 value="black"
                 type="button"
-                class="badge badge-xs border-black"
+                class="p-1.5 badge badge-xs bg-black/50 hover:bg-black"
             ></button>
 
             <button
                 :class="isRed"
                 @click="selectedColors.add('red')"
                 value="red"
                 type="button"
-                class="badge badge-xs border-error"
+                class="p-1.5 badge badge-xs bg-error/50 hover:bg-error"
             ></button>
 
             <button
                 :class="isOrange"
                 @click="selectedColors.add('orange')"
                 type="button"
-                class="badge badge-xs border-warning"
+                class="p-1.5 badge badge-xs bg-warning/50  hover:bg-warning"
             ></button>
 
             <button
                 :class="isBlue"
                 @click="selectedColors.add('blue')"
                 type="button"
-                class="badge badge-xs border-info"
+                class="p-1.5 badge badge-xs bg-info/50 hover:bg-info"
             ></button>
 
             <button
                 :class="isGreen"
                 @click="selectedColors.add('green')"
                 type="button"
-                class="badge badge-xs border-success"
+                class="p-1.5 badge badge-xs bg-success/50 hover:bg-success"
             ></button>
 
             <button
                 :class="isGray"
                 @click="selectedColors.add('gray')"
                 type="button"
-                class="badge badge-xs border-gray-400"
+                class="p-1.5 badge badge-xs bg-gray-500/50 hover:bg-gray-500"
             ></button>
         </div>
     </div>

src/renderer/types/Payload.ts

@@ -31,10 +31,6 @@ export interface TimeTrackPayload {
     elapsed_time?: string;
 }
 
-export interface LabelPayload {
-    label: string;
-}
-
 export interface TableV2Payload {
     values: string[];
     headerStyle: string[];
@@ -123,9 +119,9 @@ export interface Payload {
     time_track?: TimeTrackPayload;
     html?: string;
     mail: MailPayload;
-    label?: LabelPayload;
+    label?: string;
     table_v2?: TableV2Payload;
-    color?: ColorPayload;
+    color?: string;
     json?: JSONPayload;
     contains?: ContainsPayload;
     validate?: ValidatePayload;