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

feat: refactor buttons

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-03 13:14:58 +00:00
committed by GitHub
parent 04b0cd2d3b
commit 1ee2fecbc2
103 changed files with 2150 additions and 2496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/http/BodyParameters.vue
View File

@@ -5,14 +5,12 @@
<div class="row-wrapper">
<label for="reqParamList">{{ $t("request_body") }}</label>
<div>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('bodyParams', $event)"
>
<i class="material-icons">clear_all</i>
</button>
@click.native="clearContent('bodyParams', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -68,7 +66,7 @@
</li>
<div>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="{
content: param.hasOwnProperty('active')
@@ -77,30 +75,27 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon button"
@click="toggleActive(index, param)"
>
<i class="material-icons">
{{
param.hasOwnProperty("active")
? param.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</button>
@click.native="toggleActive(index, param)"
/>
<i class="material-icons">
{{
param.hasOwnProperty("active")
? param.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div v-if="contentType === 'multipart/form-data'">
<li>
<label for="attachment" class="p-0">
<button
<ButtonSecondary
class="w-full button icon"
@click="$refs.attachment[index].click()"
>
<i class="material-icons">attach_file</i>
</button>
@click.native="$refs.attachment[index].click()"
/>
<i class="material-icons">attach_file</i>
</label>
<input
ref="attachment"
@@ -114,27 +109,23 @@
</div>
<div>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestBodyParam(index)"
>
<i class="material-icons">delete</i>
</button>
@click.native="removeRequestBodyParam(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<button
class="icon button"
<ButtonSecondary
name="addrequest"
@click="addRequestBodyParam"
>
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
@click.native="addRequestBodyParam"
/>
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</li>
</ul>
</div>

21
components/http/CodegenModal.vue
View File

@@ -3,15 +3,13 @@
<template #header>
<h3 class="heading">{{ $t("generate_code") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
<label for="requestType">{{ $t("choose_language") }}</label>
<span class="select-wrapper">
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<pre v-if="requestType">{{
codegens.find((x) => x.id === requestType).name
@@ -27,24 +25,21 @@
/>
</template>
<div v-for="gen in codegens" :key="gen.id">
<button class="icon button" @click="requestType = gen.id">
{{ gen.name }}
</button>
<ButtonSecondary @click.native="requestType = gen.id" />
{{ gen.name }}
</div>
</tippy>
</span>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
<ButtonSecondary
ref="copyRequestCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_code')"
class="icon button"
@click="copyRequestCode"
>
<i class="material-icons">{{ copyIcon }}</i>
</button>
@click.native="copyRequestCode"
/>
<i class="material-icons">{{ copyIcon }}</i>
</div>
</div>
<SmartAceEditor

53
components/http/Headers.vue
View File

@@ -5,14 +5,12 @@
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('headers', $event)"
>
<i class="material-icons">clear_all</i>
</button>
@click.native="clearContent('headers', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -63,7 +61,7 @@
</li>
<div>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="{
content: header.hasOwnProperty('active')
@@ -72,45 +70,40 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon button"
@click="
@click.native="
$store.commit('setActiveHeader', {
index,
value: header.hasOwnProperty('active') ? !header.active : false,
})
"
>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</button>
/>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestHeader(index)"
>
<i class="material-icons">delete</i>
</button>
@click.native="removeRequestHeader(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon button" @click="addRequestHeader">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
<ButtonSecondary @click.native="addRequestHeader" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</li>
</ul>
</AppSection>

12
components/http/ImportCurl.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("import_curl") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -20,12 +18,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="handleImport">
{{ $t("import") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('import')" @click.native="handleImport" />
</span>
</template>
</SmartModal>

53
components/http/Parameters.vue
View File

@@ -5,14 +5,12 @@
<div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('parameters', $event)"
>
<i class="material-icons">clear_all</i>
</button>
@click.native="clearContent('parameters', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -82,7 +80,7 @@
</li>
<div>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="{
content: param.hasOwnProperty('active')
@@ -91,45 +89,40 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon button"
@click="
@click.native="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
>
<i class="material-icons">
{{
param.hasOwnProperty("active")
? param.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</button>
/>
<i class="material-icons">
{{
param.hasOwnProperty("active")
? param.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestParam(index)"
>
<i class="material-icons">delete</i>
</button>
@click.native="removeRequestParam(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon button" @click="addRequestParam">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
<ButtonSecondary @click.native="addRequestParam" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</li>
</ul>
</AppSection>

31
components/http/RawBody.vue
View File

@@ -5,25 +5,22 @@
<div class="row-wrapper">
<label for="rawBody">{{ $t("raw_request_body") }}</label>
<div>
<button
<ButtonSecondary
v-if="rawInput && contentType.endsWith('json')"
ref="prettifyRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('prettify_body')"
class="icon button"
@click="prettifyRequestBody"
>
<i class="material-icons">{{ prettifyIcon }}</i>
</button>
@click.native="prettifyRequestBody"
/>
<i class="material-icons">{{ prettifyIcon }}</i>
<label for="payload" class="p-0">
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_json')"
class="icon button"
@click="$refs.payload.click()"
>
<i class="material-icons">post_add</i>
</button>
@click.native="$refs.payload.click()"
/>
<i class="material-icons">post_add</i>
</label>
<input
ref="payload"
@@ -32,14 +29,12 @@
type="file"
@change="uploadPayload"
/>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('rawParams', $event)"
>
<i class="material-icons">clear_all</i>
</button>
@click.native="clearContent('rawParams', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
<div class="relative">

34
components/http/TokenList.vue
View File

@@ -3,23 +3,19 @@
<template #header>
<h3 class="heading">{{ $t("manage_token") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
<div class="row-wrapper">
<label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('tokens', $event)"
>
<i class="material-icons">clear_all</i>
</button>
icon="clear_all"
@click.native="clearContent('tokens', $event)"
/>
</div>
</div>
<ul v-for="(token, index) in tokens" :key="index">
@@ -41,24 +37,20 @@
</li>
<div class="row-wrapper">
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('use_token')"
class="icon button"
@click="useOAuthToken(token.value)"
>
<i class="material-icons">input</i>
</button>
icon="input"
@click.native="useOAuthToken(token.value)"
/>
</li>
<li>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeOAuthToken(index)"
>
<i class="material-icons">delete</i>
</button>
icon="delete"
@click.native="removeOAuthToken(index)"
/>
</li>
</div>
</ul>