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

feat: tooltip and popover components

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-02 16:30:08 +00:00
committed by GitHub
parent eaf0da3d00
commit 0e443b3a43
63 changed files with 1172 additions and 1461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
pages/api.vue
View File

@@ -10,33 +10,32 @@
<li class="shrink">
<label for="method">{{ $t("method") }}</label>
<span class="select-wrapper">
<v-popover>
<input
id="method"
class="input drop-down-input"
v-model="method"
:readonly="!customMethod"
autofocus
/>
<template #popover>
<div
v-for="(methodMenuItem, index) in methodMenuItems"
:key="`method-${index}`"
>
<button
class="icon button"
@click="
customMethod =
methodMenuItem == 'CUSTOM' ? true : false
method = methodMenuItem
"
v-close-popover
>
{{ methodMenuItem }}
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<input
id="method"
class="input drop-down-input"
v-model="method"
:readonly="!customMethod"
autofocus
/>
</template>
</v-popover>
<div
v-for="(methodMenuItem, index) in methodMenuItems"
:key="`method-${index}`"
>
<button
class="icon button"
@click="
customMethod =
methodMenuItem == 'CUSTOM' ? true : false
method = methodMenuItem
"
>
{{ methodMenuItem }}
</button>
</div>
</tippy>
</span>
</li>
<li>
@@ -109,30 +108,29 @@
$t("content_type")
}}</label>
<span class="select-wrapper">
<v-popover>
<input
id="contentType"
class="input drop-down-input"
v-model="contentType"
readonly
/>
<template #popover>
<div
v-for="(
contentTypeMenuItem, index
) in validContentTypes"
:key="`content-type-${index}`"
>
<button
class="icon button"
@click="contentType = contentTypeMenuItem"
v-close-popover
>
{{ contentTypeMenuItem }}
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<input
id="contentType"
class="input drop-down-input"
v-model="contentType"
readonly
/>
</template>
</v-popover>
<div
v-for="(
contentTypeMenuItem, index
) in validContentTypes"
:key="`content-type-${index}`"
>
<button
class="icon button"
@click="contentType = contentTypeMenuItem"
>
{{ contentTypeMenuItem }}
</button>
</div>
</tippy>
</span>
<!-- <SmartAutoComplete
:source="validContentTypes"
@@ -182,7 +180,8 @@
<button
class="icon button"
@click="showCurlImportModal = !showCurlImportModal"
v-tooltip.bottom="$t('import_curl')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_curl')"
>
<i class="material-icons">import_export</i>
</button>
@@ -190,7 +189,8 @@
class="icon button"
@click="showCodegenModal = !showCodegenModal"
:disabled="!isValidURL"
v-tooltip.bottom="$t('show_code')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('show_code')"
>
<i class="material-icons">code</i>
</button>
@@ -201,7 +201,8 @@
@click="copyRequest"
ref="copyRequest"
:disabled="!isValidURL"
v-tooltip.bottom="$t('copy_request_link')"
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>
@@ -211,14 +212,16 @@
@click="saveRequest"
ref="saveRequest"
:disabled="!isValidURL"
v-tooltip.bottom="$t('save_to_collections')"
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)"
v-tooltip.bottom="$t('clear_all')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')"
ref="clearAll"
>
<i class="material-icons">clear_all</i>
@@ -276,7 +279,8 @@
<button
class="icon button"
@click="clearContent('auth', $event)"
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -344,7 +348,8 @@
v-if="auth === 'OAuth 2.0'"
class="icon button"
@click="showTokenListModal = !showTokenListModal"
v-tooltip.bottom="$t('use_token')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('use_token')"
>
<i class="material-icons">open_in_new</i>
</button>
@@ -352,7 +357,8 @@
v-if="auth === 'OAuth 2.0'"
class="icon button"
@click="showTokenRequest = !showTokenRequest"
v-tooltip.bottom="$t('get_token')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('get_token')"
>
<i class="material-icons">vpn_key</i>
</button>
@@ -381,21 +387,24 @@
<button
class="icon button"
@click="showTokenRequestList = true"
v-tooltip.bottom="$t('manage_token_req')"
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)"
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
<button
class="icon button"
@click="showTokenRequest = false"
v-tooltip.bottom="$t('close')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('close')"
>
<i class="material-icons">close</i>
</button>
@@ -516,7 +525,8 @@
>
<button
class="icon button"
v-tooltip="$t('wiki')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('wiki')"
>
<i class="material-icons">help_outline</i>
</button>
@@ -555,7 +565,8 @@
>
<button
class="icon button"
v-tooltip="$t('wiki')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('wiki')"
>
<i class="material-icons">help_outline</i>
</button>
@@ -582,7 +593,8 @@
<button
class="icon button"
@click="clearContent('tests', $event)"
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -723,7 +735,8 @@
:disabled="this.tokenReqs.length === 0"
class="icon button"
@click="showTokenRequestList = false"
v-tooltip.bottom="$t('use_token_req')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('use_token_req')"
>
<i class="material-icons">input</i>
</button>
@@ -731,7 +744,8 @@
:disabled="this.tokenReqs.length === 0"
class="icon button"
@click="removeOAuthTokenReq"
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
>
<i class="material-icons">delete</i>
</button>

9
pages/doc.vue
View File

@@ -11,7 +11,8 @@
<div class="row-wrapper">
<label for="collectionUpload">
<button
v-tooltip="'JSON'"
v-tippy="{ theme: 'tooltip' }"
title="JSON"
class="icon button"
@click="$refs.collectionUpload.click()"
>
@@ -28,7 +29,8 @@
/>
<div>
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="collectionJSON = '[]'"
>
@@ -64,7 +66,8 @@
</p>
<div v-else class="row-wrapper">
<div
v-tooltip.bottom="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'

36
pages/graphql.vue
View File

@@ -50,7 +50,8 @@
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="headers = []"
>
@@ -103,7 +104,8 @@
<div>
<li>
<button
v-tooltip.bottom="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: header.hasOwnProperty('active')
? header.active
? $t('turn_off')
@@ -135,7 +137,8 @@
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestHeader(index)"
>
@@ -161,7 +164,8 @@
<div v-if="schema">
<button
ref="ToggleExpandResponse"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
@@ -175,7 +179,8 @@
</button>
<button
ref="downloadSchema"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadSchema"
>
@@ -183,7 +188,8 @@
</button>
<button
ref="copySchemaCode"
v-tooltip="$t('copy_schema')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_schema')"
class="icon button"
@click="copySchema"
>
@@ -222,7 +228,8 @@
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<button
v-tooltip.bottom="
v-tippy="{ theme: 'tooltip' }"
title="
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
class="button"
@@ -232,14 +239,16 @@
</button>
<button
ref="copyQueryButton"
v-tooltip="$t('copy_query')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_query')"
class="icon button"
@click="copyQuery"
>
<i class="material-icons">{{ copyQueryIcon }}</i>
</button>
<button
v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
class="icon button"
@click="doPrettifyQuery"
>
@@ -247,7 +256,8 @@
</button>
<button
ref="saveRequest"
v-tooltip.bottom="$t('save_to_collections')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
class="icon button"
@click="saveRequest"
>
@@ -300,7 +310,8 @@
<button
v-if="response"
ref="downloadResponse"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadResponse"
>
@@ -309,7 +320,8 @@
<button
v-if="response"
ref="copyResponseButton"
v-tooltip="$t('copy_response')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
class="icon button"
@click="copyResponse"
>

4
pages/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<div class="flex flex-col space-y-16">
<LandingHero />
<LandingStats />
<LandingUsers />
<LandingFeatures />
<LandingPackage />
<LandingCTA />
<LandingFooter />
</div>
</template>

9
pages/settings.vue
View File

@@ -124,7 +124,11 @@
target="_blank"
rel="noopener"
>
<button v-tooltip="$t('wiki')" class="icon button">
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('wiki')"
class="icon button"
>
<i class="material-icons">help_outline</i>
</button>
</a>
@@ -132,7 +136,8 @@
<div class="row-wrapper">
<label for="url">{{ $t("url") }}</label>
<button
v-tooltip.bottom="$t('reset_default')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('reset_default')"
class="icon button"
@click="resetProxy"
>