feat: refactor buttons
This commit is contained in:
Liyas Thomas
GitHub
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("extensions") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -13,62 +11,24 @@
|
||||
{{ $t("extensions_info1") }}
|
||||
</p>
|
||||
<div class="px-2">
|
||||
<a
|
||||
href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button class="icon button">
|
||||
<svg
|
||||
class="material-icons"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Firefox</span>
|
||||
<span
|
||||
v-if="hasFirefoxExtInstalled"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('installed')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
|
||||
blank
|
||||
:title="{ hasFirefoxExtInstalled: $t('installed') }"
|
||||
svg="firefox"
|
||||
label="Firefox"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button class="icon button">
|
||||
<svg
|
||||
class="material-icons"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Chrome</span>
|
||||
<span
|
||||
v-if="hasChromeExtInstalled"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('installed')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
|
||||
blank
|
||||
:title="{ hasChromeExtInstalled: $t('installed') }"
|
||||
svg="chrome"
|
||||
label="Chrome"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,135 +1,90 @@
|
||||
<template>
|
||||
<header class="flex container items-center justify-between p-2 flex-1">
|
||||
<div class="flex items-center relative ml-2">
|
||||
<nuxt-link :to="localePath('index')">
|
||||
<h1 class="heading logo">Hoppscotch</h1>
|
||||
</nuxt-link>
|
||||
<AppGitHubStarButton class="ml-8" />
|
||||
<div class="inline-flex space-x-2 items-center flex-shrink-0">
|
||||
<AppLogo class="h-6" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button
|
||||
<div class="inline-flex space-x-2 items-center flex-shrink-0">
|
||||
<TabPrimary
|
||||
id="installPWA"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('install_pwa')"
|
||||
class="icon button"
|
||||
@click.prevent="showInstallPrompt()"
|
||||
>
|
||||
<i class="material-icons">offline_bolt</i>
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch"
|
||||
target="_blank"
|
||||
aria-label="GitHub"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="GitHub"
|
||||
class="icon button"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<tippy v-if="currentUser === null" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('login_with')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">login</i>
|
||||
</button>
|
||||
</template>
|
||||
<FirebaseLogin @show-email="showEmail = true" />
|
||||
</tippy>
|
||||
<tippy v-else trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="
|
||||
(currentUser.displayName ||
|
||||
'<label><i>Name not found</i></label>') +
|
||||
'<br>' +
|
||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
||||
"
|
||||
class="icon button"
|
||||
aria-label="Account"
|
||||
>
|
||||
<img
|
||||
icon="offline_bolt"
|
||||
@click.native="showInstallPrompt()"
|
||||
/>
|
||||
<span tabindex="-1">
|
||||
<span v-if="currentUser === null">
|
||||
<ButtonSecondary label="Sign in" @click.native="showLogin = true" />
|
||||
<ButtonPrimary label="Sign up" @click.native="showLogin = true" />
|
||||
</span>
|
||||
<tippy v-else tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<ProfilePicture
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="w-6 h-6 rounded-full material-icons"
|
||||
alt="Profile image"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:url="currentUser.photoURL"
|
||||
class="mr-4"
|
||||
:title="
|
||||
(currentUser.displayName ||
|
||||
'<label><i>Name not found</i></label>') +
|
||||
'<br>' +
|
||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
||||
"
|
||||
/>
|
||||
<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>
|
||||
<TabPrimary
|
||||
v-else
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('account')"
|
||||
icon="account_circle"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem to="/settings" icon="settings" :label="$t('settings')" />
|
||||
<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"
|
||||
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');"
|
||||
</tippy>
|
||||
</span>
|
||||
<span tabindex="-1">
|
||||
<tippy
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<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"
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="drag_indicator"
|
||||
/>
|
||||
</svg>
|
||||
<span>Tweet</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="navigatorShare"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="icon button"
|
||||
@click="nativeShare"
|
||||
>
|
||||
<i class="material-icons">share</i>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</tippy>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="extension"
|
||||
:label="$t('extensions')"
|
||||
@click.native="
|
||||
showExtensions = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
icon="keyboard"
|
||||
:label="$t('shortcuts')"
|
||||
@click.native="
|
||||
showShortcuts = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-if="navigatorShare"
|
||||
icon="share"
|
||||
:label="$t('share')"
|
||||
@click.native="
|
||||
nativeShare()
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
<AppLogin :show="showLogin" @hide-modal="showLogin = false" />
|
||||
<AppExtensions
|
||||
:show="showExtensions"
|
||||
@hide-modal="showExtensions = false"
|
||||
@@ -152,6 +107,7 @@ export default {
|
||||
// that can be called to show the user the installation
|
||||
// prompt.
|
||||
showInstallPrompt: null,
|
||||
showLogin: false,
|
||||
showExtensions: false,
|
||||
showShortcuts: false,
|
||||
showEmail: false,
|
||||
|
||||
26
components/app/Login.vue
Normal file
26
components/app/Login.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("login") }}</h3>
|
||||
<div>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<FirebaseLogin />
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
show: Boolean,
|
||||
},
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +1,35 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 612.001 612.001">
|
||||
<svg class="logo" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<linearGradient
|
||||
id="a"
|
||||
gradientTransform="matrix(1 0 0 -1 0 -24914)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="512"
|
||||
y1="-25170"
|
||||
y2="-25170"
|
||||
>
|
||||
<stop offset="0" stop-color="#31d8ff" />
|
||||
<stop offset="1" stop-color="#ff80ff" />
|
||||
</linearGradient>
|
||||
<path
|
||||
:fill="color"
|
||||
data-old_color="#202124"
|
||||
class="active-path"
|
||||
data-original="#202124"
|
||||
d="M64.601 236.822C64.601 394.256 192.786 612 306.001 612 412.582 612 547.4 394.256 547.4 236.822S439.322 0 306 0 64.601 79.388 64.601 236.822zm304.12 116.415c29.475-29.475 70.598-40.195 108.552-32.173 8.021 37.954-2.698 79.077-32.173 108.552-29.475 29.476-70.598 40.196-108.552 32.174-8.022-37.955 2.698-79.078 32.173-108.552zm-233.994-32.174c37.954-8.02 79.077 2.698 108.552 32.173 29.475 29.475 40.195 70.598 32.173 108.552-37.954 8.021-79.077-2.698-108.552-32.173-29.475-29.476-40.194-70.598-32.173-108.552z"
|
||||
d="M512 256c0 141.387-114.613 256-256 256S0 397.387 0 256 114.613 0 256 0s256 114.613 256 256zm0 0"
|
||||
fill="url(#a)"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
<style scoped lang="scss">
|
||||
.logo {
|
||||
animation: 200ms appear;
|
||||
}
|
||||
</script>
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
@apply opacity-0;
|
||||
}
|
||||
100% {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
<template>
|
||||
<fieldset :id="label.toLowerCase()">
|
||||
<legend v-if="!noLegend" @click.prevent="collapse">
|
||||
<span>{{ label }}</span>
|
||||
<i class="ml-2 align-middle material-icons">
|
||||
{{ isCollapsed(label) ? "expand_more" : "expand_less" }}
|
||||
</i>
|
||||
</legend>
|
||||
<div
|
||||
class="collapsible"
|
||||
:class="{ hidden: isCollapsed(label.toLowerCase()) }"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</fieldset>
|
||||
<section :id="label.toLowerCase()">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -24,51 +13,6 @@ export default Vue.extend({
|
||||
type: String,
|
||||
default: "Section",
|
||||
},
|
||||
noLegend: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sectionString(): string {
|
||||
return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
collapse() {
|
||||
// Save collapsed section into the collapsedSections array
|
||||
this.$store.commit("setCollapsedSection", this.sectionString)
|
||||
},
|
||||
isCollapsed(_label: string) {
|
||||
return (
|
||||
this.$store.state.theme.collapsedSections.includes(
|
||||
this.sectionString
|
||||
) || false
|
||||
)
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
fieldset {
|
||||
@apply my-4;
|
||||
@apply rounded-lg;
|
||||
@apply bg-primaryDark;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply w-full;
|
||||
|
||||
legend {
|
||||
@apply px-4;
|
||||
@apply text-secondary;
|
||||
@apply font-bold;
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("shortcuts") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
|
||||
@@ -84,7 +84,7 @@ nav.secondary-nav {
|
||||
@apply text-secondaryLight;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -21,12 +19,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="editFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="editFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_request") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveRequest">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,41 +3,38 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="mode == 'import_from_my_collections'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="Back"
|
||||
class="tooltip-target icon button"
|
||||
@click="
|
||||
icon="arrow_back"
|
||||
@click.native="
|
||||
mode = 'import_export'
|
||||
mySelectedCollectionID = undefined
|
||||
"
|
||||
>
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</button>
|
||||
|
||||
/>
|
||||
<tippy
|
||||
v-if="
|
||||
mode == 'import_export' && collectionsType.type == 'my-collections'
|
||||
"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="readCollectionGist">
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="assignment_returned"
|
||||
:label="$t('import_from_gist')"
|
||||
@click.native="readCollectionGist"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -49,7 +46,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -57,76 +54,62 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createCollectionGist"
|
||||
>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
icon="assignment_turned_in"
|
||||
:label="$t('create_secret_gist')"
|
||||
@click.native="createCollectionGist"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('replace_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
icon="folder_special"
|
||||
:label="$t('replace_json')"
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
icon="create_new_folder"
|
||||
:label="$t('import_json')"
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.type == 'team-collections'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="mode = 'import_from_my_collections'"
|
||||
>
|
||||
<i class="material-icons">folder_shared</i>
|
||||
<span>{{ $t("import_from_my_collections") }}</span>
|
||||
</button>
|
||||
<button
|
||||
icon="folder_shared"
|
||||
:label="$t('import_from_my_collections')"
|
||||
@click.native="mode = 'import_from_my_collections'"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="exportJSON"
|
||||
>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</button>
|
||||
icon="drive_file_move"
|
||||
:label="$t('export_as_json')"
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="mode == 'import_from_my_collections'">
|
||||
<span class="select-wrapper">
|
||||
@@ -164,14 +147,13 @@
|
||||
<div v-if="mode == 'import_from_my_collections'">
|
||||
<span></span>
|
||||
<span>
|
||||
<button
|
||||
class="m-2 icon button"
|
||||
<ButtonSecondary
|
||||
class="m-2"
|
||||
:disabled="mySelectedCollectionID == undefined"
|
||||
@click="importFromMyCollections"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import") }}</span>
|
||||
</button>
|
||||
icon="create_new_folder"
|
||||
:label="$t('import')"
|
||||
@click.native="importFromMyCollections"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("save_request_as") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -41,12 +39,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveRequestAs">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -12,65 +9,58 @@
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="doc"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
class="icon button"
|
||||
@click="$emit('select-collection')"
|
||||
>
|
||||
<i class="material-icons">topic</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i class="material-icons">topic</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-collection')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-collection')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="editFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="editFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_request") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveRequest">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -13,54 +10,43 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name }}</span>
|
||||
</button>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<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>
|
||||
<ButtonSecondary
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="$emit('edit-folder', { folder, folderPath })"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="$emit('edit-folder', { folder, folderPath })"
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -3,21 +3,20 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
||||
<div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="readCollectionGist">
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="assignment_returned"
|
||||
:label="$t('import_from_gist')"
|
||||
@click.native="readCollectionGist"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -29,7 +28,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -37,66 +36,56 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createCollectionGist"
|
||||
>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
@click.native="createCollectionGist"
|
||||
/>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col items-start p-2">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('replace_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="exportJSON"
|
||||
>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</button>
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover.stop
|
||||
@@ -12,50 +9,40 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
class="icon button"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">description</i>
|
||||
<span>{{ request.name }}</span>
|
||||
</button>
|
||||
:class="{ 'mx-3 text-green-400': isSelected }"
|
||||
:icon="isSelected ? 'check_circle' : 'description'"
|
||||
:label="request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-request', {
|
||||
request,
|
||||
requestIndex,
|
||||
folderPath,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="collections">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-if="showCollActions"
|
||||
v-model="filterText"
|
||||
@@ -46,23 +46,21 @@
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
/>
|
||||
<div class="border-b row-wrapper border-divider">
|
||||
<button class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<button
|
||||
<ButtonSecondary @click.native="displayModalAdd(true)" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
|
||||
<ButtonSecondary
|
||||
v-if="showCollActions"
|
||||
class="icon button"
|
||||
@click="displayModalImportExport(true)"
|
||||
>
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
@click.native="displayModalImportExport(true)"
|
||||
/>
|
||||
{{ $t("import_export") }}
|
||||
</div>
|
||||
<p v-if="collections.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_collection") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(collection, index) in filteredCollections"
|
||||
@@ -245,9 +243,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="collections">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-if="!saveRequest"
|
||||
v-model="filterText"
|
||||
@@ -54,45 +54,40 @@
|
||||
@update-team-collections="updateTeamCollections"
|
||||
/>
|
||||
<div class="border-b row-wrapper border-divider">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="
|
||||
collectionsType.type == 'team-collections' &&
|
||||
(collectionsType.selectedTeam == undefined ||
|
||||
collectionsType.selectedTeam.myRole == 'VIEWER')
|
||||
"
|
||||
class="icon button"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
disabled
|
||||
@click="displayModalAdd(true)"
|
||||
>
|
||||
<i class="material-icons">add</i>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('disable_new_collection')"
|
||||
>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<button v-else class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<button
|
||||
icon="add"
|
||||
:title="$t('disable_new_collection')"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-else
|
||||
icon="add"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="!saveRequest"
|
||||
:disabled="
|
||||
collectionsType.type == 'team-collections' &&
|
||||
collectionsType.selectedTeam == undefined
|
||||
"
|
||||
class="icon button"
|
||||
@click="displayModalImportExport(true)"
|
||||
>
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
:label="$t('import_export')"
|
||||
@click.native="displayModalImportExport(true)"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="collections.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_collection") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(collection, index) in filteredCollections"
|
||||
@@ -636,9 +631,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -12,75 +9,66 @@
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
class="icon button"
|
||||
@click="$emit('select-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="$emit('unselect-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="$emit('unselect-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-collection')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-collection')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -13,43 +10,34 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<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>
|
||||
<ButtonSecondary
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-folder', {
|
||||
folder,
|
||||
folderIndex,
|
||||
@@ -57,16 +45,14 @@
|
||||
folderPath,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover.stop
|
||||
@@ -12,36 +9,26 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
class="icon button"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span>{{ request.name }}</span>
|
||||
</button>
|
||||
:class="[
|
||||
getRequestLabelColor(request.method),
|
||||
{ 'mx-3 text-green-400': isSelected },
|
||||
]"
|
||||
:icon="isSelected ? 'check_circle' : ''"
|
||||
:label="request.method + request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-request', {
|
||||
collectionIndex,
|
||||
folderIndex,
|
||||
@@ -51,16 +38,14 @@
|
||||
folderPath,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,85 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<div class="ease-in-out row-wrapper">
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.title }}</span>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.title }}</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
class="icon button"
|
||||
@click="$emit('select-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="$emit('unselect-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="$emit('unselect-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="$emit('edit-collection')"
|
||||
>
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('edit-collection')"
|
||||
/>
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="confirmRemove = true"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="confirmRemove = true"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,49 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||
<div class="ease-in-out row-wrapper">
|
||||
<div>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</button>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
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>
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$emit('edit-folder', {
|
||||
folder,
|
||||
folderIndex,
|
||||
@@ -51,20 +45,17 @@
|
||||
folderPath: '',
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="confirmRemove = true"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="confirmRemove = true"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||
<div class="ease-in-out row-wrapper">
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
class="icon button"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span>{{ request.name }}</span>
|
||||
</button>
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span>{{ request.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-request', {
|
||||
collectionIndex,
|
||||
folderIndex,
|
||||
@@ -41,16 +36,14 @@
|
||||
requestIndex,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_environment") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewEnvironment">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_environment") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -21,14 +19,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="variableList">{{ $t("env_variable_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent($event)"
|
||||
>
|
||||
<i class="material-icons">{{ clearIcon }}</i>
|
||||
</button>
|
||||
icon="clearIcon"
|
||||
@click.native="clearContent($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@@ -62,36 +58,29 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="variable"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeEnvironmentVariable(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeEnvironmentVariable(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addEnvironmentVariable">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addEnvironmentVariable" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveEnvironment">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -2,32 +2,24 @@
|
||||
<div>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-environment')">
|
||||
<i class="material-icons">layers</i>
|
||||
<span>{{ environment.name }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-environment')" />
|
||||
<i class="material-icons">layers</i>
|
||||
<span>{{ environment.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-environment')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-environment')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -5,21 +5,18 @@
|
||||
{{ $t("import_export") }} {{ $t("environments") }}
|
||||
</h3>
|
||||
<div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="readEnvironmentGist">
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="readEnvironmentGist" />
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -31,7 +28,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -39,66 +36,56 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createEnvironmentGist"
|
||||
>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
@click.native="createEnvironmentGist"
|
||||
/>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col items-start p-2">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('replace_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="exportJSON"
|
||||
>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</button>
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="environments">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<span class="select-wrapper">
|
||||
<select
|
||||
v-model="selectedEnvironmentIndex"
|
||||
@@ -37,22 +37,22 @@
|
||||
/>
|
||||
<div class="border-b row-wrapper border-divider">
|
||||
<div>
|
||||
<button class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="displayModalImportExport(true)">
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
<ButtonSecondary @click.native="displayModalImportExport(true)" />
|
||||
{{ $t("import_export") }}
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="environments.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_environment") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(environment, index) in environments"
|
||||
@@ -122,9 +122,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</template>
|
||||
<template v-if="mode === 'sign-in'" #body>
|
||||
<label for="email"> E-mail </label>
|
||||
@@ -41,11 +39,8 @@
|
||||
<template v-if="mode === 'sign-in'" #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button v-if="signingInWithEmail" class="icon button" type="button">
|
||||
{{ $t("loading") }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
<ButtonSPrimary
|
||||
:loading="signingInWithEmail"
|
||||
class="rounded-md button"
|
||||
:disabled="
|
||||
form.email.length !== 0
|
||||
@@ -56,11 +51,9 @@
|
||||
"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
@click="signInWithEmail"
|
||||
>
|
||||
{{ $t("send_magic_link") }}
|
||||
</button>
|
||||
</span>
|
||||
:label="$t('send_magic_link')"
|
||||
@click.native="signInWithEmail"
|
||||
/></span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
@@ -1,40 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<button class="icon button" @click="signInWithGoogle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Google</span>
|
||||
</button>
|
||||
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
|
||||
<SmartItem
|
||||
svg="google"
|
||||
label="Continue with Google"
|
||||
@click.native="signInWithGoogle"
|
||||
/>
|
||||
<SmartItem
|
||||
svg="github"
|
||||
label="Continue with GitHub"
|
||||
@click.native="signInWithGithub"
|
||||
/>
|
||||
<SmartItem
|
||||
icon="mail"
|
||||
label="Continue with Email"
|
||||
@click.native="mode = 'email'"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="signInWithGithub">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
<span>GitHub</span>
|
||||
</button>
|
||||
<p v-if="mode === 'sign-in'" class="mx-4 mt-8 text-secondaryLight text-xs">
|
||||
By signing in, you are agreeing to our
|
||||
<SmartAnchor class="link" to="/index" label="Terms of Service" />
|
||||
and
|
||||
<SmartAnchor class="link" to="/index" label="Privacy Policy" />.
|
||||
</p>
|
||||
<div v-if="mode === 'email'" class="flex items-center px-4">
|
||||
<label for="email"> Email </label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
class="flex flex-1 ml-4 rounded px-4 py-2 outline-none"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="you@mail.com"
|
||||
autocomplete="email"
|
||||
required
|
||||
spellcheck="false"
|
||||
autofocus
|
||||
@keyup.enter="signInWithEmail"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('show-email')">
|
||||
<i class="material-icons">mail</i>
|
||||
<span>{{ $t("email") }}</span>
|
||||
</button>
|
||||
<div v-if="mode === 'email'">
|
||||
<div class="flex flex-col">
|
||||
<ButtonPrimary
|
||||
:loading="signingInWithEmail"
|
||||
class="mx-4 mt-4"
|
||||
:disabled="
|
||||
form.email.length !== 0
|
||||
? emailRegex.test(form.email)
|
||||
? false
|
||||
: true
|
||||
: true
|
||||
"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
:label="$t('send_magic_link')"
|
||||
@click.native="signInWithEmail"
|
||||
/>
|
||||
</div>
|
||||
<p class="mx-4 mt-8 text-secondaryLight text-xs">
|
||||
Back to
|
||||
<SmartAnchor
|
||||
class="link"
|
||||
to="#"
|
||||
label="all sign in options"
|
||||
@click.native="mode = 'sign-in'"
|
||||
/>.
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="mode === 'email-sent'">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex justify-center max-w-md p-4 items-center flex-col">
|
||||
<i class="material-icons text-accent" style="font-size: 64px">
|
||||
verified
|
||||
</i>
|
||||
<h3 class="font-bold my-2 text-center text-xl">
|
||||
{{ $t("we_sent_magic_link") }}
|
||||
</h3>
|
||||
<p class="text-center">
|
||||
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
|
||||
</p>
|
||||
<p class="mt-4 text-secondaryLight">{{ $t("check_your_inbox") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -47,9 +94,28 @@ import {
|
||||
signInWithEmailAndPassword,
|
||||
signInUserWithGithub,
|
||||
setProviderInfo,
|
||||
currentUser$,
|
||||
signInWithEmail,
|
||||
} from "~/helpers/fb/auth"
|
||||
import { setLocalConfig } from "~/newstore/localpersistence"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
email: "",
|
||||
},
|
||||
signingInWithEmail: false,
|
||||
emailRegex:
|
||||
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
|
||||
mode: "sign-in",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$subscribeTo(currentUser$, (user) => {
|
||||
if (user) this.hideModal()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showLoginSuccess() {
|
||||
this.$toast.info(this.$t("login_success"), {
|
||||
@@ -199,6 +265,32 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
async signInWithEmail() {
|
||||
this.signingInWithEmail = true
|
||||
const actionCodeSettings = {
|
||||
url: `${process.env.BASE_URL}/enter`,
|
||||
handleCodeInApp: true,
|
||||
}
|
||||
await signInWithEmail(this.form.email, actionCodeSettings)
|
||||
.then(() => {
|
||||
this.mode = "email-sent"
|
||||
setLocalConfig("emailForSignIn", this.form.email)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$toast.error(error.message, {
|
||||
icon: "error",
|
||||
})
|
||||
this.signingInWithEmail = false
|
||||
})
|
||||
.finally(() => {
|
||||
this.signingInWithEmail = false
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
this.mode = "sign-in"
|
||||
this.$toast.clear()
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<button class="icon button" @click="logout">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
<span>{{ $t("logout") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="exit_to_app"
|
||||
:label="$t('logout')"
|
||||
@click.native="logout"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<span
|
||||
:class="{ 'cursor-pointer': !isScalar }"
|
||||
class="font-mono text-sm text-accent"
|
||||
@click="jumpToType"
|
||||
@click.native="jumpToType"
|
||||
>
|
||||
{{ typeString }}
|
||||
</span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
data-testid="'url'"
|
||||
@@ -10,72 +10,64 @@
|
||||
:value="entry.url"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||
}"
|
||||
data-testid="star_button"
|
||||
class="icon button"
|
||||
:class="{ stared: entry.star }"
|
||||
@click="$emit('toggle-star')"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: expand ? $t('hide_more') : $t('show_more'),
|
||||
}"
|
||||
data-testid="query_expand"
|
||||
class="icon button"
|
||||
@click="expand = !expand"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||
</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="expand = !expand"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||
</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
data-testid="options"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
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>
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
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>
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li data-testid="'query'">
|
||||
<input
|
||||
v-for="(line, index) in query"
|
||||
@@ -89,7 +81,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="show-on-large-screen">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="history">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-model="filterText"
|
||||
aria-label="Search"
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="divide-y virtual-list divide-dashed divide-divider"
|
||||
class="divide-y overflow-auto divide-dashed divide-divider"
|
||||
:class="{ filled: filteredHistory.length }"
|
||||
>
|
||||
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
|
||||
@@ -44,49 +44,42 @@
|
||||
</p>
|
||||
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
|
||||
<div v-if="!isClearingHistory" class="row-wrapper">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="clear_history"
|
||||
class="icon button"
|
||||
:disabled="history.length === 0"
|
||||
@click="enableHistoryClearing"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<span>{{ $t("clear_all") }}</span>
|
||||
</button>
|
||||
<button
|
||||
@click.native="enableHistoryClearing"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<span>{{ $t("clear_all") }}</span>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
|
||||
class="icon button"
|
||||
@click="toggleCollapse()"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !showMore ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="toggleCollapse()"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !showMore ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</div>
|
||||
<div v-else class="row-wrapper">
|
||||
<p class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('yes')"
|
||||
data-testid="confirm_clear_history"
|
||||
class="icon button"
|
||||
@click="clearHistory"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="clearHistory"
|
||||
/>
|
||||
<i class="material-icons">done</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('no')"
|
||||
data-testid="reject_clear_history"
|
||||
class="icon button"
|
||||
@click="disableHistoryClearing"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
@click.native="disableHistoryClearing"
|
||||
/>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,28 +168,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
|
||||
[readonly] {
|
||||
@apply cursor-default;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.virtual-list.filled {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<span
|
||||
class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
|
||||
:class="entryStatus.className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
>
|
||||
{{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
|
||||
</span>
|
||||
@@ -17,28 +17,26 @@
|
||||
:value="entry.name"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<span>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||
}"
|
||||
data-testid="star_button"
|
||||
class="icon button"
|
||||
:class="{ stared: entry.star }"
|
||||
@click="$emit('toggle-star')"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</span>
|
||||
<!-- <li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
|
||||
v-tippy="{ theme: 'tooltip' }" title="{
|
||||
content: !entry.usesScripts
|
||||
? 'No pre-request script'
|
||||
@@ -48,43 +46,37 @@
|
||||
<i class="material-icons">
|
||||
{{ !entry.usesScripts ? "http" : "code" }}
|
||||
</i>
|
||||
</button>
|
||||
|
||||
</li> -->
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
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>
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
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>
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
:aria-label="$t('url')"
|
||||
@@ -97,7 +89,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="show-on-large-screen">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -5,14 +5,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="reqParamList">{{ $t("request_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('bodyParams', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('bodyParams', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -68,7 +66,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: param.hasOwnProperty('active')
|
||||
@@ -77,30 +75,27 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="toggleActive(index, param)"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="toggleActive(index, param)"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div v-if="contentType === 'multipart/form-data'">
|
||||
<li>
|
||||
<label for="attachment" class="p-0">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
class="w-full button icon"
|
||||
@click="$refs.attachment[index].click()"
|
||||
>
|
||||
<i class="material-icons">attach_file</i>
|
||||
</button>
|
||||
@click.native="$refs.attachment[index].click()"
|
||||
/>
|
||||
<i class="material-icons">attach_file</i>
|
||||
</label>
|
||||
<input
|
||||
ref="attachment"
|
||||
@@ -114,27 +109,23 @@
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestBodyParam(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestBodyParam(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
name="addrequest"
|
||||
@click="addRequestBodyParam"
|
||||
>
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
@click.native="addRequestBodyParam"
|
||||
/>
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -3,15 +3,13 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("generate_code") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<label for="requestType">{{ $t("choose_language") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<pre v-if="requestType">{{
|
||||
codegens.find((x) => x.id === requestType).name
|
||||
@@ -27,24 +25,21 @@
|
||||
/>
|
||||
</template>
|
||||
<div v-for="gen in codegens" :key="gen.id">
|
||||
<button class="icon button" @click="requestType = gen.id">
|
||||
{{ gen.name }}
|
||||
</button>
|
||||
<ButtonSecondary @click.native="requestType = gen.id" />
|
||||
{{ gen.name }}
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="row-wrapper">
|
||||
<label for="generatedCode">{{ $t("generated_code") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
ref="copyRequestCode"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_code')"
|
||||
class="icon button"
|
||||
@click="copyRequestCode"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyRequestCode"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
|
||||
@@ -5,14 +5,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('headers', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('headers', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -63,7 +61,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: header.hasOwnProperty('active')
|
||||
@@ -72,45 +70,40 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$store.commit('setActiveHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active') ? !header.active : false,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestHeader(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addRequestHeader" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("import_curl") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -20,12 +18,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="handleImport">
|
||||
{{ $t("import") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('import')" @click.native="handleImport" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -5,14 +5,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('parameters', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('parameters', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -82,7 +80,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: param.hasOwnProperty('active')
|
||||
@@ -91,45 +89,40 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$store.commit('setActiveParams', {
|
||||
index,
|
||||
value: param.hasOwnProperty('active') ? !param.active : false,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestParam(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestParam(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addRequestParam">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addRequestParam" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -5,25 +5,22 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="rawBody">{{ $t("raw_request_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="rawInput && contentType.endsWith('json')"
|
||||
ref="prettifyRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('prettify_body')"
|
||||
class="icon button"
|
||||
@click="prettifyRequestBody"
|
||||
>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
</button>
|
||||
@click.native="prettifyRequestBody"
|
||||
/>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
|
||||
<label for="payload" class="p-0">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import_json')"
|
||||
class="icon button"
|
||||
@click="$refs.payload.click()"
|
||||
>
|
||||
<i class="material-icons">post_add</i>
|
||||
</button>
|
||||
@click.native="$refs.payload.click()"
|
||||
/>
|
||||
<i class="material-icons">post_add</i>
|
||||
</label>
|
||||
<input
|
||||
ref="payload"
|
||||
@@ -32,14 +29,12 @@
|
||||
type="file"
|
||||
@change="uploadPayload"
|
||||
/>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('rawParams', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('rawParams', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("manage_token") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("token_list") }}</label>
|
||||
<div v-if="tokens.length != 0">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('tokens', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('tokens', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-for="(token, index) in tokens" :key="index">
|
||||
@@ -41,24 +37,20 @@
|
||||
</li>
|
||||
<div class="row-wrapper">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('use_token')"
|
||||
class="icon button"
|
||||
@click="useOAuthToken(token.value)"
|
||||
>
|
||||
<i class="material-icons">input</i>
|
||||
</button>
|
||||
icon="input"
|
||||
@click.native="useOAuthToken(token.value)"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeOAuthToken(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
icon="delete"
|
||||
@click.native="removeOAuthToken(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -39,6 +39,9 @@
|
||||
large
|
||||
reverse
|
||||
/>
|
||||
<ButtonSecondary label="Dashboard" icon="chevron_right" />
|
||||
<ButtonPrimary label="GitHub" svg="github" large rounded />
|
||||
<AppGitHubStarButton />
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,46 +12,38 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click.prevent="togglePreview"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !previewEnabled ? "visibility" : "visibility_off" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native.prevent="togglePreview"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !previewEnabled ? "visibility" : "visibility_off" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,16 +3,14 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,33 +12,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body && canDownloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,33 +12,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body && canDownloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,33 +12,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
58
components/profile/Picture.vue
Normal file
58
components/profile/Picture.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative flex items-center justify-center"
|
||||
:class="`h-${size} w-${size}`"
|
||||
>
|
||||
<img
|
||||
class="
|
||||
absolute
|
||||
object-cover object-center
|
||||
transition
|
||||
rounded-lg
|
||||
bg-primaryDark
|
||||
"
|
||||
:class="`h-${size} w-${size} bg-${color}`"
|
||||
:src="url"
|
||||
:alt="alt"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute inset-0 rounded-lg shadow-inner"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
|
||||
.toString(36)
|
||||
.substring(7)}.svg?mood[]=happy`,
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: "md",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "gray",
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
default: "Profile picture",
|
||||
// default() {
|
||||
// return this.url
|
||||
// .split('/')
|
||||
// .pop()
|
||||
// .split('.')[0]
|
||||
// .split('#')[0]
|
||||
// .split('?')[0]
|
||||
// },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -16,19 +16,18 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!validUrl"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
!connectionState ? "sync" : "sync_disabled"
|
||||
}}</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
!connectionState ? "sync" : "sync_disabled"
|
||||
}}</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -64,18 +63,17 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="publish" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="publish"
|
||||
class="button"
|
||||
name="get"
|
||||
:disabled="!canpublish"
|
||||
@click="publish"
|
||||
>
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="publish"
|
||||
/>
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -93,24 +91,21 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="subscribe" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="subscribe"
|
||||
name="get"
|
||||
:disabled="!cansubscribe"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleSubscription"
|
||||
>
|
||||
{{
|
||||
subscriptionState
|
||||
? $t("mqtt_unsubscribe")
|
||||
: $t("mqtt_subscribe")
|
||||
}}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
subscriptionState ? "sync_disabled" : "sync"
|
||||
}}</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleSubscription"
|
||||
/>
|
||||
{{
|
||||
subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe")
|
||||
}}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
subscriptionState ? "sync_disabled" : "sync"
|
||||
}}</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -29,20 +29,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
name="connect"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -99,39 +98,35 @@
|
||||
</li>
|
||||
<div v-if="index + 1 !== communication.inputs.length">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeCommunicationInput({ index })"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
<div v-if="index + 1 === communication.inputs.length">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
class="button"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
@click="sendMessage"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addCommunicationInput">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addCommunicationInput" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -17,20 +17,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="start" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="start"
|
||||
:disabled="!serverValid"
|
||||
name="start"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleSSEConnection"
|
||||
/>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -18,20 +18,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
class="button"
|
||||
name="connect"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -66,7 +65,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: protocol.hasOwnProperty('active')
|
||||
@@ -75,44 +74,39 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
protocol.active = protocol.hasOwnProperty('active')
|
||||
? !protocol.active
|
||||
: false
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
protocol.hasOwnProperty("active")
|
||||
? protocol.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
protocol.hasOwnProperty("active")
|
||||
? protocol.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="deleteProtocol({ index })"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="deleteProtocol({ index })"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addProtocol">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addProtocol" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
@@ -141,18 +135,17 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="sendMessage"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -11,30 +11,15 @@
|
||||
<!-- text-pink-400 -->
|
||||
<!-- text-red-400 -->
|
||||
<!-- text-yellow-400 -->
|
||||
<span
|
||||
<ButtonSecondary
|
||||
v-for="(color, index) of accentColors"
|
||||
:key="`color-${index}`"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="capitalized(color)"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
p-3
|
||||
m-2
|
||||
transition
|
||||
duration-150
|
||||
ease-in-out
|
||||
bg-transparent
|
||||
rounded-full
|
||||
cursor-pointer
|
||||
hover:shadow-none
|
||||
"
|
||||
:title="capitalized(color)"
|
||||
:class="[`text-${color}-400`, { 'bg-primary': color === active }]"
|
||||
@click="setActiveColor(color)"
|
||||
>
|
||||
<i class="material-icons">lens</i>
|
||||
</span>
|
||||
icon="lens"
|
||||
@click.native="setActiveColor(color)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="show-if-initialized" :class="{ initialized }">
|
||||
<div v-if="lang == 'json'" class="outline">
|
||||
<div v-for="(p, index) in currPath" :key="index" class="block">
|
||||
<div class="label" @click="onBlockClick(index)">
|
||||
<div class="label" @click.native="onBlockClick(index)">
|
||||
{{ p }}
|
||||
</div>
|
||||
<i v-if="index + 1 !== currPath.length" class="material-icons"
|
||||
@@ -18,7 +18,7 @@
|
||||
v-for="(sib, i) in currSib"
|
||||
:key="i"
|
||||
class="sib"
|
||||
@click="goToSib(sib)"
|
||||
@click.native="goToSib(sib)"
|
||||
>
|
||||
{{ sib.key ? sib.key.value : i }}
|
||||
</div>
|
||||
@@ -277,7 +277,7 @@ export default {
|
||||
|
||||
.label {
|
||||
@apply p-2;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
class="inline-flex items-center justify-center focus:outline-none"
|
||||
:class="[
|
||||
color
|
||||
? `text-${color}-500 transition hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'transition hover:text-secondaryDark focus:text-secondaryDark',
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'hover:text-secondaryDark focus:text-secondaryDark',
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
{ 'flex-row-reverse': reverse },
|
||||
]"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:class="styles"
|
||||
@input="updateSuggestions"
|
||||
@keyup="updateSuggestions"
|
||||
@click="updateSuggestions"
|
||||
@click.native="updateSuggestions"
|
||||
@keydown="handleKeystroke"
|
||||
/>
|
||||
<ul
|
||||
@@ -24,7 +24,7 @@
|
||||
v-for="(suggestion, index) in suggestions"
|
||||
:key="index"
|
||||
:class="{ active: currentSuggestionIndex === index }"
|
||||
@click.prevent="forceSuggestion(suggestion)"
|
||||
@click.native.prevent="forceSuggestion(suggestion)"
|
||||
>
|
||||
{{ suggestion }}
|
||||
</li>
|
||||
@@ -200,7 +200,7 @@ export default {
|
||||
@apply mx-2;
|
||||
@apply left-0;
|
||||
@apply z-50;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply shadow-lg;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<span>
|
||||
<tippy
|
||||
ref="language"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
@@ -9,15 +10,15 @@
|
||||
:animate-fill="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<button v-tippy="{ theme: 'tooltip' }" :title="$t('choose_language')">
|
||||
<span class="mr-2 text-lg">
|
||||
{{
|
||||
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
||||
| formatCountry
|
||||
}}
|
||||
</span>
|
||||
{{ $i18n.locales.find(({ code }) => code == $i18n.locale).name }}
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('choose_language')"
|
||||
:label="$i18n.locales.find(({ code }) => code == $i18n.locale).name"
|
||||
/>
|
||||
{{
|
||||
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
||||
| formatCountry
|
||||
}}
|
||||
</template>
|
||||
<NuxtLink
|
||||
v-for="locale in $i18n.locales.filter(
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<label>
|
||||
<!-- <ColorScheme placeholder="..." tag="span">
|
||||
<ColorScheme placeholder="..." tag="span">
|
||||
{{ $t("background") }}:
|
||||
{{
|
||||
$colorMode.preference.charAt(0).toUpperCase() +
|
||||
@@ -10,37 +10,21 @@
|
||||
<span v-if="$colorMode.preference === 'system'">
|
||||
({{ $colorMode.value }} mode detected)
|
||||
</span>
|
||||
</ColorScheme> -->
|
||||
</ColorScheme>
|
||||
</label>
|
||||
<div>
|
||||
<span
|
||||
<ButtonSecondary
|
||||
v-for="(color, index) of colors"
|
||||
:key="`color-${index}`"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
p-3
|
||||
m-2
|
||||
transition
|
||||
duration-150
|
||||
ease-in-out
|
||||
bg-transparent
|
||||
rounded-full
|
||||
cursor-pointer
|
||||
text-secondaryLight
|
||||
hover:text-secondary
|
||||
"
|
||||
:class="[
|
||||
{ 'bg-primary': color === $colorMode.preference },
|
||||
{ 'text-accent hover:text-accent': color === $colorMode.value },
|
||||
]"
|
||||
@click="$colorMode.preference = color"
|
||||
>
|
||||
<i class="material-icons">{{ getIcon(color) }}</i>
|
||||
</span>
|
||||
:icon="getIcon(color)"
|
||||
@click.native="$colorMode.preference = color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("confirm") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -14,12 +12,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ no }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="resolve">
|
||||
{{ yes }}
|
||||
</button>
|
||||
<ButtonSecondary :label="no" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="yes" @click.native="resolve" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<span class="chip">
|
||||
<span><slot></slot></span>
|
||||
<button class="p-2 icon" @click="$emit('chip-delete')">
|
||||
<i class="material-icons close-button"> close </i>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
class="p-2 close-button icon"
|
||||
icon="close"
|
||||
@click.native="$emit('chip-delete')"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -18,7 +20,7 @@
|
||||
@apply bg-primaryDark;
|
||||
@apply text-secondary;
|
||||
@apply font-mono;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply border border-divider;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
right-0
|
||||
cursor-pointer
|
||||
"
|
||||
@click="$emit('toggle')"
|
||||
@click.native="$emit('toggle')"
|
||||
>
|
||||
<i
|
||||
class="
|
||||
|
||||
19
components/smart/Icon.vue
Normal file
19
components/smart/Icon.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<component :is="src" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
src() {
|
||||
return require(`~/assets/icons/${this.name}.svg?inline`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
93
components/smart/Item.vue
Normal file
93
components/smart/Item.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<SmartLink
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="
|
||||
inline-flex
|
||||
px-4
|
||||
py-2
|
||||
text-sm
|
||||
transition
|
||||
rounded-lg
|
||||
focus:bg-primaryDark focus:text-secondaryDark
|
||||
hover:bg-primaryDark hover:text-secondaryDark
|
||||
focus:outline-none
|
||||
"
|
||||
:class="[
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
{ 'flex-1': label },
|
||||
{ 'flex-row-reverse justify-end': reverse },
|
||||
]"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="material-icons"
|
||||
>
|
||||
{{ icon }}
|
||||
</i>
|
||||
<SmartIcon
|
||||
v-if="svg"
|
||||
:name="svg"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="svg-icons"
|
||||
/>
|
||||
<div class="inline-flex items-start" :class="{ 'flex-col': description }">
|
||||
<div class="font-semibold">
|
||||
{{ label }}
|
||||
</div>
|
||||
<p v-if="description" class="my-2 text-xs text-left text-secondaryLight">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
</SmartLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
blank: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
svg: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
infoIcon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -8,24 +8,20 @@
|
||||
@mouseup="onBackdropMouseUp"
|
||||
@mousedown="onBackdropMouseDown"
|
||||
>
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<div class="row-wrapper">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<div class="row-wrapper">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="flex flex-col">
|
||||
<slot name="body"></slot>
|
||||
<!-- <div class="top fade"></div>
|
||||
<div class="bottom fade"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="flex flex-col">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div v-if="hasFooterSlot" class="modal-footer">
|
||||
<div class="row-wrapper">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasFooterSlot" class="modal-footer">
|
||||
<div class="row-wrapper">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,7 +46,7 @@ export default {
|
||||
return {
|
||||
stackId: Math.random(),
|
||||
shouldCloseOnBackdropClick: true,
|
||||
// when transition doesn't fire on unmount, we should manually remove the modal from DOM
|
||||
// when doesn't fire on unmount, we should manually remove the modal from DOM
|
||||
// (for example, when the parent component of this modal gets destroyed)
|
||||
shouldCleanupDomOnUnmount: true,
|
||||
}
|
||||
@@ -127,33 +123,23 @@ export default {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
@apply flex flex-1;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply bg-primaryLight;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@apply relative;
|
||||
@apply flex flex-1 flex-col;
|
||||
@apply m-2;
|
||||
@apply transition;
|
||||
@apply p-4;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply bg-primary;
|
||||
@apply rounded-lg;
|
||||
@apply shadow-2xl;
|
||||
@apply border-4 border-tooltip;
|
||||
|
||||
max-height: calc(100vh - 128px);
|
||||
max-width: 640px;
|
||||
@apply shadow-xl;
|
||||
@apply max-w-md;
|
||||
@apply max-h-xl;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@@ -161,6 +147,7 @@ export default {
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@apply my-4;
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
@@ -168,15 +155,6 @@ export default {
|
||||
@apply p-2;
|
||||
}
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="modal" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the modal transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.modal-enter,
|
||||
.modal-leave-active {
|
||||
@apply opacity-0;
|
||||
@@ -186,30 +164,7 @@ export default {
|
||||
.modal-leave-active .modal-container {
|
||||
@apply transform;
|
||||
@apply scale-90;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
// .fade {
|
||||
// @apply absolute;
|
||||
// @apply block;
|
||||
// @apply transition;
|
||||
// @apply ease-in-out;
|
||||
// @apply duration-150;
|
||||
|
||||
// left: 16px;
|
||||
// right: 20px;
|
||||
// height: 32px;
|
||||
|
||||
// &.top {
|
||||
// top: 56px;
|
||||
// background: linear-gradient(to bottom, var(--primary-color), transparent);
|
||||
// }
|
||||
|
||||
// &.bottom {
|
||||
// bottom: 16px;
|
||||
// background: linear-gradient(to top, var(--primary-color), transparent);
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
34
components/smart/Spinner.vue
Normal file
34
components/smart/Spinner.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<svg
|
||||
class="animate-spin"
|
||||
:class="`w-${size} h-${size}`"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,27 +1,29 @@
|
||||
<template>
|
||||
<section class="tabs-wrapper">
|
||||
<div class="tabs-wrapper">
|
||||
<div class="tabs" :class="styles">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{ 'is-active': tab.isActive }"
|
||||
:tabindex="0"
|
||||
@keyup.enter="selectTab(tab)"
|
||||
>
|
||||
<a :href="tab.href" @click="selectTab(tab)">
|
||||
<div class="flex w-0">
|
||||
<div class="inline-flex">
|
||||
<button
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="tab"
|
||||
:class="{ 'is-active': tab.isActive }"
|
||||
:tabindex="0"
|
||||
@keyup.enter="selectTab(tab)"
|
||||
@click="selectTab(tab)"
|
||||
>
|
||||
<i v-if="tab.icon" class="material-icons">
|
||||
{{ tab.icon }}
|
||||
</i>
|
||||
<span v-if="tab.label">{{ tab.label }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-details">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -56,7 +58,10 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tabs-wrapper {
|
||||
@apply flex flex-col flex-nowrap flex-1;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-nowrap;
|
||||
@apply flex-1;
|
||||
|
||||
.tabs {
|
||||
@apply flex;
|
||||
@@ -64,53 +69,35 @@ export default {
|
||||
@apply overflow-auto;
|
||||
@apply mt-4;
|
||||
|
||||
ul {
|
||||
.tab {
|
||||
@apply flex;
|
||||
@apply w-0;
|
||||
}
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply p-3;
|
||||
@apply text-secondaryLight;
|
||||
@apply font-semibold;
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply border-b-2;
|
||||
@apply border-transparent;
|
||||
@apply rounded-t-lg;
|
||||
|
||||
li {
|
||||
@apply inline-flex;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
a {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply py-2 px-4;
|
||||
@apply text-secondaryLight text-sm;
|
||||
@apply rounded-lg;
|
||||
@apply cursor-pointer;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
.material-icons {
|
||||
@apply m-4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply text-secondary;
|
||||
}
|
||||
.material-icons {
|
||||
@apply mr-4;
|
||||
}
|
||||
|
||||
&:focus a {
|
||||
@apply text-secondary;
|
||||
&:hover {
|
||||
@apply text-secondaryDark;
|
||||
}
|
||||
|
||||
&.is-active a {
|
||||
@apply bg-divider;
|
||||
@apply text-secondary;
|
||||
&:focus {
|
||||
@apply text-secondaryDark;
|
||||
@apply outline-none;
|
||||
}
|
||||
&.is-active {
|
||||
@apply text-accent;
|
||||
@apply border-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
ul,
|
||||
ol {
|
||||
@apply flex-row flex-nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
84
components/tab/Primary.vue
Normal file
84
components/tab/Primary.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<SmartLink
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
px-4
|
||||
py-2
|
||||
font-semibold
|
||||
truncate
|
||||
transition
|
||||
rounded-lg
|
||||
focus:outline-none
|
||||
"
|
||||
:class="[
|
||||
color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'hover:text-secondaryDark focus:text-accent',
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
{ 'flex-row-reverse': reverse },
|
||||
]"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="material-icons"
|
||||
>
|
||||
{{ icon }}
|
||||
</i>
|
||||
<SmartIcon
|
||||
v-if="svg"
|
||||
:name="svg"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="svg-icons"
|
||||
/>
|
||||
{{ label }}
|
||||
</SmartLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
blank: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
svg: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
91
components/tab/Secondary.vue
Normal file
91
components/tab/Secondary.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<SmartLink
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
flex-1
|
||||
py-2
|
||||
font-semibold
|
||||
transition
|
||||
transform
|
||||
hover:translate-x-2
|
||||
focus:translate-x-2 focus:outline-none
|
||||
"
|
||||
:class="[
|
||||
label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
|
||||
active
|
||||
? color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'text-accent'
|
||||
: 'hover:text-secondaryDark focus:text-secondaryDark',
|
||||
color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: '',
|
||||
{ 'translate-x-2': active },
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
]"
|
||||
:disabled="disabled"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="label ? 'mr-4 opacity-75' : ''"
|
||||
class="material-icons"
|
||||
>
|
||||
{{ icon }}
|
||||
</i>
|
||||
<SmartIcon
|
||||
v-if="svg"
|
||||
:name="svg"
|
||||
:class="label ? 'mr-4 opacity-75' : ''"
|
||||
class="svg-icons"
|
||||
/>
|
||||
{{ label }}
|
||||
</SmartLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
blank: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
svg: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -2,9 +2,8 @@
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_team") }}</h3>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="hideModal" />
|
||||
<i class="material-icons">close</i>
|
||||
</template>
|
||||
<template #body>
|
||||
<ul>
|
||||
@@ -27,12 +26,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewTeam">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_team") }}</h3>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="hideModal" />
|
||||
<i class="material-icons">close</i>
|
||||
</template>
|
||||
<template #body>
|
||||
<ul>
|
||||
@@ -57,7 +56,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<input
|
||||
class="input"
|
||||
@@ -72,40 +71,29 @@
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="updateRole(index, 'OWNER')">
|
||||
OWNER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="updateRole(index, 'OWNER')" />
|
||||
OWNER
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="updateRole(index, 'EDITOR')"
|
||||
>
|
||||
EDITOR
|
||||
</button>
|
||||
<ButtonSecondary @click.native="updateRole(index, 'EDITOR')" />
|
||||
EDITOR
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="updateRole(index, 'VIEWER')"
|
||||
>
|
||||
VIEWER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="updateRole(index, 'VIEWER')" />
|
||||
VIEWER
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="member"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeExistingTeamMember(member.user.uid)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeExistingTeamMember(member.user.uid)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -132,7 +120,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<input
|
||||
class="input"
|
||||
@@ -147,55 +135,45 @@
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="member.value = 'OWNER'">
|
||||
OWNER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="member.value = 'OWNER'" />
|
||||
OWNER
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="member.value = 'EDITOR'">
|
||||
EDITOR
|
||||
</button>
|
||||
<ButtonSecondary @click.native="member.value = 'EDITOR'" />
|
||||
EDITOR
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="member.value = 'VIEWER'">
|
||||
VIEWER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="member.value = 'VIEWER'" />
|
||||
VIEWER
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="member"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeTeamMember(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeTeamMember(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addTeamMember">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addTeamMember" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveTeam">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,57 +1,46 @@
|
||||
<template>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="team.myRole === 'OWNER' ? $t('edit') : ''"
|
||||
class="icon button"
|
||||
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
||||
>
|
||||
<i class="material-icons">group</i>
|
||||
<span>{{ team.name }}</span>
|
||||
</button>
|
||||
@click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
||||
/>
|
||||
<i class="material-icons">group</i>
|
||||
<span>{{ team.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div v-if="team.myRole === 'OWNER'">
|
||||
<button class="icon button" @click="$emit('edit-team')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-team')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div v-if="team.myRole === 'OWNER'">
|
||||
<button class="icon button" @click="deleteTeam">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="deleteTeam" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
|
||||
@click="exitTeam"
|
||||
>
|
||||
<i class="material-icons">remove</i>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
@click.native="exitTeam"
|
||||
/>
|
||||
<i class="material-icons">remove</i>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content:
|
||||
team.myRole === 'OWNER' && team.ownersCount == 1
|
||||
? $t('disable_exit')
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
<span>{{ $t("exit") }}</span>
|
||||
</div>
|
||||
</button>
|
||||
>
|
||||
<span>{{ $t("exit") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -21,10 +21,11 @@
|
||||
/>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="$apollo.queries.myTeams.loading" class="info">
|
||||
@@ -33,7 +34,7 @@
|
||||
<p v-if="myTeams.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
|
||||
</p>
|
||||
<div v-else class="virtual-list">
|
||||
<div v-else class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
|
||||
<TeamsTeam
|
||||
@@ -127,13 +128,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 241px);
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<transition
|
||||
:appear="appear"
|
||||
name="translate-fade"
|
||||
enter-active-class="transition duration-500"
|
||||
enter-active-class="duration-500"
|
||||
enter-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition duration-500"
|
||||
leave-active-class="duration-500"
|
||||
leave-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<transition
|
||||
:appear="appear"
|
||||
name="translate-slide-right"
|
||||
enter-active-class="transition duration-500 transform"
|
||||
enter-active-class="duration-500 transform"
|
||||
enter-class="-translate-x-full"
|
||||
enter-to-class="translate-x-0"
|
||||
leave-active-class="transition duration-500 transform"
|
||||
leave-active-class="duration-500 transform"
|
||||
leave-class="translate-x-0"
|
||||
leave-to-class="-translate-x-full"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user