chore: minor ui improvements

2021-09-19 20:27:20 +05:30
parent 0fcd9733ff
commit 49741875bd
13 changed files with 112 additions and 105 deletions
--- a/packages/hoppscotch-app/assets/icons/align-left.svg
+++ b/packages/hoppscotch-app/assets/icons/align-left.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -35,59 +35,65 @@
              <ButtonSecondary
                svg="help-circle"
                class="!rounded-none"
-                :label="$t('app.help')"
+                :label="`${$t('app.help')}`"
              />
            </template>
            <div class="flex flex-col">
              <SmartItem
                svg="book"
-                :label="$t('app.documentation')"
+                :label="`${$t('app.documentation')}`"
                to="https://docs.hoppscotch.io"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="zap"
-                :label="$t('app.keyboard_shortcuts')"
+                :label="`${$t('app.keyboard_shortcuts')}`"
                @click.native="
-                  showShortcuts = true
-                  $refs.options.tippy().hide()
+                  () => {
+                    showShortcuts = true
+                    $refs.options.tippy().hide()
+                  }
                "
              />
              <SmartItem
                svg="gift"
-                :label="$t('app.whats_new')"
+                :label="`${$t('app.whats_new')}`"
                to="https://docs.hoppscotch.io/changelog"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="message-circle"
-                :label="$t('app.chat_with_us')"
+                :label="`${$t('app.chat_with_us')}`"
                @click.native="
-                  chatWithUs()
-                  $refs.options.tippy().hide()
+                  () => {
+                    chatWithUs()
+                    $refs.options.tippy().hide()
+                  }
                "
              />
              <hr />
              <SmartItem
                svg="twitter"
-                :label="$t('app.twitter')"
+                :label="`${$t('app.twitter')}`"
                to="https://hoppscotch.io/twitter"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="user-plus"
-                :label="$t('app.invite')"
+                :label="`${$t('app.invite')}`"
                @click.native="
-                  showShare = true
-                  $refs.options.tippy().hide()
+                  () => {
+                    showShare = true
+                    $refs.options.tippy().hide()
+                  }
                "
              />
              <SmartItem
                svg="lock"
-                :label="$t('app.terms_and_privacy')"
+                :label="`${$t('app.terms_and_privacy')}`"
                to="https://docs.hoppscotch.io/privacy"
                blank
                @click.native="$refs.options.tippy().hide()"
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -1,6 +1,21 @@
 <template>
  <div>
    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+      <template #actions>
+        <ButtonSecondary
+          :label="`${$t('request.run')}`"
+          svg="play"
+          class="rounded-none !text-accent"
+          @click.native="runQuery()"
+        />
+        <ButtonSecondary
+          ref="saveRequest"
+          :label="`${$t('request.save')}`"
+          class="rounded-none"
+          @click.native="saveRequest"
+        />
+      </template>
+
      <SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
        <AppSection label="query">
          <div
@@ -21,12 +36,6 @@
              {{ $t("request.query") }}
            </label>
            <div class="flex">
-              <ButtonSecondary
-                :label="`${$t('request.run')}`"
-                svg="play"
-                class="rounded-none !text-accent"
-                @click.native="runQuery()"
-              />
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                to="https://docs.hoppscotch.io"
@@ -37,22 +46,15 @@
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('action.copy')"
-                :svg="copyQueryIcon"
+                :svg="`${copyQueryIcon}`"
                @click.native="copyQuery"
              />
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('action.prettify')"
-                :svg="prettifyQueryIcon"
+                :svg="`${prettifyQueryIcon}`"
                @click.native="prettifyQuery"
              />
-              <ButtonSecondary
-                ref="saveRequest"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('request.save')"
-                svg="folder-plus"
-                @click.native="saveRequest"
-              />
            </div>
          </div>
          <div ref="queryEditor"></div>
@@ -88,7 +90,7 @@
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('action.copy')"
-                :svg="copyVariablesIcon"
+                :svg="`${copyVariablesIcon}`"
                @click.native="copyVariables"
              />
            </div>
@@ -127,7 +129,7 @@
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('action.clear_all')"
                svg="trash-2"
-                :disabled="bulkMode"
+                :disabled="Boolean(bulkMode)"
                @click.native="headers = []"
              />
              <ButtonSecondary
@@ -141,7 +143,7 @@
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('add.new')"
                svg="plus"
-                :disabled="bulkMode"
+                :disabled="Boolean(bulkMode)"
                @click.native="addRequestHeader"
              />
            </div>
@@ -150,7 +152,7 @@
          <div v-else>
            <div
              v-for="(header, index) in headers"
-              :key="`header-${index}`"
+              :key="`header-${String(index)}`"
              class="
                divide-x divide-dividerLight
                border-b border-dividerLight
@@ -183,7 +185,7 @@
              <input
                class="bg-transparent flex flex-1 py-2 px-4"
                :placeholder="`${$t('count.value', { count: index + 1 })}`"
-                :name="`value ${index}`"
+                :name="`value ${String(index)}`"
                :value="header.value"
                autofocus
                @change="
@@ -258,7 +260,7 @@

    <CollectionsSaveRequest
      mode="graphql"
-      :show="showSaveRequestModal"
+      :show="Boolean(showSaveRequestModal)"
      @hide-modal="hideRequestModal"
    />
  </div>
@@ -407,7 +409,7 @@ const runQuery = async () => {
  const startTime = Date.now()

  nuxt.value.$loading.start()
-  response.value = `${t("state.loading")}`
+  response.value = "loading"

  try {
    const runURL = clone(url.value)
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -1,47 +1,55 @@
 <template>
  <AppSection ref="response" label="response">
    <div
-      v-if="responseString"
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        pl-4
-        top-0
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      v-if="responseString === 'loading'"
+      class="flex flex-col p-4 items-center justify-center"
    >
-      <label class="font-semibold text-secondaryLight">
-        {{ $t("response.title") }}
-      </label>
-      <div class="flex">
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
-          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
-        />
-        <ButtonSecondary
-          ref="downloadResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.download_file')"
-          :svg="downloadResponseIcon"
-          @click.native="downloadResponse"
-        />
-        <ButtonSecondary
-          ref="copyResponseButton"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
-          :svg="copyResponseIcon"
-          @click.native="copyResponse"
-        />
-      </div>
+      <SmartSpinner class="mb-4" />
+      <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+    </div>
+    <div v-else-if="responseString">
+      <div
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex flex-1
+          pl-4
+          top-0
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
+      >
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("response.title") }}
+        </label>
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('state.linewrap')"
+            :class="{ '!text-accent': linewrapEnabled }"
+            svg="corner-down-left"
+            @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+          />
+          <ButtonSecondary
+            ref="downloadResponse"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.download_file')"
+            :svg="downloadResponseIcon"
+            @click.native="downloadResponse"
+          />
+          <ButtonSecondary
+            ref="copyResponseButton"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.copy')"
+            :svg="copyResponseIcon"
+            @click.native="copyResponse"
+          />
+        </div>
+      </div>
+      <div ref="schemaEditor"></div>
    </div>
-    <div v-if="responseString" ref="schemaEditor"></div>
    <div
      v-else
      class="
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -51,8 +51,12 @@
      />
    </div>
    <div v-else class="flex flex-col flex-1">
-      <div v-if="response.type === 'loading'">
-        <i class="animate-spin material-icons"> refresh </i>
+      <div
+        v-if="response.type === 'loading'"
+        class="flex flex-col items-center justify-center"
+      >
+        <SmartSpinner class="mb-4" />
+        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
      </div>
      <div
        v-if="response.type === 'network_fail'"
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -117,7 +117,7 @@
            />
          </div>
        </div>
-        <div class="flex flex-col space-y-2 px-4">
+        <div class="flex flex-col space-y-2 px-4 pb-4">
          <div
            v-for="(input, index) of communication.inputs"
            :key="`input-${index}`"
--- a/packages/hoppscotch-app/components/smart/Link.js
+++ b/packages/hoppscotch-app/components/smart/Link.js
@@ -27,6 +27,8 @@ const SmartLink = {
    let on = {}
    switch (tag) {
      case ANCHOR_TAG:
+        attrs["aria-label"] = "Link"
+
        // Map `to` prop to the correct attribute
        attrs.href = context.props.to

@@ -53,6 +55,7 @@ const SmartLink = {
        break

      default:
+        attrs["aria-label"] = "Button"
        break
    }

--- a/packages/hoppscotch-app/components/smart/Spinner.vue
+++ b/packages/hoppscotch-app/components/smart/Spinner.vue
@@ -1,22 +1,3 @@
 <template>
-  <svg
-    class="h-4 animate-spin w-4"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      class="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      stroke-width="4"
-    />
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    />
-  </svg>
+  <SmartIcon class="animate-spin svg-icons" name="loader" />
 </template>
--- a/packages/hoppscotch-app/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/components/smart/Tabs.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    class="flex flex-nowrap flex-1 h-full"
-    :class="{ 'flex-col': !vertical }"
+    :class="{ 'flex-col h-auto': !vertical }"
  >
    <div
      class="tabs hide-scrollbar relative"
@@ -19,6 +19,7 @@
              class="tab"
              :class="[{ active: tab.active }, { vertical: vertical }]"
              tabindex="0"
+              :aria-label="tab.label"
              @keyup.enter="selectTab(tab)"
              @click="selectTab(tab)"
            >
@@ -42,8 +43,9 @@
      </div>
    </div>
    <div
+      class="contents h-full w-full"
      :class="{
-        'flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
+        '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
      }"
    >
      <slot></slot>
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -17,13 +17,13 @@
        outline
        @click.native="displayModalAdd(true)"
      />
-      <p
+      <div
        v-if="myTeamsLoading"
        class="flex flex-col items-center justify-center"
      >
        <SmartSpinner class="mb-4" />
        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
-      </p>
+      </div>
      <div
        v-if="!myTeamsLoading && myTeams.myTeams.length === 0"
        class="flex items-center"
--- a/packages/hoppscotch-app/helpers/apollo.ts
+++ b/packages/hoppscotch-app/helpers/apollo.ts
@@ -6,7 +6,7 @@ import {
  OperationVariables,
  split,
  ApolloError,
-  isApolloError as _isApolloError
+  isApolloError as _isApolloError,
 } from "@apollo/client/core"
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { setContext } from "@apollo/client/link/context"
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -177,6 +177,7 @@ export default defineComponent({
            action: [
              {
                text: `${this.$t("app.reload")}`,
+                class: "!ml-auto",
                onClick: (_, toastObject) => {
                  toastObject.goAway(0)
                  window.location.reload()
--- a/packages/hoppscotch-app/pages/realtime.vue
+++ b/packages/hoppscotch-app/pages/realtime.vue
@@ -1,6 +1,6 @@
 <template>
  <SmartTabs
-    class="h-full overflow-hidden"
+    class="h-full !overflow-hidden"
    styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
  >
    <SmartTab