refactor: minoe fixes and improvements

2021-08-14 23:46:03 +05:30
parent 29305a8e1e
commit bb6d9a88ec
20 changed files with 68 additions and 37 deletions
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -152,6 +152,7 @@ a {
 [interactive] > div {
  @apply flex;
  @apply flex-1;
+  @apply h-full;
 }

 .tippy-content > div {
@@ -338,23 +339,6 @@ input[type="checkbox"] {
  @apply text-secondaryLight;
 }

-#response-details-wrapper {
-  @apply relative;
-
-  textarea {
-    @apply m-0;
-    @apply w-full;
-  }
-
-  .covers-response {
-    @apply absolute;
-    @apply inset-0;
-    @apply bg-white;
-    @apply h-full;
-    @apply w-full;
-  }
-}
-
 .toasted-container {
  .toasted {
    &.toasted-primary {
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -73,7 +73,6 @@
      v-if="collections.length === 0"
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
-      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
      <span class="text-center pb-4">
        {{ $t("empty.collections") }}
      </span>
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -80,7 +80,6 @@
      v-if="environments.length === 0"
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
-      <i class="opacity-75 pb-2 material-icons">library_add</i>
      <span class="text-center pb-4">
        {{ $t("empty.environments") }}
      </span>
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -62,6 +62,7 @@
              showPrintMargin: false,
              useWorker: false,
            }"
+            styles="border-b border-dividerLight"
            @update-query="updateQuery"
          />
        </AppSection>
@@ -105,6 +106,7 @@
              showPrintMargin: false,
              useWorker: false,
            }"
+            styles="border-b border-dividerLight"
          />
        </AppSection>
      </SmartTab>
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -47,6 +47,7 @@
        showPrintMargin: false,
        useWorker: false,
      }"
+      styles="border-b border-dividerLight"
    />
    <div
      v-else
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -196,6 +196,7 @@
              showPrintMargin: false,
              useWorker: false,
            }"
+            styles="border-b border-dividerLight"
          />
          <div
            v-else
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -57,7 +57,7 @@
            showPrintMargin: false,
            useWorker: false,
          }"
-          styles="rounded"
+          styles="border rounded border-dividerLight"
        />
      </div>
    </template>
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -66,6 +66,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="border-b border-dividerLight"
      />
    </div>
  </div>
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -42,7 +42,7 @@
        />
      </div>
    </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
      <SmartAceEditor
        :value="responseBodyText"
        :lang="'html'"
@@ -54,6 +54,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="border-b border-dividerLight"
      />
      <iframe
        ref="previewFrame"
@@ -135,3 +136,15 @@ export default {
  },
 }
 </script>
+
+<style lang="scss" scoped>
+.covers-response {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-primary;
+  @apply h-full;
+  @apply w-full;
+  @apply border;
+  @apply border-dividerLight;
+}
+</style>
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -27,8 +27,11 @@
        />
      </div>
    </div>
-    <div id="response-details-wrapper">
-      <img class="max-w-full" :src="imageSource" />
+    <div class="flex relative">
+      <img
+        class="border-b border-dividerLight flex max-w-full flex-1"
+        :src="imageSource"
+      />
    </div>
  </div>
 </template>
@@ -46,7 +49,11 @@ export default {
  },
  computed: {
    responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
        .split(";")[0]
        .toLowerCase()
    },
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -35,7 +35,7 @@
        />
      </div>
    </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
      <SmartAceEditor
        :value="jsonBodyText"
        :lang="'json'"
@@ -48,6 +48,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="border-b border-dividerLight"
      />
    </div>
  </div>
@@ -78,7 +79,11 @@ export default {
      }
    },
    responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
        .split(";")[0]
        .toLowerCase()
    },
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -35,7 +35,7 @@
        />
      </div>
    </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
      <SmartAceEditor
        :value="responseBodyText"
        :lang="'plain_text'"
@@ -47,6 +47,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="border-b border-dividerLight"
      />
    </div>
  </div>
@@ -69,13 +70,18 @@ export default {
  },
  computed: {
    responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
        .split(";")[0]
        .toLowerCase()
    },
  },
  methods: {
    downloadResponse() {
+      console.log(this.responseType)
      const dataToWrite = this.responseBodyText
      const file = new Blob([dataToWrite], { type: this.responseType })
      const a = document.createElement("a")
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -35,7 +35,7 @@
        />
      </div>
    </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
      <SmartAceEditor
        :value="responseBodyText"
        :lang="'xml'"
@@ -47,6 +47,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="border-b border-dividerLight"
      />
    </div>
  </div>
@@ -69,7 +70,11 @@ export default {
  },
  computed: {
    responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
        .split(";")[0]
        .toLowerCase()
    },
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -186,6 +186,7 @@ export default {

 <style scoped lang="scss">
 .autocomplete-wrapper {
+  @apply relative;
  @apply contents;

  input:focus + ul.suggestions,
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -1,7 +1,7 @@
 <template>
  <span class="chip">
    <i class="opacity-75 material-icons">attachment</i>
-    <span class="px-2"><slot></slot></span>
+    <span class="max-w-64 px-2 truncate"><slot></slot></span>
    <ButtonSecondary
      class="rounded close-button"
      icon="close"
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -57,10 +57,10 @@
    </span>
    <SmartSpinner v-else class="mr-4" />
    <div
-      class="flex-1 inline-flex items-start"
+      class="flex-1 inline-flex truncate items-start"
      :class="{ 'flex-col': description }"
    >
-      <div>
+      <div class="truncate">
        {{ label }}
      </div>
      <p v-if="description" class="my-2 text-left text-secondaryLight">
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -19,7 +19,7 @@
                <AppHeader />
              </Pane>
              <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
-                <main class="flex flex-1">
+                <main class="flex flex-1 w-full">
                  <nuxt class="flex flex-1" />
                </main>
              </Pane>
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -587,7 +587,10 @@ export const restParams$ = restSessionStore.subject$.pipe(
 )

 export const restActiveParamsCount$ = restParams$.pipe(
-  map((params) => params.filter((x) => x.active).length)
+  map(
+    (params) =>
+      params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
+  )
 )

 export const restMethod$ = restSessionStore.subject$.pipe(
@@ -601,7 +604,10 @@ export const restHeaders$ = restSessionStore.subject$.pipe(
 )

 export const restActiveHeadersCount$ = restHeaders$.pipe(
-  map((params) => params.filter((x) => x.active).length)
+  map(
+    (params) =>
+      params.filter((x) => x.active && (x.key !== "" || x.value !== "")).length
+  )
 )

 export const restAuth$ = restRequest$.pipe(pluck("auth"))
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -72,6 +72,7 @@
            <div
              class="
                bg-primary
+                border-t border-b border-dividerLight
                flex
                p-4
                bottom-0
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,7 +14,7 @@
              <HttpParameters />
            </SmartTab>

-            <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
+            <SmartTab :id="'bodyParams'" :label="$t('body')">
              <HttpBody />
            </SmartTab>