btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

chore: minor ui improvements

Browse Source
This commit is contained in:
Liyas Thomas
2022-11-27 23:19:19 +05:30
parent 740691417f
commit 6141073137
47 changed files with 148 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -286,6 +286,18 @@ button {
@apply text-secondaryDark; @apply text-secondaryDark;
} }
.floating-input ~ .end-actions {
@apply absolute;
@apply right-0.2;
@apply inset-y-0;
@apply flex;
@apply items-center;
}
.floating-input:has(~ .end-actions) {
@apply pr-12;
}
pre.ace_editor { pre.ace_editor {
@apply font-mono; @apply font-mono;
@apply resize-none; @apply resize-none;
@@ -530,3 +542,13 @@ details[open] summary .indicator {
#nprogress .bar { #nprogress .bar {
@apply bg-accent #{!important}; @apply bg-accent #{!important};
} }
input[type="color"]::-webkit-color-swatch-wrapper {
@apply rounded;
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
@apply rounded;
border: none;
}

2
packages/hoppscotch-app/locales/af.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Kommunikasie", "communication": "Kommunikasie",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/ar.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "تواصل", "communication": "تواصل",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/ca.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Comunicació", "communication": "Comunicació",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/cn.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "通讯", "communication": "通讯",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/cs.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Sdělení", "communication": "Sdělení",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/da.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Meddelelse", "communication": "Meddelelse",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/de.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Kommunikation", "communication": "Kommunikation",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/el.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Επικοινωνία", "communication": "Επικοινωνία",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/en.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Communication", "communication": "Communication",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/es.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Comunicación", "communication": "Comunicación",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/fi.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Viestintä", "communication": "Viestintä",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/fr.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Communication", "communication": "Communication",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/he.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "תִקשׁוֹרֶת", "communication": "תִקשׁוֹרֶת",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/hi.json
View File

@@ -319,7 +319,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "संचार", "communication": "संचार",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/hu.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Kommunikáció", "communication": "Kommunikáció",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/id.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Komunikasi", "communication": "Komunikasi",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/it.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Comunicazione", "communication": "Comunicazione",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/ja.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Communication", "communication": "Communication",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/ko.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "통신", "communication": "통신",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/nl.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Communicatie", "communication": "Communicatie",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/no.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Kommunikasjon", "communication": "Kommunikasjon",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/pl.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Komunikacja", "communication": "Komunikacja",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/pt-br.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Comunicação", "communication": "Comunicação",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/pt.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Comunicação", "communication": "Comunicação",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/ro.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Comunicare", "communication": "Comunicare",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/ru.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Коммуникация", "communication": "Коммуникация",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/sr.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Комуникација", "communication": "Комуникација",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/sv.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Kommunikation", "communication": "Kommunikation",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/tr.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "İletişim", "communication": "İletişim",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/tw.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "通訊", "communication": "通訊",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/uk.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Спілкування", "communication": "Спілкування",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/locales/vi.json
View File

@@ -318,7 +318,7 @@
"clear_input": "Clear input", "clear_input": "Clear input",
"clear_input_on_send": "Clear input on send", "clear_input_on_send": "Clear input on send",
"client_id": "Client ID", "client_id": "Client ID",
"color": "Color", "color": "Pick a color",
"communication": "Liên lạc", "communication": "Liên lạc",
"connection_config": "Connection Config", "connection_config": "Connection Config",
"connection_not_authorized": "This MQTT connection does not use any authentication.", "connection_not_authorized": "This MQTT connection does not use any authentication.",

2
packages/hoppscotch-app/src/components.d.ts vendored
View File

@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
AppShare: typeof import('./components/app/Share.vue')['default'] AppShare: typeof import('./components/app/Share.vue')['default']
AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default'] AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default'] AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
AppSidenav: typeof import('./components/app/Sidenav.vue')['default'] AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
AppSupport: typeof import('./components/app/Support.vue')['default'] AppSupport: typeof import('./components/app/Support.vue')['default']
ButtonPrimary: typeof import('./components/button/Primary.vue')['default'] ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
@@ -98,6 +99,7 @@ declare module '@vue/runtime-core' {
HttpTests: typeof import('./components/http/Tests.vue')['default'] HttpTests: typeof import('./components/http/Tests.vue')['default']
HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default'] HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideBrush: typeof import('~icons/lucide/brush')['default']
IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default'] IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default'] IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
IconLucideGlobe: typeof import('~icons/lucide/globe')['default'] IconLucideGlobe: typeof import('~icons/lucide/globe')['default']

52
packages/hoppscotch-app/src/components/app/ShortcutsPrompt.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div class="flex flex-col items-center justify-center text-secondaryLight">
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">↩</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">K</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">/</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">?</kbd>
</div>
</div>
</div>
<ButtonSecondary
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io/features/response"
:icon="IconExternalLink"
blank
outline
reverse
/>
</div>
</template>
<script setup lang="ts">
import { useI18n } from "~/composables/i18n"
import IconExternalLink from "~icons/lucide/external-link"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
const t = useI18n()
</script>

47
packages/hoppscotch-app/src/components/graphql/Response.vue
View File

@@ -42,57 +42,12 @@
</div> </div>
<div ref="schemaEditor" class="flex flex-col flex-1"></div> <div ref="schemaEditor" class="flex flex-col flex-1"></div>
</div> </div>
<div <AppShortcutsPrompt v-else class="p-4" />
v-else
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">↩</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">K</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">/</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">?</kbd>
</div>
</div>
</div>
<ButtonSecondary
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io/features/response"
:icon="IconExternalLink"
blank
outline
reverse
/>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import IconWrapText from "~icons/lucide/wrap-text" import IconWrapText from "~icons/lucide/wrap-text"
import IconExternalLink from "~icons/lucide/external-link"
import IconDownload from "~icons/lucide/download" import IconDownload from "~icons/lucide/download"
import IconCheck from "~icons/lucide/check" import IconCheck from "~icons/lucide/check"
import IconCopy from "~icons/lucide/copy" import IconCopy from "~icons/lucide/copy"

2
packages/hoppscotch-app/src/components/history/index.vue
View File

@@ -64,7 +64,7 @@
open open
> >
<summary <summary
class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group" class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
> >
<span <span
class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary" class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"

6
packages/hoppscotch-app/src/components/http/Request.vue
View File

@@ -16,7 +16,7 @@
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
id="method" id="method"
class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight" class="flex px-4 py-2 font-semibold rounded-l cursor-pointer transition text-secondaryDark w-26 bg-primaryLight"
:value="newMethod" :value="newMethod"
:readonly="!isCustomMethod" :readonly="!isCustomMethod"
:placeholder="`${t('request.method')}`" :placeholder="`${t('request.method')}`"
@@ -47,7 +47,7 @@
</label> </label>
</div> </div>
<div <div
class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap" class="flex flex-1 overflow-auto border-l rounded-r transition border-divider bg-primaryLight whitespace-nowrap"
> >
<SmartEnvInput <SmartEnvInput
v-model="newEndpoint" v-model="newEndpoint"
@@ -131,7 +131,7 @@
</tippy> </tippy>
</span> </span>
<span <span
class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark" class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
> >
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }" v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"

50
packages/hoppscotch-app/src/components/http/ResponseMeta.vue
View File

@@ -1,52 +1,8 @@
<template> <template>
<div <div
class="sticky top-0 z-10 flex items-start p-4 overflow-auto bg-primary whitespace-nowrap" class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto bg-primary whitespace-nowrap"
> >
<div <AppShortcutsPrompt v-if="response == null" class="flex-1" />
v-if="response == null"
class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
>
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">↩</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">K</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">/</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">?</kbd>
</div>
</div>
</div>
<ButtonSecondary
:label="t('app.documentation')"
to="https://docs.hoppscotch.io/features/response"
:icon="IconExternalLink"
blank
outline
reverse
/>
</div>
<div v-else class="flex flex-col flex-1"> <div v-else class="flex flex-col flex-1">
<div <div
v-if="response.type === 'loading'" v-if="response.type === 'loading'"
@@ -140,11 +96,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import IconExternalLink from "~icons/lucide/external-link"
import { computed } from "vue" import { computed } from "vue"
import findStatusGroup from "@helpers/findStatusGroup" import findStatusGroup from "@helpers/findStatusGroup"
import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse" import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import { useI18n } from "@composables/i18n" import { useI18n } from "@composables/i18n"
import { useColorMode } from "@composables/theming" import { useColorMode } from "@composables/theming"
import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes" import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"

5
packages/hoppscotch-app/src/components/realtime/Communication.vue
View File

@@ -65,7 +65,9 @@
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }" v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
:title="`${t('action.send')}`" :title="`${t(
'request.run'
)} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
:label="`${t('action.send')}`" :label="`${t('action.send')}`"
:disabled="!communicationBody || !isConnected" :disabled="!communicationBody || !isConnected"
:icon="IconSend" :icon="IconSend"
@@ -150,6 +152,7 @@ import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast" import { useToast } from "@composables/toast"
import { isJSONContentType } from "@helpers/utils/contenttypes" import { isJSONContentType } from "@helpers/utils/contenttypes"
import { defineActionHandler } from "~/helpers/actions" import { defineActionHandler } from "~/helpers/actions"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
defineProps({ defineProps({
showEventField: { showEventField: {

48
packages/hoppscotch-app/src/components/realtime/Log.vue
View File

@@ -50,51 +50,7 @@
/> />
</div> </div>
</div> </div>
<div <AppShortcutsPrompt v-else class="p-4" />
v-else
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">↩</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
<kbd class="shortcut-key">K</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">/</kbd>
</div>
<div class="flex">
<kbd class="shortcut-key">?</kbd>
</div>
</div>
</div>
<ButtonSecondary
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io/realtime"
:icon="IconExternalLink"
blank
outline
reverse
/>
</div>
</div> </div>
</template> </template>
@@ -104,10 +60,8 @@ import IconTrash from "~icons/lucide/trash"
import IconArrowUp from "~icons/lucide/arrow-up" import IconArrowUp from "~icons/lucide/arrow-up"
import IconArrowDown from "~icons/lucide/arrow-down" import IconArrowDown from "~icons/lucide/arrow-down"
import IconChevronsDown from "~icons/lucide/chevron-down" import IconChevronsDown from "~icons/lucide/chevron-down"
import IconExternalLink from "~icons/lucide/external-link"
import { useThrottleFn, useScroll } from "@vueuse/core" import { useThrottleFn, useScroll } from "@vueuse/core"
import { useI18n } from "@composables/i18n" import { useI18n } from "@composables/i18n"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
export type LogEntryData = { export type LogEntryData = {
prefix?: string prefix?: string

2
packages/hoppscotch-app/src/components/realtime/LogEntry.vue
View File

@@ -23,7 +23,7 @@
</span> </span>
</div> </div>
<div <div
class="inline-grid items-center flex-1 min-w-0 p-2" class="items-center flex-1 min-w-0 p-2 inline-grid"
@click="toggleExpandPayload()" @click="toggleExpandPayload()"
> >
<div class="truncate"> <div class="truncate">

33
packages/hoppscotch-app/src/components/realtime/Subscription.vue
View File

@@ -3,7 +3,7 @@
<template #body> <template #body>
<div class="flex justify-between mb-4"> <div class="flex justify-between mb-4">
<div <div
class="flex items-center border divide-x rounded border-divider divide-divider" class="flex items-center border rounded divide-x border-divider divide-divider"
> >
<label class="mx-4"> <label class="mx-4">
{{ t("mqtt.qos") }} {{ t("mqtt.qos") }}
@@ -31,19 +31,8 @@
</template> </template>
</tippy> </tippy>
</div> </div>
<div class="flex items-center">
<label for="select-color">
{{ t("mqtt.color") }}
</label>
<input
id="select-color"
v-model="color"
type="color"
class="w-8 h-8 p-1 ml-4 border rounded bg-primary border-divider"
/>
</div>
</div> </div>
<div class="flex flex-col"> <div class="relative flex flex-col">
<input <input
id="selectLabelAdd" id="selectLabelAdd"
v-model="name" v-model="name"
@@ -57,6 +46,24 @@
<label for="selectLabelAdd"> <label for="selectLabelAdd">
{{ t("action.label") }} {{ t("action.label") }}
</label> </label>
<span class="end-actions">
<label
v-tippy="{ theme: 'tooltip' }"
:title="t('mqtt.color')"
for="select-color"
class="absolute inset-0 flex items-center justify-center group hover:cursor-pointer"
>
<icon-lucide-brush
class="transition opacity-80 svg-icons group-hover:opacity-100 text-accentContrast"
/>
</label>
<input
id="select-color"
v-model="color"
type="color"
class="w-8 h-8 p-1 rounded bg-primary"
/>
</span>
</div> </div>
</template> </template>
<template #footer> <template #footer>

4
packages/hoppscotch-app/src/components/smart/Checkbox.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark" class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
role="checkbox" role="checkbox"
:aria-checked="on" :aria-checked="on"
@click="emit('change')" @click="emit('change')"
@@ -14,7 +14,7 @@
/> />
<label <label
for="checkbox" for="checkbox"
class="pl-0 font-semibold align-middle cursor-pointer" class="pl-0 font-semibold truncate align-middle cursor-pointer"
> >
<slot></slot> <slot></slot>
</label> </label>

2
packages/hoppscotch-app/src/components/smart/Toggle.vue
View File

@@ -8,7 +8,7 @@
<span ref="toggle" class="toggle" :class="{ on: on }"> <span ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span> <span class="handle"></span>
</span> </span>
<span class="pl-0 font-semibold align-middle cursor-pointer"> <span class="pl-0 font-semibold truncate align-middle cursor-pointer">
<slot></slot> <slot></slot>
</span> </span>
</div> </div>

6
packages/hoppscotch-app/src/pages/realtime/mqtt.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="mqtt"> <AppPaneLayout layout-id="mqtt">
<template #primary> <template #primary>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary" class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
> >
<div class="inline-flex flex-1 space-x-2"> <div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1"> <div class="flex flex-1">
@@ -116,7 +116,7 @@
</template> </template>
<template #sidebar> <template #sidebar>
<div <div
class="sticky z-10 flex flex-col border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight" class="sticky z-10 flex flex-col border-b rounded-t divide-y divide-dividerLight bg-primary border-dividerLight"
> >
<div class="flex justify-between flex-1"> <div class="flex justify-between flex-1">
<ButtonSecondary <ButtonSecondary
@@ -174,7 +174,7 @@
/> />
</span> </span>
<span <span
class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark" class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
@click="openTopicAsTab(topic)" @click="openTopicAsTab(topic)"
> >
<span class="truncate"> <span class="truncate">

2
packages/hoppscotch-app/src/pages/realtime/socketio.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="socketio"> <AppPaneLayout layout-id="socketio">
<template #primary> <template #primary>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary" class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
> >
<div class="inline-flex flex-1 space-x-2"> <div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1"> <div class="flex flex-1">