feat: refactor buttons
This commit is contained in:
Liyas Thomas
GitHub
298
pages/api.vue
298
pages/api.vue
@@ -10,7 +10,7 @@
|
||||
<li class="shrink">
|
||||
<label for="method">{{ $t("method") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<input
|
||||
id="method"
|
||||
@@ -24,16 +24,14 @@
|
||||
v-for="(methodMenuItem, index) in methodMenuItems"
|
||||
:key="`method-${index}`"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
customMethod =
|
||||
methodMenuItem == 'CUSTOM' ? true : false
|
||||
method = methodMenuItem
|
||||
"
|
||||
>
|
||||
{{ methodMenuItem }}
|
||||
</button>
|
||||
/>
|
||||
{{ methodMenuItem }}
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
@@ -57,31 +55,27 @@
|
||||
</li>
|
||||
<li class="shrink">
|
||||
<label class="hide-on-small-screen" for="send"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="!runningRequest"
|
||||
:disabled="!isValidURL"
|
||||
@click="sendRequest"
|
||||
@click.native="sendRequest"
|
||||
id="send"
|
||||
class="button"
|
||||
ref="sendButton"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
icon="send"
|
||||
:label="$t('send')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-else
|
||||
@click="cancelRequest"
|
||||
@click.native="cancelRequest"
|
||||
id="send"
|
||||
class="button"
|
||||
ref="sendButton"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
<span>
|
||||
<i class="material-icons">clear</i>
|
||||
</span>
|
||||
</button>
|
||||
/>
|
||||
{{ $t("cancel") }}
|
||||
<span>
|
||||
<i class="material-icons">clear</i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
@@ -108,7 +102,12 @@
|
||||
$t("content_type")
|
||||
}}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<input
|
||||
id="contentType"
|
||||
@@ -123,12 +122,10 @@
|
||||
) in validContentTypes"
|
||||
:key="`content-type-${index}`"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="contentType = contentTypeMenuItem"
|
||||
>
|
||||
{{ contentTypeMenuItem }}
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="contentType = contentTypeMenuItem"
|
||||
/>
|
||||
{{ contentTypeMenuItem }}
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
@@ -177,55 +174,48 @@
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showCurlImportModal = !showCurlImportModal"
|
||||
<ButtonSecondary
|
||||
@click.native="showCurlImportModal = !showCurlImportModal"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import_curl')"
|
||||
>
|
||||
<i class="material-icons">import_export</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showCodegenModal = !showCodegenModal"
|
||||
/>
|
||||
<i class="material-icons">import_export</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="showCodegenModal = !showCodegenModal"
|
||||
:disabled="!isValidURL"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('show_code')"
|
||||
>
|
||||
<i class="material-icons">code</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">code</i>
|
||||
</span>
|
||||
<span>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="copyRequest"
|
||||
<ButtonSecondary
|
||||
@click.native="copyRequest"
|
||||
ref="copyRequest"
|
||||
:disabled="!isValidURL"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_request_link')"
|
||||
>
|
||||
<i v-if="navigatorShare" class="material-icons">share</i>
|
||||
<i v-else class="material-icons">content_copy</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="saveRequest"
|
||||
/>
|
||||
<i v-if="navigatorShare" class="material-icons">share</i>
|
||||
<i v-else class="material-icons">content_copy</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="saveRequest"
|
||||
ref="saveRequest"
|
||||
:disabled="!isValidURL"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('save_to_collections')"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('', $event)"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear_all')"
|
||||
ref="clearAll"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</span>
|
||||
</div>
|
||||
</AppSection>
|
||||
@@ -276,14 +266,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="auth">{{ $t("authentication") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('auth', $event)"
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('auth', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="select-wrapper">
|
||||
@@ -316,22 +304,20 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
ref="switchVisibility"
|
||||
@click="switchVisibility"
|
||||
@click.native="switchVisibility"
|
||||
/>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType === 'text'"
|
||||
>visibility</i
|
||||
>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType !== 'text'"
|
||||
>visibility_off</i
|
||||
>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType === 'text'"
|
||||
>visibility</i
|
||||
>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType !== 'text'"
|
||||
>visibility_off</i
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -344,24 +330,23 @@
|
||||
name="bearer_token"
|
||||
v-model="bearerToken"
|
||||
/>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon button"
|
||||
@click="showTokenListModal = !showTokenListModal"
|
||||
@click.native="
|
||||
showTokenListModal = !showTokenListModal
|
||||
"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('use_token')"
|
||||
>
|
||||
<i class="material-icons">open_in_new</i>
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<i class="material-icons">open_in_new</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon button"
|
||||
@click="showTokenRequest = !showTokenRequest"
|
||||
@click.native="showTokenRequest = !showTokenRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('get_token')"
|
||||
>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -384,30 +369,28 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="token-name">{{ $t("token_name") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showTokenRequestList = true"
|
||||
<ButtonSecondary
|
||||
@click.native="showTokenRequestList = true"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('manage_token_req')"
|
||||
>
|
||||
<i class="material-icons">library_add</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('access_token', $event)"
|
||||
/>
|
||||
<i class="material-icons">library_add</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
clearContent('access_token', $event)
|
||||
"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showTokenRequest = false"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="showTokenRequest = false"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('close')"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
@@ -496,13 +479,11 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="handleAccessTokenRequest"
|
||||
>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
<span>{{ $t("request_token") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="handleAccessTokenRequest"
|
||||
/>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
<span>{{ $t("request_token") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
@@ -518,19 +499,13 @@
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
>
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
|
||||
blank
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartJsEditor
|
||||
@@ -558,19 +533,13 @@
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
>
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
|
||||
blank
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartJsEditor
|
||||
@@ -590,14 +559,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label>Test Reports</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('tests', $event)"
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('tests', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -722,33 +689,29 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("manage_token_req") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="showTokenRequestList = false">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="showTokenRequestList = false" />
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="row-wrapper">
|
||||
<label for="token-req-list">{{ $t("token_req_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="this.tokenReqs.length === 0"
|
||||
class="icon button"
|
||||
@click="showTokenRequestList = false"
|
||||
@click.native="showTokenRequestList = false"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('use_token_req')"
|
||||
>
|
||||
<i class="material-icons">input</i>
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<i class="material-icons">input</i>
|
||||
|
||||
<ButtonSecondary
|
||||
:disabled="this.tokenReqs.length === 0"
|
||||
class="icon button"
|
||||
@click="removeOAuthTokenReq"
|
||||
@click.native="removeOAuthTokenReq"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
@@ -788,9 +751,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button primary" @click="addOAuthTokenReq">
|
||||
{{ $t("save_token_req") }}
|
||||
</button>
|
||||
<ButtonPrimary @click.native="addOAuthTokenReq" />
|
||||
{{ $t("save_token_req") }}
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -10,15 +10,13 @@
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
class="icon button"
|
||||
@click="$refs.collectionUpload.click()"
|
||||
>
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t("import_collections") }}</span>
|
||||
</button>
|
||||
icon="folder"
|
||||
:label="$t('import_collections')"
|
||||
@click.native="$refs.collectionUpload.click()"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
@@ -28,14 +26,12 @@
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="collectionJSON = '[]'"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
icon="clear_all"
|
||||
@click.native="collectionJSON = '[]'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
@@ -51,10 +47,11 @@
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<button class="icon button" @click="getDoc">
|
||||
<i class="material-icons">topic</i>
|
||||
<span>{{ $t("generate_docs") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="topic"
|
||||
:label="$t('generate_docs')"
|
||||
@click.native="getDoc"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
@@ -75,7 +72,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -83,12 +80,10 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createDocsGist"
|
||||
>
|
||||
<i class="material-icons">assignment</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
icon="assignment"
|
||||
label="$t('create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="get" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="get"
|
||||
name="get"
|
||||
class="
|
||||
@@ -27,15 +27,14 @@
|
||||
rounded-b-lg
|
||||
md:rounded-bl-none md:rounded-br-lg
|
||||
"
|
||||
@click="onPollSchemaClick"
|
||||
@click.native="onPollSchemaClick"
|
||||
/>
|
||||
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
|
||||
<span
|
||||
><i class="material-icons">{{
|
||||
!isPollingSchema ? "sync" : "sync_disabled"
|
||||
}}</i></span
|
||||
>
|
||||
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
|
||||
<span
|
||||
><i class="material-icons">{{
|
||||
!isPollingSchema ? "sync" : "sync_disabled"
|
||||
}}</i></span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -49,14 +48,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="headers = []"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="headers = []"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -103,7 +100,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: header.hasOwnProperty('active')
|
||||
@@ -112,8 +109,7 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$store.commit('setActiveGQLHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active')
|
||||
@@ -121,38 +117,34 @@
|
||||
: 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>
|
||||
</div>
|
||||
@@ -162,7 +154,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
@@ -170,31 +162,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="downloadSchema"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadSchema"
|
||||
>
|
||||
<i class="material-icons">{{ downloadSchemaIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadSchema"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadSchemaIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="copySchemaCode"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_schema')"
|
||||
class="icon button"
|
||||
@click="copySchema"
|
||||
>
|
||||
<i class="material-icons">{{ copySchemaIcon }}</i>
|
||||
</button>
|
||||
@click.native="copySchema"
|
||||
/>
|
||||
<i class="material-icons">{{ copySchemaIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
@@ -227,42 +215,38 @@
|
||||
<div class="row-wrapper gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="
|
||||
`${$t('run_query')} (${getSpecialKey()}-Enter)`
|
||||
"
|
||||
class="button"
|
||||
@click="runQuery()"
|
||||
>
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="runQuery()"
|
||||
/>
|
||||
<i class="material-icons">play_arrow</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="copyQueryButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_query')"
|
||||
class="icon button"
|
||||
@click="copyQuery"
|
||||
>
|
||||
<i class="material-icons">{{ copyQueryIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="copyQuery"
|
||||
/>
|
||||
<i class="material-icons">{{ copyQueryIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
|
||||
class="icon button"
|
||||
@click="doPrettifyQuery"
|
||||
>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="doPrettifyQuery"
|
||||
/>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="saveRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('save_to_collections')"
|
||||
class="icon button"
|
||||
@click="saveRequest"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</button>
|
||||
@click.native="saveRequest"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</div>
|
||||
</div>
|
||||
<GraphqlQueryEditor
|
||||
@@ -307,26 +291,23 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadResponseIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadResponseIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="copyResponseButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyResponseIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyResponseIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<template>
|
||||
<div>My profile</div>
|
||||
<div>
|
||||
<FirebaseLogin />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,24 +8,24 @@
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("account") }}</label>
|
||||
<div v-if="currentUser">
|
||||
<button class="icon button">
|
||||
<img
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="w-6 h-6 rounded-full material-icons"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<span>
|
||||
{{ currentUser.displayName || $t("nothing_found") }}
|
||||
</span>
|
||||
</button>
|
||||
<ButtonSecondary />
|
||||
<img
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="w-6 h-6 rounded-full material-icons"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<span>
|
||||
{{ currentUser.displayName || $t("nothing_found") }}
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<button class="icon button">
|
||||
<i class="material-icons">email</i>
|
||||
<span>
|
||||
{{ currentUser.email || $t("nothing_found") }}
|
||||
</span>
|
||||
</button>
|
||||
<ButtonSecondary />
|
||||
<i class="material-icons">email</i>
|
||||
<span>
|
||||
{{ currentUser.email || $t("nothing_found") }}
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<FirebaseLogout />
|
||||
<p>
|
||||
@@ -119,30 +119,22 @@
|
||||
{{ PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</SmartToggle>
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
|
||||
blank
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('reset_default')"
|
||||
class="icon button"
|
||||
@click="resetProxy"
|
||||
>
|
||||
<i class="material-icons">{{ clearIcon }}</i>
|
||||
</button>
|
||||
icon="clearIcon"
|
||||
@click.native="resetProxy"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id="url"
|
||||
@@ -156,14 +148,14 @@
|
||||
{{ $t("official_proxy_hosting") }}
|
||||
<br />
|
||||
{{ $t("read_the") }}
|
||||
<a
|
||||
<SmartLink
|
||||
class="link"
|
||||
href="https://github.com/hoppscotch/proxyscotch/wiki/Privacy-policy"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
to="https://github.com/hoppscotch/proxyscotch/wiki/Privacy-policy"
|
||||
blank
|
||||
>
|
||||
{{ $t("proxy_privacy_policy") }} </a
|
||||
>.
|
||||
{{ $t("proxy_privacy_policy") }}
|
||||
</SmartLink>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
@@ -188,13 +180,14 @@
|
||||
<label>{{ $t("experiments") }}</label>
|
||||
<p class="info">
|
||||
{{ $t("experiments_notice") }}
|
||||
<a
|
||||
<SmartLink
|
||||
class="link"
|
||||
href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ $t("contact_us") }}</a
|
||||
>.
|
||||
to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
|
||||
blank
|
||||
>
|
||||
{{ $t("contact_us") }}
|
||||
</SmartLink>
|
||||
.
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<SmartToggle
|
||||
|
||||
Reference in New Issue
Block a user