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

24
packages/hoppscotch-common/src/pages/realtime/mqtt.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="mqtt">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto 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">
<div class="flex flex-1">
@@ -12,7 +12,7 @@
type="url"
autocomplete="off"
:class="{ error: !isUrlValid }"
class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-l border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="`${t('mqtt.url')}`"
:disabled="
connectionState === 'CONNECTED' ||
@@ -22,14 +22,14 @@
/>
<label
for="client-id"
class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
class="truncate border-b border-t border-divider bg-primaryLight px-4 py-2 font-semibold text-secondaryLight"
>
{{ t("mqtt.client_id") }}
</label>
<input
id="client-id"
v-model="clientID"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-r border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
spellcheck="false"
:disabled="
connectionState === 'CONNECTED' ||
@@ -56,7 +56,7 @@
</div>
<div
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
:class="{ '!hidden': connectionState === 'CONNECTED' }"
>
<RealtimeConnectionConfig @change="onChangeConfig" />
@@ -103,7 +103,7 @@
:style="{
color: tab.color,
}"
class="w-4 h-4 svg-icons"
class="svg-icons h-4 w-4"
/>
</template>
<RealtimeLog
@@ -116,9 +116,9 @@
</template>
<template #sidebar>
<div
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
class="sticky z-10 flex flex-shrink-0 flex-col divide-y divide-dividerLight overflow-x-auto rounded-t border-b border-dividerLight bg-primary"
>
<div class="flex justify-between flex-1">
<div class="flex flex-1 justify-between">
<HoppButtonSecondary
:icon="IconPlus"
:label="t('mqtt.new')"
@@ -155,17 +155,17 @@
:key="`subscription-${index}`"
class="flex flex-col"
>
<div class="flex items-stretch group">
<span class="flex items-center justify-center px-4 cursor-pointer">
<div class="group flex items-stretch">
<span class="flex cursor-pointer items-center justify-center px-4">
<icon-lucide-rss
:style="{
color: topic.color,
}"
class="w-4 h-4 svg-icons"
class="svg-icons h-4 w-4"
/>
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
@click="openTopicAsTab(topic)"
>
<span class="truncate">

16
packages/hoppscotch-common/src/pages/realtime/socketio.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="socketio">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto 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">
<div class="flex flex-1">
@@ -18,7 +18,7 @@
id="client-version"
v-tippy="{ theme: 'tooltip' }"
title="socket.io-client version"
class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26"
class="flex w-26 cursor-pointer rounded-l border border-divider bg-primaryLight px-4 py-2 font-semibold text-secondaryDark"
:value="`Client ${clientVersion}`"
readonly
:disabled="
@@ -56,7 +56,7 @@
autocomplete="off"
spellcheck="false"
:class="{ error: !isUrlValid }"
class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="`${t('socketio.url')}`"
:disabled="
connectionState === 'CONNECTED' ||
@@ -67,7 +67,7 @@
<input
id="socketio-path"
v-model="path"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-r border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
spellcheck="false"
:disabled="
connectionState === 'CONNECTED' ||
@@ -117,10 +117,10 @@
:label="`${t('request.authorization')}`"
>
<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-upperSecondaryStickyFold"
class="sticky top-upperSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b 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
@@ -131,7 +131,7 @@
>
<span class="select-wrapper">
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
class="ml-2 rounded-none pr-8"
:label="authType"
/>
</span>
@@ -216,7 +216,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="p-2">
<div class="pb-2 text-secondaryLight">

8
packages/hoppscotch-common/src/pages/realtime/sse.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="sse">
<template #primary>
<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">
<div class="flex flex-1">
@@ -12,7 +12,7 @@
type="url"
autocomplete="off"
:class="{ error: !isUrlValid }"
class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-l border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
:placeholder="t('sse.url')"
:disabled="
connectionState === 'STARTED' || connectionState === 'STARTING'
@@ -21,14 +21,14 @@
/>
<label
for="event-type"
class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
class="truncate border-b border-t border-divider bg-primaryLight px-4 py-2 font-semibold text-secondaryLight"
>
{{ t("sse.event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
class="flex w-full flex-1 rounded-r border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
spellcheck="false"
:disabled="
connectionState === 'STARTED' || connectionState === 'STARTING'

12
packages/hoppscotch-common/src/pages/realtime/websocket.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="websocket">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
>
<HoppSmartInput
v-model="url"
@@ -53,9 +53,9 @@
</HoppSmartTab>
<HoppSmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
<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-upperSecondaryStickyFold"
class="sticky top-upperSecondaryStickyFold 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("websocket.protocols") }}
</label>
<div class="flex">
@@ -85,7 +85,7 @@
>
<template #item="{ element: { protocol }, 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
@@ -100,7 +100,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 !== protocols?.length - 1,
}"
tabindex="-1"
@@ -108,7 +108,7 @@
</span>
<input
v-model="protocol.value"
class="flex flex-1 px-4 py-2 bg-transparent"
class="flex flex-1 bg-transparent px-4 py-2"
:placeholder="`${t('count.protocol', { count: index + 1 })}`"
name="message"
type="text"