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

refactor(ui): better button, tab caomponents

Browse Source
This commit is contained in:
liyasthomas
2021-08-22 12:58:43 +05:30
parent 22e73a4d83
commit 1bea0a42d7
18 changed files with 56 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/realtime/Mqtt.vue
View File

@@ -72,15 +72,15 @@
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="font-semibold text-secondaryLight">{{
$t("mqtt.communication")
}}</label>
<label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }}
</label>
</div>
<div class="flex px-4">
<div class="flex space-x-2 px-4">
<input
id="mqtt-message"
v-model="msg"
class="input !rounded-r-none"
class="input"
type="text"
:placeholder="$t('mqtt.message')"
spellcheck="false"
@@ -88,7 +88,6 @@
<ButtonPrimary
id="publish"
name="get"
class="rounded-l-none"
:disabled="!canpublish"
:label="$t('mqtt.publish')"
@click.native="publish"
@@ -103,24 +102,23 @@
inline-flex
"
>
<label for="sub_topic" class="font-semibold text-secondaryLight">{{
$t("mqtt.topic")
}}</label>
<label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>
</div>
<div class="flex px-4">
<div class="flex space-x-2 px-4">
<input
id="sub_topic"
v-model="sub_topic"
type="text"
:placeholder="$t('mqtt.topic_name')"
spellcheck="false"
class="input !rounded-r-none"
class="input"
/>
<ButtonPrimary
id="subscribe"
name="get"
:disabled="!cansubscribe"
class="rounded-l-none"
:label="
subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
"

13
components/realtime/Socketio.vue
View File

@@ -96,9 +96,9 @@
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<label class="font-semibold text-secondaryLight">{{
$t("socketio.communication")
}}</label>
<label class="font-semibold text-secondaryLight">
{{ $t("socketio.communication") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -114,10 +114,10 @@
v-for="(input, index) of communication.inputs"
:key="`input-${index}`"
>
<div class="flex">
<div class="flex space-x-2">
<input
v-model="communication.inputs[index]"
class="input !rounded-r-none"
class="input"
name="message"
:placeholder="$t('count.message', { count: index + 1 })"
type="text"
@@ -129,7 +129,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
class="rounded-r"
class="rounded"
color="red"
outline
@click.native="removeCommunicationInput({ index })"
@@ -139,7 +139,6 @@
id="send"
name="send"
:disabled="!connectionState"
class="rounded-l-none"
:label="$t('action.send')"
@click.native="sendMessage"
/>

5
components/realtime/Websocket.vue
View File

@@ -167,7 +167,7 @@
{{ $t("websocket.communication") }}
</label>
</div>
<div class="flex px-4">
<div class="flex space-x-2 px-4">
<input
id="websocket-message"
v-model="communication.input"
@@ -175,7 +175,7 @@
type="text"
:disabled="!connectionState"
:placeholder="$t('websocket.message')"
class="input !rounded-r-none"
class="input"
@keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null"
@@ -184,7 +184,6 @@
id="send"
name="send"
:disabled="!connectionState"
class="rounded-l-none"
:label="$t('action.send')"
@click.native="sendMessage"
/>