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

18
packages/hoppscotch-common/src/components/environments/Add.vue
View File

@@ -5,9 +5,9 @@
@close="hideModal"
>
<template #body>
<div class="flex space-y-4 flex-1 flex-col">
<div class="flex items-center space-x-8 ml-2">
<label for="name" class="font-semibold min-w-10">{{
<div class="flex flex-1 flex-col space-y-4">
<div class="ml-2 flex items-center space-x-8">
<label for="name" class="min-w-10 font-semibold">{{
t("environment.name")
}}</label>
<input
@@ -17,8 +17,8 @@
class="input"
/>
</div>
<div class="flex items-center space-x-8 ml-2">
<label for="value" class="font-semibold min-w-10">{{
<div class="ml-2 flex items-center space-x-8">
<label for="value" class="min-w-10 font-semibold">{{
t("environment.value")
}}</label>
<input
@@ -28,17 +28,17 @@
:placeholder="t('environment.value')"
/>
</div>
<div class="flex items-center space-x-8 ml-2">
<label for="scope" class="font-semibold min-w-10">
<div class="ml-2 flex items-center space-x-8">
<label for="scope" class="min-w-10 font-semibold">
{{ t("environment.scope") }}
</label>
<div
class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
class="relative flex flex-1 flex-col rounded border border-divider focus-visible:border-dividerDark"
>
<EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
</div>
</div>
<div v-if="replaceWithVariable" class="flex space-x-2 mt-3">
<div v-if="replaceWithVariable" class="mt-3 flex space-x-2">
<div class="min-w-18" />
<HoppSmartCheckbox
:on="replaceWithVariable"

34
packages/hoppscotch-common/src/components/environments/Selector.vue
View File

@@ -20,7 +20,7 @@
: `${t('environment.select')}`
: ''
"
class="flex-1 !justify-start pr-8 rounded-none"
class="flex-1 !justify-start rounded-none pr-8"
/>
</span>
<template #content="{ hide }">
@@ -101,7 +101,7 @@
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-2 text-center">
@@ -148,7 +148,7 @@
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-2 text-center">
@@ -160,7 +160,7 @@
v-if="!teamListLoading && teamAdapterError"
class="flex flex-col items-center py-4"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ getErrorMessage(teamAdapterError) }}
</div>
</HoppSmartTab>
@@ -190,7 +190,7 @@
@keyup.escape="hide()"
>
<div
class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
class="sticky top-0 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
>
{{ t("environment.global_variables") }}
<HoppButtonSecondary
@@ -205,12 +205,12 @@
"
/>
</div>
<div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
<div class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
<div class="flex flex-1 space-x-4">
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
{{ t("environment.name") }}
</span>
<span class="w-full min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-full truncate text-tiny font-semibold">
{{ t("environment.value") }}
</span>
</div>
@@ -219,10 +219,10 @@
:key="index"
class="flex flex-1 space-x-4"
>
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
<span class="min-w-32 w-1/4 truncate text-secondaryLight">
{{ variable.key }}
</span>
<span class="text-secondaryLight w-full min-w-32 truncate">
<span class="min-w-32 w-full truncate text-secondaryLight">
{{ variable.value }}
</span>
</div>
@@ -231,7 +231,7 @@
</div>
</div>
<div
class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
class="sticky top-0 mt-2 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
:class="{
'bg-primaryLight': !selectedEnv.variables,
}"
@@ -252,16 +252,16 @@
</div>
<div
v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
class="text-secondaryLight my-2 flex flex-col flex-1 pl-4"
class="my-2 flex flex-1 flex-col pl-4 text-secondaryLight"
>
{{ t("environment.no_active_environment") }}
</div>
<div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
<div v-else class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
<div class="flex flex-1 space-x-4">
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
{{ t("environment.name") }}
</span>
<span class="w-full min-w-32 truncate text-tiny font-semibold">
<span class="min-w-32 w-full truncate text-tiny font-semibold">
{{ t("environment.value") }}
</span>
</div>
@@ -270,10 +270,10 @@
:key="index"
class="flex flex-1 space-x-4"
>
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
<span class="min-w-32 w-1/4 truncate text-secondaryLight">
{{ variable.key }}
</span>
<span class="text-secondaryLight w-full min-w-32 truncate">
<span class="min-w-32 w-full truncate text-secondaryLight">
{{ variable.value }}
</span>
</div>

2
packages/hoppscotch-common/src/components/environments/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
>
<WorkspaceCurrent :section="t('tab.environments')" />
<EnvironmentsMyEnvironment

8
packages/hoppscotch-common/src/components/environments/my/Details.vue
View File

@@ -16,7 +16,7 @@
@submit="saveEnvironment"
/>
<div class="flex items-center justify-between flex-1">
<div class="flex flex-1 items-center justify-between">
<label for="variableList" class="p-4">
{{ t("environment.variable_list") }}
</label>
@@ -37,11 +37,11 @@
</div>
<div
v-if="evnExpandError"
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
>
{{ t("environment.nested_overflow") }}
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div class="divide-y divide-dividerLight rounded border border-divider">
<div
v-for="({ id, env }, index) in vars"
:key="`variable-${id}-${index}`"
@@ -50,7 +50,7 @@
<input
v-model="env.key"
v-focus
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('count.variable', { count: index + 1 })}`"
:name="'param' + index"
/>

8
packages/hoppscotch-common/src/components/environments/my/Environment.vue
View File

@@ -1,24 +1,24 @@
<template>
<div
class="flex items-stretch group"
class="group flex items-stretch"
@contextmenu.prevent="options!.tippy.show()"
>
<span
v-if="environmentIndex === 'Global'"
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="emit('edit-environment')"
>
<icon-lucide-globe class="svg-icons" />
</span>
<span
v-else
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="emit('edit-environment')"
>
<icon-lucide-layers class="svg-icons" />
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="emit('edit-environment')"
>
<span class="truncate">

6
packages/hoppscotch-common/src/components/environments/my/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
>
<HoppButtonSecondary
:icon="IconPlus"
@@ -39,10 +39,10 @@
:text="t('empty.environments')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("environment.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"

8
packages/hoppscotch-common/src/components/environments/teams/Details.vue
View File

@@ -16,7 +16,7 @@
@submit="saveEnvironment"
/>
<div class="flex items-center justify-between flex-1">
<div class="flex flex-1 items-center justify-between">
<label for="variableList" class="p-4">
{{ t("environment.variable_list") }}
</label>
@@ -37,11 +37,11 @@
</div>
<div
v-if="evnExpandError"
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
>
{{ t("environment.nested_overflow") }}
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div class="divide-y divide-dividerLight rounded border border-divider">
<div
v-for="({ id, env }, index) in vars"
:key="`variable-${id}-${index}`"
@@ -50,7 +50,7 @@
<input
v-model="env.key"
v-focus
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:class="isViewer && 'opacity-25'"
:placeholder="`${t('count.variable', { count: index + 1 })}`"
:name="'param' + index"

6
packages/hoppscotch-common/src/components/environments/teams/Environment.vue
View File

@@ -1,16 +1,16 @@
<template>
<div
class="flex items-stretch group"
class="group flex items-stretch"
@contextmenu.prevent="options!.tippy.show()"
>
<span
class="flex items-center justify-center px-4 cursor-pointer"
class="flex cursor-pointer items-center justify-center px-4"
@click="emit('edit-environment')"
>
<icon-lucide-layers class="svg-icons" />
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="emit('edit-environment')"
>
<span class="truncate">

8
packages/hoppscotch-common/src/components/environments/teams/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
>
<HoppButtonSecondary
v-if="team === undefined || team.myRole === 'VIEWER'"
@@ -50,10 +50,10 @@
:text="t('empty.environments')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("environment.import_or_create") }}
</span>
<div class="flex gap-4 flex-col items-stretch">
<div class="flex flex-col items-stretch gap-4">
<HoppButtonPrimary
:icon="IconImport"
:label="t('import.title')"
@@ -94,7 +94,7 @@
v-if="!loading && adapterError"
class="flex flex-col items-center py-4"
>
<icon-lucide-help-circle class="mb-4 svg-icons" />
<icon-lucide-help-circle class="svg-icons mb-4" />
{{ getErrorMessage(adapterError) }}
</div>
<EnvironmentsTeamsDetails