refactor: minor ui improvements

2021-12-14 22:41:07 +05:30
parent 70555cd4a6
commit a2757a0335
58 changed files with 289 additions and 110 deletions
--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -14,7 +14,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
        {{ t("state.nothing_found") }} "{{ search }}"
      </span>
    </div>
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -14,8 +14,29 @@
        autocomplete="off"
        name="command"
        :placeholder="`${t('app.type_a_command_search')}`"
-        class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
+        class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
      />
+      <div
+        class="flex pb-4 px-4 border-b text-tiny border-dividerLight justify-between text-secondaryLight whitespace-nowrap overflow-auto flex-shrink-0 hide-scrollbar"
+      >
+        <div class="flex items-center">
+          <kbd class="shortcut-key">↑</kbd>
+          <kbd class="shortcut-key">↓</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_navigate") }}
+          </span>
+          <kbd class="shortcut-key">↩</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_select") }}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <kbd class="shortcut-key">ESC</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_close") }}
+          </span>
+        </div>
+      </div>
      <AppFuse
        v-if="search && show"
        :input="fuse"
--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -43,7 +43,7 @@
          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <i class="opacity-75 pb-2 material-icons">manage_search</i>
-          <span class="text-center">
+          <span class="text-center my-2">
            {{ t("state.nothing_found") }} "{{ filterText }}"
          </span>
        </div>
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -103,9 +103,8 @@ const primaryNavigation = [

  span {
    @apply mt-2;
-    @apply font-font-medium;
-
-    font-size: calc(var(--body-font-size) - 0.062rem);
+    @apply font-medium;
+    @apply text-tiny;
  }

  &.exact-active-link {
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -16,7 +16,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="getCollectionIcon"
        />
      </span>
@@ -24,7 +24,9 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
-        <span class="truncate"> {{ collection.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ collection.name }}
+        </span>
      </span>
      <div class="flex">
        <ButtonSecondary
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -16,7 +16,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="getCollectionIcon"
        />
      </span>
@@ -24,7 +24,7 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
-        <span class="truncate">
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
          {{ folder.name ? folder.name : folder.title }}
        </span>
      </span>
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -15,7 +15,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="isSelected ? 'check-circle' : 'file'"
        />
      </span>
@@ -23,7 +23,9 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="!doc ? selectRequest() : {}"
      >
-        <span class="truncate"> {{ request.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ request.name }}
+        </span>
      </span>
      <div class="flex">
        <ButtonSecondary
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -84,7 +84,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -5,7 +5,7 @@
  >
    <div
      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
-      :style="saveRequest ? 'top: calc(-1 * var(--body-font-size))' : 'top: 0'"
+      :style="saveRequest ? 'top: calc(-1 * var(--font-size-body))' : 'top: 0'"
    >
      <div v-if="!saveRequest" class="search-wrappe">
        <input
@@ -135,7 +135,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -16,7 +16,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="getCollectionIcon"
        />
      </span>
@@ -24,7 +24,9 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
-        <span class="truncate"> {{ collection.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ collection.name }}
+        </span>
      </span>
      <div class="flex">
        <ButtonSecondary
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -16,7 +16,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="getCollectionIcon"
        />
      </span>
@@ -24,7 +24,7 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
-        <span class="truncate">
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
          {{ folder.name ? folder.name : folder.title }}
        </span>
      </span>
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -17,7 +17,7 @@
        <SmartIcon
          v-if="isSelected"
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          name="check-circle"
        />
        <span v-else class="truncate">
@@ -28,7 +28,9 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
        @click="!doc ? selectRequest() : {}"
      >
-        <span class="truncate"> {{ request.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ request.name }}
+        </span>
        <span
          v-if="
            active &&
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -10,7 +10,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="getCollectionIcon"
        />
      </span>
@@ -18,7 +18,9 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
-        <span class="truncate"> {{ collection.title }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ collection.title }}
+        </span>
      </span>
      <div class="flex">
        <ButtonSecondary
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -10,7 +10,7 @@
      >
        <SmartIcon
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          :name="getCollectionIcon"
        />
      </span>
@@ -18,7 +18,7 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
-        <span class="truncate">
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
          {{ folder.name ? folder.name : folder.title }}
        </span>
      </span>
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -12,10 +12,10 @@
        <SmartIcon
          v-if="isSelected"
          class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
          name="check-circle"
        />
-        <span v-else>
+        <span v-else class="truncate">
          {{ request.method }}
        </span>
      </span>
@@ -23,7 +23,9 @@
        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
        @click="!doc ? selectRequest() : {}"
      >
-        <span class="truncate"> {{ request.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ request.name }}
+        </span>
        <span
          v-if="
            active &&
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -1,7 +1,12 @@
 <template>
  <div>
    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
-      <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
+      <SmartTab
+        :id="'query'"
+        :label="`${t('tab.query')}`"
+        :selected="true"
+        :indicator="gqlQueryString.length > 0"
+      >
        <AppSection label="query">
          <div
            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
@@ -30,6 +35,12 @@
                :title="t('app.wiki')"
                svg="help-circle"
              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                svg="trash-2"
+                @click.native="clearGQLQuery()"
+              />
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="t('action.prettify')"
@@ -48,7 +59,11 @@
        </AppSection>
      </SmartTab>

-      <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
+      <SmartTab
+        :id="'variables'"
+        :label="`${t('tab.variables')}`"
+        :indicator="variableString.length > 0"
+      >
        <AppSection label="variables">
          <div
            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
@@ -64,6 +79,12 @@
                :title="t('app.wiki')"
                svg="help-circle"
              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                svg="trash-2"
+                @click.native="clearGQLVariables()"
+              />
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="t('action.copy')"
@@ -76,7 +97,11 @@
        </AppSection>
      </SmartTab>

-      <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
+      <SmartTab
+        :id="'headers'"
+        :label="`${t('tab.headers')}`"
+        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
+      >
        <AppSection label="headers">
          <div
            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
@@ -96,7 +121,7 @@
                v-tippy="{ theme: 'tooltip' }"
                :title="t('action.clear_all')"
                svg="trash-2"
-                @click.native="clearContent()"
+                @click.native="clearHeaders()"
              />
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -230,7 +255,7 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref, watch } from "@nuxtjs/composition-api"
+import { computed, onMounted, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
 import { GQLHeader, makeGQLRequest } from "@hoppscotch/data"
@@ -310,6 +335,12 @@ useCodemirror(bulkEditor, bulkHeaders, {
  environmentHighlights: false,
 })

+const activeGQLHeadersCount = computed(
+  () =>
+    headers.value.filter((x) => x.active && (x.key !== "" || x.value !== ""))
+      .length
+)
+
 const variableEditor = ref<any | null>(null)

 useCodemirror(variableEditor, variableString, {
@@ -507,8 +538,16 @@ const removeRequestHeader = (index: number) => {
  }
 }

-const clearContent = () => {
+const clearHeaders = () => {
  headers.value = []
  clearBulkEditor()
 }
+
+const clearGQLQuery = () => {
+  gqlQueryString.value = ""
+}
+
+const clearGQLVariables = () => {
+  variableString.value = ""
+}
 </script>
--- a/packages/hoppscotch-app/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-app/components/history/graphql/Card.vue
@@ -36,7 +36,7 @@
        @click.native="$emit('toggle-star')"
      />
    </div>
-    <div class="flex flex-col">
+    <div class="flex flex-col text-tiny">
      <span
        v-for="(line, index) in query"
        :key="`line-${index}`"
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -52,7 +52,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
--- a/packages/hoppscotch-app/components/tab/Secondary.vue
+++ b/packages/hoppscotch-app/components/tab/Secondary.vue
@@ -3,9 +3,9 @@
    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
    :exact="exact"
    :blank="blank"
-    class="font-semibold flex-1 py-2 transform transition inline-flex items-center truncate hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
+    class="font-semibold py-2 transform transition inline-flex items-center hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
    :class="[
-      label ? 'px-3' : 'px-2',
+      label ? 'px-4' : 'px-2',
      active
        ? color
          ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
@@ -32,7 +32,9 @@
      :class="label ? 'mr-4 opacity-75' : ''"
      class="svg-icons"
    />
-    {{ label }}
+    <span class="truncate">
+      {{ label }}
+    </span>
  </SmartLink>
 </template>