From 9c1b96750247b328daa0c26405d0dab9b93630e7 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 26 Mar 2024 08:46:05 -0700
Subject: [PATCH] feat: improves icons placement for expanding json (#2854)

---
 assets/components.d.ts                        |  2 ++
 .../components/LogViewer/ComplexLogItem.vue   | 25 ++++++++-----------
 assets/components/LogViewer/FieldList.vue     | 12 ++++-----
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 10 +++++++-
 5 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index cfa3d402..f41a378f 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -52,6 +52,8 @@ declare module 'vue' {
     LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
+    'MaterialSymbols:collapseAllRounded': typeof import('~icons/material-symbols/collapse-all-rounded')['default']
+    'MaterialSymbols:expandAllRounded': typeof import('~icons/material-symbols/expand-all-rounded')['default']
     'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
     'Mdi:check': typeof import('~icons/mdi/check')['default']
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 00bf5951..16412870 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="relative flex w-full gap-x-2">
+  <div class="group/item relative flex w-full gap-x-2" @click="expandToggle()">
+    <label class="swap swap-rotate invisible absolute -left-4 top-0.5 size-4 group-hover/item:visible">
+      <input type="checkbox" v-model="expanded" @click="expandToggle()" />
+      <material-symbols:expand-all-rounded class="swap-off text-secondary" />
+      <material-symbols:collapse-all-rounded class="swap-on text-secondary" />
+    </label>
     <div v-if="showStd">
       <log-std :std="logEntry.std"></log-std>
     </div>
@@ -10,8 +15,8 @@
       <log-level :level="logEntry.level"></log-level>
     </div>
     <div>
-      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }" @click="expandToggle()">
-        <li v-for="(value, name) in validValues" class="inline-block">
+      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }">
+        <li v-for="(value, name) in validValues">
           <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
           <template v-else-if="Array.isArray(value)">
             <span class="font-bold" v-html="markSearch(JSON.stringify(value))"> </span>
@@ -52,18 +57,8 @@ const validValues = computed(() => {
 }
 
 .fields {
-  &:hover {
-    &::after {
-      content: "expand json";
-      @apply ml-2 inline-block text-secondary;
-      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    }
-  }
-
-  &.expanded:hover {
-    &::after {
-      content: "collapse json";
-    }
+  li {
+    @apply inline-flex;
   }
 }
 </style>
diff --git a/assets/components/LogViewer/FieldList.vue b/assets/components/LogViewer/FieldList.vue
index 0cff6f10..b729b587 100644
--- a/assets/components/LogViewer/FieldList.vue
+++ b/assets/components/LogViewer/FieldList.vue
@@ -11,9 +11,9 @@
         ></field-list>
       </template>
       <template v-else-if="Array.isArray(value)">
-        <a @click="toggleField(name)" class="link-primary cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
-        >
+        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}
+        </a>
         <span class="text-light">{{ name }}=</span>[
         <span class="font-bold" v-for="(item, index) in value">
           <span v-html="JSON.stringify(item)"></span><span v-if="index !== value.length - 1">,</span>
@@ -21,9 +21,9 @@
         ]
       </template>
       <template v-else>
-        <a @click="toggleField(name)" class="link-primary cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
-        >
+        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}
+        </a>
         <span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
       </template>
     </li>
diff --git a/package.json b/package.json
index 82c6689a..8de4dc1f 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
   "vue-router": "^4.3.0"
  },
  "devDependencies": {
+  "@iconify-json/material-symbols": "^1.1.74",
   "@pinia/testing": "^0.1.3",
   "@playwright/test": "^1.42.1",
   "@types/d3-array": "^3.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5844d58a..3ab848bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,6 +136,9 @@ dependencies:
     version: 4.3.0(vue@3.4.21)
 
 devDependencies:
+  '@iconify-json/material-symbols':
+    specifier: ^1.1.74
+    version: 1.1.74
   '@pinia/testing':
     specifier: ^0.1.3
     version: 0.1.3(pinia@2.1.7)(vue@3.4.21)
@@ -665,6 +668,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: false
 
+  /@iconify-json/material-symbols@1.1.74:
+    resolution: {integrity: sha512-cuQKvpGWrMNJq0i3ynO+V6yus0Smiupw92GW8Gq/4MHfYfbl1MrbVmafKQAd8RJVqiEXq4/F084OEcigf77UqQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/mdi-light@1.1.10:
     resolution: {integrity: sha512-zs1/O6JV/IK0sTMgrc8EgeVvm9QzY4WgsIWc2c4IMgj3k9q79TXNDI6E6oDLVN3xU4B5THiM3Us3L7+dMUZqtg==}
     dependencies:
@@ -691,7 +700,6 @@ packages:
 
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-    dev: false
 
   /@iconify/utils@2.1.22:
     resolution: {integrity: sha512-6UHVzTVXmvO8uS6xFF+L/QTSpTzA/JZxtgU+KYGFyDYMEObZ1bu/b5l+zNJjHy+0leWjHI+C0pXlzGvv3oXZMA==}