refactor(ui): better tabs
This commit is contained in:
liyasthomas
@@ -59,7 +59,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.realtime-log {
|
||||
@apply p-4;
|
||||
@apply bg-primaryLight;
|
||||
@apply bg-primary;
|
||||
@apply text-secondary;
|
||||
@apply overflow-auto;
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
<div class="space-x-2 flex-1 inline-flex">
|
||||
<input
|
||||
id="mqtt-url"
|
||||
v-model="url"
|
||||
@@ -15,19 +15,20 @@
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-l
|
||||
rounded
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
focus-visible:border-accent
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-primary focus-visible:border-dividerDark
|
||||
"
|
||||
:placeholder="$t('mqtt.url')"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
id="connect"
|
||||
:disabled="!validUrl"
|
||||
class="rounded-l-none w-28"
|
||||
class="w-32"
|
||||
:label="
|
||||
connectionState
|
||||
? $t('action.disconnect')
|
||||
|
||||
@@ -1,52 +1,57 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
<input
|
||||
id="socketio-url"
|
||||
v-model="url"
|
||||
v-focus
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
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('socketio.url')"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
<input
|
||||
id="socketio-path"
|
||||
v-model="path"
|
||||
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="socketio-url"
|
||||
v-model="url"
|
||||
v-focus
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
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('socketio.url')"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
<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-primary focus-visible:border-dividerDark
|
||||
"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
<ButtonPrimary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
name="connect"
|
||||
class="rounded-l-none w-28"
|
||||
class="w-32"
|
||||
:label="
|
||||
!connectionState
|
||||
? $t('action.connect')
|
||||
@@ -99,6 +104,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('add.new')"
|
||||
icon="add"
|
||||
class="rounded"
|
||||
@click.native="addCommunicationInput"
|
||||
/>
|
||||
</div>
|
||||
@@ -123,7 +129,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.remove')"
|
||||
icon="remove_circle_outline"
|
||||
class="rounded-l-none"
|
||||
class="rounded-r"
|
||||
color="red"
|
||||
outline
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
|
||||
@@ -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')
|
||||
"
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
<div class="space-x-2 flex-1 inline-flex">
|
||||
<input
|
||||
id="websocket-url"
|
||||
v-model="url"
|
||||
@@ -13,12 +13,13 @@
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-l
|
||||
rounded
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
focus-visible:border-accent
|
||||
hover:border-dividerDark
|
||||
focus-visible:bg-primary focus-visible:border-dividerDark
|
||||
"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
@@ -29,7 +30,7 @@
|
||||
<ButtonPrimary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
class="rounded-l-none w-28"
|
||||
class="w-32"
|
||||
name="connect"
|
||||
:label="
|
||||
!connectionState
|
||||
@@ -83,7 +84,7 @@
|
||||
>
|
||||
<input
|
||||
v-model="protocol.value"
|
||||
class="bg-primaryLight flex flex-1 py-2 px-4"
|
||||
class="bg-primary flex flex-1 py-2 px-4"
|
||||
:placeholder="$t('count.protocol', { count: index + 1 })"
|
||||
name="message"
|
||||
type="text"
|
||||
|
||||
Reference in New Issue
Block a user