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

feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Anwarul Islam
2023-11-01 21:25:08 +06:00
committed by GitHub
parent 59b5a50a97
commit a215860782
174 changed files with 6921 additions and 5185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.header_list") }}
</label>
<div class="flex">

12
packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue
View File

@@ -1,25 +1,25 @@
<template>
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight group"
class="group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span
class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 px-4 py-2 transition group-hover:text-secondaryDark"
>
<span class="truncate rounded-sm select-all">
<span class="select-all truncate rounded-sm">
{{ header.key }}
</span>
</span>
<span
class="flex justify-between flex-1 min-w-0 py-2 pl-4 transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 justify-between py-2 pl-4 transition group-hover:text-secondaryDark"
>
<span class="truncate rounded-sm select-all">
<span class="select-all truncate rounded-sm">
{{ header.value }}
</span>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.copy')"
:icon="copyIcon"
class="hidden group-hover:inline-flex !py-0"
class="hidden !py-0 group-hover:inline-flex"
@click="copyHeader(header.value)"
/>
</span>

6
packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
View File

@@ -9,7 +9,7 @@
:id="lens.renderer"
:key="`lens-${index}`"
:label="t(lens.lensName)"
class="flex flex-col flex-1 w-full h-full"
class="flex h-full w-full flex-1 flex-col"
>
<component
:is="lensRendererFor(lens.renderer)"
@@ -21,7 +21,7 @@
id="headers"
:label="t('response.headers')"
:info="`${maybeHeaders.length}`"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<LensesHeadersRenderer :headers="maybeHeaders" />
</HoppSmartTab>
@@ -29,7 +29,7 @@
id="results"
:label="t('test.results')"
:indicator="showIndicator"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<HttpTestResult v-model="doc.testResults" />
</HoppSmartTab>

6
packages/hoppscotch-common/src/components/lenses/renderers/AudioLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">

10
packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
@@ -47,7 +47,7 @@
<div
v-show="!previewEnabled"
ref="htmlResponse"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
></div>
<iframe
v-show="previewEnabled"
@@ -124,6 +124,6 @@ defineActionHandler("response.copy", () => copyResponse())
@apply w-full;
@apply border;
@apply border-dividerLight;
@apply z-5;
@apply z-10;
}
</style>

6
packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">

26
packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,12 +1,12 @@
<template>
<div
v-if="response.type === 'success' || response.type === 'fail'"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex items-center">
@@ -48,13 +48,13 @@
</div>
<div
v-if="toggleFilter"
class="sticky z-10 flex flex-shrink-0 overflow-x-auto border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
class="sticky top-lowerTertiaryStickyFold z-10 flex flex-shrink-0 overflow-x-auto border-b border-dividerLight bg-primary"
>
<div
class="inline-flex items-center flex-1 bg-primaryLight border-divider text-secondaryDark"
class="inline-flex flex-1 items-center border-divider bg-primaryLight text-secondaryDark"
>
<span class="inline-flex items-center flex-1 px-4">
<icon-lucide-search class="w-4 h-4 text-secondaryLight" />
<span class="inline-flex flex-1 items-center px-4">
<icon-lucide-search class="h-4 w-4 text-secondaryLight" />
<input
v-model="filterQueryText"
v-focus
@@ -65,7 +65,7 @@
</span>
<div
v-if="filterResponseError"
class="flex items-center justify-center px-2 py-1 rounded text-tiny text-accentContrast"
class="flex items-center justify-center rounded px-2 py-1 text-tiny text-accentContrast"
:class="{
'bg-red-500':
filterResponseError.type === 'JSON_PARSE_FAILED' ||
@@ -88,12 +88,12 @@
</div>
<div
ref="jsonResponse"
class="flex flex-col flex-1 h-auto h-full"
class="flex h-auto h-full flex-1 flex-col"
:class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
></div>
<div
v-if="outlinePath"
class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
class="sticky bottom-0 z-10 flex flex-shrink-0 flex-nowrap overflow-auto overflow-x-auto border-t border-dividerLight bg-primaryLight px-2"
>
<div
v-for="(item, index) in outlinePath"
@@ -191,7 +191,7 @@
</tippy>
<icon-lucide-chevron-right
v-if="index + 1 !== outlinePath.length"
class="opacity-50 text-secondaryLight svg-icons"
class="svg-icons text-secondaryLight opacity-50"
/>
</div>
</div>
@@ -376,14 +376,14 @@ defineActionHandler("response.copy", () => copyResponse())
<style lang="scss" scoped>
.outline-item {
@apply cursor-pointer;
@apply flex-grow-0 flex-shrink-0;
@apply flex-shrink-0 flex-grow-0;
@apply text-secondaryLight;
@apply inline-flex;
@apply items-center;
@apply px-2;
@apply py-1;
@apply transition;
@apply hover: text-secondary;
@apply hover:text-secondary;
}
:deep(.responseToggleOff .cm-panels) {

6
packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">

8
packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
@@ -35,7 +35,7 @@
/>
</div>
</div>
<div ref="rawResponse" class="flex flex-col flex-1"></div>
<div ref="rawResponse" class="flex flex-1 flex-col"></div>
</div>
</template>

6
packages/hoppscotch-common/src/components/lenses/renderers/VideoLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">

8
packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
@@ -35,7 +35,7 @@
/>
</div>
</div>
<div ref="xmlResponse" class="flex flex-col flex-1"></div>
<div ref="xmlResponse" class="flex flex-1 flex-col"></div>
</div>
</template>