refactor: remove absolute classes

2021-08-17 12:56:36 +05:30
parent 3534e133af
commit 956ca44ef0
55 changed files with 269 additions and 404 deletions
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -25,14 +25,12 @@
          arrow
        >
          <template #trigger>
-            <div class="flex">
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  class="rounded-none ml-2 pr-8"
-                  :label="authName"
-                />
-              </span>
-            </div>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                class="rounded-none ml-2 pr-8"
+                :label="authName"
+              />
+            </span>
          </template>
          <SmartItem
            label="None"
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -22,14 +22,12 @@
          arrow
        >
          <template #trigger>
-            <div class="flex">
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  :label="contentType"
-                  class="rounded-none ml-2 pr-8"
-                />
-              </span>
-            </div>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="contentType"
+                class="rounded-none ml-2 pr-8"
+              />
+            </span>
          </template>
          <SmartItem
            v-for="(contentTypeItem, index) in validContentTypes"
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -53,7 +53,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateBodyParam(index, {
@@ -66,14 +65,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.parameter', { count: index + 1 })"
        :name="'param' + index"
        :value="param.key"
@@ -109,7 +101,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
          @change="
            updateBodyParam(index, {
@@ -122,14 +113,7 @@
        />
        <input
          v-else
-          class="
-            bg-primaryLight
-            flex flex-1
-            py-2
-            px-4
-            truncate
-            focus:outline-none
-          "
+          class="bg-primaryLight flex flex-1 py-2 px-4"
          :placeholder="$t('count.value', { count: index + 1 })"
          :name="'value' + index"
          :value="param.value"
@@ -173,9 +157,9 @@
          :icon="
            param.hasOwnProperty('active')
              ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
          "
          color="green"
          @click.native="
@@ -192,7 +176,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          @click.native="deleteBodyParam(index)"
        />
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -56,7 +56,6 @@
          py-1
          px-4
          truncate
-          focus:outline-none
        "
        :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
        @input="
@@ -77,7 +76,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateHeader(index, {
@@ -89,14 +87,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.value', { count: index + 1 })"
        :name="'value' + index"
        :value="header.value"
@@ -121,9 +112,9 @@
          :icon="
            header.hasOwnProperty('active')
              ? header.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
          "
          color="green"
          @click.native="
@@ -139,7 +130,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          @click.native="deleteHeader(index)"
        />
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -53,7 +53,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateParam(index, {
@@ -65,14 +64,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.parameter', { count: index + 1 })"
        :name="'param' + index"
        :value="param.key"
@@ -95,7 +87,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateParam(index, {
@@ -107,14 +98,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.value', { count: index + 1 })"
        :name="'value' + index"
        :value="param.value"
@@ -139,9 +123,9 @@
          :icon="
            param.hasOwnProperty('active')
              ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
          "
          color="green"
          @click.native="
@@ -157,7 +141,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          @click.native="deleteParam(index)"
        />
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -16,13 +16,21 @@
      <label class="font-semibold text-secondaryLight">
        {{ $t("javascript_code") }}
      </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
-        blank
-        :title="$t('wiki')"
-        icon="help_outline"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+      </div>
    </div>
    <div class="border-b border-dividerLight flex">
      <div class="border-r border-dividerLight w-2/3">
@@ -63,10 +71,11 @@
          {{ $t("preRequest.snippets") }}
        </h4>
        <div class="flex flex-col pt-4">
-          <SmartItem
+          <TabSecondary
            v-for="(snippet, index) in snippets"
            :key="`snippet-${index}`"
            :label="snippet.name"
+            active
            @click.native="useSnippet(snippet.script)"
          />
        </div>
@@ -82,19 +91,22 @@ import preRequestScriptSnippets from "~/helpers/preRequestScriptSnippets"

 export default defineComponent({
  setup() {
-    return {
-      preRequestScript: usePreRequestScript(),
+    const preRequestScript = usePreRequestScript()
+
+    const useSnippet = (script: string) => {
+      preRequestScript.value += script
    }
-  },
-  data() {
+
+    const clearContent = () => {
+      preRequestScript.value = ""
+    }
+
    return {
+      preRequestScript,
      snippets: preRequestScriptSnippets,
+      useSnippet,
+      clearContent,
    }
  },
-  methods: {
-    useSnippet(script: string) {
-      this.preRequestScript += script
-    },
-  },
 })
 </script>
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="bg-primary flex p-4 top-0 z-10 sticky">
    <div class="relative inline-flex">
-      <span class="select-wrapper">
-        <tippy
-          ref="methodOptions"
-          interactive
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
+      <tippy
+        ref="methodOptions"
+        interactive
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <span class="select-wrapper">
            <input
              id="method"
              class="
@@ -22,25 +22,23 @@
                text-secondaryDark
                py-2
                px-4
-                transition
                w-28
-                truncate
                hover:border-dividerDark
-                focus:border-accent focus:outline-none
+                focus-visible:border-accent
              "
              :value="newMethod"
              :readonly="!isCustomMethod"
              @input="onSelectMethod($event.target.value)"
            />
-          </template>
-          <SmartItem
-            v-for="(method, index) in methods"
-            :key="`method-${index}`"
-            :label="method"
-            @click.native="onSelectMethod(method)"
-          />
-        </tippy>
-      </span>
+          </span>
+        </template>
+        <SmartItem
+          v-for="(method, index) in methods"
+          :key="`method-${index}`"
+          :label="method"
+          @click.native="onSelectMethod(method)"
+        />
+      </tippy>
    </div>
    <div class="flex-1 inline-flex">
      <SmartEnvInput
@@ -55,10 +53,8 @@
          text-secondaryDark
          py-1
          px-4
-          transition
-          truncate
          hover:border-dividerDark
-          focus:outline-none focus:border-accent
+          focus-visible:border-accent
        "
        @enter="newSendRequest()"
      />
@@ -74,9 +70,7 @@
          text-secondaryDark
          py-2
          px-4
-          transition
-          truncate
-          focus:border-accent focus:outline-none
+          focus-visible:border-accent
        "
        name="url"
        type="text"
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -16,13 +16,21 @@
      <label class="font-semibold text-secondaryLight">
        {{ $t("javascript_code") }}
      </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-        blank
-        :title="$t('wiki')"
-        icon="help_outline"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+      </div>
    </div>
    <div class="border-b border-dividerLight flex">
      <div class="border-r border-dividerLight w-2/3">
@@ -63,10 +71,11 @@
          {{ $t("test.snippets") }}
        </h4>
        <div class="flex flex-col pt-4">
-          <SmartItem
+          <TabSecondary
            v-for="(snippet, index) in snippets"
            :key="`snippet-${index}`"
            :label="snippet.name"
+            active
            @click.native="useSnippet(snippet.script)"
          />
        </div>
@@ -82,19 +91,22 @@ import testSnippets from "~/helpers/testSnippets"

 export default defineComponent({
  setup() {
-    return {
-      testScript: useTestScript(),
+    const testScript = useTestScript()
+
+    const useSnippet = (script: string) => {
+      testScript.value += script
    }
-  },
-  data() {
+
+    const clearContent = () => {
+      testScript.value = ""
+    }
+
    return {
+      testScript,
      snippets: testSnippets,
+      useSnippet,
+      clearContent,
    }
  },
-  methods: {
-    useSnippet(script: string) {
-      this.testScript += script
-    },
-  },
 })
 </script>
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -42,7 +42,7 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              @click.native="removeOAuthToken(index)"
            />