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/graphql/Authorization.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1">
<div class="flex flex-1 flex-col">
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("authorization.type") }}
</label>
<tippy
@@ -15,7 +15,7 @@
>
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="authName"
/>
</span>
@@ -171,7 +171,7 @@
</div>
</div>
<div
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.authorization") }}

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

@@ -21,19 +21,19 @@
</div>
<div
v-if="gqlField.description"
class="py-2 text-secondaryLight field-desc"
class="field-desc py-2 text-secondaryLight"
>
{{ gqlField.description }}
</div>
<div
v-if="gqlField.isDeprecated"
class="inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded field-deprecated"
class="field-deprecated my-1 inline-block rounded bg-yellow-200 px-2 py-1 text-black"
>
{{ t("state.deprecated") }}
</div>
<div v-if="fieldArgs.length > 0">
<h5 class="my-2">Arguments:</h5>
<div class="pl-4 border-l-2 border-divider">
<div class="border-l-2 border-divider pl-4">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span>
{{ field.name }}:
@@ -44,7 +44,7 @@
</span>
<div
v-if="field.description"
class="py-2 text-secondaryLight field-desc"
class="field-desc py-2 text-secondaryLight"
>
{{ field.description }}
</div>
@@ -84,7 +84,7 @@ export default defineComponent({
<style lang="scss" scoped>
.field-highlighted {
@apply border-accent border-b-2;
@apply border-b-2 border-accent;
}
.field-title {

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

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<label class="font-semibold text-secondaryLight">
{{ t("tab.headers") }}
@@ -42,7 +42,7 @@
/>
</div>
</div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
<div v-else>
<draggable
v-model="workingHeaders"
@@ -56,7 +56,7 @@
>
<template #item="{ element: header, index }">
<div
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
>
<span>
<HoppButtonSecondary
@@ -71,7 +71,7 @@
:icon="IconGripVertical"
class="cursor-auto text-primary hover:text-primary"
:class="{
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
index !== workingHeaders?.length - 1,
}"
tabindex="-1"
@@ -91,7 +91,7 @@
px-4
truncate
"
class="flex-1 !flex"
class="!flex flex-1"
@input="
updateHeader(index, {
id: header.id,
@@ -102,7 +102,7 @@
"
/>
<input
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('count.value', { count: index + 1 })}`"
:name="`value ${String(index)}`"
:value="header.value"

8
packages/hoppscotch-common/src/components/graphql/Query.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.query") }}
@@ -16,7 +16,7 @@
:title="`${t('request.stop')}`"
:label="`${t('request.stop')}`"
:icon="IconStop"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="unsubscribe()"
/>
@@ -31,7 +31,7 @@
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
:icon="IconPlay"
:disabled="!selectedOperation"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="runQuery(selectedOperation)"
/>
@@ -79,7 +79,7 @@
/>
</div>
</div>
<div ref="queryEditor" class="flex flex-col flex-1"></div>
<div ref="queryEditor" class="flex flex-1 flex-col"></div>
</template>
<script setup lang="ts">

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

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
>
<div class="inline-flex flex-1 space-x-2">
<input
@@ -9,7 +9,7 @@
type="url"
autocomplete="off"
spellcheck="false"
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="`${t('request.url')}`"
:disabled="connected"
@keyup.enter="onConnectClick"

2
packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col flex-1 h-full">
<div class="flex h-full flex-1 flex-col">
<HoppSmartTabs
v-model="selectedOptionTab"
styles="sticky top-0 bg-primary z-10 border-b-0"

12
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 v-if="response?.length === 1" class="flex flex-col flex-1">
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
<div v-if="response?.length === 1" class="flex flex-1 flex-col">
<div
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
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"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.title") }}
</label>
<div class="flex items-center">
@@ -33,11 +33,11 @@
/>
</div>
</div>
<div ref="schemaEditor" class="flex flex-col flex-1"></div>
<div ref="schemaEditor" class="flex flex-1 flex-col"></div>
</div>
<div
v-else-if="response && response?.length > 1"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<GraphqlSubscriptionLog :log="response" />
</div>

8
packages/hoppscotch-common/src/components/graphql/Sidebar.vue
View File

@@ -31,7 +31,7 @@
type="search"
autocomplete="off"
:placeholder="`${t('action.search')}`"
class="flex flex-1 p-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent p-4 py-2"
/>
<div class="flex">
<HoppButtonSecondary
@@ -112,9 +112,9 @@
<HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
<div
v-if="schemaString"
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
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"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("graphql.schema") }}
</label>
<div class="flex">
@@ -149,7 +149,7 @@
<div
v-if="schemaString"
ref="schemaEditor"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
></div>
<HoppSmartPlaceholder
v-else

6
packages/hoppscotch-common/src/components/graphql/SubscriptionLog.vue
View File

@@ -1,7 +1,7 @@
<template>
<div ref="container" class="flex flex-col flex-1">
<div ref="container" class="flex flex-1 flex-col">
<div
class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex flex-none items-center justify-between border-b border-dividerLight bg-primary pl-4"
>
<label for="log" class="py-2 font-semibold text-secondaryLight">
{{ "Subscription Log" }}
@@ -43,7 +43,7 @@
class="overflow-y-auto border-b border-dividerLight"
>
<div
class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
class="flex h-auto h-full flex-col divide-y divide-dividerLight border-r border-dividerLight"
>
<RealtimeLogEntry
v-for="(entry, index) in log"

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

@@ -2,7 +2,7 @@
<div
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
:title="tab.document.request.name"
class="truncate px-2 flex items-center"
class="flex items-center truncate px-2"
@dblclick="emit('open-rename-modal')"
@contextmenu.prevent="options?.tippy?.show()"
@click.middle="emit('close-tab')"
@@ -14,7 +14,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<span class="leading-8 px-2 truncate">
<span class="truncate px-2 leading-8">
{{ tab.document.request.name }}
</span>
<template #content="{ hide }">

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

@@ -6,7 +6,7 @@
<span v-else-if="isEnum" class="text-accent">enum </span>
{{ gqlType.name }}
</div>
<div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
<div v-if="gqlType.description" class="type-desc py-2 text-secondaryLight">
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
class="pl-4 border-l-2 border-divider"
class="border-l-2 border-divider pl-4"
/>
</div>
</div>
@@ -29,7 +29,7 @@
:key="`child-${index}`"
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
class="pl-4 border-l-2 border-divider"
class="border-l-2 border-divider pl-4"
/>
</div>
<div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
<GraphqlField
v-for="(field, index) in gqlType.getFields()"
:key="`field-${index}`"
class="pl-4 border-l-2 border-divider"
class="border-l-2 border-divider pl-4"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
<div
v-for="(value, index) in gqlType.getValues()"
:key="`value-${index}`"
class="pl-4 border-l-2 border-divider"
class="border-l-2 border-divider pl-4"
v-text="value.name"
></div>
</div>

8
packages/hoppscotch-common/src/components/graphql/Variable.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.variables") }}
@@ -16,7 +16,7 @@
:title="`${t('request.stop')}`"
:label="`${t('request.stop')}`"
:icon="IconStop"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="unsubscribe()"
/>
<HoppButtonSecondary
@@ -30,7 +30,7 @@
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
:icon="IconPlay"
:disabled="!selectedOperation"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="runQuery(selectedOperation)"
/>
<HoppButtonSecondary
@@ -67,7 +67,7 @@
/>
</div>
</div>
<div ref="variableEditor" class="flex flex-col flex-1"></div>
<div ref="variableEditor" class="flex flex-1 flex-col"></div>
</template>
<script setup lang="ts">