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/realtime/Communication.vue
View File

@@ -1,18 +1,18 @@
<template>
<div
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
:class="{ eventFeildShown: showEventField }"
>
<div
v-if="showEventField"
class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
class="sticky z-10 flex flex-shrink-0 items-center justify-center overflow-x-auto border-b border-dividerLight bg-primary"
:class="eventFieldStyles"
>
<icon-lucide-rss class="mx-4 svg-icons text-accentLight" />
<icon-lucide-rss class="svg-icons mx-4 text-accentLight" />
<input
id="event_name"
v-model="eventName"
class="w-full py-2 pr-4 truncate bg-primary"
class="w-full truncate bg-primary py-2 pr-4"
name="event_name"
:placeholder="`${t('socketio.event_name')}`"
type="text"
@@ -20,11 +20,11 @@
/>
</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"
class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
:class="stickyHeaderStyles"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("websocket.message") }}
</label>
<tippy
@@ -36,7 +36,7 @@
<span class="select-wrapper">
<HoppButtonSecondary
:label="contentType || t('state.none').toLowerCase()"
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
/>
</span>
<template #content="{ hide }">
@@ -74,7 +74,7 @@
:label="`${t('action.send')}`"
:disabled="!communicationBody || !isConnected"
:icon="IconSend"
class="rounded-none !text-accent !hover:text-accentDark"
class="!hover:text-accentDark rounded-none !text-accent"
@click="sendMessage()"
/>
<HoppSmartCheckbox
@@ -130,7 +130,7 @@
/>
</div>
</div>
<div ref="wsCommunicationBody" class="flex flex-col flex-1"></div>
<div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
</div>
</template>
<script setup lang="ts">

14
packages/hoppscotch-common/src/components/realtime/ConnectionConfig.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 z-10 flex items-center justify-between flex-shrink-0 py-2 pl-4 pr-2 overflow-x-auto border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
class="sticky top-upperPrimaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary py-2 pl-4 pr-2"
>
<span class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("mqtt.connection_config") }}
</label>
</span>
@@ -17,7 +17,7 @@
</HoppSmartCheckbox>
</div>
</div>
<div class="flex flex-1 h-full border-dividerLight">
<div class="flex h-full flex-1 border-dividerLight">
<div class="w-1/3 border-r border-dividerLight">
<div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput
@@ -55,16 +55,16 @@
/>
</div>
<div
class="flex items-center justify-between px-4 border-b border-dividerLight"
class="flex items-center justify-between border-b border-dividerLight px-4"
>
<div class="flex items-center">
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("mqtt.lw_qos") }}
</label>
<tippy interactive trigger="click" theme="popover">
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="`${config.lwQos}`"
/>
</span>

8
packages/hoppscotch-common/src/components/realtime/Log.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
<div
v-if="log.length !== 0"
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 for="log" class="font-semibold truncate text-secondaryLight">
<label for="log" class="truncate font-semibold text-secondaryLight">
{{ title }}
</label>
<div class="flex">
@@ -43,7 +43,7 @@
<div
v-if="log.length !== 0"
ref="logs"
class="flex flex-col flex-1 overflow-y-auto"
class="flex flex-1 flex-col overflow-y-auto"
>
<div class="border-b border-dividerLight">
<div class="flex flex-col divide-y divide-dividerLight">

20
packages/hoppscotch-common/src/components/realtime/LogEntry.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="entry" class="divide-y divide-dividerLight">
<div :style="{ color: entryColor }" class="realtime-log">
<div class="flex group">
<div class="group flex">
<div class="flex flex-1 divide-x divide-dividerLight">
<div class="inline-flex items-center p-2">
<component
@@ -12,18 +12,18 @@
</div>
<div
v-if="entry.ts !== undefined"
class="items-center hidden px-1 w-34 sm:inline-flex"
class="w-34 hidden items-center px-1 sm:inline-flex"
>
<span
v-tippy="{ theme: 'tooltip' }"
:title="relativeTime"
class="mx-auto truncate text-tiny text-secondaryLight hover:text-secondary hover:text-center"
class="mx-auto truncate text-tiny text-secondaryLight hover:text-center hover:text-secondary"
>
{{ shortDateTime(entry.ts) }}
</span>
</div>
<div
class="inline-grid items-center flex-1 min-w-0 p-2"
class="inline-grid min-w-0 flex-1 items-center p-2"
@click="toggleExpandPayload()"
>
<div class="truncate">
@@ -59,9 +59,9 @@
<HoppSmartTab id="raw" label="Raw" />
</HoppSmartTabs>
<div
class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
class="top-lowerSecondaryStickyFold z-10 flex items-center justify-between border-b border-dividerLight pl-4"
>
<label class="font-semibold truncate text-secondaryLight">
<label class="truncate font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
@@ -89,7 +89,7 @@
<div ref="editor"></div>
<div
v-if="outlinePath && selectedTab === 'json'"
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"
@@ -189,7 +189,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>
@@ -397,13 +397,13 @@ const icon = computed(() => markRaw(ICONS[props.entry.source].icon))
.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;
}
</style>

10
packages/hoppscotch-common/src/components/realtime/Subscription.vue
View File

@@ -1,9 +1,9 @@
<template>
<HoppSmartModal v-if="show" dialog :title="t('mqtt.new')" @close="hideModal">
<template #body>
<div class="flex justify-between mb-4">
<div class="mb-4 flex justify-between">
<div
class="flex items-center border divide-x rounded border-divider divide-divider"
class="flex items-center divide-x divide-divider rounded border border-divider"
>
<label class="mx-4">
{{ t("mqtt.qos") }}
@@ -51,17 +51,17 @@
v-tippy="{ theme: 'tooltip' }"
:title="t('mqtt.color')"
for="select-color"
class="absolute inset-0 flex items-center justify-center group hover:cursor-pointer"
class="group absolute inset-0 flex items-center justify-center hover:cursor-pointer"
>
<icon-lucide-brush
class="transition opacity-80 svg-icons group-hover:opacity-100 text-accentContrast"
class="svg-icons text-accentContrast opacity-80 transition group-hover:opacity-100"
/>
</label>
<input
id="select-color"
v-model="color"
type="color"
class="w-8 h-8 p-1 rounded bg-primary color-picker"
class="color-picker h-8 w-8 rounded bg-primary p-1"
/>
</span>
</div>