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

refactor(ui): better tabs

Browse Source
This commit is contained in:
liyasthomas
2021-08-22 00:39:05 +05:30
parent 08fe4ae71f
commit 0fb0ae1826
33 changed files with 394 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
components/realtime/Sse.vue
View File

@@ -1,62 +1,67 @@
<template>
<Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
id="server"
v-model="server"
v-focus
type="url"
:class="{ error: !serverValid }"
class="
bg-primaryLight
border border-divider
rounded-l
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
"
:placeholder="$t('sse.url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
for="url"
class="
bg-primaryLight
border-t border-b border-divider
font-semibold
text-secondaryLight
py-2
px-4
truncate
"
>
{{ $t("sse.event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="
bg-primaryLight
border border-divider
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
"
spellcheck="false"
/>
<div class="space-x-2 flex-1 inline-flex">
<div class="flex flex-1">
<input
id="server"
v-model="server"
v-focus
type="url"
: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-primary focus-visible:border-dividerDark
"
:placeholder="$t('sse.url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
for="url"
class="
bg-primaryLight
border-t border-b border-divider
font-semibold
text-secondaryLight
py-2
px-4
truncate
"
>
{{ $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-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary
id="start"
:disabled="!serverValid"
name="start"
class="rounded-l-none w-22"
class="w-32"
:label="
!connectionSSEState ? $t('action.start') : $t('action.stop')
"