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 transition;
@apply focus:(outline-none border-accent);
@apply disabled:cursor-not-allowed;
}
.input[type="file"],
@@ -187,7 +188,6 @@ pre.ace_editor {
.select {
@apply appearance-none;
@apply cursor-pointer;
&::-ms-expand {
@apply hidden;
@@ -197,6 +197,7 @@ pre.ace_editor {
.select-wrapper {
@apply relative;
@apply w-full;
@apply cursor-pointer;
&::after {
@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"] {
@apply hidden;

11
components/app/Header.vue
View File

@@ -1,9 +1,16 @@
<template>
<header class="flex flex-1 py-2 px-4 items-center justify-between">
<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 class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="mt-1 mr-2" />

20
components/app/Shortcuts.vue
View File

@@ -20,6 +20,25 @@
<ButtonSecondary icon="close" @click.native="close()" />
</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
class="
divide-y divide-dividerLight
@@ -67,6 +86,7 @@ export default {
},
data() {
return {
filterText: "",
mappings: [
{
section: "General",

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

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

36
components/collections/index.vue
View File

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

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

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

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

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

5
components/environments/Edit.vue
View File

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

32
components/history/index.vue
View File

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

92
components/realtime/Mqtt.vue
View File

@@ -1,8 +1,8 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<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">
@@ -39,7 +39,7 @@
</div>
</AppSection>
</Pane>
<Pane class="!overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="log" />
</AppSection>
@@ -51,49 +51,75 @@
max-size="35"
size="25"
min-size="20"
class="!overflow-auto hide-scrollbar"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="messages">
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>
<input
id="pub_topic"
v-model="pub_topic"
class="input"
type="text"
spellcheck="false"
/>
<label for="mqtt-message">{{ $t("message") }}</label>
<input
id="mqtt-message"
v-model="msg"
type="text"
spellcheck="false"
class="border-dashed border-divider input md:border-l"
/>
<div>
<ButtonSecondary
<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
id="pub_topic"
v-model="pub_topic"
class="input"
:placeholder="$t('topic_name')"
type="text"
spellcheck="false"
/>
</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
id="mqtt-message"
v-model="msg"
class="input !rounded-r-none"
type="text"
:placeholder="$t('message')"
spellcheck="false"
/>
<ButtonPrimary
id="publish"
name="get"
class="rounded-l-none"
:disabled="!canpublish"
icon="send"
:label="$t('mqtt_publish')"
@click.native="publish"
/>
</div>
<label for="sub_topic">{{ $t("mqtt_topic") }}</label>
<input
id="sub_topic"
v-model="sub_topic"
type="text"
spellcheck="false"
class="input md:rounded-bl-lg"
/>
<div>
<ButtonSecondary
<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
id="sub_topic"
v-model="sub_topic"
type="text"
:placeholder="$t('topic_name')"
spellcheck="false"
class="input !rounded-r-none"
/>
<ButtonPrimary
id="subscribe"
name="get"
:disabled="!cansubscribe"
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
class="rounded-l-none"
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label="
subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')

106
components/realtime/Socketio.vue
View File

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

4
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template>
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<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">
@@ -39,7 +39,7 @@
</div>
</AppSection>
</Pane>
<Pane class="!overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response">
<ul>
<li>

97
components/realtime/Websocket.vue
View File

@@ -1,42 +1,44 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
id="websocket-url"
v-model="url"
class="
bg-primaryLight
border border-divider
rounded-l
font-semibold font-mono
text-secondaryDark
w-full
py-1
px-4
transition
truncate
focus:outline-none focus:border-accent
"
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
<ButtonPrimary
id="connect"
:disabled="!urlValid"
class="rounded-l-none"
name="connect"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
@click.native="toggleConnection"
/>
<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="websocket-url"
v-model="url"
class="
bg-primaryLight
border border-divider
rounded-l
font-semibold font-mono
text-secondaryDark
w-full
py-1
px-4
transition
truncate
focus:outline-none focus:border-accent
"
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
<ButtonPrimary
id="connect"
:disabled="!urlValid"
class="rounded-l-none"
name="connect"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
@click.native="toggleConnection"
/>
</div>
</div>
</AppSection>
<div
@@ -45,7 +47,7 @@
border-b border-dividerLight
flex flex-1
pl-4
top-68px
top-16
z-10
sticky
items-center
@@ -131,7 +133,7 @@
</div>
</div>
</Pane>
<Pane class="!overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection>
@@ -143,31 +145,32 @@
max-size="35"
size="25"
min-size="20"
class="!overflow-auto hide-scrollbar"
class="hide-scrollbar !overflow-auto"
>
<AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex">
<label for="websocket-message" class="font-semibold pb-4">
{{ $t("message") }}
<label for="websocket-message" class="font-semibold">
{{ $t("communication") }}
</label>
</div>
<div class="flex px-4">
<input
id="websocket-message"
v-model="communication.input"
name="message"
type="text"
:readonly="!connectionState"
class="input"
:disabled="!connectionState"
:placeholder="$t('message')"
class="input !rounded-r-none"
@keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null"
/>
</div>
<div>
<ButtonSecondary
<ButtonPrimary
id="send"
name="send"
:disabled="!connectionState"
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
class="rounded-l-none"
icon="send"
:label="$t('send')"
@click.native="sendMessage"

2
components/teams/index.vue
View File

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

2
lang/en-US.json
View File

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

8
pages/documentation.vue
View File

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

32
pages/graphql.vue
View File

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