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

refactor(ui): remaining realtime pages

Browse Source
This commit is contained in:
liyasthomas
2021-07-26 12:40:02 +05:30
parent c3921bebf2
commit 5258db345e
17 changed files with 305 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/scss/styles.scss
View File

@@ -171,6 +171,7 @@ hr {
@apply border border-divider; @apply border border-divider;
@apply transition; @apply transition;
@apply focus:(outline-none border-accent); @apply focus:(outline-none border-accent);
@apply disabled:cursor-not-allowed;
} }
.input[type="file"], .input[type="file"],
@@ -187,7 +188,6 @@ pre.ace_editor {
.select { .select {
@apply appearance-none; @apply appearance-none;
@apply cursor-pointer;
&::-ms-expand { &::-ms-expand {
@apply hidden; @apply hidden;
@@ -197,6 +197,7 @@ pre.ace_editor {
.select-wrapper { .select-wrapper {
@apply relative; @apply relative;
@apply w-full; @apply w-full;
@apply cursor-pointer;
&::after { &::after {
@apply absolute; @apply absolute;
@@ -211,6 +212,23 @@ pre.ace_editor {
} }
} }
.search-wrapper {
@apply relative;
@apply w-full;
&::after {
@apply absolute;
@apply inline-block;
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
@apply top-2;
@apply left-3;
content: "\e8b6";
}
}
input[type="checkbox"] { input[type="checkbox"] {
@apply hidden; @apply hidden;

11
components/app/Header.vue
View File

@@ -1,9 +1,16 @@
<template> <template>
<header class="flex flex-1 py-2 px-4 items-center justify-between"> <header class="flex flex-1 py-2 px-4 items-center justify-between">
<div <div
class="font-extrabold space-x-2 flex-shrink-0 inline-flex items-center" class="
font-extrabold
space-x-2
flex-shrink-0
text-sm
inline-flex
items-center
"
> >
<AppLogo class="h-6 mr-4" /> Hoppscotch Hoppscotch
</div> </div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center"> <div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="mt-1 mr-2" /> <AppGitHubStarButton class="mt-1 mr-2" />

20
components/app/Shortcuts.vue
View File

@@ -20,6 +20,25 @@
<ButtonSecondary icon="close" @click.native="close()" /> <ButtonSecondary icon="close" @click.native="close()" />
</div> </div>
</div> </div>
<div class="search-wrapper">
<input
v-model="filterText"
type="search"
class="
bg-primaryLight
border-b border-dividerLight
flex
font-semibold font-mono
w-full
py-2
pr-2
pl-8
focus:outline-none
truncate
"
:placeholder="$t('search')"
/>
</div>
<div <div
class=" class="
divide-y divide-dividerLight divide-y divide-dividerLight
@@ -67,6 +86,7 @@ export default {
}, },
data() { data() {
return { return {
filterText: "",
mappings: [ mappings: [
{ {
section: "General", section: "General",

8
components/collections/graphql/index.vue
View File

@@ -7,6 +7,7 @@
class="flex flex-col top-8 z-10 sticky" class="flex flex-col top-8 z-10 sticky"
:class="{ 'bg-primary': !savingMode }" :class="{ 'bg-primary': !savingMode }"
> >
<div class="search-wrapper">
<input <input
v-if="showCollActions" v-if="showCollActions"
v-model="filterText" v-model="filterText"
@@ -17,12 +18,15 @@
border-b border-dividerLight border-b border-dividerLight
flex flex
font-semibold font-mono font-semibold font-mono
flex-1 w-full
py-2 py-2
px-4 pr-2
pl-9
focus:outline-none focus:outline-none
truncate
" "
/> />
</div>
<div class="border-b border-dividerLight flex flex-1 justify-between"> <div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"

8
components/collections/index.vue
View File

@@ -7,6 +7,7 @@
class="bg-primary rounded-t flex flex-col top-0 z-10 sticky" class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
:class="{ '!top-8': !saveRequest && !doc }" :class="{ '!top-8': !saveRequest && !doc }"
> >
<div class="search-wrapper">
<input <input
v-if="!saveRequest" v-if="!saveRequest"
v-model="filterText" v-model="filterText"
@@ -17,12 +18,15 @@
border-b border-dividerLight border-b border-dividerLight
flex flex
font-semibold font-mono font-semibold font-mono
flex-1 w-full
py-2 py-2
px-4 pr-2
pl-9
focus:outline-none focus:outline-none
truncate
" "
/> />
</div>
<CollectionsChooseType <CollectionsChooseType
:collections-type="collectionsType" :collections-type="collectionsType"
:show="showTeamCollections" :show="showTeamCollections"

1
components/collections/my/Collection.vue
View File

@@ -46,6 +46,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('delete')"
icon="check_box" icon="check_box"
color="green"
@click.native="$emit('unselect-collection')" @click.native="$emit('unselect-collection')"
/> />
<ButtonSecondary <ButtonSecondary

1
components/collections/teams/Collection.vue
View File

@@ -38,6 +38,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('delete')"
icon="check_box" icon="check_box"
color="green"
@click.native="$emit('unselect-collection')" @click.native="$emit('unselect-collection')"
/> />
<ButtonSecondary <ButtonSecondary

5
components/environments/Edit.vue
View File

@@ -38,15 +38,16 @@
/> />
</div> </div>
</div> </div>
<div class="border-divider rounded border"> <div class="border-divider border rounded">
<div <div
v-for="(variable, index) in vars" v-for="(variable, index) in vars"
:key="`variable-${index}`" :key="`variable-${index}`"
class=" class="
divide-x divide-dashed divide-divider divide-x divide-dashed divide-divider
border-b border-divider border-b border-dashed border-divider
flex flex
" "
:class="{ 'border-t': index == 0 }"
> >
<input <input
v-model="variable.key" v-model="variable.key"

8
components/history/index.vue
View File

@@ -10,6 +10,7 @@
sticky sticky
" "
> >
<div class="search-wrapper">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
@@ -17,13 +18,16 @@
bg-primaryLight bg-primaryLight
flex flex
font-semibold font-mono font-semibold font-mono
flex-1 w-full
py-2 py-2
px-4 pr-2
pl-9
focus:outline-none focus:outline-none
truncate
" "
:placeholder="$t('search')" :placeholder="$t('search')"
/> />
</div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
data-testid="clear_history" data-testid="clear_history"

54
components/realtime/Mqtt.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
</div> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
<RealtimeLog :title="$t('log')" :log="log" /> <RealtimeLog :title="$t('log')" :log="log" />
</AppSection> </AppSection>
@@ -51,49 +51,75 @@
max-size="35" max-size="35"
size="25" size="25"
min-size="20" min-size="20"
class="!overflow-auto hide-scrollbar" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="messages"> <AppSection label="messages">
<label for="pub_topic">{{ $t("mqtt_topic") }}</label> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="pub_topic" class="font-semibold">
{{ $t("mqtt_topic") }}
</label>
</div>
<div class="flex px-4">
<input <input
id="pub_topic" id="pub_topic"
v-model="pub_topic" v-model="pub_topic"
class="input" class="input"
:placeholder="$t('topic_name')"
type="text" type="text"
spellcheck="false" spellcheck="false"
/> />
<label for="mqtt-message">{{ $t("message") }}</label> </div>
<div class="bg-primary flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="font-semibold">{{
$t("communication")
}}</label>
</div>
<div class="flex px-4">
<input <input
id="mqtt-message" id="mqtt-message"
v-model="msg" v-model="msg"
class="input !rounded-r-none"
type="text" type="text"
:placeholder="$t('message')"
spellcheck="false" spellcheck="false"
class="border-dashed border-divider input md:border-l"
/> />
<div> <ButtonPrimary
<ButtonSecondary
id="publish" id="publish"
name="get" name="get"
class="rounded-l-none"
:disabled="!canpublish" :disabled="!canpublish"
icon="send" icon="send"
:label="$t('mqtt_publish')" :label="$t('mqtt_publish')"
@click.native="publish" @click.native="publish"
/> />
</div> </div>
<label for="sub_topic">{{ $t("mqtt_topic") }}</label> <div
class="
border-t border-dividerLight
flex flex-col flex-1
mt-4
p-4
inline-flex
"
>
<label for="sub_topic" class="font-semibold">{{
$t("mqtt_topic")
}}</label>
</div>
<div class="flex px-4">
<input <input
id="sub_topic" id="sub_topic"
v-model="sub_topic" v-model="sub_topic"
type="text" type="text"
:placeholder="$t('topic_name')"
spellcheck="false" spellcheck="false"
class="input md:rounded-bl-lg" class="input !rounded-r-none"
/> />
<div> <ButtonPrimary
<ButtonSecondary
id="subscribe" id="subscribe"
name="get" name="get"
:disabled="!cansubscribe" :disabled="!cansubscribe"
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg" class="rounded-l-none"
:icon="subscriptionState ? 'sync_disabled' : 'sync'" :icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label=" :label="
subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe') subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')

60
components/realtime/Socketio.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="flex-1 inline-flex">
@@ -59,7 +59,7 @@
</div> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection> </AppSection>
@@ -71,63 +71,73 @@
max-size="35" max-size="35"
size="25" size="25"
min-size="20" min-size="20"
class="!overflow-auto hide-scrollbar" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="messages"> <AppSection label="messages">
<label for="event_name">{{ $t("event_name") }}</label> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="events" class="font-semibold">
{{ $t("events") }}
</label>
</div>
<div class="flex px-4">
<input <input
id="event_name" id="event_name"
v-model="communication.eventName" v-model="communication.eventName"
class="input" class="input"
name="event_name" name="event_name"
:placeholder="$t('event_name')"
type="text" type="text"
:readonly="!connectionState" :disabled="!connectionState"
/> />
<div class="flex flex-1">
<label>{{ $t("message") }}s</label>
</div> </div>
<div class="bg-primary flex flex-1 p-4 items-center justify-between">
<label class="font-semibold">{{ $t("communication") }}</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add_new')"
icon="add"
@click.native="addCommunicationInput"
/>
</div>
</div>
<div class="flex flex-col space-y-2 px-4">
<div <div
v-for="(input, index) of communication.inputs" v-for="(input, index) of communication.inputs"
:key="`input-${index}`" :key="`input-${index}`"
:class="{ 'border-t': index == 0 }"
class="
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
> >
<div class="flex">
<input <input
v-model="communication.inputs[index]" v-model="communication.inputs[index]"
class="input" class="input !rounded-r-none"
name="message" name="message"
:placeholder="$t('message_count', { count: index + 1 })"
type="text" type="text"
:readonly="!connectionState" :disabled="!connectionState"
@keyup.enter="connectionState ? sendMessage() : null" @keyup.enter="connectionState ? sendMessage() : null"
/> />
<div v-if="index + 1 !== communication.inputs.length">
<ButtonSecondary <ButtonSecondary
v-if="index + 1 !== communication.inputs.length"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('delete')"
icon="delete" icon="delete"
class="rounded-l-none"
color="red" color="red"
outline
@click.native="removeCommunicationInput({ index })" @click.native="removeCommunicationInput({ index })"
/> />
</div> <ButtonPrimary
<div v-if="index + 1 === communication.inputs.length"> v-if="index + 1 === communication.inputs.length"
<ButtonSecondary
id="send" id="send"
name="send" name="send"
:disabled="!connectionState" :disabled="!connectionState"
class="rounded-l-none"
icon="send" icon="send"
:label="$t('send')" :label="$t('send')"
@click.native="sendMessage" @click.native="sendMessage"
/> />
</div> </div>
<ButtonSecondary </div>
icon="add"
:label="$t('add_new')"
@click.native="addCommunicationInput"
/>
</div> </div>
</AppSection> </AppSection>
</Pane> </Pane>

4
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
</div> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
<ul> <ul>
<li> <li>

31
components/realtime/Websocket.vue
View File

@@ -1,9 +1,10 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection class="bg-primary flex p-4 top-0 z-10 sticky"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="flex-1 inline-flex">
<input <input
id="websocket-url" id="websocket-url"
@@ -38,6 +39,7 @@
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</div> </div>
</div>
</AppSection> </AppSection>
<div <div
class=" class="
@@ -45,7 +47,7 @@
border-b border-dividerLight border-b border-dividerLight
flex flex-1 flex flex-1
pl-4 pl-4
top-68px top-16
z-10 z-10
sticky sticky
items-center items-center
@@ -131,7 +133,7 @@
</div> </div>
</div> </div>
</Pane> </Pane>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection> </AppSection>
@@ -143,31 +145,32 @@
max-size="35" max-size="35"
size="25" size="25"
min-size="20" min-size="20"
class="!overflow-auto hide-scrollbar" class="hide-scrollbar !overflow-auto"
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="websocket-message" class="font-semibold pb-4"> <label for="websocket-message" class="font-semibold">
{{ $t("message") }} {{ $t("communication") }}
</label> </label>
</div>
<div class="flex px-4">
<input <input
id="websocket-message" id="websocket-message"
v-model="communication.input" v-model="communication.input"
name="message" name="message"
type="text" type="text"
:readonly="!connectionState" :disabled="!connectionState"
class="input" :placeholder="$t('message')"
class="input !rounded-r-none"
@keyup.enter="connectionState ? sendMessage() : null" @keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null" @keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null" @keyup.down="connectionState ? walkHistory('down') : null"
/> />
</div> <ButtonPrimary
<div>
<ButtonSecondary
id="send" id="send"
name="send" name="send"
:disabled="!connectionState" :disabled="!connectionState"
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg" class="rounded-l-none"
icon="send" icon="send"
:label="$t('send')" :label="$t('send')"
@click.native="sendMessage" @click.native="sendMessage"

2
components/teams/index.vue
View File

@@ -38,7 +38,7 @@
<p v-if="myTeams.length === 0"> <p v-if="myTeams.length === 0">
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }} <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
</p> </p>
<div v-else class="!overflow-auto hide-scrollbar"> <div v-else class="hide-scrollbar !overflow-auto">
<ul class="flex-col"> <ul class="flex-col">
<li v-for="(team, index) in myTeams" :key="`team-${index}`"> <li v-for="(team, index) in myTeams" :key="`team-${index}`">
<TeamsTeam <TeamsTeam

2
lang/en-US.json
View File

@@ -61,6 +61,7 @@
"websocket": "WebSocket", "websocket": "WebSocket",
"waiting_for_connection": "waiting for connection", "waiting_for_connection": "waiting for connection",
"message": "Message", "message": "Message",
"message_count": "Message {count}",
"sse": "SSE", "sse": "SSE",
"server": "Server", "server": "Server",
"events": "Events", "events": "Events",
@@ -272,6 +273,7 @@
"event_name": "Event Name", "event_name": "Event Name",
"mqtt": "MQTT", "mqtt": "MQTT",
"mqtt_topic": "Topic", "mqtt_topic": "Topic",
"topic_name": "Topic Name",
"mqtt_topic_title": "Publish / Subscribe topic", "mqtt_topic_title": "Publish / Subscribe topic",
"mqtt_publish": "Publish", "mqtt_publish": "Publish",
"mqtt_subscribe": "Subscribe", "mqtt_subscribe": "Subscribe",

8
pages/documentation.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="import"> <AppSection label="import">
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("collection") }}</label> <label>{{ $t("collection") }}</label>
@@ -57,7 +57,7 @@
</div> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="!overflow-auto hide-scrollbar"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="documentation"> <AppSection label="documentation">
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("documentation") }}</label> <label>{{ $t("documentation") }}</label>
@@ -107,7 +107,7 @@
max-size="35" max-size="35"
size="25" size="25"
min-size="20" min-size="20"
class="!overflow-auto hide-scrollbar" class="hide-scrollbar !overflow-auto"
> >
<aside> <aside>
<Collections <Collections

10
pages/graphql.vue
View File

@@ -358,21 +358,25 @@
<SmartTab :id="'docs'" :label="`Docs`" :selected="true"> <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs"> <AppSection label="docs">
<div class="bg-primaryLight flex flex-col top-8 z-10 sticky"> <div class="bg-primaryLight flex flex-col top-8 z-10 sticky">
<div class="search-wrapper">
<input <input
v-model="graphqlFieldsFilterText" v-model="graphqlFieldsFilterText"
type="text" type="search"
:placeholder="$t('search')" :placeholder="$t('search')"
class=" class="
bg-primaryLight bg-primaryLight
flex flex
font-semibold font-mono font-semibold font-mono
flex-1 w-full
py-2 py-2
px-4 pr-2
pl-9
focus:outline-none focus:outline-none
truncate
" "
/> />
</div> </div>
</div>
<SmartTabs <SmartTabs
ref="gqlTabs" ref="gqlTabs"
styles=" styles="