feat: tooltip and popover components
This commit is contained in:
Liyas Thomas
GitHub
@@ -46,9 +46,6 @@ body {
|
||||
@apply text-secondary;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply overflow-x-hidden;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@@ -63,8 +60,7 @@ body.sticky-footer footer {
|
||||
.page-leave-active,
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
@apply transition-opacity;
|
||||
@apply duration-150;
|
||||
@apply transition;
|
||||
}
|
||||
|
||||
.page-enter,
|
||||
@@ -139,9 +135,6 @@ h3.heading {
|
||||
|
||||
p {
|
||||
@apply text-sm;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -168,168 +161,28 @@ hr {
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .tippy-tooltip .tippy-arrow {
|
||||
border-top-color: var(--color-primary-light);
|
||||
border-top-color: var(--primary-light-color);
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
|
||||
border-bottom-color: var(--color-primary-light);
|
||||
border-bottom-color: var(--primary-light-color);
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .tippy-tooltip .tippy-arrow {
|
||||
border-left-color: var(--color-primary-light);
|
||||
border-left-color: var(--primary-light-color);
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .tippy-tooltip .tippy-arrow {
|
||||
border-right-color: var(--color-primary-light);
|
||||
border-right-color: var(--primary-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
[arrow] > div {
|
||||
.tippy-content > div {
|
||||
@apply flex;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@apply z-50;
|
||||
@apply outline-none;
|
||||
|
||||
.tooltip-inner {
|
||||
@apply rounded-lg;
|
||||
@apply px-4;
|
||||
@apply py-2;
|
||||
@apply text-xs text-secondary;
|
||||
@apply font-medium;
|
||||
@apply shadow-lg;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply bg-tooltip;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply h-0;
|
||||
@apply w-0;
|
||||
@apply border-solid border-tooltip;
|
||||
@apply absolute;
|
||||
@apply m-2;
|
||||
@apply z-30;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
@apply mb-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply mt-0 mb-0;
|
||||
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
@apply mt-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply mt-0 mb-0;
|
||||
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
@apply ml-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply ml-0 mr-0;
|
||||
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
@apply mr-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply ml-0 mr-0;
|
||||
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
.wrapper {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.popover-inner {
|
||||
@apply bg-tooltip;
|
||||
@apply text-secondary;
|
||||
@apply text-base;
|
||||
@apply p-2;
|
||||
@apply rounded-lg;
|
||||
@apply overflow-auto;
|
||||
@apply shadow-lg;
|
||||
|
||||
max-height: 256px;
|
||||
min-width: 128px;
|
||||
|
||||
button {
|
||||
@apply flex-1;
|
||||
@apply m-0;
|
||||
@apply p-2;
|
||||
@apply justify-start;
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
div {
|
||||
@apply flex;
|
||||
@apply items-stretch;
|
||||
@apply flex-col;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
@apply border-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
@apply invisible;
|
||||
@apply opacity-0;
|
||||
@apply transition-opacity;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
@apply visible;
|
||||
@apply opacity-100;
|
||||
@apply transition-opacity;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
@apply flex-col;
|
||||
@apply max-h-64;
|
||||
@apply overflow-y-auto;
|
||||
@apply items-stretch;
|
||||
}
|
||||
|
||||
.info:not(.toasted) {
|
||||
@@ -350,9 +203,6 @@ hr {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
@apply font-bold;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
@@ -462,9 +312,6 @@ pre {
|
||||
@apply bg-primaryDark;
|
||||
@apply text-secondary;
|
||||
@apply font-mono;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply select-text;
|
||||
@apply resize-y;
|
||||
@apply outline-none;
|
||||
@@ -563,9 +410,6 @@ input[type="checkbox"] {
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply text-transparent;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
content: "\2714";
|
||||
height: 16px;
|
||||
@@ -599,25 +443,6 @@ label {
|
||||
@apply p-4;
|
||||
@apply text-secondaryLight;
|
||||
@apply text-sm;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
@apply inline-flex;
|
||||
@apply flex-col flex-nowrap flex-1;
|
||||
@apply justify-center;
|
||||
|
||||
&.shrink {
|
||||
@apply flex-grow-0;
|
||||
}
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
@@ -685,9 +510,6 @@ ol li {
|
||||
&.show {
|
||||
@apply flex;
|
||||
@apply fixed;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply shadow-lg;
|
||||
@apply rounded-lg;
|
||||
|
||||
|
||||
@@ -41,11 +41,11 @@
|
||||
// Dark Text color
|
||||
--secondary-dark-color: theme("colors.gray.700");
|
||||
// Border color
|
||||
--divider-color: rgba(0, 0, 0, 0.1);
|
||||
--divider-color: theme("colors.gray.200");
|
||||
// Error color
|
||||
--error-color: rgba(0, 0, 0, 0.1);
|
||||
--error-color: theme("colors.gray.700");
|
||||
// Tooltip color
|
||||
--tooltip-color: rgba(255, 255, 255, 1);
|
||||
--tooltip-color: theme("colors.gray.50");
|
||||
// Editor theme
|
||||
--editor-theme: "iplastic";
|
||||
}
|
||||
@@ -214,15 +214,15 @@
|
||||
@include greenTheme;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
:root.light-mode {
|
||||
@include lightTheme;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
:root.dark-mode {
|
||||
@include darkTheme;
|
||||
}
|
||||
|
||||
:root.black {
|
||||
:root.black-mode {
|
||||
@include blackTheme;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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" },
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
|
||||
@@ -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
77
components/landing/CTA.vue
Normal 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>
|
||||
@@ -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="
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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 })"
|
||||
>
|
||||
|
||||
@@ -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 })"
|
||||
>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
<button class="button icon" @click="hideHeaderPane = !hideHeaderPane">
|
||||
<i class="material-icons">menu_open</i>
|
||||
</button>
|
||||
<AppFooter />
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</div>
|
||||
|
||||
@@ -95,7 +95,6 @@ export default {
|
||||
plugins: [
|
||||
"~/plugins/v-tippy",
|
||||
"~/plugins/vuex-persist",
|
||||
"~/plugins/v-tooltip",
|
||||
"~/plugins/vue-rx",
|
||||
"~/plugins/vue-apollo",
|
||||
{ src: "~/plugins/web-worker", ssr: false },
|
||||
@@ -202,13 +201,6 @@ export default {
|
||||
Sitemap: `${process.env.BASE_URL}/sitemap.xml`,
|
||||
},
|
||||
|
||||
// Color Mode module configuration (https://github.com/nuxt-community/color-mode-module)
|
||||
colorMode: {
|
||||
classSuffix: "",
|
||||
preference: "dark",
|
||||
fallback: "dark",
|
||||
},
|
||||
|
||||
// Google Fonts module configuration (https://github.com/nuxt-community/google-fonts-module)
|
||||
googleFonts: {
|
||||
display: "swap",
|
||||
@@ -449,6 +441,6 @@ export default {
|
||||
|
||||
// Router configuration (https://nuxtjs.org/api/configuration-router)
|
||||
router: {
|
||||
linkExactActiveClass: "text-accent bg-primaryDark",
|
||||
linkExactActiveClass: "text-accent",
|
||||
},
|
||||
}
|
||||
|
||||
39
package-lock.json
generated
39
package-lock.json
generated
@@ -35,7 +35,6 @@
|
||||
"tern": "^0.24.3",
|
||||
"three": "^0.130.0",
|
||||
"three-globe": "^2.18.5",
|
||||
"v-tooltip": "^2.1.3",
|
||||
"vue-apollo": "^3.0.7",
|
||||
"vue-cli-plugin-apollo": "^0.22.2",
|
||||
"vue-functional-data-merge": "^3.1.0",
|
||||
@@ -29009,17 +29008,6 @@
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/v-tooltip": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
|
||||
"integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"lodash": "^4.17.21",
|
||||
"popper.js": "^1.16.1",
|
||||
"vue-resize": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
||||
@@ -29569,14 +29557,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
|
||||
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
|
||||
},
|
||||
"node_modules/vue-resize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
|
||||
"integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
|
||||
@@ -55818,17 +55798,6 @@
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
},
|
||||
"v-tooltip": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
|
||||
"integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"lodash": "^4.17.21",
|
||||
"popper.js": "^1.16.1",
|
||||
"vue-resize": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
||||
@@ -56313,14 +56282,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
|
||||
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
|
||||
},
|
||||
"vue-resize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
|
||||
"integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
|
||||
|
||||
@@ -51,7 +51,6 @@
|
||||
"tern": "^0.24.3",
|
||||
"three": "^0.130.0",
|
||||
"three-globe": "^2.18.5",
|
||||
"v-tooltip": "^2.1.3",
|
||||
"vue-apollo": "^3.0.7",
|
||||
"vue-cli-plugin-apollo": "^0.22.2",
|
||||
"vue-functional-data-merge": "^3.1.0",
|
||||
|
||||
144
pages/api.vue
144
pages/api.vue
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col space-y-16">
|
||||
<LandingHero />
|
||||
<LandingStats />
|
||||
<LandingUsers />
|
||||
<LandingFeatures />
|
||||
<LandingPackage />
|
||||
<LandingCTA />
|
||||
<LandingFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import Vue from "vue"
|
||||
import VueTippy, { TippyComponent } from "vue-tippy"
|
||||
|
||||
Vue.use(VueTippy)
|
||||
Vue.use(VueTippy, {
|
||||
animateFill: false,
|
||||
interactive: true,
|
||||
})
|
||||
Vue.component("Tippy", TippyComponent)
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import Vue from "vue"
|
||||
import VTooltip from "v-tooltip"
|
||||
|
||||
Vue.use(VTooltip, {
|
||||
defaultOffset: 8,
|
||||
popover: {
|
||||
defaultOffset: 0,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user