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

refactor: improve ui consistency

Browse Source
This commit is contained in:
liyasthomas
2022-02-02 15:28:59 +05:30
parent c0aab9ad41
commit 72172b8351
32 changed files with 150 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col">
<div class="flex flex-col flex-1">
<div
class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
>
<label for="log" class="py-2 font-semibold text-secondaryLight">
{{ title }}
@@ -13,6 +13,7 @@
v-for="(entry, index) in log"
:key="`entry-${index}`"
:style="{ color: entry.color }"
class="font-mono"
>{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
>
</span>

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

@@ -7,13 +7,19 @@
}"
:horizontal="!mdAndLarger"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="sticky top-0 z-10 flex flex-col p-4 space-y-4 bg-primary">
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
>
<div class="inline-flex flex-1 space-x-2">
<input
id="mqtt-url"
@@ -61,7 +67,7 @@
</Pane>
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('mqtt.log')" :log="log" />
</Pane>
@@ -71,9 +77,9 @@
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex flex-col flex-1 p-4">
<div class="flex items-center justify-between p-4">
<label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>
@@ -89,7 +95,7 @@
spellcheck="false"
/>
</div>
<div class="flex items-center justify-between flex-1 p-4">
<div class="flex items-center justify-between p-4">
<label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }}
</label>
@@ -112,7 +118,9 @@
@click.native="publish"
/>
</div>
<div class="flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight">
<div
class="flex items-center justify-between p-4 mt-4 border-t border-dividerLight"
>
<label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>

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

@@ -7,13 +7,19 @@
}"
:horizontal="!mdAndLarger"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
>
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<label for="client-version">
@@ -82,7 +88,7 @@
</div>
</div>
<div
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
@@ -213,7 +219,7 @@
</Pane>
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('socketio.log')" :log="log" />
</Pane>
@@ -223,9 +229,9 @@
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex flex-col flex-1 p-4">
<div class="flex items-center justify-between p-4">
<label for="events" class="font-semibold text-secondaryLight">
{{ $t("socketio.events") }}
</label>
@@ -242,7 +248,7 @@
:disabled="!connectionState"
/>
</div>
<div class="flex items-center justify-between flex-1 p-4">
<div class="flex items-center justify-between p-4">
<label class="font-semibold text-secondaryLight">
{{ $t("socketio.communication") }}
</label>

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

@@ -1,7 +1,12 @@
<template>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane :size="COLUMN_LAYOUT ? 45 : 50" 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 flex flex-col"
>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
>
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">
<input
@@ -44,7 +49,10 @@
</div>
</div>
</Pane>
<Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('sse.log')" :log="log" />
</Pane>
</Splitpanes>

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

@@ -7,13 +7,19 @@
}"
:horizontal="!mdAndLarger"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
>
<div class="inline-flex flex-1 space-x-2">
<input
id="websocket-url"
@@ -43,7 +49,7 @@
</div>
</div>
<div
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ $t("websocket.protocols") }}
@@ -135,7 +141,7 @@
</Pane>
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('websocket.log')" :log="log" />
</Pane>
@@ -145,9 +151,9 @@
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex flex-col flex-1 p-4">
<div class="flex items-center justify-between p-4">
<label
for="websocket-message"
class="font-semibold text-secondaryLight"