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

6
components/app/Extensions.vue
View File

@@ -32,7 +32,8 @@
<span>Firefox</span>
<span
v-if="hasFirefoxExtInstalled"
v-tooltip="$t('installed')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('installed')"
class="icon button"
>
<i class="material-icons">done</i>
@@ -60,7 +61,8 @@
<span>Chrome</span>
<span
v-if="hasChromeExtInstalled"
v-tooltip="$t('installed')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('installed')"
class="icon button"
>
<i class="material-icons">done</i>

53
components/app/Footer.vue
View File

@@ -1,53 +0,0 @@
<template>
<footer class="footer">
<div class="flex justify-between items-center flex-1">
<span class="flex text-xs font-mono" style="align-items: start"> </span>
<span class="flex text-xs font-mono" style="align-items: start">
<a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
<button class="icon button">
<i class="material-icons text-xl">email</i>
<span>
{{ $t("contact_us") }}
</span>
</button>
</a>
<v-popover>
<button v-tooltip="$t('choose_language')" class="icon button">
<i class="material-icons text-xl">translate</i>
<span>
{{ $i18n.locales.find(({ code }) => code === $i18n.locale).name }}
</span>
</button>
<template #popover>
<div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)">
<button v-close-popover class="icon button">
{{ locale.name }}
</button>
</nuxt-link>
</div>
</template>
</v-popover>
</span>
</div>
</footer>
</template>
<script>
export default {
computed: {
availableLocales() {
return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
},
},
}
</script>
<style scoped lang="scss">
.footer-link {
@apply flex-shrink-0;
@apply my-2 mx-4;
@apply text-secondaryLight text-sm;
@apply hover:text-secondary;
}
</style>

167
components/app/Header.vue
View File

@@ -9,7 +9,8 @@
<div class="flex">
<button
id="installPWA"
v-tooltip="$t('install_pwa')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('install_pwa')"
class="icon button"
@click.prevent="showInstallPrompt()"
>
@@ -21,7 +22,12 @@
aria-label="GitHub"
rel="noopener"
>
<button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
<button
v-tippy="{ theme: 'tooltip' }"
title="GitHub"
class="icon button"
aria-label="GitHub"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -34,94 +40,95 @@
</svg>
</button>
</a>
<v-popover v-if="currentUser === null">
<button v-tooltip="$t('login_with')" class="icon button">
<i class="material-icons">login</i>
</button>
<template #popover>
<FirebaseLogin @show-email="showEmail = true" />
<tippy v-if="currentUser === null" trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('login_with')"
class="icon button"
>
<i class="material-icons">login</i>
</button>
</template>
</v-popover>
<v-popover v-else>
<button
v-tooltip="
<FirebaseLogin @show-email="showEmail = true" />
</tippy>
<tippy v-else trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
title="
(currentUser.displayName ||
'<label><i>Name not found</i></label>') +
'<br>' +
(currentUser.email || '<label><i>Email not found</i></label>')
"
class="icon button"
aria-label="Account"
>
<img
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="w-6 h-6 rounded-full material-icons"
alt="Profile image"
/>
<i v-else class="material-icons">account_circle</i>
</button>
</template>
<div>
<nuxt-link :to="localePath('settings')">
<button class="icon button">
<i class="material-icons">settings</i>
<span>
{{ $t("settings") }}
</span>
</button>
</nuxt-link>
</div>
<div>
<FirebaseLogout />
</div>
</tippy>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="icon button"
>
<i class="material-icons">drag_indicator</i>
</button>
</template>
<button class="icon button" @click="showExtensions = true">
<i class="material-icons">extension</i>
<span>{{ $t("extensions") }}</span>
</button>
<button class="icon button" @click="showShortcuts = true">
<i class="material-icons">keyboard</i>
<span>{{ $t("shortcuts") }}</span>
</button>
<button
class="icon button"
aria-label="Account"
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
>
<img
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="w-6 h-6 rounded-full material-icons"
alt="Profile image"
/>
<i v-else class="material-icons">account_circle</i>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path
d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
/>
</svg>
<span>Tweet</span>
</button>
<template #popover>
<div>
<nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon button">
<i class="material-icons">settings</i>
<span>
{{ $t("settings") }}
</span>
</button>
</nuxt-link>
</div>
<div>
<FirebaseLogout />
</div>
</template>
</v-popover>
<v-popover>
<button v-tooltip="$t('more')" class="icon button">
<i class="material-icons">drag_indicator</i>
<button
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="icon button"
@click="nativeShare"
>
<i class="material-icons">share</i>
<span>Share</span>
</button>
<template #popover>
<button
v-close-popover
class="icon button"
@click="showExtensions = true"
>
<i class="material-icons">extension</i>
<span>{{ $t("extensions") }}</span>
</button>
<button
v-close-popover
class="icon button"
@click="showShortcuts = true"
>
<i class="material-icons">keyboard</i>
<span>{{ $t("shortcuts") }}</span>
</button>
<button
v-close-popover
class="icon button"
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path
d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
/>
</svg>
<span>Tweet</span>
</button>
<button
v-if="navigatorShare"
v-close-popover
v-tooltip="$t('more')"
class="icon button"
@click="nativeShare"
>
<i class="material-icons">share</i>
<span>Share</span>
</button>
</template>
</v-popover>
</tippy>
</div>
<AppExtensions
:show="showExtensions"

2
components/app/Sidenav.vue
View File

@@ -27,7 +27,7 @@ export default {
return {
primaryNavigation: [
{ target: "index", icon: "home", title: "Home" },
{ target: "api", icon: "home", title: "APIs" },
{ target: "api", icon: "apps", title: "APIs" },
{ target: "realtime", icon: "language", title: "Realtime" },
{ target: "graphql", icon: "code", title: "GraphQL" },
{ target: "doc", icon: "book", title: "Docs" },

92
components/collections/ImportExport.vue
View File

@@ -5,7 +5,8 @@
<div>
<button
v-if="mode == 'import_from_my_collections'"
v-tooltip.left="'Back'"
v-tippy="{ theme: 'tooltip' }"
title="Back"
class="tooltip-target icon button"
@click="
mode = 'import_export'
@@ -14,55 +15,56 @@
>
<i class="material-icons">arrow_back</i>
</button>
<v-popover
<tippy
v-if="
mode == 'import_export' && collectionsType.type == 'my-collections'
"
trigger="click"
theme="popover"
arrow
>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
<div>
<button class="icon button" @click="readCollectionGist">
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tippy="{ theme: 'tooltip' }"
title="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</tippy>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
@@ -71,7 +73,8 @@
<template #body>
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
<button
v-tooltip="$t('replace_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
class="icon button"
@click="openDialogChooseFileToReplaceWith"
>
@@ -87,7 +90,8 @@
/>
</button>
<button
v-tooltip="$t('preserve_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="openDialogChooseFileToImportFrom"
>
@@ -104,7 +108,8 @@
</button>
<button
v-if="collectionsType.type == 'team-collections'"
v-tooltip="$t('preserve_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="mode = 'import_from_my_collections'"
>
@@ -112,7 +117,8 @@
<span>{{ $t("import_from_my_collections") }}</span>
</button>
<button
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="exportJSON"
>

81
components/collections/graphql/Collection.vue
View File

@@ -30,56 +30,49 @@
<div>
<button
v-if="doc"
v-tooltip.left="$t('import')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
class="icon button"
@click="$emit('select-collection')"
>
<i class="material-icons">topic</i>
</button>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="
$emit('add-folder', {
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="
$emit('add-folder', {
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="$emit('edit-collection')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
</div>
<div v-show="showChildren || isFiltered">

70
components/collections/graphql/Folder.vue
View File

@@ -28,43 +28,41 @@
<span>{{ folder.name }}</span>
</button>
</div>
<v-popover>
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="$emit('edit-folder', { folder, folderPath })"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
class="icon button"
@click="$emit('edit-folder', { folder, folderPath })"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">

82
components/collections/graphql/ImportExport.vue
View File

@@ -3,51 +3,48 @@
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
<div>
<button class="icon button" @click="readCollectionGist">
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tippy="{ theme: 'tooltip' }"
title="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</tippy>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
@@ -56,7 +53,8 @@
<template #body>
<div class="flex flex-col items-start p-2">
<button
v-tooltip="$t('replace_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
class="icon button"
@click="openDialogChooseFileToReplaceWith"
>
@@ -72,7 +70,8 @@
/>
</button>
<button
v-tooltip="$t('preserve_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="openDialogChooseFileToImportFrom"
>
@@ -88,7 +87,8 @@
/>
</button>
<button
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="exportJSON"
>

66
components/collections/graphql/Request.vue
View File

@@ -13,7 +13,8 @@
>
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
class="icon button"
@click="!doc ? selectRequest() : {}"
>
@@ -25,39 +26,38 @@
<span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<button v-tooltip="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<SmartConfirmModal
:show="confirmRemove"

5
components/collections/index.vue
View File

@@ -65,7 +65,10 @@
@click="displayModalAdd(true)"
>
<i class="material-icons">add</i>
<div v-tooltip.left="$t('disable_new_collection')">
<div
v-tippy="{ theme: 'tooltip' }"
:title="$t('disable_new_collection')"
>
<span>{{ $t("new") }}</span>
</div>
</button>

86
components/collections/my/Collection.vue
View File

@@ -30,7 +30,8 @@
<div>
<button
v-if="doc && !selected"
v-tooltip.left="$t('import')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
class="icon button"
@click="$emit('select-collection')"
>
@@ -38,57 +39,50 @@
</button>
<button
v-if="doc && selected"
v-tooltip.left="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="$emit('unselect-collection')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="$emit('edit-collection')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
</div>
<div v-show="showChildren || isFiltered">

84
components/collections/my/Folder.vue
View File

@@ -27,50 +27,48 @@
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover>
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
class="icon button"
@click="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">

72
components/collections/my/Request.vue
View File

@@ -13,7 +13,8 @@
>
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
class="icon button"
@click="!doc ? selectRequest() : {}"
>
@@ -27,42 +28,41 @@
<span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<button v-tooltip="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<SmartConfirmModal
:show="confirmRemove"

100
components/collections/teams/Collection.vue
View File

@@ -19,7 +19,8 @@
<div>
<button
v-if="doc && !selected"
v-tooltip.left="$t('import')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
class="icon button"
@click="$emit('select-collection')"
>
@@ -27,61 +28,60 @@
</button>
<button
v-if="doc && selected"
v-tooltip.left="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="$emit('unselect-collection')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon button"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon button"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
</div>
<div v-show="showChildren || isFiltered">

98
components/collections/teams/Folder.vue
View File

@@ -18,57 +18,55 @@
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon button"
@click="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath: '',
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath: '',
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">

75
components/collections/teams/Request.vue
View File

@@ -3,7 +3,8 @@
<div class="transition duration-150 ease-in-out row-wrapper">
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
class="icon button"
@click="!doc ? selectRequest() : {}"
>
@@ -17,45 +18,41 @@
<span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tooltip="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
class="icon button"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<SmartConfirmModal
:show="confirmRemove"

6
components/environments/Edit.vue
View File

@@ -22,7 +22,8 @@
<label for="variableList">{{ $t("env_variable_list") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent($event)"
>
@@ -63,7 +64,8 @@
<li>
<button
id="variable"
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeEnvironmentVariable(index)"
>

48
components/environments/Environment.vue
View File

@@ -7,33 +7,29 @@
<span>{{ environment.name }}</span>
</button>
</div>
<v-popover>
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="$emit('edit-environment')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button class="icon button" @click="$emit('edit-environment')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<SmartConfirmModal
:show="confirmRemove"

82
components/environments/ImportExport.vue
View File

@@ -5,51 +5,48 @@
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
<div>
<button class="icon button" @click="readEnvironmentGist">
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tippy="{ theme: 'tooltip' }"
title="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createEnvironmentGist"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createEnvironmentGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</tippy>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
@@ -58,7 +55,8 @@
<template #body>
<div class="flex flex-col items-start p-2">
<button
v-tooltip="$t('replace_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
class="icon button"
@click="openDialogChooseFileToReplaceWith"
>
@@ -74,7 +72,8 @@
/>
</button>
<button
v-tooltip="$t('preserve_current')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="openDialogChooseFileToImportFrom"
>
@@ -90,7 +89,8 @@
/>
</button>
<button
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="exportJSON"
>

6
components/firebase/Login.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div>
<button v-close-popover class="icon button" @click="signInWithGoogle">
<button class="icon button" @click="signInWithGoogle">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -16,7 +16,7 @@
</button>
</div>
<div>
<button v-close-popover class="icon button" @click="signInWithGithub">
<button class="icon button" @click="signInWithGithub">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -31,7 +31,7 @@
</button>
</div>
<div>
<button v-close-popover class="icon button" @click="$emit('show-email')">
<button class="icon button" @click="$emit('show-email')">
<i class="material-icons">mail</i>
<span>{{ $t("email") }}</span>
</button>

2
components/firebase/Logout.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<button v-close-popover class="icon button" @click="logout">
<button class="icon button" @click="logout">
<i class="material-icons">exit_to_app</i>
<span>{{ $t("logout") }}</span>
</button>

76
components/history/graphql/Card.vue
View File

@@ -14,7 +14,8 @@
/>
</li>
<button
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
data-testid="star_button"
@@ -27,7 +28,8 @@
</i>
</button>
<button
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: expand ? $t('hide_more') : $t('show_more'),
}"
data-testid="query_expand"
@@ -38,41 +40,40 @@
{{ expand ? "unfold_less" : "unfold_more" }}
</i>
</button>
<v-popover>
<button
v-tooltip="$t('options')"
data-testid="options"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
data-testid="restore_history_entry"
class="icon button"
:aria-label="$t('restore')"
@click="$emit('use-entry')"
>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
</button>
</div>
<div>
<button
v-close-popover
data-testid="delete_history_entry"
class="icon button"
:aria-label="$t('delete')"
@click="$emit('delete-entry')"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('options')"
data-testid="options"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
data-testid="restore_history_entry"
class="icon button"
:aria-label="$t('restore')"
@click="$emit('use-entry')"
>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
</button>
</div>
<div>
<button
data-testid="delete_history_entry"
class="icon button"
:aria-label="$t('delete')"
@click="$emit('delete-entry')"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<div class="show-on-large-screen">
<li data-testid="'query'">
@@ -91,7 +92,8 @@
<div v-if="showMore" class="show-on-large-screen">
<li>
<input
v-tooltip="entry.date"
v-tippy="{ theme: 'tooltip' }"
title="entry.date"
:aria-label="$t('time')"
type="text"
readonly

9
components/history/index.vue
View File

@@ -54,7 +54,8 @@
<span>{{ $t("clear_all") }}</span>
</button>
<button
v-tooltip="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
v-tippy="{ theme: 'tooltip' }"
title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
class="icon button"
@click="toggleCollapse()"
>
@@ -69,7 +70,8 @@
</p>
<div>
<button
v-tooltip="$t('yes')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('yes')"
data-testid="confirm_clear_history"
class="icon button"
@click="clearHistory"
@@ -77,7 +79,8 @@
<i class="material-icons">done</i>
</button>
<button
v-tooltip="$t('no')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('no')"
data-testid="reject_clear_history"
class="icon button"
@click="disableHistoryClearing"

70
components/history/rest/Card.vue
View File

@@ -22,7 +22,8 @@
</li>
<span>
<button
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
data-testid="star_button"
@@ -38,7 +39,7 @@
<!-- <li>
<button
class="icon button"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }" title="{
content: !entry.usesScripts
? 'No pre-request script'
: 'Used pre-request script'
@@ -49,37 +50,39 @@
</i>
</button>
</li> -->
<v-popover>
<button v-tooltip="$t('options')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div>
<button
v-close-popover
data-testid="restore_history_entry"
class="icon button"
:aria-label="$t('edit')"
@click="$emit('use-entry')"
>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
</button>
</div>
<div>
<button
v-close-popover
data-testid="delete_history_entry"
class="icon button"
:aria-label="$t('delete')"
@click="$emit('delete-entry')"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('options')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
</v-popover>
<div>
<button
data-testid="restore_history_entry"
class="icon button"
:aria-label="$t('edit')"
@click="$emit('use-entry')"
>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
</button>
</div>
<div>
<button
data-testid="delete_history_entry"
class="icon button"
:aria-label="$t('delete')"
@click="$emit('delete-entry')"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</tippy>
</div>
<div class="show-on-large-screen">
<li>
@@ -97,7 +100,8 @@
<div v-if="showMore" class="show-on-large-screen">
<li>
<input
v-tooltip="entry.date"
v-tippy="{ theme: 'tooltip' }"
title="entry.date"
:aria-label="$t('time')"
type="text"
readonly

9
components/http/BodyParameters.vue
View File

@@ -6,7 +6,8 @@
<label for="reqParamList">{{ $t("request_body") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('bodyParams', $event)"
>
@@ -68,7 +69,8 @@
<div>
<li>
<button
v-tooltip.bottom="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: param.hasOwnProperty('active')
? param.active
? $t('turn_off')
@@ -113,7 +115,8 @@
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestBodyParam(index)"
>

47
components/http/CodegenModal.vue
View File

@@ -11,38 +11,35 @@
<template #body>
<label for="requestType">{{ $t("choose_language") }}</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="input cursor-pointer"
readonly
autofocus
/>
<template #popover>
<div v-for="gen in codegens" :key="gen.id">
<button
v-close-popover
class="icon button"
@click="requestType = gen.id"
>
{{ gen.name }}
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<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="input cursor-pointer"
readonly
autofocus
/>
</template>
</v-popover>
<div v-for="gen in codegens" :key="gen.id">
<button class="icon button" @click="requestType = gen.id">
{{ gen.name }}
</button>
</div>
</tippy>
</span>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_code')"
class="icon button"
@click="copyRequestCode"
>

9
components/http/Headers.vue
View File

@@ -6,7 +6,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="clearContent('headers', $event)"
>
@@ -63,7 +64,8 @@
<div>
<li>
<button
v-tooltip.bottom="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: header.hasOwnProperty('active')
? header.active
? $t('turn_off')
@@ -93,7 +95,8 @@
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestHeader(index)"
>

9
components/http/Parameters.vue
View File

@@ -6,7 +6,8 @@
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('parameters', $event)"
>
@@ -82,7 +83,8 @@
<div>
<li>
<button
v-tooltip.bottom="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: param.hasOwnProperty('active')
? param.active
? $t('turn_off')
@@ -112,7 +114,8 @@
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeRequestParam(index)"
>

9
components/http/RawBody.vue
View File

@@ -8,7 +8,8 @@
<button
v-if="rawInput && contentType.endsWith('json')"
ref="prettifyRequest"
v-tooltip="$t('prettify_body')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('prettify_body')"
class="icon button"
@click="prettifyRequestBody"
>
@@ -16,7 +17,8 @@
</button>
<label for="payload" class="p-0">
<button
v-tooltip="$t('import_json')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_json')"
class="icon button"
@click="$refs.payload.click()"
>
@@ -31,7 +33,8 @@
@change="uploadPayload"
/>
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('rawParams', $event)"
>

9
components/http/TokenList.vue
View File

@@ -13,7 +13,8 @@
<label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
v-tooltip.bottom="$t('clear')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
class="icon button"
@click="clearContent('tokens', $event)"
>
@@ -41,7 +42,8 @@
<div class="row-wrapper">
<li>
<button
v-tooltip.bottom="$t('use_token')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('use_token')"
class="icon button"
@click="useOAuthToken(token.value)"
>
@@ -50,7 +52,8 @@
</li>
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeOAuthToken(index)"
>

77
components/landing/CTA.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div class="flex p-4 bg-primaryLight rounded">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="(cta, index) in ctas"
:key="`cta-${index}`"
class="inline-flex flex-col p-8"
>
<i class="text-3xl material-icons text-accent">{{ cta.icon }}</i>
<div class="flex-grow">
<h2
class="
mt-4
mb-2
text-lg
font-semibold
transition
text-secondaryDark
"
>
{{ cta.title }}
</h2>
<p>
{{ cta.description }}
</p>
<p class="mt-2">
<SmartLink :to="cta.link.target" class="link" blank>
{{ cta.link.title }}
<i class="material-icons">chevron_right</i>
</SmartLink>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ctas: [
{
icon: "layers",
title: "API Documentation",
description:
"Get up and running with Kooli in as little as 10 minutes.",
link: {
title: "API reference",
target: "https://docs.kooli.tech/api",
},
},
{
icon: "local_library",
title: "Guides",
description:
"Explore and start integrating Kooli's products and tools.",
link: {
title: "Guides and resources",
target: "https://docs.kooli.tech/guides",
},
},
{
icon: "local_library",
title: "Guides",
description:
"Explore and start integrating Kooli's products and tools.",
link: {
title: "Guides and resources",
target: "https://docs.kooli.tech/guides",
},
},
],
}
},
}
</script>

28
components/landing/Features.vue
View File

@@ -4,38 +4,14 @@
<p class="my-4 font-semibold tracking-widest text-center text-accent">
FEATURES
</p>
<h3
class="
max-w-xl
mt-4
mb-8
text-4xl
font-bold
leading-tight
tracking-tight
text-center
transition
text-secondaryDark
"
>
A technology-first approach to payments and finance
</h3>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="(feature, index) in features"
:key="`feature-${index}`"
class="
inline-flex
flex-col
p-8
transition
border
rounded-lg
border-divider
"
class="inline-flex flex-col p-8"
>
<i class="text-3xl material-icons text-accent">{{ feature.icon }}</i>
<i class="text-4xl material-icons text-accent">{{ feature.icon }}</i>
<div class="flex-grow">
<h2
class="

15
components/landing/Footer.vue
View File

@@ -1,18 +1,11 @@
<template>
<footer class="flex flex-col px-8 py-16">
<footer class="flex flex-col p-4">
<nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
<div class="flex flex-col space-y-2">
<SmartLink
:to="
!$store.state.authUser
? localePath('/')
: localePath(`/${$store.state.login}`)
"
class="my-2"
>
<span>
<AppLogo class="h-8" />
</SmartLink>
<span> Kooli </span>
</span>
<span class="font-bold"> Hoppscotch </span>
<SmartChangeLanguage />
<ul class="space-y-2">
<li>

46
components/landing/Globe.vue
View File

@@ -12,23 +12,47 @@ export default {
data() {
return {
globe: null,
cube: null,
renderer: null,
scene: null,
camera: null,
tbControls: null,
arcsData: [...Array(40).keys()].map(() => ({
arcsData: [...Array(20).keys()].map(() => ({
startLat: (Math.random() - 0.5) * 180,
startLng: (Math.random() - 0.5) * 360,
endLat: (Math.random() - 0.5) * 180,
endLng: (Math.random() - 0.5) * 360,
color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
Math.round(Math.random() * 3)
color: [
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
Math.round(Math.random() * 3)
],
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
Math.round(Math.random() * 3)
],
],
})),
}
},
// computed: {
// labelsData() {
// const labelsData = []
// this.arcsData.forEach(
// ({ startLat, startLng, endLat, endLng, color }, linkIdx) =>
// [
// [startLat, startLng],
// [endLat, endLng],
// ].forEach(([lat, lng], edgeIdx) =>
// labelsData.push({
// lat,
// lng,
// color: color[edgeIdx],
// text: `${linkIdx} ${edgeIdx ? "tgt" : "src"}`,
// })
// )
// )
// return labelsData
// },
// },
mounted() {
this.init()
this.animate()
@@ -52,17 +76,27 @@ export default {
this.globe = new ThreeGlobe()
.globeImageUrl(texture)
.atmosphereColor("#aaaaaa")
// arcs layer
.arcsData(this.arcsData)
.arcColor("color")
.arcDashLength(1)
.arcDashGap(5)
.arcDashGap(() => Math.random())
.arcStroke(1)
.arcDashInitialGap(() => Math.random() * 5)
.arcDashAnimateTime(2000)
// hex layer
.hexPolygonsData(geojson.features)
.hexPolygonResolution(3)
.hexPolygonMargin(0.5)
.hexPolygonColor(() => `#aaaaaa`)
// labels layer
// .labelsData(this.labelsData)
// .labelLat("lat")
// .labelLng("lng")
// .labelText("text")
// .labelColor("color")
// .labelSize(1.5)
// .labelDotRadius(0.5)
this.renderer = new THREE.WebGLRenderer({
alpha: true,

16
components/landing/Hero.vue
View File

@@ -6,9 +6,9 @@
leading-none
tracking-tighter
font-semibold
text-accent text-5xl
md:text-6xl
lg:text-8xl
text-accent text-4xl
md:text-5xl
lg:text-6xl
"
>
Open Source
@@ -16,7 +16,7 @@
<h3
class="
text-3xl
my-8
my-4
font-mono
text-secondaryDark
md:text-4xl
@@ -32,7 +32,13 @@
in the world.
</p>
<div class="my-8 flex items-center">
<button class="button rounded text-xl">Get Started</button>
<ButtonPrimary
label="Dashboard"
icon="chevron_right"
class="my-4"
large
reverse
/>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">

142
components/landing/Package.vue
View File

@@ -1,142 +0,0 @@
<template>
<div class="flex flex-col p-4">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div
class="inline-flex flex-col transition border rounded-lg border-divider"
>
<div class="flex flex-col p-8">
<p class="font-semibold tracking-widest text-accent">API</p>
<h3
class="
max-w-xl
my-4
text-4xl
font-semibold
leading-tight
tracking-tight
transition
text-secondaryDark
"
>
Powerful and easy-to-use APIs
</h3>
<p class="my-4 text-lg md:w-4/5">
We agonize over the right abstractions so your teams don’t need to
stitch together disparate systems or spend months integrating
payments functionality.
</p>
<div class="flex mt-4">
<ButtonPrimary
to="https://docs.kooli.tech/guides"
label="Read the docs"
icon="chevron_right"
reverse
/>
</div>
</div>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div
v-for="(api, index) in apis"
:key="`api-${index}`"
class="inline-flex flex-col p-8"
>
<i class="text-3xl material-icons text-accent">{{ api.icon }}</i>
<div class="flex-grow">
<h2
class="
mt-4
mb-2
text-lg
font-semibold
transition
text-secondaryDark
"
>
{{ api.title }}
</h2>
<p>
{{ api.description }}
</p>
<p class="mt-2">
<SmartLink :to="api.link.target" class="link">
{{ api.link.title }}
<i class="material-icons">chevron_right</i>
</SmartLink>
</p>
</div>
</div>
</div>
</div>
<div
class="
inline-flex
flex-col
p-4
transition
border
rounded-lg
border-divider
bg-primaryLight
"
>
<div class="flex">
<div class="w-3 h-3 mr-2 bg-red-500 rounded-full"></div>
<div class="w-3 h-3 mr-2 bg-yellow-500 rounded-full"></div>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
</div>
<div class="flex flex-1 p-4 overflow-auto whitespace-pre">
<pre>
/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
experimental: "all",
dark: "class",
corePlugins: {
float: false,
clear: false,
transitionDelay: false,
skew: false,
},
}
</pre>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
apis: [
{
icon: "layers",
title: "Tools for every stack",
description:
"We offer client and server libraries in everything from React, PHP to .NET and iOS.",
link: {
title: "See libraries",
target: "https://docs.kooli.tech/api",
},
},
{
icon: "extension",
title: "Prebuilt integrations",
description:
"Use integrations for systems like Shopify, PayPal, and more.",
link: { title: "Explore partners", target: "/about/integrations" },
},
],
}
},
}
</script>

2
components/landing/Users.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col p-4 mx-4 bg-primaryLight my-16 rounded">
<div class="flex flex-col p-4 mx-4 bg-primaryLight rounded">
<div class="flex flex-col items-center">
<p class="my-4 font-semibold tracking-widest text-center">
EMPOWERING DEVELOPERS FROM

12
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -6,7 +6,8 @@
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
@@ -20,7 +21,8 @@
</button>
<button
v-if="response.body"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
}"
class="icon button"
@@ -33,7 +35,8 @@
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadResponse"
>
@@ -42,7 +45,8 @@
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
class="icon button"
@click="copyResponse"
>

3
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -6,7 +6,8 @@
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadResponse"
>

9
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -6,7 +6,8 @@
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
@@ -21,7 +22,8 @@
<button
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadResponse"
>
@@ -30,7 +32,8 @@
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
class="icon button"
@click="copyResponse"
>

9
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -6,7 +6,8 @@
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
@@ -21,7 +22,8 @@
<button
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadResponse"
>
@@ -30,7 +32,8 @@
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
class="icon button"
@click="copyResponse"
>

9
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -6,7 +6,8 @@
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
@@ -21,7 +22,8 @@
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="downloadResponse"
>
@@ -30,7 +32,8 @@
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
class="icon button"
@click="copyResponse"
>

3
components/realtime/Socketio.vue
View File

@@ -100,7 +100,8 @@
<div v-if="index + 1 !== communication.inputs.length">
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeCommunicationInput({ index })"
>

6
components/realtime/Websocket.vue
View File

@@ -67,7 +67,8 @@
<div>
<li>
<button
v-tooltip.bottom="{
v-tippy="{ theme: 'tooltip' }"
title="{
content: protocol.hasOwnProperty('active')
? protocol.active
? $t('turn_off')
@@ -96,7 +97,8 @@
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="deleteProtocol({ index })"
>

3
components/smart/AccentModePicker.vue
View File

@@ -14,7 +14,8 @@
<span
v-for="(color, index) of accentColors"
:key="`color-${index}`"
v-tooltip="capitalized(color)"
v-tippy="{ theme: 'tooltip' }"
title="capitalized(color)"
class="
inline-flex
items-center

5
components/smart/ChangeLanguage.vue
View File

@@ -9,10 +9,7 @@
:animate-fill="false"
>
<template #trigger>
<button
v-tippy="{ animateFill: false, theme: 'tooltip' }"
:title="$t('choose_language')"
>
<button v-tippy="{ theme: 'tooltip' }" :title="$t('choose_language')">
<span class="mr-2 text-lg">
{{
$i18n.locales.find(({ code }) => code == $i18n.locale).country

7
components/smart/ColorModePicker.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col">
<label>
<ColorScheme placeholder="..." tag="span">
<!-- <ColorScheme placeholder="..." tag="span">
{{ $t("background") }}:
{{
$colorMode.preference.charAt(0).toUpperCase() +
@@ -10,13 +10,14 @@
<span v-if="$colorMode.preference === 'system'">
({{ $colorMode.value }} mode detected)
</span>
</ColorScheme>
</ColorScheme> -->
</label>
<div>
<span
v-for="(color, index) of colors"
:key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
v-tippy="{ theme: 'tooltip' }"
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="
inline-flex
items-center

3
components/smart/HideMenu.vue
View File

@@ -1,6 +1,7 @@
<template>
<div
v-tooltip="$t(active ? 'hide_sidebar' : 'show_sidebar')"
v-tippy="{ theme: 'tooltip' }"
:title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
class="
absolute
hidden

152
components/teams/Edit.vue
View File

@@ -57,55 +57,50 @@
</li>
<li>
<span class="select-wrapper">
<v-popover>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.role === 'string'
? member.role
: JSON.stringify(member.role)
"
readonly
/>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="updateRole(index, 'OWNER')"
>
OWNER
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="updateRole(index, 'EDITOR')"
>
EDITOR
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="updateRole(index, 'VIEWER')"
>
VIEWER
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.role === 'string'
? member.role
: JSON.stringify(member.role)
"
readonly
/>
</template>
</v-popover>
<div>
<button class="icon button" @click="updateRole(index, 'OWNER')">
OWNER
</button>
</div>
<div>
<button
class="icon button"
@click="updateRole(index, 'EDITOR')"
>
EDITOR
</button>
</div>
<div>
<button
class="icon button"
@click="updateRole(index, 'VIEWER')"
>
VIEWER
</button>
</div>
</tippy>
</span>
</li>
<div>
<li>
<button
id="member"
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeExistingTeamMember(member.user.uid)"
>
@@ -137,55 +132,44 @@
</li>
<li>
<span class="select-wrapper">
<v-popover>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.value === 'string'
? member.value
: JSON.stringify(member.value)
"
readonly
/>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="member.value = 'OWNER'"
>
OWNER
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="member.value = 'EDITOR'"
>
EDITOR
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
@click="member.value = 'VIEWER'"
>
VIEWER
</button>
</div>
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.value === 'string'
? member.value
: JSON.stringify(member.value)
"
readonly
/>
</template>
</v-popover>
<div>
<button class="icon button" @click="member.value = 'OWNER'">
OWNER
</button>
</div>
<div>
<button class="icon button" @click="member.value = 'EDITOR'">
EDITOR
</button>
</div>
<div>
<button class="icon button" @click="member.value = 'VIEWER'">
VIEWER
</button>
</div>
</tippy>
</span>
</li>
<div>
<li>
<button
id="member"
v-tooltip.bottom="$t('delete')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="removeTeamMember(index)"
>

79
components/teams/Team.vue
View File

@@ -2,7 +2,8 @@
<div class="row-wrapper">
<div>
<button
v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
v-tippy="{ theme: 'tooltip' }"
title="team.myRole === 'OWNER' ? $t('edit') : ''"
class="icon button"
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
>
@@ -10,49 +11,49 @@
<span>{{ team.name }}</span>
</button>
</div>
<v-popover>
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template #popover>
<div v-if="team.myRole === 'OWNER'">
<button
v-close-popover
class="icon button"
@click="$emit('edit-team')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div v-if="team.myRole === 'OWNER'">
<button v-close-popover class="icon button" @click="deleteTeam">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<div>
<button
v-close-popover
class="icon button"
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
@click="exitTeam"
>
<i class="material-icons">remove</i>
<div
v-tooltip.left="{
<tippy trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</template>
<div v-if="team.myRole === 'OWNER'">
<button class="icon button" @click="$emit('edit-team')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div v-if="team.myRole === 'OWNER'">
<button class="icon button" @click="deleteTeam">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<div>
<button
class="icon button"
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
@click="exitTeam"
>
<i class="material-icons">remove</i>
<div
v-tippy="{ theme: 'tooltip' }"
title="{
content:
team.myRole === 'OWNER' && team.ownersCount == 1
? $t('disable_exit')
: '',
}"
>
<span>{{ $t("exit") }}</span>
</div>
</button>
</div>
</template>
</v-popover>
>
<span>{{ $t("exit") }}</span>
</div>
</button>
</div>
</tippy>
</div>
</template>