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

refactor: lint + minor ui fixes

Browse Source
This commit is contained in:
liyasthomas
2021-11-27 19:59:28 +05:30
parent da8c446ad7
commit 0bf856291c
68 changed files with 363 additions and 1691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -9,10 +9,13 @@
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="request">
<div
class="sticky top-0 z-10 flex flex-col p-4 bg-primary space-y-4"
class="bg-primary sticky top-0 z-10 flex flex-col p-4 space-y-4"
>
<div class="inline-flex flex-1 space-x-2">
<input
@@ -21,19 +24,7 @@
type="url"
autocomplete="off"
spellcheck="false"
class="
bg-primaryLight
border-divider
text-secondaryDark
hover:border-dividerDark
focus-visible:bg-transparent
focus-visible:border-dividerDark
w-full
px-4
py-2
border
rounded
"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
:placeholder="$t('mqtt.url')"
:disabled="connectionState"
@keyup.enter="validUrl ? toggleConnection() : null"
@@ -72,7 +63,10 @@
</div>
</AppSection>
</Pane>
<Pane class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="response">
<RealtimeLog :title="$t('mqtt.log')" :log="log" />
</AppSection>
@@ -87,7 +81,7 @@
>
<AppSection label="messages">
<div class="flex inline-flex flex-col flex-1 p-4">
<label for="pub_topic" class="font-semibold text-secondaryLight">
<label for="pub_topic" class="text-secondaryLight font-semibold">
{{ $t("mqtt.topic") }}
</label>
</div>
@@ -103,7 +97,7 @@
/>
</div>
<div class="flex items-center justify-between flex-1 p-4">
<label for="mqtt-message" class="font-semibold text-secondaryLight">
<label for="mqtt-message" class="text-secondaryLight font-semibold">
{{ $t("mqtt.communication") }}
</label>
</div>
@@ -126,18 +120,9 @@
/>
</div>
<div
class="
flex-col
border-dividerLight
flex
inline-flex
flex-1
p-4
mt-4
border-t
"
class="border-dividerLight flex inline-flex flex-col flex-1 p-4 mt-4 border-t"
>
<label for="sub_topic" class="font-semibold text-secondaryLight">
<label for="sub_topic" class="text-secondaryLight font-semibold">
{{ $t("mqtt.topic") }}
</label>
</div>

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

@@ -9,9 +9,12 @@
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="request">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="bg-primary sticky top-0 z-10 flex p-4">
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<label for="client-version">
@@ -28,22 +31,7 @@
id="client-version"
v-tippy="{ theme: 'tooltip' }"
title="socket.io-client version"
class="
bg-primaryLight
border-divider
text-secondaryDark
w-26
hover:border-dividerDark
focus-visible:bg-transparent
focus-visible:border-dividerDark
flex
px-4
py-2
font-semibold
border
rounded-l
cursor-pointer
"
class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
:value="`Client ${clientVersion}`"
readonly
:disabled="connectionState"
@@ -65,20 +53,7 @@
autocomplete="off"
spellcheck="false"
:class="{ error: !urlValid }"
class="
flex
bg-primaryLight
border-divider
text-secondaryDark
hover:border-dividerDark
focus-visible:bg-transparent
focus-visible:border-dividerDark
flex-1
w-full
px-4
py-2
border
"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border"
:placeholder="$t('socketio.url')"
:disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -86,21 +61,7 @@
<input
id="socketio-path"
v-model="path"
class="
flex
bg-primaryLight
border-divider
text-secondaryDark
hover:border-dividerDark
focus-visible:bg-transparent
focus-visible:border-dividerDark
flex-1
w-full
px-4
py-2
border
rounded-r
"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
spellcheck="false"
:disabled="connectionState"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -123,7 +84,10 @@
</div>
</AppSection>
</Pane>
<Pane class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="response">
<RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
</AppSection>
@@ -138,7 +102,7 @@
>
<AppSection label="messages">
<div class="flex inline-flex flex-col flex-1 p-4">
<label for="events" class="font-semibold text-secondaryLight">
<label for="events" class="text-secondaryLight font-semibold">
{{ $t("socketio.events") }}
</label>
</div>
@@ -155,7 +119,7 @@
/>
</div>
<div class="flex items-center justify-between flex-1 p-4">
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ $t("socketio.communication") }}
</label>
<div class="flex">

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

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

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

@@ -9,26 +9,17 @@
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="request">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="bg-primary sticky top-0 z-10 flex p-4">
<div class="inline-flex flex-1 space-x-2">
<input
id="websocket-url"
v-model="url"
class="
bg-primaryLight
border-divider
text-secondaryDark
hover:border-dividerDark
focus-visible:bg-transparent
focus-visible:border-dividerDark
w-full
px-4
py-2
border
rounded
"
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
type="url"
autocomplete="off"
spellcheck="false"
@@ -53,21 +44,9 @@
</div>
</div>
<div
class="
bg-primary
border-dividerLight
top-upperPrimaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperPrimaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ $t("websocket.protocols") }}
</label>
<div class="flex">
@@ -88,13 +67,7 @@
<div
v-for="(protocol, index) of protocols"
:key="`protocol-${index}`"
class="
divide-dividerLight
border-dividerLight
flex
border-b
divide-x
"
class="divide-dividerLight border-dividerLight flex border-b divide-x"
>
<input
v-model="protocol.value"
@@ -141,27 +114,12 @@
</div>
<div
v-if="protocols.length === 0"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
my-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="$t('empty.protocols')"
/>
<span class="mb-4 text-center">
@@ -170,7 +128,10 @@
</div>
</AppSection>
</Pane>
<Pane class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="response">
<RealtimeLog
:title="$t('websocket.log')"
@@ -190,7 +151,7 @@
<div class="flex inline-flex flex-col flex-1 p-4">
<label
for="websocket-message"
class="font-semibold text-secondaryLight"
class="text-secondaryLight font-semibold"
>
{{ $t("websocket.communication") }}
</label>