btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: sort classes

Browse Source
This commit is contained in:
liyasthomas
2021-12-31 20:05:39 +05:30
parent 80956fbd27
commit b343789554
62 changed files with 349 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-app/components/realtime/Log.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col">
<div
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
>
<label for="log" class="font-semibold text-secondaryLight py-2">
<label for="log" class="py-2 font-semibold text-secondaryLight">
{{ title }}
</label>
</div>

16
packages/hoppscotch-app/components/realtime/Mqtt.vue
View File

@@ -13,15 +13,15 @@
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<div class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex flex-col p-4 space-y-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<input
id="mqtt-url"
v-model="url"
type="url"
autocomplete="off"
spellcheck="false"
class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="$t('mqtt.url')"
:disabled="connectionState"
@keyup.enter="validUrl ? toggleConnection() : null"
@@ -73,7 +73,7 @@
min-size="20"
class="hide-scrollbar !overflow-auto"
>
<div class="flex flex-col flex-1 p-4 inline-flex">
<div class="flex inline-flex flex-col flex-1 p-4">
<label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>
@@ -89,12 +89,12 @@
spellcheck="false"
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<div class="flex items-center justify-between flex-1 p-4">
<label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }}
</label>
</div>
<div class="flex space-x-2 px-4">
<div class="flex px-4 space-x-2">
<input
id="mqtt-message"
v-model="msg"
@@ -113,13 +113,13 @@
/>
</div>
<div
class="border-t border-dividerLight flex flex-col flex-1 mt-4 p-4 inline-flex"
class="flex inline-flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight"
>
<label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>
</div>
<div class="flex space-x-2 px-4">
<div class="flex px-4 space-x-2">
<input
id="sub_topic"
v-model="sub_topic"

36
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -13,8 +13,8 @@
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<label for="client-version">
<tippy
@@ -30,7 +30,7 @@
id="client-version"
v-tippy="{ theme: 'tooltip' }"
title="socket.io-client version"
class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:value="`Client ${clientVersion}`"
readonly
:disabled="connectionState"
@@ -52,7 +52,7 @@
autocomplete="off"
spellcheck="false"
:class="{ error: !urlValid }"
class="bg-primaryLight border border-divider flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="$t('socketio.url')"
:disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -60,7 +60,7 @@
<input
id="socketio-path"
v-model="path"
class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
spellcheck="false"
:disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -82,7 +82,7 @@
</div>
</div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
@@ -98,7 +98,7 @@
<template #trigger>
<span class="select-wrapper">
<ButtonSecondary
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
:label="authType"
/>
</span>
@@ -160,15 +160,15 @@
</div>
<div
v-if="authType === 'None'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="$t('empty.authorization')"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
This SocketIO connection does not use any authentication.
</span>
<ButtonSecondary
@@ -183,10 +183,10 @@
</div>
<div
v-if="authType === 'Bearer'"
class="border-b border-dividerLight flex"
class="flex border-b border-dividerLight"
>
<div class="border-r border-dividerLight w-2/3">
<div class="border-b border-dividerLight flex">
<div class="w-2/3 border-r border-dividerLight">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="bearerToken"
placeholder="Token"
@@ -195,10 +195,10 @@
</div>
</div>
<div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
>
<div class="p-2">
<div class="text-secondaryLight pb-2">
<div class="pb-2 text-secondaryLight">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
@@ -225,7 +225,7 @@
min-size="20"
class="hide-scrollbar !overflow-auto"
>
<div class="flex flex-col flex-1 p-4 inline-flex">
<div class="flex inline-flex flex-col flex-1 p-4">
<label for="events" class="font-semibold text-secondaryLight">
{{ $t("socketio.events") }}
</label>
@@ -242,7 +242,7 @@
:disabled="!connectionState"
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<div class="flex items-center justify-between flex-1 p-4">
<label class="font-semibold text-secondaryLight">
{{ $t("socketio.communication") }}
</label>
@@ -255,7 +255,7 @@
/>
</div>
</div>
<div class="flex flex-col space-y-2 px-4 pb-4">
<div class="flex flex-col px-4 pb-4 space-y-2">
<div
v-for="(input, index) of communication.inputs"
:key="`input-${index}`"

10
packages/hoppscotch-app/components/realtime/Sse.vue
View File

@@ -1,8 +1,8 @@
<template>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<input
id="server"
@@ -10,21 +10,21 @@
type="url"
autocomplete="off"
:class="{ error: !serverValid }"
class="bg-primaryLight border border-divider rounded-l flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="$t('sse.url')"
:disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
for="event-type"
class="bg-primaryLight border-t border-b border-divider font-semibold text-secondaryLight py-2 px-4 truncate"
class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
>
{{ $t("sse.event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
spellcheck="false"
:disabled="connectionSSEState"
@keyup.enter="serverValid ? toggleSSEConnection() : null"

22
packages/hoppscotch-app/components/realtime/Websocket.vue
View File

@@ -13,12 +13,12 @@
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<input
id="websocket-url"
v-model="url"
class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
type="url"
autocomplete="off"
spellcheck="false"
@@ -43,7 +43,7 @@
</div>
</div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ $t("websocket.protocols") }}
@@ -66,11 +66,11 @@
<div
v-for="(protocol, index) of protocols"
:key="`protocol-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<input
v-model="protocol.value"
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="$t('count.protocol', { count: index + 1 })"
name="message"
type="text"
@@ -120,15 +120,15 @@
</div>
<div
v-if="protocols.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="$t('empty.protocols')"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ $t("empty.protocols") }}
</span>
</div>
@@ -147,7 +147,7 @@
min-size="20"
class="hide-scrollbar !overflow-auto"
>
<div class="flex flex-col flex-1 p-4 inline-flex">
<div class="flex inline-flex flex-col flex-1 p-4">
<label
for="websocket-message"
class="font-semibold text-secondaryLight"
@@ -155,7 +155,7 @@
{{ $t("websocket.communication") }}
</label>
</div>
<div class="flex space-x-2 px-4">
<div class="flex px-4 space-x-2">
<input
id="websocket-message"
v-model="communication.input"