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

fix: minor ui improvements (#3603)

Browse Source
This commit is contained in:
Liyas Thomas
2023-11-29 22:45:40 +05:30
committed by GitHub
parent 60bfb6fe2c
commit 1cc845e17d
9 changed files with 37 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/hoppscotch-common/locales/en.json
View File

@@ -497,7 +497,8 @@
"enter_curl": "Enter cURL command",
"generate_code": "Generate code",
"generated_code": "Generated code",
"go_to_authorization_tab": "Go to Authorization",
"go_to_authorization_tab": "Go to Authorization tab",
"go_to_body_tab": "Go to Body tab",
"header_list": "Header List",
"invalid_name": "Please provide a name for the request",
"method": "Method",

4
packages/hoppscotch-common/src/components/graphql/Headers.vue
View File

@@ -69,9 +69,9 @@
: null,
}"
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
class="opacity-0"
:class="{
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
'draggable-handle cursor-grab group-hover:opacity-100':
index !== workingHeaders?.length - 1,
}"
tabindex="-1"

4
packages/hoppscotch-common/src/components/graphql/Response.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
<div
v-if="
response && response.length === 1 && response[0].type === 'response'
"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<div
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"

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

@@ -54,9 +54,9 @@
: null,
}"
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
class="opacity-0"
:class="{
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
'draggable-handle cursor-grab group-hover:opacity-100':
index !== workingParams?.length - 1,
}"
tabindex="-1"
@@ -75,7 +75,7 @@
"
/>
<div v-if="entry.isFile" class="file-chips-container">
<div class="file-chips-wrapper space-x-2">
<div class="file-chips-wrapper space-x-1">
<HoppSmartFileChip
v-for="(file, fileIndex) in entry.value"
:key="`param-${index}-file-${fileIndex}`"

23
packages/hoppscotch-common/src/components/http/Headers.vue
View File

@@ -71,9 +71,9 @@
: null,
}"
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
class="opacity-0"
:class="{
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
'draggable-handle cursor-grab group-hover:opacity-100':
index !== workingHeaders?.length - 1,
}"
tabindex="-1"
@@ -190,19 +190,13 @@
:icon="masking ? IconEye : IconEyeOff"
@click="toggleMask()"
/>
<HoppButtonSecondary
v-else
v-tippy="{ theme: 'tooltip' }"
:icon="IconArrowUpRight"
:title="t('request.go_to_authorization_tab')"
class="cursor-auto text-primary hover:text-primary"
/>
<div v-else class="aspect-square w-8"></div>
</span>
<span>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconArrowUpRight"
:title="t('request.go_to_authorization_tab')"
:title="changeTabTooltip(header.source)"
@click="changeTab(header.source)"
/>
</span>
@@ -510,6 +504,15 @@ const mask = (header: ComputedHeader) => {
return header.header.value
}
const changeTabTooltip = (tab: ComputedHeader["source"]) => {
switch (tab) {
case "auth":
return t("request.go_to_authorization_tab")
case "body":
return t("request.go_to_body_tab")
}
}
const changeTab = (tab: ComputedHeader["source"]) => {
if (tab === "auth") emit("change-tab", "authorization")
else emit("change-tab", "bodyParams")

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

@@ -71,9 +71,9 @@
: null,
}"
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
class="opacity-0"
:class="{
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
'draggable-handle cursor-grab group-hover:opacity-100':
index !== workingParams?.length - 1,
}"
tabindex="-1"

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

@@ -71,9 +71,9 @@
: null,
}"
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
class="opacity-0"
:class="{
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
'draggable-handle cursor-grab group-hover:opacity-100':
index !== workingUrlEncodedParams?.length - 1,
}"
tabindex="-1"

4
packages/hoppscotch-common/src/pages/realtime/websocket.vue
View File

@@ -98,9 +98,9 @@
: null,
}"
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
class="opacity-0"
:class="{
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
'draggable-handle cursor-grab group-hover:opacity-100':
index !== protocols?.length - 1,
}"
tabindex="-1"

12
packages/hoppscotch-ui/src/components/smart/FileChip.vue
View File

@@ -1,6 +1,12 @@
<template>
<span class="inline-flex items-center justify-center rounded pl-2 pr-0.5 bg-primaryDark">
<icon-lucide-file class="opacity-75 svg-icons" />
<span class="px-2 truncate max-w-54"><slot></slot></span>
<span
class="inline-flex items-center space-x-1 justify-center rounded px-2 bg-primaryDark"
>
<IconLucideFile class="opacity-75 svg-icons" />
<span class="truncate max-w-54"><slot></slot></span>
</span>
</template>
<script setup lang="ts">
import IconLucideFile from "~icons/lucide/file"
</script>