refactor(ui): minor stylings

components/http/Headers.vue

@@ -1,6 +1,17 @@
 <template>
   <AppSection label="headers">
-    <div class="flex flex-1 items-center justify-between pl-4">
+    <div
+      class="
+        sticky
+        top-110px
+        z-10
+        bg-primary
+        flex flex-1
+        items-center
+        justify-between
+        pl-4
+      "
+    >
       <label for="headerList" class="font-semibold text-xs">
         {{ $t("header_list") }}
       </label>

components/http/Parameters.vue

@@ -1,6 +1,17 @@
 <template>
   <AppSection label="parameters">
-    <div class="flex flex-1 items-center justify-between pl-4">
+    <div
+      class="
+        sticky
+        top-110px
+        z-10
+        bg-primary
+        flex flex-1
+        items-center
+        justify-between
+        pl-4
+      "
+    >
       <label for="paramList" class="font-semibold text-xs">
         {{ $t("parameter_list") }}
       </label>

components/http/ResponseMeta.vue

@@ -12,21 +12,23 @@
       space-x-8
     "
   >
-    <i v-if="response.type === 'loading'" class="animate-spin material-icons"
-      >refresh</i
-    >
-    <span v-else>
-      <span class="text-secondaryDark"> Status: </span>
-      {{ response.statusCode || $t("waiting_send_req") }}
-    </span>
-    <span class="text-xs">
-      <span class="text-secondaryDark"> Time: </span>
-      {{ `${response.meta.responseDuration} ms` }}
-    </span>
-    <span class="text-xs">
-      <span class="text-secondaryDark"> Size: </span>
-      {{ `${response.meta.responseSize} B` }}
-    </span>
+    <i v-if="response.type === 'loading'" class="animate-spin material-icons">
+      refresh
+    </i>
+    <div v-else :class="statusCategory.className">
+      <span v-if="response.statusCode">
+        <span class="text-secondaryDark"> Status: </span>
+        {{ response.statusCode || $t("waiting_send_req") }}
+      </span>
+      <span v-if="response.meta.responseDuration" class="text-xs">
+        <span class="text-secondaryDark"> Time: </span>
+        {{ `${response.meta.responseDuration} ms` }}
+      </span>
+      <span v-if="response.meta.responseSize" class="text-xs">
+        <span class="text-secondaryDark"> Size: </span>
+        {{ `${response.meta.responseSize} B` }}
+      </span>
+    </div>
   </div>
 </template>
 

components/lenses/ResponseBodyRenderer.vue

@@ -12,7 +12,8 @@
     <SmartTab
       v-if="Object.keys(response.headers).length !== 0"
       id="headers"
-      :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
+      :label="$t('Headers')"
+      :info="Object.keys(response.headers).length.toString()"
     >
       <LensesHeadersRenderer :headers="response.headers" />
     </SmartTab>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,7 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1 items-center justify-between">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+        border-b border-divider
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
         <ButtonSecondary
           v-if="response.body"

components/lenses/renderers/ImageLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/lenses/renderers/JSONLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/lenses/renderers/RawLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/lenses/renderers/XMLLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/smart/AceEditor.vue

@@ -1,31 +1,61 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <div v-if="lang == 'json'" class="outline hide-scrollbar">
-      <div v-for="(p, index) in currPath" :key="index" class="block">
-        <div class="label" @click="onBlockClick(index)">
+    <pre ref="editor" :class="styles"></pre>
+    <div
+      v-if="lang == 'json'"
+      class="
+        sticky
+        bottom-0
+        z-10
+        flex flex-nowrap flex-1
+        overflow-auto
+        font-mono
+        shadow-lg
+        px-4
+        bg-primaryLight
+        border-t border-divider
+        hide-scrollbar
+      "
+    >
+      <div
+        v-for="(p, index) in currPath"
+        :key="index"
+        class="
+          inline-flex
+          items-center
+          flex-grow-0 flex-shrink-0
+          text-secondaryLight
+          hover:text-secondary
+          cursor-pointer
+          font-semibold
+          text-xs
+        "
+      >
+        <span @click="onBlockClick(index)">
           {{ p }}
-        </div>
-        <i v-if="index + 1 !== currPath.length" class="material-icons"
-          >chevron_right</i
-        >
-        <div
+        </span>
+        <i v-if="index + 1 !== currPath.length" class="material-icons mx-2">
+          chevron_right
+        </i>
+        <tippy
           v-if="sibDropDownIndex == index"
-          :ref="`sibling-${index}`"
-          class="siblings"
-          @mouseleave="clearSibList"
+          ref="options"
+          interactive
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
         >
-          <div
+          <SmartItem
             v-for="(sib, i) in currSib"
             :key="i"
-            class="sib"
-            @click="goToSib(sib)"
-          >
-            {{ sib.key ? sib.key.value : i }}
-          </div>
-        </div>
+            class="font-mono"
+            :label="sib.key ? sib.key.value : i"
+            @click.native="goToSib(sib)"
+          />
+        </tippy>
       </div>
     </div>
-    <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
 
@@ -149,7 +179,6 @@ export default {
           this.currPath = path.res
         }
       })
-      document.addEventListener("touchstart", this.onTouchStart)
     }
 
     // Disable linting, if lint prop is false
@@ -158,7 +187,6 @@ export default {
 
   destroyed() {
     this.editor.destroy()
-    document.removeEventListener("touchstart", this.onTouchStart)
   },
 
   methods: {
@@ -195,6 +223,7 @@ export default {
         }
       }
     }, 2000),
+
     onBlockClick(index) {
       if (this.sibDropDownIndex === index) {
         this.clearSibList()
@@ -230,23 +259,12 @@ export default {
         }
       }
     }),
-    onTouchStart(e) {
-      if (
-        this.sibDropDownIndex !== null &&
-        e.target.parentElement !==
-          this.$refs[`sibling-${this.sibDropDownIndex}`][0]
-      ) {
-        this.clearSibList()
-      }
-    },
   },
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .show-if-initialized {
-  @apply opacity-0;
-
   &.initialized {
     @apply opacity-100;
   }
@@ -255,52 +273,4 @@ export default {
     @apply transition-none;
   }
 }
-
-.outline {
-  @apply flex flex-nowrap;
-  @apply flex-1;
-  @apply overflow-auto;
-  @apply font-mono;
-  @apply shadow-lg;
-  @apply px-4;
-
-  .block {
-    @apply inline-flex;
-    @apply items-center;
-    @apply flex-grow-0 flex-shrink-0;
-    @apply text-secondaryLight text-sm;
-
-    &:hover {
-      @apply text-secondary;
-      @apply cursor-pointer;
-    }
-
-    .label {
-      @apply p-2;
-    }
-
-    .siblings {
-      @apply absolute;
-      @apply z-50;
-      @apply top-9;
-      @apply bg-primary;
-      @apply max-h-60;
-      @apply overflow-auto;
-      @apply shadow-lg;
-      @apply text-secondaryLight;
-      @apply overscroll-none;
-
-      border-radius: 0 0 8px 8px;
-    }
-
-    .sib {
-      @apply px-4 py-1;
-
-      &:hover {
-        @apply text-secondary;
-        @apply bg-primaryLight;
-      }
-    }
-  }
-}
 </style>

components/smart/JsEditor.vue

@@ -262,10 +262,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .show-if-initialized {
-  @apply opacity-0;
-
   &.initialized {
     @apply opacity-100;
   }