feat: tooltip and popover components
This commit is contained in:
Liyas Thomas
GitHub
@@ -46,9 +46,6 @@ body {
|
|||||||
@apply text-secondary;
|
@apply text-secondary;
|
||||||
@apply font-medium;
|
@apply font-medium;
|
||||||
@apply select-none;
|
@apply select-none;
|
||||||
@apply transition-colors;
|
|
||||||
@apply ease-in-out;
|
|
||||||
@apply duration-150;
|
|
||||||
@apply overflow-x-hidden;
|
@apply overflow-x-hidden;
|
||||||
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
@@ -63,8 +60,7 @@ body.sticky-footer footer {
|
|||||||
.page-leave-active,
|
.page-leave-active,
|
||||||
.layout-enter-active,
|
.layout-enter-active,
|
||||||
.layout-leave-active {
|
.layout-leave-active {
|
||||||
@apply transition-opacity;
|
@apply transition;
|
||||||
@apply duration-150;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-enter,
|
.page-enter,
|
||||||
@@ -139,9 +135,6 @@ h3.heading {
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
@apply text-sm;
|
@apply text-sm;
|
||||||
@apply transition;
|
|
||||||
@apply ease-in-out;
|
|
||||||
@apply duration-150;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
@@ -168,168 +161,28 @@ hr {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[x-placement^="top"] .tippy-tooltip .tippy-arrow {
|
&[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 {
|
&[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 {
|
&[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 {
|
&[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 flex;
|
||||||
@apply w-full;
|
@apply flex-col;
|
||||||
}
|
@apply max-h-64;
|
||||||
|
@apply overflow-y-auto;
|
||||||
.tooltip {
|
@apply items-stretch;
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info:not(.toasted) {
|
.info:not(.toasted) {
|
||||||
@@ -350,9 +203,6 @@ hr {
|
|||||||
@apply bg-accent;
|
@apply bg-accent;
|
||||||
@apply text-primary;
|
@apply text-primary;
|
||||||
@apply font-bold;
|
@apply font-bold;
|
||||||
@apply transition;
|
|
||||||
@apply ease-in-out;
|
|
||||||
@apply duration-150;
|
|
||||||
@apply fill-current;
|
@apply fill-current;
|
||||||
@apply outline-none;
|
@apply outline-none;
|
||||||
@apply border-none;
|
@apply border-none;
|
||||||
@@ -462,9 +312,6 @@ pre {
|
|||||||
@apply bg-primaryDark;
|
@apply bg-primaryDark;
|
||||||
@apply text-secondary;
|
@apply text-secondary;
|
||||||
@apply font-mono;
|
@apply font-mono;
|
||||||
@apply transition;
|
|
||||||
@apply ease-in-out;
|
|
||||||
@apply duration-150;
|
|
||||||
@apply select-text;
|
@apply select-text;
|
||||||
@apply resize-y;
|
@apply resize-y;
|
||||||
@apply outline-none;
|
@apply outline-none;
|
||||||
@@ -563,9 +410,6 @@ input[type="checkbox"] {
|
|||||||
@apply items-center;
|
@apply items-center;
|
||||||
@apply justify-center;
|
@apply justify-center;
|
||||||
@apply text-transparent;
|
@apply text-transparent;
|
||||||
@apply transition;
|
|
||||||
@apply ease-in-out;
|
|
||||||
@apply duration-150;
|
|
||||||
|
|
||||||
content: "\2714";
|
content: "\2714";
|
||||||
height: 16px;
|
height: 16px;
|
||||||
@@ -599,25 +443,6 @@ label {
|
|||||||
@apply p-4;
|
@apply p-4;
|
||||||
@apply text-secondaryLight;
|
@apply text-secondaryLight;
|
||||||
@apply text-sm;
|
@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 {
|
.row-wrapper {
|
||||||
@@ -685,9 +510,6 @@ ol li {
|
|||||||
&.show {
|
&.show {
|
||||||
@apply flex;
|
@apply flex;
|
||||||
@apply fixed;
|
@apply fixed;
|
||||||
@apply transition;
|
|
||||||
@apply ease-in-out;
|
|
||||||
@apply duration-150;
|
|
||||||
@apply shadow-lg;
|
@apply shadow-lg;
|
||||||
@apply rounded-lg;
|
@apply rounded-lg;
|
||||||
|
|
||||||
|
|||||||
@@ -41,11 +41,11 @@
|
|||||||
// Dark Text color
|
// Dark Text color
|
||||||
--secondary-dark-color: theme("colors.gray.700");
|
--secondary-dark-color: theme("colors.gray.700");
|
||||||
// Border color
|
// Border color
|
||||||
--divider-color: rgba(0, 0, 0, 0.1);
|
--divider-color: theme("colors.gray.200");
|
||||||
// Error color
|
// Error color
|
||||||
--error-color: rgba(0, 0, 0, 0.1);
|
--error-color: theme("colors.gray.700");
|
||||||
// Tooltip color
|
// Tooltip color
|
||||||
--tooltip-color: rgba(255, 255, 255, 1);
|
--tooltip-color: theme("colors.gray.50");
|
||||||
// Editor theme
|
// Editor theme
|
||||||
--editor-theme: "iplastic";
|
--editor-theme: "iplastic";
|
||||||
}
|
}
|
||||||
@@ -214,15 +214,15 @@
|
|||||||
@include greenTheme;
|
@include greenTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root.light {
|
:root.light-mode {
|
||||||
@include lightTheme;
|
@include lightTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root.dark {
|
:root.dark-mode {
|
||||||
@include darkTheme;
|
@include darkTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root.black {
|
:root.black-mode {
|
||||||
@include blackTheme;
|
@include blackTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -32,7 +32,8 @@
|
|||||||
<span>Firefox</span>
|
<span>Firefox</span>
|
||||||
<span
|
<span
|
||||||
v-if="hasFirefoxExtInstalled"
|
v-if="hasFirefoxExtInstalled"
|
||||||
v-tooltip="$t('installed')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('installed')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
>
|
>
|
||||||
<i class="material-icons">done</i>
|
<i class="material-icons">done</i>
|
||||||
@@ -60,7 +61,8 @@
|
|||||||
<span>Chrome</span>
|
<span>Chrome</span>
|
||||||
<span
|
<span
|
||||||
v-if="hasChromeExtInstalled"
|
v-if="hasChromeExtInstalled"
|
||||||
v-tooltip="$t('installed')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('installed')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
>
|
>
|
||||||
<i class="material-icons">done</i>
|
<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">
|
<div class="flex">
|
||||||
<button
|
<button
|
||||||
id="installPWA"
|
id="installPWA"
|
||||||
v-tooltip="$t('install_pwa')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('install_pwa')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click.prevent="showInstallPrompt()"
|
@click.prevent="showInstallPrompt()"
|
||||||
>
|
>
|
||||||
@@ -21,7 +22,12 @@
|
|||||||
aria-label="GitHub"
|
aria-label="GitHub"
|
||||||
rel="noopener"
|
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
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="24"
|
||||||
@@ -34,94 +40,95 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<v-popover v-if="currentUser === null">
|
|
||||||
<button v-tooltip="$t('login_with')" class="icon button">
|
<tippy v-if="currentUser === null" trigger="click" theme="popover" arrow>
|
||||||
<i class="material-icons">login</i>
|
<template #trigger>
|
||||||
</button>
|
<button
|
||||||
<template #popover>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<FirebaseLogin @show-email="showEmail = true" />
|
:title="$t('login_with')"
|
||||||
|
class="icon button"
|
||||||
|
>
|
||||||
|
<i class="material-icons">login</i>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
</v-popover>
|
<FirebaseLogin @show-email="showEmail = true" />
|
||||||
<v-popover v-else>
|
</tippy>
|
||||||
<button
|
<tippy v-else trigger="click" theme="popover" arrow>
|
||||||
v-tooltip="
|
<template #trigger>
|
||||||
|
<button
|
||||||
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="
|
||||||
(currentUser.displayName ||
|
(currentUser.displayName ||
|
||||||
'<label><i>Name not found</i></label>') +
|
'<label><i>Name not found</i></label>') +
|
||||||
'<br>' +
|
'<br>' +
|
||||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
(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"
|
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
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||||
v-if="currentUser.photoURL"
|
<path
|
||||||
:src="currentUser.photoURL"
|
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"
|
||||||
class="w-6 h-6 rounded-full material-icons"
|
/>
|
||||||
alt="Profile image"
|
</svg>
|
||||||
/>
|
<span>Tweet</span>
|
||||||
<i v-else class="material-icons">account_circle</i>
|
|
||||||
</button>
|
</button>
|
||||||
<template #popover>
|
<button
|
||||||
<div>
|
v-if="navigatorShare"
|
||||||
<nuxt-link v-close-popover :to="localePath('settings')">
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<button class="icon button">
|
:title="$t('more')"
|
||||||
<i class="material-icons">settings</i>
|
class="icon button"
|
||||||
<span>
|
@click="nativeShare"
|
||||||
{{ $t("settings") }}
|
>
|
||||||
</span>
|
<i class="material-icons">share</i>
|
||||||
</button>
|
<span>Share</span>
|
||||||
</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>
|
</button>
|
||||||
<template #popover>
|
</tippy>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<AppExtensions
|
<AppExtensions
|
||||||
:show="showExtensions"
|
:show="showExtensions"
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
primaryNavigation: [
|
primaryNavigation: [
|
||||||
{ target: "index", icon: "home", title: "Home" },
|
{ 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: "realtime", icon: "language", title: "Realtime" },
|
||||||
{ target: "graphql", icon: "code", title: "GraphQL" },
|
{ target: "graphql", icon: "code", title: "GraphQL" },
|
||||||
{ target: "doc", icon: "book", title: "Docs" },
|
{ target: "doc", icon: "book", title: "Docs" },
|
||||||
|
|||||||
@@ -5,7 +5,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-if="mode == 'import_from_my_collections'"
|
v-if="mode == 'import_from_my_collections'"
|
||||||
v-tooltip.left="'Back'"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="Back"
|
||||||
class="tooltip-target icon button"
|
class="tooltip-target icon button"
|
||||||
@click="
|
@click="
|
||||||
mode = 'import_export'
|
mode = 'import_export'
|
||||||
@@ -14,55 +15,56 @@
|
|||||||
>
|
>
|
||||||
<i class="material-icons">arrow_back</i>
|
<i class="material-icons">arrow_back</i>
|
||||||
</button>
|
</button>
|
||||||
<v-popover
|
|
||||||
|
<tippy
|
||||||
v-if="
|
v-if="
|
||||||
mode == 'import_export' && collectionsType.type == 'my-collections'
|
mode == 'import_export' && collectionsType.type == 'my-collections'
|
||||||
"
|
"
|
||||||
|
trigger="click"
|
||||||
|
theme="popover"
|
||||||
|
arrow
|
||||||
>
|
>
|
||||||
<button
|
<template #trigger>
|
||||||
v-tooltip.left="$t('more')"
|
<button
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<button
|
</template>
|
||||||
v-close-popover
|
<div>
|
||||||
class="icon button"
|
<button class="icon button" @click="readCollectionGist">
|
||||||
@click="readCollectionGist"
|
<i class="material-icons">assignment_returned</i>
|
||||||
>
|
<span>{{ $t("import_from_gist") }}</span>
|
||||||
<i class="material-icons">assignment_returned</i>
|
</button>
|
||||||
<span>{{ $t("import_from_gist") }}</span>
|
</div>
|
||||||
</button>
|
<div
|
||||||
</div>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<div
|
title="{
|
||||||
v-tooltip.bottom="{
|
|
||||||
content: !currentUser
|
content: !currentUser
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: currentUser.provider !== 'github.com'
|
: currentUser.provider !== 'github.com'
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: null,
|
: null,
|
||||||
}"
|
}"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
:disabled="
|
||||||
|
!currentUser
|
||||||
|
? true
|
||||||
|
: currentUser.provider !== 'github.com'
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
"
|
||||||
|
class="icon button"
|
||||||
|
@click="createCollectionGist"
|
||||||
>
|
>
|
||||||
<button
|
<i class="material-icons">assignment_turned_in</i>
|
||||||
v-close-popover
|
<span>{{ $t("create_secret_gist") }}</span>
|
||||||
:disabled="
|
</button>
|
||||||
!currentUser
|
</div>
|
||||||
? true
|
</tippy>
|
||||||
: 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>
|
|
||||||
<button class="icon button" @click="hideModal">
|
<button class="icon button" @click="hideModal">
|
||||||
<i class="material-icons">close</i>
|
<i class="material-icons">close</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -71,7 +73,8 @@
|
|||||||
<template #body>
|
<template #body>
|
||||||
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
|
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('replace_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('replace_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="openDialogChooseFileToReplaceWith"
|
@click="openDialogChooseFileToReplaceWith"
|
||||||
>
|
>
|
||||||
@@ -87,7 +90,8 @@
|
|||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('preserve_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('preserve_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="openDialogChooseFileToImportFrom"
|
@click="openDialogChooseFileToImportFrom"
|
||||||
>
|
>
|
||||||
@@ -104,7 +108,8 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="collectionsType.type == 'team-collections'"
|
v-if="collectionsType.type == 'team-collections'"
|
||||||
v-tooltip="$t('preserve_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('preserve_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="mode = 'import_from_my_collections'"
|
@click="mode = 'import_from_my_collections'"
|
||||||
>
|
>
|
||||||
@@ -112,7 +117,8 @@
|
|||||||
<span>{{ $t("import_from_my_collections") }}</span>
|
<span>{{ $t("import_from_my_collections") }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="exportJSON"
|
@click="exportJSON"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -30,56 +30,49 @@
|
|||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-if="doc"
|
v-if="doc"
|
||||||
v-tooltip.left="$t('import')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('import')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$emit('select-collection')"
|
@click="$emit('select-collection')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">topic</i>
|
<i class="material-icons">topic</i>
|
||||||
</button>
|
</button>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-tooltip.left="$t('more')"
|
<button
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<div v-show="showChildren || isFiltered">
|
<div v-show="showChildren || isFiltered">
|
||||||
|
|||||||
@@ -28,43 +28,41 @@
|
|||||||
<span>{{ folder.name }}</span>
|
<span>{{ folder.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('more')"
|
||||||
<div>
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
class="icon button"
|
</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>
|
|
||||||
</template>
|
</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>
|
||||||
<div v-show="showChildren || isFiltered">
|
<div v-show="showChildren || isFiltered">
|
||||||
<ul class="flex-col">
|
<ul class="flex-col">
|
||||||
|
|||||||
@@ -3,51 +3,48 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
||||||
<div>
|
<div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-tooltip.left="$t('more')"
|
<button
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<button
|
</template>
|
||||||
v-close-popover
|
<div>
|
||||||
class="icon button"
|
<button class="icon button" @click="readCollectionGist">
|
||||||
@click="readCollectionGist"
|
<i class="material-icons">assignment_returned</i>
|
||||||
>
|
<span>{{ $t("import_from_gist") }}</span>
|
||||||
<i class="material-icons">assignment_returned</i>
|
</button>
|
||||||
<span>{{ $t("import_from_gist") }}</span>
|
</div>
|
||||||
</button>
|
<div
|
||||||
</div>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<div
|
title="{
|
||||||
v-tooltip.bottom="{
|
|
||||||
content: !currentUser
|
content: !currentUser
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: currentUser.provider !== 'github.com'
|
: currentUser.provider !== 'github.com'
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: null,
|
: null,
|
||||||
}"
|
}"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
:disabled="
|
||||||
|
!currentUser
|
||||||
|
? true
|
||||||
|
: currentUser.provider !== 'github.com'
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
"
|
||||||
|
class="icon button"
|
||||||
|
@click="createCollectionGist"
|
||||||
>
|
>
|
||||||
<button
|
<i class="material-icons">assignment_turned_in</i>
|
||||||
v-close-popover
|
<span>{{ $t("create_secret_gist") }}</span>
|
||||||
:disabled="
|
</button>
|
||||||
!currentUser
|
</div>
|
||||||
? true
|
</tippy>
|
||||||
: 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>
|
|
||||||
<button class="icon button" @click="hideModal">
|
<button class="icon button" @click="hideModal">
|
||||||
<i class="material-icons">close</i>
|
<i class="material-icons">close</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -56,7 +53,8 @@
|
|||||||
<template #body>
|
<template #body>
|
||||||
<div class="flex flex-col items-start p-2">
|
<div class="flex flex-col items-start p-2">
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('replace_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('replace_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="openDialogChooseFileToReplaceWith"
|
@click="openDialogChooseFileToReplaceWith"
|
||||||
>
|
>
|
||||||
@@ -72,7 +70,8 @@
|
|||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('preserve_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('preserve_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="openDialogChooseFileToImportFrom"
|
@click="openDialogChooseFileToImportFrom"
|
||||||
>
|
>
|
||||||
@@ -88,7 +87,8 @@
|
|||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="exportJSON"
|
@click="exportJSON"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -13,7 +13,8 @@
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip="!doc ? $t('use_request') : ''"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="!doc ? $t('use_request') : ''"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
@@ -25,39 +26,38 @@
|
|||||||
<span>{{ request.name }}</span>
|
<span>{{ request.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip="$t('more')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('more')"
|
||||||
<div>
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
class="icon button"
|
</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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<SmartConfirmModal
|
<SmartConfirmModal
|
||||||
:show="confirmRemove"
|
:show="confirmRemove"
|
||||||
|
|||||||
@@ -65,7 +65,10 @@
|
|||||||
@click="displayModalAdd(true)"
|
@click="displayModalAdd(true)"
|
||||||
>
|
>
|
||||||
<i class="material-icons">add</i>
|
<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>
|
<span>{{ $t("new") }}</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -30,7 +30,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-if="doc && !selected"
|
v-if="doc && !selected"
|
||||||
v-tooltip.left="$t('import')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('import')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$emit('select-collection')"
|
@click="$emit('select-collection')"
|
||||||
>
|
>
|
||||||
@@ -38,57 +39,50 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="doc && selected"
|
v-if="doc && selected"
|
||||||
v-tooltip.left="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$emit('unselect-collection')"
|
@click="$emit('unselect-collection')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">check_box</i>
|
<i class="material-icons">check_box</i>
|
||||||
</button>
|
</button>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-tooltip.left="$t('more')"
|
<button
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<div v-show="showChildren || isFiltered">
|
<div v-show="showChildren || isFiltered">
|
||||||
|
|||||||
@@ -27,50 +27,48 @@
|
|||||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('more')"
|
||||||
<div>
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
class="icon button"
|
</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>
|
|
||||||
</template>
|
</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>
|
||||||
<div v-show="showChildren || isFiltered">
|
<div v-show="showChildren || isFiltered">
|
||||||
<ul class="flex-col">
|
<ul class="flex-col">
|
||||||
|
|||||||
@@ -13,7 +13,8 @@
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip="!doc ? $t('use_request') : ''"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="!doc ? $t('use_request') : ''"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
@@ -27,42 +28,41 @@
|
|||||||
<span>{{ request.name }}</span>
|
<span>{{ request.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip="$t('more')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('more')"
|
||||||
<div>
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
class="icon button"
|
</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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<SmartConfirmModal
|
<SmartConfirmModal
|
||||||
:show="confirmRemove"
|
:show="confirmRemove"
|
||||||
|
|||||||
@@ -19,7 +19,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-if="doc && !selected"
|
v-if="doc && !selected"
|
||||||
v-tooltip.left="$t('import')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('import')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$emit('select-collection')"
|
@click="$emit('select-collection')"
|
||||||
>
|
>
|
||||||
@@ -27,61 +28,60 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="doc && selected"
|
v-if="doc && selected"
|
||||||
v-tooltip.left="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$emit('unselect-collection')"
|
@click="$emit('unselect-collection')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">check_box</i>
|
<i class="material-icons">check_box</i>
|
||||||
</button>
|
</button>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
<button
|
||||||
v-tooltip.left="$t('more')"
|
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<div v-show="showChildren || isFiltered">
|
<div v-show="showChildren || isFiltered">
|
||||||
|
|||||||
@@ -18,57 +18,55 @@
|
|||||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
<button
|
||||||
v-tooltip.left="$t('more')"
|
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<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>
|
|
||||||
</template>
|
</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>
|
||||||
<div v-show="showChildren || isFiltered">
|
<div v-show="showChildren || isFiltered">
|
||||||
<ul class="flex-col">
|
<ul class="flex-col">
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip="!doc ? $t('use_request') : ''"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="!doc ? $t('use_request') : ''"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
@@ -17,45 +18,41 @@
|
|||||||
<span>{{ request.name }}</span>
|
<span>{{ request.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
<button
|
||||||
v-tooltip="$t('more')"
|
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<SmartConfirmModal
|
<SmartConfirmModal
|
||||||
:show="confirmRemove"
|
:show="confirmRemove"
|
||||||
|
|||||||
@@ -22,7 +22,8 @@
|
|||||||
<label for="variableList">{{ $t("env_variable_list") }}</label>
|
<label for="variableList">{{ $t("env_variable_list") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent($event)"
|
@click="clearContent($event)"
|
||||||
>
|
>
|
||||||
@@ -63,7 +64,8 @@
|
|||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
id="variable"
|
id="variable"
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeEnvironmentVariable(index)"
|
@click="removeEnvironmentVariable(index)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -7,33 +7,29 @@
|
|||||||
<span>{{ environment.name }}</span>
|
<span>{{ environment.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('more')"
|
||||||
<div>
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
class="icon button"
|
</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>
|
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<SmartConfirmModal
|
<SmartConfirmModal
|
||||||
:show="confirmRemove"
|
:show="confirmRemove"
|
||||||
|
|||||||
@@ -5,51 +5,48 @@
|
|||||||
{{ $t("import_export") }} {{ $t("environments") }}
|
{{ $t("import_export") }} {{ $t("environments") }}
|
||||||
</h3>
|
</h3>
|
||||||
<div>
|
<div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-tooltip.left="$t('more')"
|
<button
|
||||||
class="tooltip-target icon button"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
>
|
:title="$t('more')"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<button
|
</template>
|
||||||
v-close-popover
|
<div>
|
||||||
class="icon button"
|
<button class="icon button" @click="readEnvironmentGist">
|
||||||
@click="readEnvironmentGist"
|
<i class="material-icons">assignment_returned</i>
|
||||||
>
|
<span>{{ $t("import_from_gist") }}</span>
|
||||||
<i class="material-icons">assignment_returned</i>
|
</button>
|
||||||
<span>{{ $t("import_from_gist") }}</span>
|
</div>
|
||||||
</button>
|
<div
|
||||||
</div>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<div
|
title="{
|
||||||
v-tooltip.bottom="{
|
|
||||||
content: !currentUser
|
content: !currentUser
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: currentUser.provider !== 'github.com'
|
: currentUser.provider !== 'github.com'
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: null,
|
: null,
|
||||||
}"
|
}"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
:disabled="
|
||||||
|
!currentUser
|
||||||
|
? true
|
||||||
|
: currentUser.provider !== 'github.com'
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
"
|
||||||
|
class="icon button"
|
||||||
|
@click="createEnvironmentGist"
|
||||||
>
|
>
|
||||||
<button
|
<i class="material-icons">assignment_turned_in</i>
|
||||||
v-close-popover
|
<span>{{ $t("create_secret_gist") }}</span>
|
||||||
:disabled="
|
</button>
|
||||||
!currentUser
|
</div>
|
||||||
? true
|
</tippy>
|
||||||
: 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>
|
|
||||||
<button class="icon button" @click="hideModal">
|
<button class="icon button" @click="hideModal">
|
||||||
<i class="material-icons">close</i>
|
<i class="material-icons">close</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -58,7 +55,8 @@
|
|||||||
<template #body>
|
<template #body>
|
||||||
<div class="flex flex-col items-start p-2">
|
<div class="flex flex-col items-start p-2">
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('replace_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('replace_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="openDialogChooseFileToReplaceWith"
|
@click="openDialogChooseFileToReplaceWith"
|
||||||
>
|
>
|
||||||
@@ -74,7 +72,8 @@
|
|||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('preserve_current')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('preserve_current')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="openDialogChooseFileToImportFrom"
|
@click="openDialogChooseFileToImportFrom"
|
||||||
>
|
>
|
||||||
@@ -90,7 +89,8 @@
|
|||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="exportJSON"
|
@click="exportJSON"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<button v-close-popover class="icon button" @click="signInWithGoogle">
|
<button class="icon button" @click="signInWithGoogle">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="24"
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button v-close-popover class="icon button" @click="signInWithGithub">
|
<button class="icon button" @click="signInWithGithub">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="24"
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<i class="material-icons">mail</i>
|
||||||
<span>{{ $t("email") }}</span>
|
<span>{{ $t("email") }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<button v-close-popover class="icon button" @click="logout">
|
<button class="icon button" @click="logout">
|
||||||
<i class="material-icons">exit_to_app</i>
|
<i class="material-icons">exit_to_app</i>
|
||||||
<span>{{ $t("logout") }}</span>
|
<span>{{ $t("logout") }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -14,7 +14,8 @@
|
|||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<button
|
<button
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||||
}"
|
}"
|
||||||
data-testid="star_button"
|
data-testid="star_button"
|
||||||
@@ -27,7 +28,8 @@
|
|||||||
</i>
|
</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: expand ? $t('hide_more') : $t('show_more'),
|
content: expand ? $t('hide_more') : $t('show_more'),
|
||||||
}"
|
}"
|
||||||
data-testid="query_expand"
|
data-testid="query_expand"
|
||||||
@@ -38,41 +40,40 @@
|
|||||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||||
</i>
|
</i>
|
||||||
</button>
|
</button>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button
|
<template #trigger>
|
||||||
v-tooltip="$t('options')"
|
<button
|
||||||
data-testid="options"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
class="tooltip-target icon button"
|
:title="$t('options')"
|
||||||
>
|
data-testid="options"
|
||||||
<i class="material-icons">more_vert</i>
|
class="tooltip-target icon button"
|
||||||
</button>
|
>
|
||||||
<template #popover>
|
<i class="material-icons">more_vert</i>
|
||||||
<div>
|
</button>
|
||||||
<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>
|
|
||||||
</template>
|
</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>
|
||||||
<div class="show-on-large-screen">
|
<div class="show-on-large-screen">
|
||||||
<li data-testid="'query'">
|
<li data-testid="'query'">
|
||||||
@@ -91,7 +92,8 @@
|
|||||||
<div v-if="showMore" class="show-on-large-screen">
|
<div v-if="showMore" class="show-on-large-screen">
|
||||||
<li>
|
<li>
|
||||||
<input
|
<input
|
||||||
v-tooltip="entry.date"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="entry.date"
|
||||||
:aria-label="$t('time')"
|
:aria-label="$t('time')"
|
||||||
type="text"
|
type="text"
|
||||||
readonly
|
readonly
|
||||||
|
|||||||
@@ -54,7 +54,8 @@
|
|||||||
<span>{{ $t("clear_all") }}</span>
|
<span>{{ $t("clear_all") }}</span>
|
||||||
</button>
|
</button>
|
||||||
<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"
|
class="icon button"
|
||||||
@click="toggleCollapse()"
|
@click="toggleCollapse()"
|
||||||
>
|
>
|
||||||
@@ -69,7 +70,8 @@
|
|||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('yes')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('yes')"
|
||||||
data-testid="confirm_clear_history"
|
data-testid="confirm_clear_history"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearHistory"
|
@click="clearHistory"
|
||||||
@@ -77,7 +79,8 @@
|
|||||||
<i class="material-icons">done</i>
|
<i class="material-icons">done</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('no')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('no')"
|
||||||
data-testid="reject_clear_history"
|
data-testid="reject_clear_history"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="disableHistoryClearing"
|
@click="disableHistoryClearing"
|
||||||
|
|||||||
@@ -22,7 +22,8 @@
|
|||||||
</li>
|
</li>
|
||||||
<span>
|
<span>
|
||||||
<button
|
<button
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||||
}"
|
}"
|
||||||
data-testid="star_button"
|
data-testid="star_button"
|
||||||
@@ -38,7 +39,7 @@
|
|||||||
<!-- <li>
|
<!-- <li>
|
||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }" title="{
|
||||||
content: !entry.usesScripts
|
content: !entry.usesScripts
|
||||||
? 'No pre-request script'
|
? 'No pre-request script'
|
||||||
: 'Used pre-request script'
|
: 'Used pre-request script'
|
||||||
@@ -49,37 +50,39 @@
|
|||||||
</i>
|
</i>
|
||||||
</button>
|
</button>
|
||||||
</li> -->
|
</li> -->
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip="$t('options')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('options')"
|
||||||
<div>
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
data-testid="restore_history_entry"
|
</button>
|
||||||
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>
|
|
||||||
</template>
|
</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>
|
||||||
<div class="show-on-large-screen">
|
<div class="show-on-large-screen">
|
||||||
<li>
|
<li>
|
||||||
@@ -97,7 +100,8 @@
|
|||||||
<div v-if="showMore" class="show-on-large-screen">
|
<div v-if="showMore" class="show-on-large-screen">
|
||||||
<li>
|
<li>
|
||||||
<input
|
<input
|
||||||
v-tooltip="entry.date"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="entry.date"
|
||||||
:aria-label="$t('time')"
|
:aria-label="$t('time')"
|
||||||
type="text"
|
type="text"
|
||||||
readonly
|
readonly
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<label for="reqParamList">{{ $t("request_body") }}</label>
|
<label for="reqParamList">{{ $t("request_body") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('bodyParams', $event)"
|
@click="clearContent('bodyParams', $event)"
|
||||||
>
|
>
|
||||||
@@ -68,7 +69,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: param.hasOwnProperty('active')
|
content: param.hasOwnProperty('active')
|
||||||
? param.active
|
? param.active
|
||||||
? $t('turn_off')
|
? $t('turn_off')
|
||||||
@@ -113,7 +115,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeRequestBodyParam(index)"
|
@click="removeRequestBodyParam(index)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -11,38 +11,35 @@
|
|||||||
<template #body>
|
<template #body>
|
||||||
<label for="requestType">{{ $t("choose_language") }}</label>
|
<label for="requestType">{{ $t("choose_language") }}</label>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<pre v-if="requestType">{{
|
<template #trigger>
|
||||||
codegens.find((x) => x.id === requestType).name
|
<pre v-if="requestType">{{
|
||||||
}}</pre>
|
codegens.find((x) => x.id === requestType).name
|
||||||
<input
|
}}</pre>
|
||||||
v-else
|
<input
|
||||||
id="requestType"
|
v-else
|
||||||
v-model="requestType"
|
id="requestType"
|
||||||
:placeholder="$t('choose_language')"
|
v-model="requestType"
|
||||||
class="input cursor-pointer"
|
:placeholder="$t('choose_language')"
|
||||||
readonly
|
class="input cursor-pointer"
|
||||||
autofocus
|
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>
|
|
||||||
</template>
|
</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>
|
</span>
|
||||||
<div class="row-wrapper">
|
<div class="row-wrapper">
|
||||||
<label for="generatedCode">{{ $t("generated_code") }}</label>
|
<label for="generatedCode">{{ $t("generated_code") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
ref="copyRequestCode"
|
ref="copyRequestCode"
|
||||||
v-tooltip="$t('copy_code')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_code')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyRequestCode"
|
@click="copyRequestCode"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<label for="headerList">{{ $t("header_list") }}</label>
|
<label for="headerList">{{ $t("header_list") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('headers', $event)"
|
@click="clearContent('headers', $event)"
|
||||||
>
|
>
|
||||||
@@ -63,7 +64,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: header.hasOwnProperty('active')
|
content: header.hasOwnProperty('active')
|
||||||
? header.active
|
? header.active
|
||||||
? $t('turn_off')
|
? $t('turn_off')
|
||||||
@@ -93,7 +95,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeRequestHeader(index)"
|
@click="removeRequestHeader(index)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('parameters', $event)"
|
@click="clearContent('parameters', $event)"
|
||||||
>
|
>
|
||||||
@@ -82,7 +83,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: param.hasOwnProperty('active')
|
content: param.hasOwnProperty('active')
|
||||||
? param.active
|
? param.active
|
||||||
? $t('turn_off')
|
? $t('turn_off')
|
||||||
@@ -112,7 +114,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeRequestParam(index)"
|
@click="removeRequestParam(index)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -8,7 +8,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="rawInput && contentType.endsWith('json')"
|
v-if="rawInput && contentType.endsWith('json')"
|
||||||
ref="prettifyRequest"
|
ref="prettifyRequest"
|
||||||
v-tooltip="$t('prettify_body')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('prettify_body')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="prettifyRequestBody"
|
@click="prettifyRequestBody"
|
||||||
>
|
>
|
||||||
@@ -16,7 +17,8 @@
|
|||||||
</button>
|
</button>
|
||||||
<label for="payload" class="p-0">
|
<label for="payload" class="p-0">
|
||||||
<button
|
<button
|
||||||
v-tooltip="$t('import_json')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('import_json')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$refs.payload.click()"
|
@click="$refs.payload.click()"
|
||||||
>
|
>
|
||||||
@@ -31,7 +33,8 @@
|
|||||||
@change="uploadPayload"
|
@change="uploadPayload"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('rawParams', $event)"
|
@click="clearContent('rawParams', $event)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -13,7 +13,8 @@
|
|||||||
<label>{{ $t("token_list") }}</label>
|
<label>{{ $t("token_list") }}</label>
|
||||||
<div v-if="tokens.length != 0">
|
<div v-if="tokens.length != 0">
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('tokens', $event)"
|
@click="clearContent('tokens', $event)"
|
||||||
>
|
>
|
||||||
@@ -41,7 +42,8 @@
|
|||||||
<div class="row-wrapper">
|
<div class="row-wrapper">
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('use_token')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('use_token')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="useOAuthToken(token.value)"
|
@click="useOAuthToken(token.value)"
|
||||||
>
|
>
|
||||||
@@ -50,7 +52,8 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeOAuthToken(index)"
|
@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">
|
<p class="my-4 font-semibold tracking-widest text-center text-accent">
|
||||||
FEATURES
|
FEATURES
|
||||||
</p>
|
</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>
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
<div
|
<div
|
||||||
v-for="(feature, index) in features"
|
v-for="(feature, index) in features"
|
||||||
:key="`feature-${index}`"
|
:key="`feature-${index}`"
|
||||||
class="
|
class="inline-flex flex-col p-8"
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
p-8
|
|
||||||
transition
|
|
||||||
border
|
|
||||||
rounded-lg
|
|
||||||
border-divider
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<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">
|
<div class="flex-grow">
|
||||||
<h2
|
<h2
|
||||||
class="
|
class="
|
||||||
|
|||||||
@@ -1,18 +1,11 @@
|
|||||||
<template>
|
<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">
|
<nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||||
<div class="flex flex-col space-y-2">
|
<div class="flex flex-col space-y-2">
|
||||||
<SmartLink
|
<span>
|
||||||
:to="
|
|
||||||
!$store.state.authUser
|
|
||||||
? localePath('/')
|
|
||||||
: localePath(`/${$store.state.login}`)
|
|
||||||
"
|
|
||||||
class="my-2"
|
|
||||||
>
|
|
||||||
<AppLogo class="h-8" />
|
<AppLogo class="h-8" />
|
||||||
</SmartLink>
|
</span>
|
||||||
<span> Kooli </span>
|
<span class="font-bold"> Hoppscotch </span>
|
||||||
<SmartChangeLanguage />
|
<SmartChangeLanguage />
|
||||||
<ul class="space-y-2">
|
<ul class="space-y-2">
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -12,23 +12,47 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
globe: null,
|
globe: null,
|
||||||
cube: null,
|
|
||||||
renderer: null,
|
renderer: null,
|
||||||
scene: null,
|
scene: null,
|
||||||
camera: null,
|
camera: null,
|
||||||
tbControls: null,
|
arcsData: [...Array(20).keys()].map(() => ({
|
||||||
arcsData: [...Array(40).keys()].map(() => ({
|
|
||||||
startLat: (Math.random() - 0.5) * 180,
|
startLat: (Math.random() - 0.5) * 180,
|
||||||
startLng: (Math.random() - 0.5) * 360,
|
startLng: (Math.random() - 0.5) * 360,
|
||||||
endLat: (Math.random() - 0.5) * 180,
|
endLat: (Math.random() - 0.5) * 180,
|
||||||
endLng: (Math.random() - 0.5) * 360,
|
endLng: (Math.random() - 0.5) * 360,
|
||||||
color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
|
color: [
|
||||||
Math.round(Math.random() * 3)
|
["#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() {
|
mounted() {
|
||||||
this.init()
|
this.init()
|
||||||
this.animate()
|
this.animate()
|
||||||
@@ -52,17 +76,27 @@ export default {
|
|||||||
this.globe = new ThreeGlobe()
|
this.globe = new ThreeGlobe()
|
||||||
.globeImageUrl(texture)
|
.globeImageUrl(texture)
|
||||||
.atmosphereColor("#aaaaaa")
|
.atmosphereColor("#aaaaaa")
|
||||||
|
// arcs layer
|
||||||
.arcsData(this.arcsData)
|
.arcsData(this.arcsData)
|
||||||
.arcColor("color")
|
.arcColor("color")
|
||||||
.arcDashLength(1)
|
.arcDashLength(1)
|
||||||
.arcDashGap(5)
|
.arcDashGap(() => Math.random())
|
||||||
.arcStroke(1)
|
.arcStroke(1)
|
||||||
.arcDashInitialGap(() => Math.random() * 5)
|
.arcDashInitialGap(() => Math.random() * 5)
|
||||||
.arcDashAnimateTime(2000)
|
.arcDashAnimateTime(2000)
|
||||||
|
// hex layer
|
||||||
.hexPolygonsData(geojson.features)
|
.hexPolygonsData(geojson.features)
|
||||||
.hexPolygonResolution(3)
|
.hexPolygonResolution(3)
|
||||||
.hexPolygonMargin(0.5)
|
.hexPolygonMargin(0.5)
|
||||||
.hexPolygonColor(() => `#aaaaaa`)
|
.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({
|
this.renderer = new THREE.WebGLRenderer({
|
||||||
alpha: true,
|
alpha: true,
|
||||||
|
|||||||
@@ -6,9 +6,9 @@
|
|||||||
leading-none
|
leading-none
|
||||||
tracking-tighter
|
tracking-tighter
|
||||||
font-semibold
|
font-semibold
|
||||||
text-accent text-5xl
|
text-accent text-4xl
|
||||||
md:text-6xl
|
md:text-5xl
|
||||||
lg:text-8xl
|
lg:text-6xl
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
Open Source
|
Open Source
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
<h3
|
<h3
|
||||||
class="
|
class="
|
||||||
text-3xl
|
text-3xl
|
||||||
my-8
|
my-4
|
||||||
font-mono
|
font-mono
|
||||||
text-secondaryDark
|
text-secondaryDark
|
||||||
md:text-4xl
|
md:text-4xl
|
||||||
@@ -32,7 +32,13 @@
|
|||||||
in the world.
|
in the world.
|
||||||
</p>
|
</p>
|
||||||
<div class="my-8 flex items-center">
|
<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>
|
</div>
|
||||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
<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>
|
<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">
|
<div class="flex flex-col items-center">
|
||||||
<p class="my-4 font-semibold tracking-widest text-center">
|
<p class="my-4 font-semibold tracking-widest text-center">
|
||||||
EMPOWERING DEVELOPERS FROM
|
EMPOWERING DEVELOPERS FROM
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="ToggleExpandResponse"
|
ref="ToggleExpandResponse"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !expandResponse
|
content: !expandResponse
|
||||||
? $t('expand_response')
|
? $t('expand_response')
|
||||||
: $t('collapse_response'),
|
: $t('collapse_response'),
|
||||||
@@ -20,7 +21,8 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
|
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
|
||||||
}"
|
}"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@@ -33,7 +35,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="downloadResponse"
|
ref="downloadResponse"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadResponse"
|
@click="downloadResponse"
|
||||||
>
|
>
|
||||||
@@ -42,7 +45,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="copyResponse"
|
ref="copyResponse"
|
||||||
v-tooltip="$t('copy_response')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_response')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyResponse"
|
@click="copyResponse"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="downloadResponse"
|
ref="downloadResponse"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadResponse"
|
@click="downloadResponse"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="ToggleExpandResponse"
|
ref="ToggleExpandResponse"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !expandResponse
|
content: !expandResponse
|
||||||
? $t('expand_response')
|
? $t('expand_response')
|
||||||
: $t('collapse_response'),
|
: $t('collapse_response'),
|
||||||
@@ -21,7 +22,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body && canDownloadResponse"
|
v-if="response.body && canDownloadResponse"
|
||||||
ref="downloadResponse"
|
ref="downloadResponse"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadResponse"
|
@click="downloadResponse"
|
||||||
>
|
>
|
||||||
@@ -30,7 +32,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="copyResponse"
|
ref="copyResponse"
|
||||||
v-tooltip="$t('copy_response')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_response')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyResponse"
|
@click="copyResponse"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="ToggleExpandResponse"
|
ref="ToggleExpandResponse"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !expandResponse
|
content: !expandResponse
|
||||||
? $t('expand_response')
|
? $t('expand_response')
|
||||||
: $t('collapse_response'),
|
: $t('collapse_response'),
|
||||||
@@ -21,7 +22,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body && canDownloadResponse"
|
v-if="response.body && canDownloadResponse"
|
||||||
ref="downloadResponse"
|
ref="downloadResponse"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadResponse"
|
@click="downloadResponse"
|
||||||
>
|
>
|
||||||
@@ -30,7 +32,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="copyResponse"
|
ref="copyResponse"
|
||||||
v-tooltip="$t('copy_response')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_response')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyResponse"
|
@click="copyResponse"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="ToggleExpandResponse"
|
ref="ToggleExpandResponse"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !expandResponse
|
content: !expandResponse
|
||||||
? $t('expand_response')
|
? $t('expand_response')
|
||||||
: $t('collapse_response'),
|
: $t('collapse_response'),
|
||||||
@@ -21,7 +22,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="downloadResponse"
|
ref="downloadResponse"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadResponse"
|
@click="downloadResponse"
|
||||||
>
|
>
|
||||||
@@ -30,7 +32,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response.body"
|
v-if="response.body"
|
||||||
ref="copyResponse"
|
ref="copyResponse"
|
||||||
v-tooltip="$t('copy_response')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_response')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyResponse"
|
@click="copyResponse"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -100,7 +100,8 @@
|
|||||||
<div v-if="index + 1 !== communication.inputs.length">
|
<div v-if="index + 1 !== communication.inputs.length">
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeCommunicationInput({ index })"
|
@click="removeCommunicationInput({ index })"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -67,7 +67,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: protocol.hasOwnProperty('active')
|
content: protocol.hasOwnProperty('active')
|
||||||
? protocol.active
|
? protocol.active
|
||||||
? $t('turn_off')
|
? $t('turn_off')
|
||||||
@@ -96,7 +97,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="deleteProtocol({ index })"
|
@click="deleteProtocol({ index })"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -14,7 +14,8 @@
|
|||||||
<span
|
<span
|
||||||
v-for="(color, index) of accentColors"
|
v-for="(color, index) of accentColors"
|
||||||
:key="`color-${index}`"
|
:key="`color-${index}`"
|
||||||
v-tooltip="capitalized(color)"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="capitalized(color)"
|
||||||
class="
|
class="
|
||||||
inline-flex
|
inline-flex
|
||||||
items-center
|
items-center
|
||||||
|
|||||||
@@ -9,10 +9,7 @@
|
|||||||
:animate-fill="false"
|
:animate-fill="false"
|
||||||
>
|
>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<button
|
<button v-tippy="{ theme: 'tooltip' }" :title="$t('choose_language')">
|
||||||
v-tippy="{ animateFill: false, theme: 'tooltip' }"
|
|
||||||
:title="$t('choose_language')"
|
|
||||||
>
|
|
||||||
<span class="mr-2 text-lg">
|
<span class="mr-2 text-lg">
|
||||||
{{
|
{{
|
||||||
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<label>
|
<label>
|
||||||
<ColorScheme placeholder="..." tag="span">
|
<!-- <ColorScheme placeholder="..." tag="span">
|
||||||
{{ $t("background") }}:
|
{{ $t("background") }}:
|
||||||
{{
|
{{
|
||||||
$colorMode.preference.charAt(0).toUpperCase() +
|
$colorMode.preference.charAt(0).toUpperCase() +
|
||||||
@@ -10,13 +10,14 @@
|
|||||||
<span v-if="$colorMode.preference === 'system'">
|
<span v-if="$colorMode.preference === 'system'">
|
||||||
({{ $colorMode.value }} mode detected)
|
({{ $colorMode.value }} mode detected)
|
||||||
</span>
|
</span>
|
||||||
</ColorScheme>
|
</ColorScheme> -->
|
||||||
</label>
|
</label>
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
v-for="(color, index) of colors"
|
v-for="(color, index) of colors"
|
||||||
:key="`color-${index}`"
|
: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="
|
class="
|
||||||
inline-flex
|
inline-flex
|
||||||
items-center
|
items-center
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-tooltip="$t(active ? 'hide_sidebar' : 'show_sidebar')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
|
||||||
class="
|
class="
|
||||||
absolute
|
absolute
|
||||||
hidden
|
hidden
|
||||||
|
|||||||
@@ -57,55 +57,50 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<input
|
<template #trigger>
|
||||||
class="input"
|
<input
|
||||||
:placeholder="$t('permissions')"
|
class="input"
|
||||||
:name="'value' + index"
|
:placeholder="$t('permissions')"
|
||||||
:value="
|
:name="'value' + index"
|
||||||
typeof member.role === 'string'
|
:value="
|
||||||
? member.role
|
typeof member.role === 'string'
|
||||||
: JSON.stringify(member.role)
|
? member.role
|
||||||
"
|
: JSON.stringify(member.role)
|
||||||
readonly
|
"
|
||||||
/>
|
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>
|
|
||||||
</template>
|
</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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
id="member"
|
id="member"
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeExistingTeamMember(member.user.uid)"
|
@click="removeExistingTeamMember(member.user.uid)"
|
||||||
>
|
>
|
||||||
@@ -137,55 +132,44 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<input
|
<template #trigger>
|
||||||
class="input"
|
<input
|
||||||
:placeholder="$t('permissions')"
|
class="input"
|
||||||
:name="'value' + index"
|
:placeholder="$t('permissions')"
|
||||||
:value="
|
:name="'value' + index"
|
||||||
typeof member.value === 'string'
|
:value="
|
||||||
? member.value
|
typeof member.value === 'string'
|
||||||
: JSON.stringify(member.value)
|
? member.value
|
||||||
"
|
: JSON.stringify(member.value)
|
||||||
readonly
|
"
|
||||||
/>
|
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>
|
|
||||||
</template>
|
</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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
id="member"
|
id="member"
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeTeamMember(index)"
|
@click="removeTeamMember(index)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
<div class="row-wrapper">
|
<div class="row-wrapper">
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="team.myRole === 'OWNER' ? $t('edit') : ''"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
||||||
>
|
>
|
||||||
@@ -10,49 +11,49 @@
|
|||||||
<span>{{ team.name }}</span>
|
<span>{{ team.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
|
<template #trigger>
|
||||||
<i class="material-icons">more_vert</i>
|
<button
|
||||||
</button>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<template #popover>
|
:title="$t('more')"
|
||||||
<div v-if="team.myRole === 'OWNER'">
|
class="tooltip-target icon button"
|
||||||
<button
|
>
|
||||||
v-close-popover
|
<i class="material-icons">more_vert</i>
|
||||||
class="icon button"
|
</button>
|
||||||
@click="$emit('edit-team')"
|
</template>
|
||||||
>
|
<div v-if="team.myRole === 'OWNER'">
|
||||||
<i class="material-icons">create</i>
|
<button class="icon button" @click="$emit('edit-team')">
|
||||||
<span>{{ $t("edit") }}</span>
|
<i class="material-icons">create</i>
|
||||||
</button>
|
<span>{{ $t("edit") }}</span>
|
||||||
</div>
|
</button>
|
||||||
<div v-if="team.myRole === 'OWNER'">
|
</div>
|
||||||
<button v-close-popover class="icon button" @click="deleteTeam">
|
<div v-if="team.myRole === 'OWNER'">
|
||||||
<i class="material-icons">delete</i>
|
<button class="icon button" @click="deleteTeam">
|
||||||
<span>{{ $t("delete") }}</span>
|
<i class="material-icons">delete</i>
|
||||||
</button>
|
<span>{{ $t("delete") }}</span>
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
v-close-popover
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
|
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
|
||||||
@click="exitTeam"
|
@click="exitTeam"
|
||||||
>
|
>
|
||||||
<i class="material-icons">remove</i>
|
<i class="material-icons">remove</i>
|
||||||
<div
|
<div
|
||||||
v-tooltip.left="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content:
|
content:
|
||||||
team.myRole === 'OWNER' && team.ownersCount == 1
|
team.myRole === 'OWNER' && team.ownersCount == 1
|
||||||
? $t('disable_exit')
|
? $t('disable_exit')
|
||||||
: '',
|
: '',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<span>{{ $t("exit") }}</span>
|
<span>{{ $t("exit") }}</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</tippy>
|
||||||
</v-popover>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -40,6 +40,7 @@
|
|||||||
<button class="button icon" @click="hideHeaderPane = !hideHeaderPane">
|
<button class="button icon" @click="hideHeaderPane = !hideHeaderPane">
|
||||||
<i class="material-icons">menu_open</i>
|
<i class="material-icons">menu_open</i>
|
||||||
</button>
|
</button>
|
||||||
|
<AppFooter />
|
||||||
</Pane>
|
</Pane>
|
||||||
</Splitpanes>
|
</Splitpanes>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -95,7 +95,6 @@ export default {
|
|||||||
plugins: [
|
plugins: [
|
||||||
"~/plugins/v-tippy",
|
"~/plugins/v-tippy",
|
||||||
"~/plugins/vuex-persist",
|
"~/plugins/vuex-persist",
|
||||||
"~/plugins/v-tooltip",
|
|
||||||
"~/plugins/vue-rx",
|
"~/plugins/vue-rx",
|
||||||
"~/plugins/vue-apollo",
|
"~/plugins/vue-apollo",
|
||||||
{ src: "~/plugins/web-worker", ssr: false },
|
{ src: "~/plugins/web-worker", ssr: false },
|
||||||
@@ -202,13 +201,6 @@ export default {
|
|||||||
Sitemap: `${process.env.BASE_URL}/sitemap.xml`,
|
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)
|
// Google Fonts module configuration (https://github.com/nuxt-community/google-fonts-module)
|
||||||
googleFonts: {
|
googleFonts: {
|
||||||
display: "swap",
|
display: "swap",
|
||||||
@@ -449,6 +441,6 @@ export default {
|
|||||||
|
|
||||||
// Router configuration (https://nuxtjs.org/api/configuration-router)
|
// Router configuration (https://nuxtjs.org/api/configuration-router)
|
||||||
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",
|
"tern": "^0.24.3",
|
||||||
"three": "^0.130.0",
|
"three": "^0.130.0",
|
||||||
"three-globe": "^2.18.5",
|
"three-globe": "^2.18.5",
|
||||||
"v-tooltip": "^2.1.3",
|
|
||||||
"vue-apollo": "^3.0.7",
|
"vue-apollo": "^3.0.7",
|
||||||
"vue-cli-plugin-apollo": "^0.22.2",
|
"vue-cli-plugin-apollo": "^0.22.2",
|
||||||
"vue-functional-data-merge": "^3.1.0",
|
"vue-functional-data-merge": "^3.1.0",
|
||||||
@@ -29009,17 +29008,6 @@
|
|||||||
"uuid": "dist/bin/uuid"
|
"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": {
|
"node_modules/v8-compile-cache": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
|
||||||
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
|
"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": {
|
"node_modules/vue-router": {
|
||||||
"version": "3.5.2",
|
"version": "3.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
"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": {
|
"v8-compile-cache": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
|
||||||
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
|
"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": {
|
"vue-router": {
|
||||||
"version": "3.5.2",
|
"version": "3.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
|
||||||
|
|||||||
@@ -51,7 +51,6 @@
|
|||||||
"tern": "^0.24.3",
|
"tern": "^0.24.3",
|
||||||
"three": "^0.130.0",
|
"three": "^0.130.0",
|
||||||
"three-globe": "^2.18.5",
|
"three-globe": "^2.18.5",
|
||||||
"v-tooltip": "^2.1.3",
|
|
||||||
"vue-apollo": "^3.0.7",
|
"vue-apollo": "^3.0.7",
|
||||||
"vue-cli-plugin-apollo": "^0.22.2",
|
"vue-cli-plugin-apollo": "^0.22.2",
|
||||||
"vue-functional-data-merge": "^3.1.0",
|
"vue-functional-data-merge": "^3.1.0",
|
||||||
|
|||||||
144
pages/api.vue
144
pages/api.vue
@@ -10,33 +10,32 @@
|
|||||||
<li class="shrink">
|
<li class="shrink">
|
||||||
<label for="method">{{ $t("method") }}</label>
|
<label for="method">{{ $t("method") }}</label>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<input
|
<template #trigger>
|
||||||
id="method"
|
<input
|
||||||
class="input drop-down-input"
|
id="method"
|
||||||
v-model="method"
|
class="input drop-down-input"
|
||||||
:readonly="!customMethod"
|
v-model="method"
|
||||||
autofocus
|
: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>
|
|
||||||
</template>
|
</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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
@@ -109,30 +108,29 @@
|
|||||||
$t("content_type")
|
$t("content_type")
|
||||||
}}</label>
|
}}</label>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<v-popover>
|
<tippy trigger="click" theme="popover" arrow>
|
||||||
<input
|
<template #trigger>
|
||||||
id="contentType"
|
<input
|
||||||
class="input drop-down-input"
|
id="contentType"
|
||||||
v-model="contentType"
|
class="input drop-down-input"
|
||||||
readonly
|
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>
|
|
||||||
</template>
|
</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>
|
</span>
|
||||||
<!-- <SmartAutoComplete
|
<!-- <SmartAutoComplete
|
||||||
:source="validContentTypes"
|
:source="validContentTypes"
|
||||||
@@ -182,7 +180,8 @@
|
|||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showCurlImportModal = !showCurlImportModal"
|
@click="showCurlImportModal = !showCurlImportModal"
|
||||||
v-tooltip.bottom="$t('import_curl')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('import_curl')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">import_export</i>
|
<i class="material-icons">import_export</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -190,7 +189,8 @@
|
|||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showCodegenModal = !showCodegenModal"
|
@click="showCodegenModal = !showCodegenModal"
|
||||||
:disabled="!isValidURL"
|
:disabled="!isValidURL"
|
||||||
v-tooltip.bottom="$t('show_code')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('show_code')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">code</i>
|
<i class="material-icons">code</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -201,7 +201,8 @@
|
|||||||
@click="copyRequest"
|
@click="copyRequest"
|
||||||
ref="copyRequest"
|
ref="copyRequest"
|
||||||
:disabled="!isValidURL"
|
: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-if="navigatorShare" class="material-icons">share</i>
|
||||||
<i v-else class="material-icons">content_copy</i>
|
<i v-else class="material-icons">content_copy</i>
|
||||||
@@ -211,14 +212,16 @@
|
|||||||
@click="saveRequest"
|
@click="saveRequest"
|
||||||
ref="saveRequest"
|
ref="saveRequest"
|
||||||
:disabled="!isValidURL"
|
: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>
|
<i class="material-icons">create_new_folder</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('', $event)"
|
@click="clearContent('', $event)"
|
||||||
v-tooltip.bottom="$t('clear_all')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear_all')"
|
||||||
ref="clearAll"
|
ref="clearAll"
|
||||||
>
|
>
|
||||||
<i class="material-icons">clear_all</i>
|
<i class="material-icons">clear_all</i>
|
||||||
@@ -276,7 +279,8 @@
|
|||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('auth', $event)"
|
@click="clearContent('auth', $event)"
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">clear_all</i>
|
<i class="material-icons">clear_all</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -344,7 +348,8 @@
|
|||||||
v-if="auth === 'OAuth 2.0'"
|
v-if="auth === 'OAuth 2.0'"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showTokenListModal = !showTokenListModal"
|
@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>
|
<i class="material-icons">open_in_new</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -352,7 +357,8 @@
|
|||||||
v-if="auth === 'OAuth 2.0'"
|
v-if="auth === 'OAuth 2.0'"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showTokenRequest = !showTokenRequest"
|
@click="showTokenRequest = !showTokenRequest"
|
||||||
v-tooltip.bottom="$t('get_token')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('get_token')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">vpn_key</i>
|
<i class="material-icons">vpn_key</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -381,21 +387,24 @@
|
|||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showTokenRequestList = true"
|
@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>
|
<i class="material-icons">library_add</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('access_token', $event)"
|
@click="clearContent('access_token', $event)"
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">clear_all</i>
|
<i class="material-icons">clear_all</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showTokenRequest = false"
|
@click="showTokenRequest = false"
|
||||||
v-tooltip.bottom="$t('close')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('close')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">close</i>
|
<i class="material-icons">close</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -516,7 +525,8 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
v-tooltip="$t('wiki')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('wiki')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">help_outline</i>
|
<i class="material-icons">help_outline</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -555,7 +565,8 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
v-tooltip="$t('wiki')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('wiki')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">help_outline</i>
|
<i class="material-icons">help_outline</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -582,7 +593,8 @@
|
|||||||
<button
|
<button
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="clearContent('tests', $event)"
|
@click="clearContent('tests', $event)"
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">clear_all</i>
|
<i class="material-icons">clear_all</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -723,7 +735,8 @@
|
|||||||
:disabled="this.tokenReqs.length === 0"
|
:disabled="this.tokenReqs.length === 0"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="showTokenRequestList = false"
|
@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>
|
<i class="material-icons">input</i>
|
||||||
</button>
|
</button>
|
||||||
@@ -731,7 +744,8 @@
|
|||||||
:disabled="this.tokenReqs.length === 0"
|
:disabled="this.tokenReqs.length === 0"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeOAuthTokenReq"
|
@click="removeOAuthTokenReq"
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
>
|
>
|
||||||
<i class="material-icons">delete</i>
|
<i class="material-icons">delete</i>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -11,7 +11,8 @@
|
|||||||
<div class="row-wrapper">
|
<div class="row-wrapper">
|
||||||
<label for="collectionUpload">
|
<label for="collectionUpload">
|
||||||
<button
|
<button
|
||||||
v-tooltip="'JSON'"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="JSON"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="$refs.collectionUpload.click()"
|
@click="$refs.collectionUpload.click()"
|
||||||
>
|
>
|
||||||
@@ -28,7 +29,8 @@
|
|||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="collectionJSON = '[]'"
|
@click="collectionJSON = '[]'"
|
||||||
>
|
>
|
||||||
@@ -64,7 +66,8 @@
|
|||||||
</p>
|
</p>
|
||||||
<div v-else class="row-wrapper">
|
<div v-else class="row-wrapper">
|
||||||
<div
|
<div
|
||||||
v-tooltip.bottom="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !currentUser
|
content: !currentUser
|
||||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||||
: currentUser.provider !== 'github.com'
|
: currentUser.provider !== 'github.com'
|
||||||
|
|||||||
@@ -50,7 +50,8 @@
|
|||||||
<label for="headerList">{{ $t("header_list") }}</label>
|
<label for="headerList">{{ $t("header_list") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('clear')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="headers = []"
|
@click="headers = []"
|
||||||
>
|
>
|
||||||
@@ -103,7 +104,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: header.hasOwnProperty('active')
|
content: header.hasOwnProperty('active')
|
||||||
? header.active
|
? header.active
|
||||||
? $t('turn_off')
|
? $t('turn_off')
|
||||||
@@ -135,7 +137,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('delete')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="removeRequestHeader(index)"
|
@click="removeRequestHeader(index)"
|
||||||
>
|
>
|
||||||
@@ -161,7 +164,8 @@
|
|||||||
<div v-if="schema">
|
<div v-if="schema">
|
||||||
<button
|
<button
|
||||||
ref="ToggleExpandResponse"
|
ref="ToggleExpandResponse"
|
||||||
v-tooltip="{
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="{
|
||||||
content: !expandResponse
|
content: !expandResponse
|
||||||
? $t('expand_response')
|
? $t('expand_response')
|
||||||
: $t('collapse_response'),
|
: $t('collapse_response'),
|
||||||
@@ -175,7 +179,8 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
ref="downloadSchema"
|
ref="downloadSchema"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadSchema"
|
@click="downloadSchema"
|
||||||
>
|
>
|
||||||
@@ -183,7 +188,8 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
ref="copySchemaCode"
|
ref="copySchemaCode"
|
||||||
v-tooltip="$t('copy_schema')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_schema')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copySchema"
|
@click="copySchema"
|
||||||
>
|
>
|
||||||
@@ -222,7 +228,8 @@
|
|||||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
title="
|
||||||
`${$t('run_query')} (${getSpecialKey()}-Enter)`
|
`${$t('run_query')} (${getSpecialKey()}-Enter)`
|
||||||
"
|
"
|
||||||
class="button"
|
class="button"
|
||||||
@@ -232,14 +239,16 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
ref="copyQueryButton"
|
ref="copyQueryButton"
|
||||||
v-tooltip="$t('copy_query')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_query')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyQuery"
|
@click="copyQuery"
|
||||||
>
|
>
|
||||||
<i class="material-icons">{{ copyQueryIcon }}</i>
|
<i class="material-icons">{{ copyQueryIcon }}</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="doPrettifyQuery"
|
@click="doPrettifyQuery"
|
||||||
>
|
>
|
||||||
@@ -247,7 +256,8 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
ref="saveRequest"
|
ref="saveRequest"
|
||||||
v-tooltip.bottom="$t('save_to_collections')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('save_to_collections')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="saveRequest"
|
@click="saveRequest"
|
||||||
>
|
>
|
||||||
@@ -300,7 +310,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response"
|
v-if="response"
|
||||||
ref="downloadResponse"
|
ref="downloadResponse"
|
||||||
v-tooltip="$t('download_file')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('download_file')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="downloadResponse"
|
@click="downloadResponse"
|
||||||
>
|
>
|
||||||
@@ -309,7 +320,8 @@
|
|||||||
<button
|
<button
|
||||||
v-if="response"
|
v-if="response"
|
||||||
ref="copyResponseButton"
|
ref="copyResponseButton"
|
||||||
v-tooltip="$t('copy_response')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('copy_response')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="copyResponse"
|
@click="copyResponse"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="flex flex-col space-y-16">
|
||||||
<LandingHero />
|
<LandingHero />
|
||||||
<LandingStats />
|
<LandingStats />
|
||||||
<LandingUsers />
|
<LandingUsers />
|
||||||
<LandingFeatures />
|
<LandingFeatures />
|
||||||
<LandingPackage />
|
<LandingCTA />
|
||||||
<LandingFooter />
|
<LandingFooter />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -124,7 +124,11 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
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>
|
<i class="material-icons">help_outline</i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
@@ -132,7 +136,8 @@
|
|||||||
<div class="row-wrapper">
|
<div class="row-wrapper">
|
||||||
<label for="url">{{ $t("url") }}</label>
|
<label for="url">{{ $t("url") }}</label>
|
||||||
<button
|
<button
|
||||||
v-tooltip.bottom="$t('reset_default')"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('reset_default')"
|
||||||
class="icon button"
|
class="icon button"
|
||||||
@click="resetProxy"
|
@click="resetProxy"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
import Vue from "vue"
|
import Vue from "vue"
|
||||||
import VueTippy, { TippyComponent } from "vue-tippy"
|
import VueTippy, { TippyComponent } from "vue-tippy"
|
||||||
|
|
||||||
Vue.use(VueTippy)
|
Vue.use(VueTippy, {
|
||||||
|
animateFill: false,
|
||||||
|
interactive: true,
|
||||||
|
})
|
||||||
Vue.component("Tippy", TippyComponent)
|
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