update UI (#7)

* update UI * remove comment * update snapshot --------- Co-authored-by: nusuke <[email protected]>
nusuke · Mar 31, 2024 · 8c2bfda · 8c2bfda
1 parent da0fa7d
commit 8c2bfda
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 81 deletions.
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -14,11 +14,7 @@ export const App: React.FC<P> = (props) => {
         typeof request.filteredJSON === "string" ||
         typeof request.filteredJSON === "number"
       ) {
-        setTargetJson(
-          JSON.parse(
-            JSON.stringify({ "jq result value =>": request.filteredJSON })
-          )
-        );
+        setTargetJson(JSON.parse(JSON.stringify({ "": request.filteredJSON })));
       } else {
         try {
           const json = JSON.parse(JSON.stringify(request.filteredJSON));

diff --git a/src/app/feature/jsonPreview/__test__/__snapshots__/jsonPreview.spec.tsx.snap b/src/app/feature/jsonPreview/__test__/__snapshots__/jsonPreview.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`jsonPreview snapshot json preview 1`] = `
-[
+<div
+  className="jsonPreview"
+>
   <div
     className="jsonMiddleWrapper"
   >
@@ -1073,9 +1075,9 @@ exports[`jsonPreview snapshot json preview 1`] = `
         </div>
       </span>
     </details>
-  </div>,
+  </div>
   <span>
     }
-  </span>,
-]
+  </span>
+</div>
 `;
diff --git a/src/app/feature/jsonPreview/jsonPreview.tsx b/src/app/feature/jsonPreview/jsonPreview.tsx
@@ -13,8 +13,8 @@ export const JsonPreview: React.FC<P> = (props: P) => {
   const surruondChar = getSurroundCharactor(props.targetJson);
 
   return (
-    <>
+    <div className="jsonPreview">
       {surroundParentheses(convertJSONToHTML(props.targetJson), surruondChar)}
-    </>
+    </div>
   );
 };
diff --git a/src/background.ts b/src/background.ts
@@ -41,17 +41,18 @@ chrome.runtime.onMessage.addListener(async (message: MessageType, sender) => {
         lastFocusedWindow: true,
       });
       if (!tab.id) return;
+
+      // 履歴保存
+      if (jqQuery) {
+        const histories = await getHistory();
+        await addHistory(jqQuery, histories);
+      }
+
       chrome.tabs.sendMessage(tab.id, {
         filteredJSON: res,
       });
     } catch (e) {
       logger.debug(e);
     }
-
-    // 履歴保存
-    if (!jqQuery) return;
-
-    const histories = await getHistory();
-    addHistory(jqQuery, histories);
   }
 });
diff --git a/src/lib/queryHistoryFromLocalStrage.ts b/src/lib/queryHistoryFromLocalStrage.ts
@@ -8,11 +8,11 @@ export const getHistory = async (): Promise<string[]> => {
     if (historyData && Array.isArray(historyData[historyKey])) {
       return historyData[historyKey] as string[];
     } else {
-      return [];
+      return ["."];
     }
   } catch (e) {
     logger.debug(e);
-    return [];
+    return ["."];
   }
 };
 

diff --git a/src/styles/json-preview.scss b/src/styles/json-preview.scss
@@ -16,6 +16,7 @@ select {
 // ##################### 変数 ###################
 
 $app-gray: rgb(70, 70, 70);
+$json-font-size: 0.85rem;
 
 // ##################### 変数 ↑ ###################
 body {
@@ -29,74 +30,79 @@ button:focus {
   border: solid 1px white;
 }
 
-.jsonKey {
-  color: lightsteelblue;
+.jsonPreview {
+  padding-top: 24px;
+  .jsonKey {
+    color: lightsteelblue;
 
-  &::after {
-    content: " : ";
-    color: white;
-  }
-}
-
-.jsonValue {
-  margin-left: 8px;
-  &::after {
-    content: ",\A";
-    white-space: pre;
-  }
-
-  &--number {
-    color: antiquewhite;
-  }
-  &--string {
-    color: lightgreen;
-    &::before,
     &::after {
-      content: '"';
+      content: " : ";
+      color: white;
     }
   }
-  &--url {
-    &::before,
+
+  .jsonValue {
+    margin-left: 8px;
     &::after {
-      content: '"';
-      color: $app-gray;
+      content: ",\A";
+      white-space: pre;
     }
-  }
-}
 
-.jsonRow {
-  display: flex;
-}
-
-.jsonObject {
-  &Detail {
-    padding-left: 8px;
+    &--number {
+      color: antiquewhite;
+    }
+    &--string {
+      color: lightgreen;
+      &::before,
+      &::after {
+        content: '"';
+      }
+    }
+    &--url {
+      &::before,
+      &::after {
+        content: '"';
+        color: $app-gray;
+      }
+    }
   }
 
-  &Summary {
-    color: $app-gray;
+  .jsonRow {
+    display: flex;
   }
-}
 
-.jsonMiddle {
-  &Key {
-    @extend .jsonKey;
-  }
-  &Value {
-    padding-left: 8px;
+  .jsonObject {
+    &Detail {
+      padding-left: 8px;
+    }
+
+    &Summary {
+      color: $app-gray;
+      width: 40px;
+    }
   }
 
-  &Wrapper {
-    display: flex;
-    position: relative;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 30px; /* 上端のオフセット */
-      left: 2px;
-      height: calc(100% - 30px);
-      width: 1px;
-      border-left: dotted 0.5px $app-gray;
+  .jsonMiddle {
+    &Key {
+      @extend .jsonKey;
+    }
+    &Value {
+      padding-left: 8px;
+    }
+
+    &Wrapper {
+      display: flex;
+      position: relative;
+      font-size: $json-font-size;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 30px; /* 上端のオフセット */
+        left: 2px;
+        height: calc(100% - 30px);
+        width: 1px;
+        border-left: dotted 0.5px $app-gray;
+      }
     }
   }
 }
@@ -105,36 +111,39 @@ button:focus {
 .queryInput {
   width: 100%;
   max-width: 800px;
-  min-height: 64px;
   display: flex;
+  position: fixed;
+  top: 4px;
+  z-index: 900;
   flex-direction: column;
   align-items: center;
   justify-content: start;
   &SearchBox {
     display: flex;
-    justify-content: space-around;
+    justify-content: start;
     width: 100%;
 
     &InputWrapper {
       width: 85%;
       background: white;
       border-radius: 8px;
-      padding: 8px 16px;
       color: black;
       position: relative;
     }
   }
 
   &Input {
     width: 100%;
+    min-height: 24px;
+    padding-left: 8px;
   }
 
   &ShareButton {
     background: rgb(150, 150, 239);
     border-radius: 4px;
     color: white;
     margin-left: 8px;
-    padding: 8px 16px;
+    padding: 4px 8px;
   }
   &HistoryButton {
     position: absolute;
@@ -143,7 +152,6 @@ button:focus {
     transform: translateY(-50%);
     background-color: rgba($app-gray, 0.7);
     color: white;
-    height: 80%;
     padding: 4px 8px;
     border-radius: 4px;
   }
@@ -154,9 +162,9 @@ button:focus {
     margin: 0 16px 0px;
     padding: 8px 16px 8px;
     max-height: 20vh;
-    width: 60%;
+    width: 75%;
     border-radius: 0 0 8px 8px;
-    background-color: rgba(244, 241, 241, 0.5);
+    background-color: rgba(42, 41, 41, 0.8);
     list-style: none;
 
     &Button {