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

refactor: minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-12-31 18:39:31 +05:30
parent 4791590869
commit 80956fbd27
22 changed files with 103 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -147,7 +147,7 @@ a {
@apply shadow; @apply shadow;
@apply leading-body; @apply leading-body;
font-size: 88%; font-size: 86%;
kbd { kbd {
@apply hidden; @apply hidden;
@@ -232,7 +232,6 @@ button {
} }
.floating-input ~ label { .floating-input ~ label {
@apply font-medium;
@apply py-0.5; @apply py-0.5;
@apply px-2; @apply px-2;
@apply m-2; @apply m-2;
@@ -451,7 +450,6 @@ pre.ace_editor {
.shortcut-key { .shortcut-key {
@apply inline-flex; @apply inline-flex;
@apply font-sans; @apply font-sans;
@apply font-medium;
@apply text-tiny; @apply text-tiny;
@apply bg-divider; @apply bg-divider;
@apply rounded; @apply rounded;

22
packages/hoppscotch-app/components/app/Announcement.vue
View File

@@ -1,16 +1,14 @@
<template> <template>
<div class="bg-error flex justify-between"> <div
<span class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
class="flex py-2 px-4 transition justify-center text-tiny group relative items-center" >
> <i class="mr-2 material-icons">info_outline</i>
<i class="mr-2 material-icons">info_outline</i> <span class="text-secondaryDark">
<span class="text-secondaryDark"> <span class="md:hidden">
<span class="md:hidden"> {{ t("helpers.offline_short") }}
{{ t("helpers.offline_short") }} </span>
</span> <span class="hidden md:inline">
<span class="hidden md:inline"> {{ t("helpers.offline") }}
{{ t("helpers.offline") }}
</span>
</span> </span>
</span> </span>
</div> </div>

4
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -143,7 +143,7 @@
blank blank
@click.native="options.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<div class="flex opacity-50 py-2 px-4"> <div class="flex px-4 py-2 opacity-50">
{{ `${t("app.name")} ${t("app.version")}` }} {{ `${t("app.name")} ${t("app.version")}` }}
</div> </div>
</div> </div>
@@ -170,7 +170,7 @@
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT" @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/> />
<span <span
class="transform transition" class="transition transform"
:class="{ :class="{
'rotate-180': SIDEBAR_ON_LEFT, 'rotate-180': SIDEBAR_ON_LEFT,
}" }"

4
packages/hoppscotch-app/components/app/Fuse.vue
View File

@@ -11,9 +11,9 @@
/> />
<div <div
v-if="searchResults.length === 0" v-if="searchResults.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<i class="opacity-75 pb-2 material-icons">manage_search</i> <i class="pb-2 opacity-75 material-icons">manage_search</i>
<span class="my-2 text-center"> <span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ search }}" {{ t("state.nothing_found") }} "{{ search }}"
</span> </span>

12
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<header <header
class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between" class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
> >
<div class="space-x-2 inline-flex items-center"> <div class="inline-flex items-center space-x-2">
<ButtonSecondary <ButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark" class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
label="HOPPSCOTCH" label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
/> />
<AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" /> <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
</div> </div>
<div class="space-x-2 inline-flex items-center"> <div class="inline-flex items-center space-x-2">
<ButtonSecondary <ButtonSecondary
id="installPWA" id="installPWA"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -47,7 +47,7 @@
:label="t('header.login')" :label="t('header.login')"
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
<div v-else class="space-x-2 inline-flex items-center"> <div v-else class="inline-flex items-center space-x-2">
<ButtonPrimary <ButtonPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('team.invite_tooltip')" :title="t('team.invite_tooltip')"
@@ -85,8 +85,8 @@
svg="user" svg="user"
/> />
</template> </template>
<div class="flex text-tiny px-2 flex-col"> <div class="flex flex-col px-2 text-tiny">
<span class="inline-flex truncate font-semibold"> <span class="inline-flex font-semibold truncate">
{{ currentUser.displayName }} {{ currentUser.displayName }}
</span> </span>
<span class="inline-flex truncate text-secondaryLight"> <span class="inline-flex truncate text-secondaryLight">

4
packages/hoppscotch-app/components/app/Interceptor.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col space-y-4 p-4"> <div class="flex flex-col p-4 space-y-4">
<div class="flex flex-col"> <div class="flex flex-col">
<h2 class="inline-flex font-semibold text-secondaryDark pb-1"> <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
{{ t("settings.interceptor") }} {{ t("settings.interceptor") }}
</h2> </h2>
<p class="inline-flex text-tiny"> <p class="inline-flex text-tiny">

6
packages/hoppscotch-app/components/app/PowerSearch.vue
View File

@@ -15,7 +15,7 @@
autocomplete="off" autocomplete="off"
name="command" name="command"
:placeholder="`${t('app.type_a_command_search')}`" :placeholder="`${t('app.type_a_command_search')}`"
class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6" class="flex flex-shrink-0 p-6 text-base bg-transparent text-secondaryDark"
/> />
<div <div
class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar <sm:hidden" class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar <sm:hidden"
@@ -47,14 +47,14 @@
/> />
<div <div
v-else v-else
class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar" class="flex flex-col flex-1 space-y-4 overflow-auto divide-y divide-dividerLight hide-scrollbar"
> >
<div <div
v-for="(map, mapIndex) in mappings" v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="flex flex-col" class="flex flex-col"
> >
<h5 class="my-2 text-secondaryLight py-2 px-6"> <h5 class="px-6 py-2 my-2 text-secondaryLight">
{{ t(map.section) }} {{ t(map.section) }}
</h5> </h5>
<AppPowerSearchEntry <AppPowerSearchEntry

6
packages/hoppscotch-app/components/app/PowerSearchEntry.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<button <button
class="cursor-pointer flex flex-1 py-3 px-6 transition items-center search-entry focus:outline-none" class="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
:class="{ active: active }" :class="{ active: active }"
tabindex="-1" tabindex="-1"
@click="$emit('action', shortcut.action)" @click="$emit('action', shortcut.action)"
@keydown.enter="$emit('action', shortcut.action)" @keydown.enter="$emit('action', shortcut.action)"
> >
<SmartIcon <SmartIcon
class="mr-4 opacity-50 transition svg-icons" class="mr-4 transition opacity-50 svg-icons"
:class="{ 'opacity-100 text-secondaryDark': active }" :class="{ 'opacity-100 text-secondaryDark': active }"
:name="shortcut.icon" :name="shortcut.icon"
/> />
<span <span
class="flex font-medium flex-1 mr-4 transition" class="flex flex-1 mr-4 transition"
:class="{ 'text-secondaryDark': active }" :class="{ 'text-secondaryDark': active }"
> >
{{ t(shortcut.label) }} {{ t(shortcut.label) }}

10
packages/hoppscotch-app/components/app/Share.vue
View File

@@ -5,11 +5,11 @@
@close="hideModal" @close="hideModal"
> >
<template #body> <template #body>
<p class="text-secondaryLight mb-8 px-2"> <p class="px-2 mb-8 text-secondaryLight">
{{ t("app.invite_description") }} {{ t("app.invite_description") }}
</p> </p>
<div class="flex flex-col space-y-2 px-2"> <div class="flex flex-col px-2 space-y-2">
<div class="grid gap-4 grid-cols-3"> <div class="grid grid-cols-3 gap-4">
<a <a
v-for="(platform, index) in platforms" v-for="(platform, index) in platforms"
:key="`platform-${index}`" :key="`platform-${index}`"
@@ -17,13 +17,13 @@
target="_blank" target="_blank"
class="share-link" class="share-link"
> >
<SmartIcon :name="platform.icon" class="h-6 w-6" /> <SmartIcon :name="platform.icon" class="w-6 h-6" />
<span class="mt-3"> <span class="mt-3">
{{ platform.name }} {{ platform.name }}
</span> </span>
</a> </a>
<button class="share-link" @click="copyAppLink"> <button class="share-link" @click="copyAppLink">
<SmartIcon class="h-6 text-xl w-6" :name="copyIcon" /> <SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
<span class="mt-3"> <span class="mt-3">
{{ t("app.copy") }} {{ t("app.copy") }}
</span> </span>

20
packages/hoppscotch-app/components/app/Shortcuts.vue
View File

@@ -1,28 +1,28 @@
<template> <template>
<AppSlideOver :show="show" @close="close()"> <AppSlideOver :show="show" @close="close()">
<template #content> <template #content>
<div class="bg-primary flex flex-col top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex flex-col bg-primary">
<div <div
class="border-b border-dividerLight flex p-2 items-center justify-between" class="flex items-center justify-between p-2 border-b border-dividerLight"
> >
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3> <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<ButtonSecondary svg="x" @click.native="close()" /> <ButtonSecondary svg="x" @click.native="close()" />
</div> </div>
<div class="border-b border-dividerLight flex flex-col py-4 px-6"> <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
class="bg-primaryLight border border-dividerLight rounded flex py-2 px-4 focus-visible:border-divider" class="flex px-4 py-2 border rounded bg-primaryLight border-dividerLight focus-visible:border-divider"
:placeholder="`${t('action.search')}`" :placeholder="`${t('action.search')}`"
/> />
</div> </div>
</div> </div>
<div v-if="filterText" class="divide-dividerLight divide-y flex flex-col"> <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
<div <div
v-for="(map, mapIndex) in searchResults" v-for="(map, mapIndex) in searchResults"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6" class="px-6 py-4 space-y-4"
> >
<h1 class="font-semibold text-secondaryDark"> <h1 class="font-semibold text-secondaryDark">
{{ t(map.item.section) }} {{ t(map.item.section) }}
@@ -35,19 +35,19 @@
</div> </div>
<div <div
v-if="searchResults.length === 0" v-if="searchResults.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<i class="opacity-75 pb-2 material-icons">manage_search</i> <i class="pb-2 opacity-75 material-icons">manage_search</i>
<span class="my-2 text-center"> <span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ filterText }}" {{ t("state.nothing_found") }} "{{ filterText }}"
</span> </span>
</div> </div>
</div> </div>
<div v-else class="divide-dividerLight divide-y flex flex-col"> <div v-else class="flex flex-col divide-y divide-dividerLight">
<div <div
v-for="(map, mapIndex) in mappings" v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6" class="px-6 py-4 space-y-4"
> >
<h1 class="font-semibold text-secondaryDark"> <h1 class="font-semibold text-secondaryDark">
{{ t(map.section) }} {{ t(map.section) }}

2
packages/hoppscotch-app/components/app/ShortcutsEntry.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex py-1 items-center"> <div class="flex items-center py-1">
<span class="flex flex-1 mr-4"> <span class="flex flex-1 mr-4">
{{ t(shortcut.label) }} {{ t(shortcut.label) }}
</span> </span>

5
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<aside class="flex h-full justify-between md:flex-col"> <aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none"> <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
<NuxtLink <NuxtLink
v-for="(navigation, index) in primaryNavigation" v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`" :key="`navigation-${index}`"
@@ -100,7 +100,6 @@ const primaryNavigation = [
span { span {
@apply mt-2; @apply mt-2;
@apply font-medium;
@apply text-tiny; @apply text-tiny;
} }

6
packages/hoppscotch-app/components/app/SlideOver.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<transition v-if="show" name="fade" appear> <transition v-if="show" name="fade" appear>
<div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()"> <div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
<div <div
class="bg-primaryLight opacity-90 inset-0 absolute" class="absolute inset-0 bg-primaryLight opacity-90"
tabindex="0" tabindex="0"
@click="close()" @click="close()"
></div> ></div>
</div> </div>
</transition> </transition>
<aside <aside
class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto hide-scrollbar" class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform bg-primary w-96 hide-scrollbar"
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'" :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
> >
<slot name="content"></slot> <slot name="content"></slot>

2
packages/hoppscotch-app/components/button/Primary.vue
View File

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`" :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class="font-bold py-2 transition inline-flex items-center justify-center focus:outline-none focus-visible:bg-accentDark" class="inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
:class="[ :class="[
color color
? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)` ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`

2
packages/hoppscotch-app/components/button/Secondary.vue
View File

@@ -3,7 +3,7 @@
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`" :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap focus:outline-none" class="inline-flex items-center justify-center py-2 font-semibold transition whitespace-nowrap focus:outline-none"
:class="[ :class="[
color color
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600` ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`

4
packages/hoppscotch-app/components/history/graphql/Card.vue
View File

@@ -2,7 +2,7 @@
<div class="flex flex-col group"> <div class="flex flex-col group">
<div class="flex items-center"> <div class="flex items-center">
<span <span
class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 pl-4 transition group-hover:text-secondaryDark" class="flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="useEntry" @click="useEntry"
> >
@@ -46,7 +46,7 @@
<span <span
v-for="(line, index) in query" v-for="(line, index) in query"
:key="`line-${index}`" :key="`line-${index}`"
class="cursor-pointer font-mono text-secondaryLight px-4 truncate whitespace-pre" class="px-4 font-mono truncate whitespace-pre cursor-pointer text-secondaryLight"
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="useEntry" @click="useEntry"
>{{ line }}</span >{{ line }}</span

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

@@ -1,11 +1,11 @@
<template> <template>
<div> <div>
<div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky"> <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
class="bg-transparent flex w-full p-4 py-2" class="flex w-full p-4 py-2 bg-transparent"
:placeholder="`${t('action.search')}`" :placeholder="`${t('action.search')}`"
/> />
<div class="flex"> <div class="flex">
@@ -27,19 +27,32 @@
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div <details
v-for="(filteredHistoryGroup, filteredHistoryGroupIndex) in groupByDate( v-for="(filteredHistoryGroup, filteredHistoryGroupIndex) in groupByDate(
filteredHistory, filteredHistory,
'updatedOn' 'updatedOn'
)" )"
:key="`filteredHistoryGroup-${filteredHistoryGroupIndex}`" :key="`filteredHistoryGroup-${filteredHistoryGroupIndex}`"
class="flex flex-col" class="flex flex-col"
open
> >
<span <summary
class="ml-4 capitalize-first px-3 align-start my-2 py-1 text-secondaryLight bg-primaryLight truncate rounded-l-full flex-inline text-tiny" class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer text-secondaryLight text-tiny group"
> >
{{ filteredHistoryGroupIndex }} <span
</span> class="px-4 py-2 truncate transition group-hover:text-secondary capitalize-first"
>
{{ filteredHistoryGroupIndex }}
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
svg="trash"
color="red"
:title="$t('action.remove')"
class="hidden group-hover:inline-flex"
@click.native="deleteBattleHistoryEntry(filteredHistoryGroup)"
/>
</summary>
<div <div
v-for="(entry, index) in filteredHistoryGroup" v-for="(entry, index) in filteredHistoryGroup"
:key="`entry-${index}`" :key="`entry-${index}`"
@@ -54,28 +67,28 @@
@use-entry="useHistory(entry)" @use-entry="useHistory(entry)"
/> />
</div> </div>
</div> </details>
</div> </div>
<div <div
v-if="!(filteredHistory.length !== 0 || history.length === 0)" v-if="!(filteredHistory.length !== 0 || history.length === 0)"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<i class="opacity-75 pb-2 material-icons">manage_search</i> <i class="pb-2 opacity-75 material-icons">manage_search</i>
<span class="my-2 text-center"> <span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ filterText }}" {{ t("state.nothing_found") }} "{{ filterText }}"
</span> </span>
</div> </div>
<div <div
v-if="history.length === 0" v-if="history.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/history.svg`" :src="`/images/states/${$colorMode.value}/history.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.history')}`" :alt="`${t('empty.history')}`"
/> />
<span class="text-center mb-4"> <span class="mb-4 text-center">
{{ t("empty.history") }} {{ t("empty.history") }}
</span> </span>
</div> </div>
@@ -161,6 +174,19 @@ const useHistory = (entry: any) => {
if (props.page === "rest") setRESTRequest(entry.request) if (props.page === "rest") setRESTRequest(entry.request)
} }
const deleteBattleHistoryEntry = (entries: number[]) => {
if (props.page === "rest") {
entries.forEach((entry: any) => {
deleteRESTHistoryEntry(entry)
})
} else {
entries.forEach((entry: any) => {
deleteGraphqlHistoryEntry(entry)
})
}
toast.success(`${t("state.deleted")}`)
}
const deleteHistory = (entry: any) => { const deleteHistory = (entry: any) => {
if (props.page === "rest") deleteRESTHistoryEntry(entry) if (props.page === "rest") deleteRESTHistoryEntry(entry)
else deleteGraphqlHistoryEntry(entry) else deleteGraphqlHistoryEntry(entry)

4
packages/hoppscotch-app/components/history/rest/Card.vue
View File

@@ -2,7 +2,7 @@
<div class="flex items-stretch group"> <div class="flex items-stretch group">
<span <span
v-tippy="{ theme: 'tooltip', delay: [500, 20] }" v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
class="cursor-pointer flex px-2 w-16 items-center justify-center truncate" class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
:class="entryStatus.className" :class="entryStatus.className"
data-testid="restore_history_entry" data-testid="restore_history_entry"
:title="`${duration}`" :title="`${duration}`"
@@ -11,7 +11,7 @@
{{ entry.request.method }} {{ entry.request.method }}
</span> </span>
<span <span
class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark" class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="$emit('use-entry')" @click="$emit('use-entry')"
> >

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

@@ -1,9 +1,9 @@
<template> <template>
<div <div
class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky overflow-x-auto hide-scrollbar" class="sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
> >
<div class="flex flex-1"> <div class="flex flex-1">
<div class="flex relative"> <div class="relative flex">
<label for="method"> <label for="method">
<tippy <tippy
ref="methodOptions" ref="methodOptions"
@@ -16,7 +16,7 @@
<span class="select-wrapper"> <span class="select-wrapper">
<input <input
id="method" id="method"
class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark" class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:value="newMethod" :value="newMethod"
:readonly="!isCustomMethod" :readonly="!isCustomMethod"
:placeholder="`${t('request.method')}`" :placeholder="`${t('request.method')}`"
@@ -59,7 +59,7 @@
<div class="flex"> <div class="flex">
<ButtonPrimary <ButtonPrimary
id="send" id="send"
class="rounded-r-none flex-1 min-w-20" class="flex-1 rounded-r-none min-w-20"
:label="`${!loading ? t('action.send') : t('action.cancel')}`" :label="`${!loading ? t('action.send') : t('action.cancel')}`"
@click.native="!loading ? newSendRequest() : cancelRequest()" @click.native="!loading ? newSendRequest() : cancelRequest()"
/> />
@@ -124,7 +124,7 @@
</tippy> </tippy>
</span> </span>
<ButtonSecondary <ButtonSecondary
class="rounded rounded-r-none ml-2" class="ml-2 rounded rounded-r-none"
:label=" :label="
windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
? `${t('request.save')}` ? `${t('request.save')}`

1
packages/hoppscotch-app/components/smart/EnvInput.vue
View File

@@ -484,7 +484,6 @@ export default defineComponent({
[contenteditable] { [contenteditable] {
@apply select-text; @apply select-text;
@apply text-secondaryDark; @apply text-secondaryDark;
@apply font-medium;
&:empty { &:empty {
@apply leading-loose; @apply leading-loose;

1
packages/hoppscotch-app/components/smart/Intersection.vue
View File

@@ -3,6 +3,7 @@
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
/* /*
Implements a wrapper listening to viewport intersections via Implements a wrapper listening to viewport intersections via

7
packages/hoppscotch-app/components/smart/Item.vue
View File

@@ -50,10 +50,7 @@
<div class="font-semibold truncate"> <div class="font-semibold truncate">
{{ label }} {{ label }}
</div> </div>
<p <p v-if="description" class="my-2 text-left text-secondaryLight">
v-if="description"
class="font-medium my-2 text-left text-secondaryLight"
>
{{ description }} {{ description }}
</p> </p>
</div> </div>
@@ -64,7 +61,7 @@
> >
{{ infoIcon }} {{ infoIcon }}
</i> </i>
<div v-if="shortcut.length" class="ml-2 <sm:hidden"> <div v-if="shortcut.length" class="ml-2 <sm:hidden font-medium">
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"