refactor: minor ui improvements

2021-08-15 15:18:04 +05:30
parent 8c70f83297
commit bfc0282e49
18 changed files with 525 additions and 449 deletions
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -2,7 +2,7 @@
  <div>
    <header class="flex flex-1 py-2 px-4 items-center justify-between">
      <div class="font-bold flex-shrink-0 inline-flex items-center">
-        Hoppscotch
+        <AppLogo />
      </div>
      <div class="space-x-2 flex-shrink-0 inline-flex items-center">
        <AppGitHubStarButton class="flex mx-2 mt-1" />
--- a/components/app/Logo.vue
+++ b/components/app/Logo.vue
@@ -1,14 +1,18 @@
 <template>
  <svg
    class="logo"
-    viewBox="0 0 24 24"
-    width="16"
-    height="16"
    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
  >
    <path
-      class="fill-current"
-      d="M2.534 9.287C2.534 15.46 7.56 24 12 24c4.18 0 9.466-8.539 9.466-14.713C21.467 3.113 17.228 0 12 0 6.772 0 2.534 3.113 2.534 9.287zm11.926 4.565a4.649 4.649 0 014.257-1.261 4.649 4.649 0 01-1.262 4.256 4.649 4.649 0 01-4.257 1.262 4.649 4.649 0 011.262-4.257zm-9.177-1.261a4.649 4.649 0 014.258 1.261 4.649 4.649 0 011.261 4.257 4.649 4.649 0 01-4.257-1.262 4.649 4.649 0 01-1.262-4.256z"
+      d="M17 10.54C16.78 7.44 14.63 5 12 5s-4.78 2.44-5 5.54C4 11.23 2 12.5 2 14c0 2.21 4.5 4 10 4s10-1.79 10-4c0-1.5-2-2.77-5-3.46m-2.07 1.3c-1.9.21-3.96.21-5.86 0c-.04-.28-.07-.56-.07-.84c0-2.2 1.35-4 3-4s3 1.8 3 4c0 .28 0 .56-.07.84z"
+      fill="currentColor"
    />
  </svg>
 </template>
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -31,6 +31,7 @@
      >
        <span class="truncate"> {{ collection.name }} </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          icon="create_new_folder"
@@ -42,7 +43,14 @@
            })
          "
        />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -78,6 +86,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <div v-if="showChildren || isFiltered">
      <CollectionsGraphqlFolder
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -33,6 +33,7 @@
          {{ folder.name ? folder.name : folder.title }}
        </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          icon="create_new_folder"
@@ -40,7 +41,14 @@
          class="hidden group-hover:inline-flex"
          @click.native="$emit('add-folder', { folder, path: folderPath })"
        />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -74,6 +82,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <div v-if="showChildren || isFiltered">
      <CollectionsGraphqlFolder
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -38,6 +38,7 @@
      >
        <span class="truncate"> {{ request.name }} </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-if="!savingMode"
          v-tippy="{ theme: 'tooltip' }"
@@ -46,7 +47,14 @@
          class="hidden group-hover:inline-flex"
          @click.native="!doc ? selectRequest() : {}"
        />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -76,6 +84,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -31,6 +31,7 @@
      >
        <span class="truncate"> {{ collection.name }} </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
@@ -60,7 +61,14 @@
            })
          "
        />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -97,6 +105,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <div v-if="showChildren || isFiltered">
      <CollectionsMyFolder
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -33,6 +33,7 @@
          {{ folder.name ? folder.name : folder.title }}
        </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          icon="create_new_folder"
@@ -40,7 +41,14 @@
          class="hidden group-hover:inline-flex"
          @click.native="$emit('add-folder', { folder, path: folderPath })"
        />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -79,6 +87,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <div v-if="showChildren || isFiltered">
      <CollectionsMyFolder
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -46,6 +46,7 @@
      >
        <span class="truncate"> {{ request.name }} </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-if="!saveRequest && !doc"
          v-tippy="{ theme: 'tooltip' }"
@@ -54,7 +55,14 @@
          class="hidden group-hover:inline-flex"
          @click.native="!doc ? selectRequest() : {}"
        />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
@@ -87,6 +95,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -23,6 +23,7 @@
      >
        <span class="truncate"> {{ collection.title }} </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
@@ -44,7 +45,7 @@
          v-tippy="{ theme: 'tooltip' }"
          icon="create_new_folder"
          :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
          @click.native="
            $emit('add-folder', {
              folder: collection,
@@ -52,6 +53,7 @@
            })
          "
        />
+        <span>
          <tippy
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
            ref="options"
@@ -99,6 +101,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <div v-if="showChildren || isFiltered">
      <CollectionsTeamsFolder
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -25,6 +25,7 @@
          {{ folder.name ? folder.name : folder.title }}
        </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
          v-tippy="{ theme: 'tooltip' }"
@@ -33,6 +34,7 @@
          class="hidden group-hover:inline-flex"
          @click.native="$emit('add-folder', { folder, path: folderPath })"
        />
+        <span>
          <tippy
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
            ref="options"
@@ -82,6 +84,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <div v-if="showChildren || isFiltered">
      <CollectionsTeamsFolder
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -39,14 +39,16 @@
      >
        <span class="truncate"> {{ request.name }} </span>
      </span>
+      <div class="flex">
        <ButtonSecondary
          v-if="!saveRequest && !doc"
          v-tippy="{ theme: 'tooltip' }"
          icon="replay"
          :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
          @click.native="!doc ? selectRequest() : {}"
        />
+        <span>
          <tippy
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
            ref="options"
@@ -86,6 +88,8 @@
              "
            />
          </tippy>
+        </span>
+      </div>
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -6,7 +6,7 @@
    @close="hideModal"
  >
    <template #body>
-      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
+      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
        <SmartItem
          :loading="signingInWithGoogle"
          svg="google"
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -9,7 +9,7 @@
        <label for="requestType" class="px-4 pb-4">
          {{ $t("request.choose_language") }}
        </label>
-        <div class="flex flex-1">
+        <div class="flex">
          <tippy
            ref="options"
            interactive
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -39,7 +39,7 @@
      <SmartAceEditor
        :value="jsonBodyText"
        :lang="'json'"
-        :provide-j-s-o-n-outline="true"
+        :provide-outline="true"
        :options="{
          maxLines: Infinity,
          minLines: 16,
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -2,7 +2,7 @@
  <div class="show-if-initialized" :class="{ initialized }">
    <pre ref="editor" :class="styles"></pre>
    <div
-      v-if="provideJSONOutline"
+      v-if="provideOutline"
      class="
        bg-primaryLight
        border-t border-divider
@@ -63,7 +63,7 @@ import outline from "~/helpers/outline"

 export default {
  props: {
-    provideJSONOutline: {
+    provideOutline: {
      type: Boolean,
      default: false,
      required: false,
@@ -160,7 +160,7 @@ export default {
    this.editor = editor
    this.cacheValue = this.value

-    if (this.lang === "json" && this.provideJSONOutline)
+    if (this.lang === "json" && this.provideOutline)
      this.initOutline(this.value)

    editor.on("change", () => {
@@ -168,12 +168,12 @@ export default {
      this.$emit("input", content)
      this.cacheValue = content

-      if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
+      if (this.provideOutline) debounce(this.initOutline(content), 500)

      if (this.lint) this.provideLinting(content)
    })

-    if (this.lang === "json" && this.provideJSONOutline) {
+    if (this.lang === "json" && this.provideOutline) {
      editor.session.selection.on("changeCursor", () => {
        const index = editor.session.doc.positionToIndex(
          editor.selection.getCursor(),
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -38,15 +38,15 @@ export default defineComponent({
    getIcon(color: HoppBgColor) {
      switch (color) {
        case "system":
-          return "desktop_windows"
+          return "devices"
        case "light":
-          return "wb_sunny"
+          return "light_mode"
        case "dark":
          return "nights_stay"
        case "black":
-          return "bedtime"
+          return "dark_mode"
        default:
-          return "desktop_windows"
+          return "devices"
      }
    },
  },
--- a/helpers/outline.js
+++ b/helpers/outline.js
@@ -106,7 +106,7 @@ export default () => {
  }

  const getSiblings = (index) => {
-    const parent = path[index].obj.parent
+    const parent = path[index]?.obj?.parent
    if (!parent) return []
    else if (parent.kind === "Object") {
      return parent.members
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col min-h-screen items-center justify-center">
-    <span v-if="signingInWithEmail">
+    <div v-if="signingInWithEmail">
      <SmartSpinner />
-    </span>
-    <span v-else class="text-secondaryLight">
-      {{ $t("waiting_for_connection") }}
-    </span>
+    </div>
+    <div v-else class="text-sm text-secondaryLight animate-pulse">
+      <AppLogo class="h-8 w-8" />
+    </div>
    <pre v-if="error">{{ error }}</pre>
  </div>
 </template>