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

Refactor UI

Browse Source
This commit is contained in:
Liyas Thomas
2020-12-11 15:59:03 +05:30
parent 1e6773deb5
commit 773423069b
31 changed files with 1005 additions and 1083 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/http/codegen-modal.vue
View File

@@ -1,72 +1,60 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div slot="body">
<ul>
<li>
<label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper">
<v-popover>
<pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
<input
v-else
id="requestType"
v-model="requestType"
:placeholder="$t('choose_language')"
class="cursor-pointer"
readonly
autofocus
/>
<template slot="popover">
<div v-for="gen in codegens" :key="gen.id">
<button class="icon" @click="requestType = gen.id" v-close-popover>
{{ gen.name }}
</button>
</div>
</template>
</v-popover>
</span>
</li>
</ul>
<ul>
<li>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
>
<i class="material-icons">content_copy</i>
<label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper">
<v-popover>
<pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
<input
v-else
id="requestType"
v-model="requestType"
:placeholder="$t('choose_language')"
class="cursor-pointer"
readonly
autofocus
/>
<template slot="popover">
<div v-for="gen in codegens" :key="gen.id">
<button class="icon" @click="requestType = gen.id" v-close-popover>
{{ gen.name }}
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
readonly
></textarea>
</li>
</ul>
</template>
</v-popover>
</span>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
>
<i class="material-icons">content_copy</i>
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
readonly
></textarea>
</div>
</modal>
</template>

26
components/http/import-curl.vue
View File

@@ -1,25 +1,17 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div slot="body">
<ul>
<li>
<textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
</li>
</ul>
<textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
</div>
<div slot="footer">
<div class="row-wrapper">

10
components/http/notes.vue
View File

@@ -5,14 +5,8 @@
<feeds />
</div>
<div v-else>
<ul>
<li>
<label>{{ $t("login_first") }}</label>
<p>
<login />
</p>
</li>
</ul>
<p class="info">{{ $t("login_first") }}</p>
<login />
</div>
</pw-section>
</template>

48
components/http/token-list.vue
View File

@@ -1,36 +1,28 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div slot="body">
<ul>
<li>
<div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
class="icon"
@click="clearContent('tokens', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
class="icon"
@click="clearContent('tokens', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
<ul id="token-list" v-for="(token, index) in tokens" :key="index">
<li>
<input