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

chore(refactor): modern UI

Browse Source
This commit is contained in:
Liyas Thomas
2020-12-11 22:24:34 +05:30
parent 773423069b
commit 5a7bcf32ea
55 changed files with 936 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/realtime/websocket.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<pw-section class="blue" :label="$t('request')" ref="request">
<pw-section class="blue" :label="$t('request')" ref="request" no-legend>
<ul>
<li>
<label for="websocket-url">{{ $t("url") }}</label>
@@ -11,12 +11,19 @@
:class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
class="md:rounded-bl-lg"
/>
</li>
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<span>
<i class="material-icons">
@@ -29,7 +36,7 @@
</ul>
</pw-section>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
<pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<ul>
<li>
<log :title="$t('log')" :log="communication.log" />
@@ -47,12 +54,19 @@
@keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null"
class="md:rounded-bl-lg"
/>
</li>
<div>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ $t("send") }}
<span>
<i class="material-icons">send</i>