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

chore: hoppscotch-ui improvements (#3497)

Browse Source 
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-12-06 00:38:44 +06:00
committed by GitHub
parent 18864bfecf
commit 6fa722df7b
69 changed files with 726 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-common/src/components/http/Authorization.vue
View File

@@ -13,12 +13,12 @@
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<HoppSmartSelectWrapper>
<HoppButtonSecondary
class="ml-2 rounded-none pr-8"
:label="authName"
/>
</span>
</HoppSmartSelectWrapper>
<template #content="{ hide }">
<div
ref="tippyActions"
@@ -149,7 +149,7 @@
</div>
</div>
<div
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.authorization") }}

4
packages/hoppscotch-common/src/components/http/Body.vue
View File

@@ -13,12 +13,12 @@
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<HoppSmartSelectWrapper>
<HoppButtonSecondary
:label="body.contentType || t('state.none')"
class="ml-2 rounded-none pr-8"
/>
</span>
</HoppSmartSelectWrapper>
<template #content="{ hide }">
<div
ref="tippyActions"

4
packages/hoppscotch-common/src/components/http/CodegenModal.vue
View File

@@ -17,7 +17,7 @@
placement="bottom"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<HoppSmartSelectWrapper>
<HoppButtonSecondary
:label="
CodegenDefinitions.find((x) => x.name === codegenType)!.caption
@@ -25,7 +25,7 @@
outline
class="flex-1 pr-8"
/>
</span>
</HoppSmartSelectWrapper>
<template #content="{ hide }">
<div class="flex flex-col space-y-2">
<div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">

2
packages/hoppscotch-common/src/components/http/PreRequestScript.vue
View File

@@ -34,7 +34,7 @@
<div ref="preRequestEditor" class="h-full"></div>
</div>
<div
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.pre_request_script") }}

14
packages/hoppscotch-common/src/components/http/Request.vue
View File

@@ -3,7 +3,7 @@
class="sticky top-0 z-20 flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
>
<div
class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
class="min-w-[12rem] flex flex-1 whitespace-nowrap rounded border border-divider"
>
<div class="relative flex">
<label for="method">
@@ -13,7 +13,7 @@
theme="popover"
:on-shown="() => methodTippyActions.focus()"
>
<span class="select-wrapper">
<HoppSmartSelectWrapper>
<input
id="method"
class="flex w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
@@ -22,7 +22,7 @@
:placeholder="`${t('request.method')}`"
@input="onSelectMethod($event)"
/>
</span>
</HoppSmartSelectWrapper>
<template #content="{ hide }">
<div
ref="methodTippyActions"
@@ -34,6 +34,9 @@
v-for="(method, index) in methods"
:key="`method-${index}`"
:label="method"
:style="{
color: getMethodLabelColor(method),
}"
@click="
() => {
updateMethod(method)
@@ -67,7 +70,7 @@
'action.send'
)} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
class="min-w-20 flex-1 rounded-r-none"
class="min-w-[5rem] flex-1 rounded-r-none"
@click="!loading ? newSendRequest() : cancelRequest()"
/>
<span class="flex">
@@ -259,6 +262,7 @@ import { InterceptorService } from "~/services/interceptor.service"
import { HoppTab } from "~/services/tab"
import { HoppRESTDocument } from "~/helpers/rest/document"
import { RESTTabService } from "~/services/tab/rest"
import { getMethodLabelColor } from "~/helpers/rest/labelColoring"
const t = useI18n()
const interceptorService = useService(InterceptorService)
@@ -270,8 +274,8 @@ const methods = [
"PATCH",
"DELETE",
"HEAD",
"CONNECT",
"OPTIONS",
"CONNECT",
"TRACE",
"CUSTOM",
]

5
packages/hoppscotch-common/src/components/http/TabHead.vue
View File

@@ -8,12 +8,11 @@
@click.middle="emit('close-tab')"
>
<span
class="text-tiny font-semibold"
class="text-tiny font-semibold mr-2"
:style="{ color: getMethodLabelColorClassOf(tab.document.request) }"
>
{{ tab.document.request.method }}
</span>
<tippy
ref="options"
trigger="manual"
@@ -21,7 +20,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<span class="truncate px-2 leading-8">
<span class="truncate">
{{ tab.document.request.name }}
</span>
<template #content="{ hide }">

2
packages/hoppscotch-common/src/components/http/Tests.vue
View File

@@ -34,7 +34,7 @@
<div ref="testScriptEditor" class="h-full"></div>
</div>
<div
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.post_request_tests") }}

4
packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
View File

@@ -16,12 +16,12 @@
theme="popover"
:on-shown="() => authTippyActions.focus()"
>
<span class="select-wrapper">
<HoppSmartSelectWrapper>
<HoppButtonSecondary
:label="auth.addTo || t('state.none')"
class="ml-2 rounded-none pr-8"
/>
</span>
</HoppSmartSelectWrapper>
<template #content="{ hide }">
<div
ref="authTippyActions"