refactor: better shortcut indication

2022-10-01 19:19:43 +05:30
parent 048ac5f7a5
commit 6330548cc0
43 changed files with 57 additions and 60 deletions
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/packages/hoppscotch-app/src/components/app/Header.vue
@@ -22,7 +22,7 @@
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t('app.search')} <xmp>/</xmp>`"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
          :icon="IconSearch"
          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @click="invokeAction('modals.search.toggle')"
@@ -31,7 +31,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${
            mdAndLarger ? t('support.title') : t('app.options')
-          } <xmp>?</xmp>`"
+          } <kbd>?</kbd>`"
          :icon="IconLifeBuoy"
          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @click="invokeAction('modals.support.toggle')"
--- a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
@@ -21,7 +21,7 @@
              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
              :title="`${t(
                'request.run'
-              )} <xmp>${getSpecialKey()}</xmp><xmp>G</xmp>`"
+              )} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
              :label="`${t('request.run')}`"
              :icon="IconPlay"
              class="rounded-none !text-accent !hover:text-accentDark"
@@ -31,7 +31,7 @@
              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
              :title="`${t(
                'request.save'
-              )} <xmp>${getSpecialKey()}</xmp><xmp>S</xmp>`"
+              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
              :label="`${t('request.save')}`"
              :icon="IconSave"
              class="rounded-none"
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -26,7 +26,7 @@
            v-tippy="{ theme: 'tooltip', allowHTML: true }"
            :title="`${t(
              'action.download_file'
-            )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+            )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
            :icon="downloadResponseIcon"
            @click="downloadResponse"
          />
@@ -34,7 +34,7 @@
            v-tippy="{ theme: 'tooltip', allowHTML: true }"
            :title="`${t(
              'action.copy'
-            )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+            )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
            :icon="copyResponseIcon"
            @click="copyResponse"
          />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -20,7 +20,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${
            previewEnabled ? t('hide.preview') : t('response.preview_html')
-          } <xmp>${getSpecialKey()}</xmp><xmp>Shift</xmp><xmp>P</xmp>`"
+          } <kbd>${getSpecialKey()}</kbd><kbd>Shift</kbd><kbd>P</kbd>`"
          :icon="!previewEnabled ? IconEye : IconEyeOff"
          @click.prevent="togglePreview"
        />
@@ -29,7 +29,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -38,7 +38,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
@@ -12,7 +12,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -31,7 +31,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -40,7 +40,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
@@ -12,7 +12,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
@@ -20,7 +20,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -29,7 +29,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -20,7 +20,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -29,7 +29,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/smart/Item.vue
+++ b/packages/hoppscotch-app/src/components/smart/Item.vue
@@ -51,7 +51,7 @@
      class="items-center self-center ml-4 svg-icons"
      :class="{ 'text-accent': activeInfoIcon }"
    />
-    <div v-if="shortcut.length" class="ml-2 <sm:hidden font-medium">
+    <div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
      <kbd
        v-for="(key, index) in shortcut"
        :key="`key-${index}`"
--- a/packages/hoppscotch-app/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/src/components/smart/Modal.vue
@@ -43,8 +43,9 @@
              <h3 class="heading" :class="{ 'ml-4': !fullWidth }">
                {{ title }}
              </h3>
-              <span class="flex">
+              <span class="flex items-center">
                <slot name="actions"></slot>
+                <kbd class="mr-2 shortcut-key">ESC</kbd>
                <ButtonSecondary
                  v-if="dimissible"
                  v-tippy="{ theme: 'tooltip', delay: [500, 20] }"