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

10
packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-stretch group"
class="group flex items-stretch"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -11,7 +11,7 @@
@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="toggleShowChildren()"
>
<component
@@ -21,7 +21,7 @@
/>
</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="toggleShowChildren()"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -136,10 +136,10 @@
</div>
<div v-if="showChildren || isFiltered" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<div class="flex flex-1 flex-col truncate">
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${String(index)}`"

10
packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-stretch group"
class="group flex items-stretch"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -11,7 +11,7 @@
@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="toggleShowChildren()"
>
<component
@@ -21,7 +21,7 @@
/>
</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="toggleShowChildren()"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -128,10 +128,10 @@
</div>
<div v-if="showChildren || isFiltered" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<div class="flex flex-1 flex-col truncate">
<!-- Referring to this component only (this is recursive) -->
<Folder
v-for="(subFolder, subFolderIndex) in folder.folders"

12
packages/hoppscotch-common/src/components/collections/graphql/Request.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-stretch group"
class="group flex items-stretch"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -10,7 +10,7 @@
@contextmenu.prevent="options.tippy.show()"
>
<span
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
@click="selectRequest()"
>
<component
@@ -20,7 +20,7 @@
/>
</span>
<span
class="flex items-center 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 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
@click="selectRequest()"
>
<span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -29,15 +29,15 @@
<span
v-if="isActive"
v-tippy="{ theme: 'tooltip' }"
class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
:title="`${t('collection.request_in_use')}`"
>
<span
class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
>
</span>
<span
class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
></span>
</span>
</span>

12
packages/hoppscotch-common/src/components/collections/graphql/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="{ 'rounded border border-divider': saveRequest }">
<div
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto rounded-t bg-primary"
:style="
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
"
@@ -11,10 +11,10 @@
type="search"
autocomplete="off"
:placeholder="t('action.search')"
class="py-2 pl-4 pr-2 bg-transparent !border-0"
class="!border-0 bg-transparent py-2 pl-4 pr-2"
/>
<div
class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
>
<HoppButtonSecondary
:icon="IconPlus"
@@ -67,10 +67,10 @@
:text="t('empty.collections')"
>
<div class="flex flex-col items-center space-y-4">
<span class="text-secondaryLight text-center">
<span class="text-center text-secondaryLight">
{{ t("collection.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')"
@@ -93,7 +93,7 @@
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
</template>
</HoppSmartPlaceholder>
<CollectionsGraphqlAdd