chore: improvements to tooltips and popovers

2022-11-02 14:42:00 +05:30
parent 28bcb899e7
commit 4a5a4077af
6 changed files with 111 additions and 79 deletions
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -138,63 +138,79 @@ a {
  }
 }

-.tippy-box[data-theme="tooltip"] {
+.tippy-box[data-theme~="tooltip"] {
  @apply bg-tooltip;
-  @apply text-primary;
-  @apply font-semibold;
-  @apply py-1 px-2;
+  @apply border-solid border-tooltip;
  @apply rounded;
-  @apply truncate;
  @apply shadow;
-  @apply leading-normal;
-  @apply items-center;
-  font-size: 86%;

-  kbd {
-    @apply hidden;
-    @apply font-sans;
-    @apply bg-gray-500/45;
-    @apply text-primaryLight;
-    @apply rounded-sm;
-    @apply px-1;
-    @apply my-0 ml-1;
+  .tippy-content {
+    @apply flex;
+    @apply text-tiny text-primary;
+    @apply font-semibold;
+    @apply py-1 px-2;
    @apply truncate;
-    @apply sm: inline-flex;
-  }
-
-  .tippy-svg-arrow svg {
-    @apply fill-tooltip;
-  }
-
-  .env-icon {
-    @apply inline-flex;
+    @apply leading-normal;
    @apply items-center;
-    @apply mr-1;
-    @apply text-accentDark;
+
+    kbd {
+      @apply hidden;
+      @apply font-sans;
+      @apply bg-gray-500/45;
+      @apply text-primaryLight;
+      @apply rounded-sm;
+      @apply px-1;
+      @apply my-0 ml-1;
+      @apply truncate;
+      @apply sm: inline-flex;
+    }
+
+    .env-icon {
+      @apply inline-flex;
+      @apply items-center;
+      @apply mr-1;
+      @apply text-accentDark;
+    }
+  }
+
+  .tippy-svg-arrow {
+    svg:first-child {
+      @apply fill-tooltip;
+    }
+
+    svg:last-child {
+      @apply fill-tooltip;
+    }
  }
 }

-.tippy-box[data-theme="popover"] {
-  @apply flex flex-col;
-  @apply max-h-56;
-  @apply items-stretch;
-  @apply overflow-y-auto;
+.tippy-box[data-theme~="popover"] {
  @apply bg-popover;
-  @apply text-secondary text-body;
-  @apply p-2;
+  @apply border-solid border-dividerDark;
+  @apply rounded;
  @apply shadow-lg;
-  @apply leading-normal;
-  @apply border border-dividerDark;
-  @apply focus: outline-none;
-  scroll-behavior: smooth;

-  .tippy-svg-arrow svg {
-    @apply fill-popover;
+  .tippy-content {
+    @apply flex flex-col;
+    @apply max-h-56;
+    @apply items-stretch;
+    @apply overflow-y-auto;
+    @apply text-secondary text-body;
+    @apply p-2;
+    @apply leading-normal;
+    @apply focus: outline-none;
+    scroll-behavior: smooth;
  }
-}

-.tippy-content {
-  @apply p-0;
+  .tippy-svg-arrow {
+    svg:first-child {
+      @apply fill-dividerDark;
+    }
+
+    svg:last-child {
+      @apply fill-popover;
+    }
+  }
 }

 [data-v-tippy] {
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/packages/hoppscotch-app/src/components/app/Header.vue
@@ -100,18 +100,6 @@
                "
              />
              <template #content="{ hide }">
-                <div class="flex flex-col px-2 text-tiny">
-                  <span class="inline-flex font-semibold truncate">
-                    {{
-                      currentUser.displayName ||
-                      t("profile.default_hopp_displayname")
-                    }}
-                  </span>
-                  <span class="inline-flex truncate text-secondaryLight">
-                    {{ currentUser.email }}
-                  </span>
-                </div>
-                <hr />
                <div
                  ref="tippyActions"
                  class="flex flex-col focus:outline-none"
@@ -121,6 +109,18 @@
                  @keyup.l="logout.$el.click()"
                  @keyup.escape="hide()"
                >
+                  <div class="flex flex-col px-2 text-tiny">
+                    <span class="inline-flex font-semibold truncate">
+                      {{
+                        currentUser.displayName ||
+                        t("profile.default_hopp_displayname")
+                      }}
+                    </span>
+                    <span class="inline-flex truncate text-secondaryLight">
+                      {{ currentUser.email }}
+                    </span>
+                  </div>
+                  <hr />
                  <SmartItem
                    ref="profile"
                    to="/profile"
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -60,8 +60,10 @@
    <div class="flex mt-2 sm:mt-0">
      <ButtonPrimary
        id="send"
-        class="flex-1 rounded-r-none min-w-20"
+        v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+        :title="`${t('action.send')} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
        :label="`${!loading ? t('action.send') : t('action.cancel')}`"
+        class="flex-1 rounded-r-none min-w-20"
        @click="!loading ? newSendRequest() : cancelRequest()"
      />
      <span class="flex">
@@ -72,9 +74,11 @@
          :on-shown="() => sendTippyActions.focus()"
        >
          <ButtonPrimary
-            class="rounded-l-none"
-            filled
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('app.options')"
            :icon="IconChevronDown"
+            filled
+            class="rounded-l-none"
          />
          <template #content="{ hide }">
            <div
@@ -130,10 +134,14 @@
        class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
      >
        <ButtonSecondary
-          class="flex-1 rounded rounded-r-none"
+          v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+          :title="`${t(
+            'request.save'
+          )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
          :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
          filled
          :icon="IconSave"
+          class="flex-1 rounded rounded-r-none"
          @click="saveRequest()"
        />
        <span class="flex">
@@ -144,21 +152,13 @@
            :on-shown="() => saveTippyActions.focus()"
          >
            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('app.options')"
              :icon="IconChevronDown"
              filled
              class="rounded rounded-l-none"
            />
            <template #content="{ hide }">
-              <input
-                id="request-name"
-                v-model="requestName"
-                :placeholder="`${t('request.name')}`"
-                name="request-name"
-                type="text"
-                autocomplete="off"
-                class="mb-2 input !bg-primaryContrast"
-                @keyup.enter="hide()"
-              />
              <div
                ref="saveTippyActions"
                class="flex flex-col focus:outline-none"
@@ -167,6 +167,16 @@
                @keyup.s="saveRequestAction.$el.click()"
                @keyup.escape="hide()"
              >
+                <input
+                  id="request-name"
+                  v-model="requestName"
+                  :placeholder="`${t('request.name')}`"
+                  name="request-name"
+                  type="text"
+                  autocomplete="off"
+                  class="mb-2 input !bg-primaryContrast"
+                  @keyup.enter="hide()"
+                />
                <SmartItem
                  ref="copyRequestAction"
                  :label="shareButtonText"
@@ -265,6 +275,7 @@ import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"

 const t = useI18n()

--- a/packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -86,16 +86,19 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
        arrow: true,
        create() {
          const dom = document.createElement("span")
+          const tooltipContainer = document.createElement("span")
          const kbd = document.createElement("kbd")
          const icon = document.createElement("span")
          icon.innerHTML = envTypeIcon
+          icon.className = "env-icon"
          kbd.textContent = finalEnv
-          dom.appendChild(icon)
-          dom.appendChild(document.createTextNode(`${envName} `))
-          dom.appendChild(kbd)
+          tooltipContainer.appendChild(icon)
+          tooltipContainer.appendChild(document.createTextNode(`${envName} `))
+          tooltipContainer.appendChild(kbd)
+          tooltipContainer.className = "tippy-content"
          dom.className = "tippy-box"
          dom.dataset.theme = "tooltip"
-          icon.className = "env-icon"
+          dom.appendChild(tooltipContainer)
          return { dom }
        },
      }
--- a/packages/hoppscotch-app/src/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/src/helpers/editor/themes/baseTheme.ts
@@ -103,10 +103,10 @@ export const baseTheme = EditorView.theme({
    borderRadius: "4px",
  },
  ".cm-tooltip-arrow:after": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
  },
  ".cm-tooltip-arrow:before": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
  },
  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
    fontFamily: "var(--font-mono)",
@@ -235,10 +235,10 @@ export const inputTheme = EditorView.theme({
    borderRadius: "4px",
  },
  ".cm-tooltip-arrow:after": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
  },
  ".cm-tooltip-arrow:before": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
  },
  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
    fontFamily: "var(--font-mono)",
--- a/packages/hoppscotch-app/src/modules/tippy.ts
+++ b/packages/hoppscotch-app/src/modules/tippy.ts
@@ -1,8 +1,10 @@
 import { HoppModule } from "."
-import VueTippy, { setDefaultProps } from "vue-tippy"
+import VueTippy, { roundArrow, setDefaultProps } from "vue-tippy"

 import "tippy.js/dist/tippy.css"
 import "tippy.js/animations/scale-subtle.css"
+import "tippy.js/dist/border.css"
+import "tippy.js/dist/svg-arrow.css"

 export default <HoppModule>{
  onVueAppInit(app) {
@@ -13,7 +15,7 @@ export default <HoppModule>{
      appendTo: document.body,
      allowHTML: false,
      animateFill: false,
-      arrow: false,
+      arrow: roundArrow + roundArrow,
      popperOptions: {
        // https://popper.js.org/docs/v2/utils/detect-overflow/
        modifiers: [