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

refactor(ui): popovers

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-05 16:52:15 +00:00
committed by GitHub
parent 256d4b3e07
commit ed91486d53
42 changed files with 828 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/scss/styles.scss
View File

@@ -59,6 +59,8 @@ body {
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
.fade-enter-active,
.fade-leave-active,
.page-enter-active, .page-enter-active,
.page-leave-active, .page-leave-active,
.layout-enter-active, .layout-enter-active,
@@ -66,10 +68,11 @@ body {
@apply transition; @apply transition;
} }
.page-enter, .fade-enter,
.page-leave-active, .fade-leave-to .page-enter,
.page-leave-to,
.layout-enter, .layout-enter,
.layout-leave-active { .layout-leave-to {
@apply opacity-0; @apply opacity-0;
} }

4
components/app/GitHubStarButton.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<TranslateFade appear> <transition name="fade" appear>
<GithubButton <GithubButton
title="Star Hoppscotch" title="Star Hoppscotch"
href="https://github.com/hoppscotch/hoppscotch" href="https://github.com/hoppscotch/hoppscotch"
@@ -15,7 +15,7 @@
aria-label="Star Hoppscotch on GitHub" aria-label="Star Hoppscotch on GitHub"
data-size="large" data-size="large"
/> />
</TranslateFade> </transition>
</template> </template>
<script> <script>

26
components/app/Header.vue
View File

@@ -17,13 +17,20 @@
label="Get Started" label="Get Started"
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
<tippy v-else tabindex="-1" trigger="click" theme="popover" arrow> <tippy
v-else
ref="user"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<ProfilePicture <ProfilePicture
v-if="currentUser.photoURL" v-if="currentUser.photoURL"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:url="currentUser.photoURL" :url="currentUser.photoURL"
class="mr-4" :alt="currentUser.displayName"
:title=" :title="
(currentUser.displayName || (currentUser.displayName ||
'<label><i>Name not found</i></label>') + '<label><i>Name not found</i></label>') +
@@ -38,8 +45,19 @@
icon="account_circle" icon="account_circle"
/> />
</template> </template>
<SmartItem to="/settings" icon="settings" :label="$t('settings')" /> <SmartItem
<FirebaseLogout /> to="/profile"
icon="person"
:label="$t('profile')"
@click.native="$refs.user.tippy().hide()"
/>
<SmartItem
to="/settings"
icon="settings"
:label="$t('settings')"
@click.native="$refs.user.tippy().hide()"
/>
<FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
</tippy> </tippy>
</span> </span>
<span tabindex="-1"> <span tabindex="-1">

62
components/collections/ImportExport.vue
View File

@@ -17,48 +17,50 @@
v-if=" v-if="
mode == 'import_export' && collectionsType.type == 'my-collections' mode == 'import_export' && collectionsType.type == 'my-collections'
" "
ref="options"
tabindex="-1" tabindex="-1"
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
> >
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="assignment_returned"
icon="assignment_returned" :label="$t('import_from_gist')"
:label="$t('import_from_gist')" @click.native="
@click.native="readCollectionGist" readCollectionGist
/> $refs.options.tippy().hide()
</div> "
<div />
<SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !currentUser !currentUser
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com' : currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: null, : null
}" "
> :disabled="
<ButtonSecondary !currentUser
:disabled=" ? true
!currentUser : currentUser.provider !== 'github.com'
? true ? true
: currentUser.provider !== 'github.com' : false
? true "
: false icon="assignment_turned_in"
" :label="$t('create_secret_gist')"
icon="assignment_turned_in" @click.native="
:label="$t('create_secret_gist')" createCollectionGist
@click.native="createCollectionGist" $refs.options.tippy().hide()
/> "
</div> />
</tippy> </tippy>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div> </div>

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

@@ -31,39 +31,46 @@
icon="topic" icon="topic"
@click.native="$emit('select-collection')" @click.native="$emit('select-collection')"
/> />
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="create_new_folder"
icon="create_new_folder" :label="$t('new_folder')"
:label="$t('new_folder')" @click.native="
@click.native=" $emit('add-folder', {
$emit('add-folder', { path: `${collectionIndex}`,
path: `${collectionIndex}`, })
}) $refs.options.tippy().hide()
" "
/> />
</div> <SmartItem
<div> icon="create"
<ButtonSecondary :label="$t('edit')"
icon="create" @click.native="
label="$t('edit')" $emit('edit-collection')
@click.native="$emit('edit-collection')" $refs.options.tippy().hide()
/> "
</div> />
<div> <SmartItem
<ButtonSecondary icon="delete"
icon="delete" :label="$t('delete')"
:label="$t('delete')" @click.native="
@click.native="confirmRemove = true" confirmRemove = true
/> $refs.options.tippy().hide()
</div> "
/>
</tippy> </tippy>
</div> </div>
</div> </div>

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

@@ -23,35 +23,38 @@
<i v-else class="material-icons">folder_open</i> <i v-else class="material-icons">folder_open</i>
<span>{{ folder.name }}</span> <span>{{ folder.name }}</span>
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="create_new_folder"
icon="create_new_folder" :label="$t('new_folder')"
:label="$t('new_folder')" @click.native="
@click.native="$emit('add-folder', { folder, path: folderPath })" $emit('add-folder', { folder, path: folderPath })
/> $refs.options.tippy().hide()
</div> "
<div> />
<ButtonSecondary <SmartItem
icon="edit" icon="edit"
:labeel="$t('edit')" :labeel="$t('edit')"
@click.native="$emit('edit-folder', { folder, folderPath })" @click.native="
/> $emit('edit-folder', { folder, folderPath })
</div> $refs.options.tippy().hide()
<div> "
<ButtonSecondary />
icon="delete" <SmartItem
:label="$t('delete')" icon="delete"
@click.native="confirmRemove = true" :label="$t('delete')"
/> @click.native="
</div> confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</div> </div>
<div v-show="showChildren || isFiltered"> <div v-show="showChildren || isFiltered">

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

@@ -3,44 +3,51 @@
<template #header> <template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div> <div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="assignment_returned"
icon="assignment_returned" :label="$t('import_from_gist')"
:label="$t('import_from_gist')" @click.native="
@click.native="readCollectionGist" readCollectionGist
/> $refs.options.tippy().hide()
</div> "
<div />
<SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !currentUser !currentUser
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com' : currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: null, : null
}" "
> :disabled="
<ButtonSecondary !currentUser
:disabled=" ? true
!currentUser : currentUser.provider !== 'github.com'
? true ? true
: currentUser.provider !== 'github.com' : false
? true "
: false icon="assignment_turned_in"
" :label="$t('create_secret_gist')"
icon="assignment_turned_in" @click.native="
:label="$t('create_secret_gist')" createCollectionGist
@click.native="createCollectionGist" $refs.options.tippy().hide()
/> "
</div> />
</tippy> </tippy>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div> </div>

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

@@ -18,34 +18,34 @@
@click.native="!doc ? selectRequest() : {}" @click.native="!doc ? selectRequest() : {}"
/> />
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="edit"
icon="edit" :label="$t('edit')"
:label="$t('edit')" @click.native="
@click.native=" $emit('edit-request', {
$emit('edit-request', { request,
request, requestIndex,
requestIndex, folderPath,
folderPath, })
}) $refs.options.tippy().hide()
" "
/> />
</div> <SmartItem
<div> icon="delete"
<ButtonSecondary :label="$t('delete')"
icon="delete" @click.native="
:label="$t('delete')" confirmRemove = true
@click.native="confirmRemove = true" $refs.options.tippy().hide()
/> "
</div> />
</tippy> </tippy>
</div> </div>
<SmartConfirmModal <SmartConfirmModal

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

@@ -38,40 +38,47 @@
icon="check_box" icon="check_box"
@click.native="$emit('unselect-collection')" @click.native="$emit('unselect-collection')"
/> />
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="create_new_folder"
icon="create_new_folder" :label="$t('new_folder')"
:label="$t('new_folder')" @click.native="
@click.native=" $emit('add-folder', {
$emit('add-folder', { folder: collection,
folder: collection, path: `${collectionIndex}`,
path: `${collectionIndex}`, })
}) $refs.options.tippy().hide()
" "
/> />
</div> <SmartItem
<div> icon="create"
<ButtonSecondary :label="$t('edit')"
icon="create" @click.native="
:label="$t('edit')" $emit('edit-collection')
@click.native="$emit('edit-collection')" $refs.options.tippy().hide()
/> "
</div> />
<div> <SmartItem
<ButtonSecondary icon="delete"
icon="delete" :label="$t('delete')"
:label="$t('delete')" @click.native="
@click.native="confirmRemove = true" confirmRemove = true
/> $refs.options.tippy().hide()
</div> "
/>
</tippy> </tippy>
</div> </div>
</div> </div>

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

@@ -25,42 +25,43 @@
> >
<i v-else class="material-icons">folder_open</i> <i v-else class="material-icons">folder_open</i>
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="create_new_folder"
icon="create_new_folder" :label="$t('new_folder')"
:label="$t('new_folder')" @click.native="
@click.native="$emit('add-folder', { folder, path: folderPath })" $emit('add-folder', { folder, path: folderPath })
/> $refs.options.tippy().hide()
</div> "
<div> />
<ButtonSecondary <SmartItem
icon="edit" icon="edit"
:label="$t('edit')" :label="$t('edit')"
@click.native=" @click.native="
$emit('edit-folder', { $emit('edit-folder', {
folder, folder,
folderIndex, folderIndex,
collectionIndex, collectionIndex,
folderPath, folderPath,
}) })
" $refs.options.tippy().hide()
/> "
</div> />
<div> <SmartItem
<ButtonSecondary icon="delete"
icon="delete" :labl="$t('delete')"
:labl="$t('delete')" @click.native="
@click.native="confirmRemove = true" confirmRemove = true
/> $refs.options.tippy().hide()
</div> "
/>
</tippy> </tippy>
</div> </div>
<div v-show="showChildren || isFiltered"> <div v-show="showChildren || isFiltered">

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

@@ -21,37 +21,37 @@
@click.native="!doc ? selectRequest() : {}" @click.native="!doc ? selectRequest() : {}"
/> />
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="edit"
icon="edit" :label="$t('edit')"
:label="$t('edit')" @click.native="
@click.native=" $emit('edit-request', {
$emit('edit-request', { collectionIndex,
collectionIndex, folderIndex,
folderIndex, folderName,
folderName, request,
request, requestIndex,
requestIndex, folderPath,
folderPath, })
}) $refs.options.tippy().hide()
" "
/> />
</div> <SmartItem
<div> icon="delete"
<ButtonSecondary :label="$t('delete')"
icon="delete" @click.native="
:label="$t('delete')" confirmRemove = true
@click.native="confirmRemove = true" $refs.options.tippy().hide()
/> "
</div> />
</tippy> </tippy>
</div> </div>
<SmartConfirmModal <SmartConfirmModal

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

@@ -30,44 +30,51 @@
icon="check_box" icon="check_box"
@click.native="$emit('unselect-collection')" @click.native="$emit('unselect-collection')"
/> />
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" icon="create_new_folder"
icon="create_new_folder" :label="$t('new_folder')"
:label="$t('new_folder')" @click.native="
@click.native=" $emit('add-folder', {
$emit('add-folder', { folder: collection,
folder: collection, path: `${collectionIndex}`,
path: `${collectionIndex}`, })
}) $refs.options.tippy().hide()
" "
/> />
</div> <SmartItem
<div> v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
<ButtonSecondary icon="create"
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" :label="$t('edit')"
icon="create" @click.native="
:label="$t('edit')" $emit('edit-collection')
@click.native="$emit('edit-collection')" $refs.options.tippy().hide()
/> "
</div> />
<div> <SmartItem
<ButtonSecondary v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" icon="delete"
icon="delete" :label="$t('delete')"
:label="$t('delete')" @click.native="
@click.native="confirmRemove = true" confirmRemove = true
/> $refs.options.tippy().hide()
</div> "
/>
</tippy> </tippy>
</div> </div>
</div> </div>

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

@@ -17,46 +17,47 @@
> >
<i v-else class="material-icons">folder_open</i> <i v-else class="material-icons">folder_open</i>
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" icon="create_new_folder"
icon="create_new_folder" :label="$t('new_folder')"
:label="$t('new_folder')" @click.native="
@click.native="$emit('add-folder', { folder, path: folderPath })" $emit('add-folder', { folder, path: folderPath })
/> $refs.options.tippy().hide()
</div> "
<div> />
<ButtonSecondary <SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="edit" icon="edit"
:label="$t('edit')" :label="$t('edit')"
@click.native=" @click.native="
$emit('edit-folder', { $emit('edit-folder', {
folder, folder,
folderIndex, folderIndex,
collectionIndex, collectionIndex,
folderPath: '', folderPath: '',
}) })
" $refs.options.tippy().hide()
/> "
</div> />
<div> <SmartItem
<ButtonSecondary v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" icon="delete"
icon="delete" :label="$t('delete')"
:label="$t('delete')" @click.native="
@click.native="confirmRemove = true" confirmRemove = true
/> $refs.options.tippy().hide()
</div> "
/>
</tippy> </tippy>
</div> </div>
<div v-show="showChildren || isFiltered"> <div v-show="showChildren || isFiltered">

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

@@ -15,37 +15,37 @@
request.method request.method
}}</span> }}</span>
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="edit"
icon="edit" :label="$t('edit')"
:label="$t('edit')" @click.native="
@click.native=" $emit('edit-request', {
$emit('edit-request', { collectionIndex,
collectionIndex, folderIndex,
folderIndex, folderName,
folderName, request,
request, requestIndex,
requestIndex, })
}) $refs.options.tippy().hide()
" "
/> />
</div> <SmartItem
<div> icon="delete"
<ButtonSecondary :label="$t('delete')"
icon="delete" @click.native="
:label="$t('delete')" confirmRemove = true
@click.native="confirmRemove = true" $refs.options.tippy().hide()
/> "
</div> />
</tippy> </tippy>
</div> </div>
<SmartConfirmModal <SmartConfirmModal

34
components/environments/Environment.vue
View File

@@ -8,28 +8,30 @@
@click.native="$emit('edit-environment')" @click.native="$emit('edit-environment')"
/> />
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="create"
icon="create" :label="$t('edit')"
:label="$t('edit')" @click.native="
@click.native="$emit('edit-environment')" $emit('edit-environment')
/> $refs.options.tippy().hide()
</div> "
<div> />
<ButtonSecondary <SmartItem
icon="delete" icon="delete"
:label="$t('delete')" :label="$t('delete')"
@click.native="confirmRemove = true" @click.native="
/> confirmRemove = true
</div> $refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</div> </div>
<SmartConfirmModal <SmartConfirmModal

69
components/environments/ImportExport.vue
View File

@@ -5,44 +5,51 @@
{{ $t("import_export") }} {{ $t("environments") }} {{ $t("import_export") }} {{ $t("environments") }}
</h3> </h3>
<div> <div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary icon="assignment_returned"
icon="assignment_returned" :label="$t('import_from_gist')"
:label="$t('import_from_gist')" @click.native="
@click.native="readEnvironmentGist" readEnvironmentGist
/> $refs.options.tippy().hide()
</div> "
<div />
<SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !currentUser !currentUser
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com' : currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: null, : null
}" "
> :disabled="
<ButtonSecondary !currentUser
:disabled=" ? true
!currentUser : currentUser.provider !== 'github.com'
? true ? true
: currentUser.provider !== 'github.com' : false
? true "
: false icon="assignment_turned_in"
" :label="$t('create_secret_gist')"
icon="assignment_turned_in" @click.native="
:label="$t('create_secret_gist')" createEnvironmentGist
@click.native="createEnvironmentGist" $refs.options.tippy().hide()
/> "
</div> />
</tippy> </tippy>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div> </div>

20
components/firebase/Logout.vue
View File

@@ -1,9 +1,18 @@
<template> <template>
<div> <div class="flex">
<ButtonSecondary <SmartItem
icon="exit_to_app" icon="exit_to_app"
:label="$t('logout')" :label="$t('logout')"
@click.native="logout" @click.native="
$emit('confirm-logout')
confirmLogout = true
"
/>
<SmartConfirmModal
:show="confirmLogout"
:title="$t('are_you_sure_logout')"
@hide-modal="confirmLogout = false"
@resolve="logout"
/> />
</div> </div>
</template> </template>
@@ -13,6 +22,11 @@ import Vue from "vue"
import { signOutUser } from "~/helpers/fb/auth" import { signOutUser } from "~/helpers/fb/auth"
export default Vue.extend({ export default Vue.extend({
data() {
return {
confirmLogout: false,
}
},
methods: { methods: {
async logout() { async logout() {
try { try {

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

@@ -15,9 +15,7 @@
</li> </li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="!entry.star ? $t('add_star') : $t('remove_star')"
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
data-testid="star_button" data-testid="star_button"
:class="{ stared: entry.star }" :class="{ stared: entry.star }"
:icon="entry.star ? 'star' : 'star_border'" :icon="entry.star ? 'star' : 'star_border'"
@@ -25,40 +23,40 @@
/> />
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="expand ? $t('hide_more') : $t('show_more')"
content: expand ? $t('hide_more') : $t('show_more'),
}"
data-testid="query_expand" data-testid="query_expand"
:icon="expand ? 'unfold_less' : 'unfold_more'" :icon="expand ? 'unfold_less' : 'unfold_more'"
@click.native="expand = !expand" @click.native="expand = !expand"
/> />
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('options')" :title="$t('options')"
data-testid="options" data-testid="options"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary data-testid="restore_history_entry"
data-testid="restore_history_entry" :aria-label="$t('restore')"
:aria-label="$t('restore')" icon="restore"
icon="restore" :label="$t('restore')"
:label="$t('restore')" @click.native="
@click.native="$emit('use-entry')" $emit('use-entry')
/> $refs.options.tippy().hide()
</div> "
<div> />
<ButtonSecondary <SmartItem
data-testid="delete_history_entry" data-testid="delete_history_entry"
:aria-label="$t('delete')" :aria-label="$t('delete')"
icon="delete" icon="delete"
:label="$t('delete')" :label="$t('delete')"
@click.native="$emit('delete-entry')" @click.native="
/> $emit('delete-entry')
</div> $refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</div> </div>
<div class="flex"> <div class="flex">
@@ -137,14 +135,4 @@ export default {
.stared { .stared {
color: #f8e81c !important; color: #f8e81c !important;
} }
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
@apply opacity-0;
}
</style> </style>

2
components/history/index.vue
View File

@@ -50,7 +50,7 @@
/> />
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ content: !showMore ? $t('show_more') : $t('hide_more') }" :title="!showMore ? $t('show_more') : $t('hide_more')"
icon="!showMore ? 'unfold_more' : 'unfold_less'" icon="!showMore ? 'unfold_more' : 'unfold_less'"
@click.native="toggleCollapse()" @click.native="toggleCollapse()"
/> />

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

@@ -23,9 +23,7 @@
<span> <span>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="!entry.star ? $t('add_star') : $t('remove_star')"
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
data-testid="star_button" data-testid="star_button"
:class="{ stared: entry.star }" :class="{ stared: entry.star }"
:icon="entry.star ? 'star' : 'star_border'" :icon="entry.star ? 'star' : 'star_border'"
@@ -46,32 +44,34 @@
</i> </i>
</li> --> </li> -->
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('options')" :title="$t('options')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary data-testid="restore_history_entry"
data-testid="restore_history_entry" :aria-label="$t('edit')"
:aria-label="$t('edit')" icon="restore"
icon="restore" :label="$t('restore')"
:label="$t('restore')" @click.native="
@click.native="$emit('use-entry')" $emit('use-entry')
/> $refs.options.tippy().hide()
</div> "
<div> />
<ButtonSecondary <SmartItem
data-testid="delete_history_entry" data-testid="delete_history_entry"
:aria-label="$t('delete')" :aria-label="$t('delete')"
icon="delete" icon="delete"
:label="$t('delete')" :label="$t('delete')"
@click.native="$emit('delete-entry')" @click.native="
/> $emit('delete-entry')
</div> $refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</div> </div>
<div class="flex"> <div class="flex">
@@ -154,14 +154,4 @@ export default {
.stared { .stared {
color: #f8e81c !important; color: #f8e81c !important;
} }
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
@apply opacity-0;
}
</style> </style>

8
components/http/BodyParameters.vue
View File

@@ -68,13 +68,13 @@
<li> <li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: param.hasOwnProperty('active') param.hasOwnProperty('active')
? param.active ? param.active
? $t('turn_off') ? $t('turn_off')
: $t('turn_on') : $t('turn_on')
: $t('turn_off'), : $t('turn_off')
}" "
:icon=" :icon="
param.hasOwnProperty('active') param.hasOwnProperty('active')
? param.active ? param.active

21
components/http/CodegenModal.vue
View File

@@ -9,7 +9,13 @@
<template #body> <template #body>
<label for="requestType">{{ $t("choose_language") }}</label> <label for="requestType">{{ $t("choose_language") }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<pre v-if="requestType">{{ <pre v-if="requestType">{{
codegens.find((x) => x.id === requestType).name codegens.find((x) => x.id === requestType).name
@@ -24,10 +30,15 @@
autofocus autofocus
/> />
</template> </template>
<div v-for="gen in codegens" :key="gen.id"> <SmartItem
<ButtonSecondary @click.native="requestType = gen.id" /> v-for="gen in codegens"
{{ gen.name }} :key="gen.id"
</div> :label="gen.name"
@click.native="
requestType = gen.id
$refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</span> </span>
<div class="row-wrapper"> <div class="row-wrapper">

8
components/http/Headers.vue
View File

@@ -63,13 +63,13 @@
<li> <li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: header.hasOwnProperty('active') header.hasOwnProperty('active')
? header.active ? header.active
? $t('turn_off') ? $t('turn_off')
: $t('turn_on') : $t('turn_on')
: $t('turn_off'), : $t('turn_off')
}" "
:icon=" :icon="
param.hasOwnProperty('active') param.hasOwnProperty('active')
? param.active ? param.active

8
components/http/Parameters.vue
View File

@@ -82,13 +82,13 @@
<li> <li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: param.hasOwnProperty('active') param.hasOwnProperty('active')
? param.active ? param.active
? $t('turn_off') ? $t('turn_off')
: $t('turn_on') : $t('turn_on')
: $t('turn_off'), : $t('turn_off')
}" "
:icon=" :icon="
param.hasOwnProperty('active') param.hasOwnProperty('active')
? param.active ? param.active

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

@@ -7,20 +7,16 @@
v-if="response.body" v-if="response.body"
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !expandResponse !expandResponse ? $t('expand_response') : $t('collapse_response')
? $t('expand_response') "
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'" :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse" @click.native="ToggleExpandResponse"
/> />
<ButtonSecondary <ButtonSecondary
v-if="response.body" v-if="response.body"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="previewEnabled ? $t('hide_preview') : $t('preview_html')"
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
}"
:icon="!previewEnabled ? 'visibility' : 'visibility_off'" :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
@click.native.prevent="togglePreview" @click.native.prevent="togglePreview"
/> />

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

@@ -7,11 +7,9 @@
v-if="response.body" v-if="response.body"
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !expandResponse !expandResponse ? $t('expand_response') : $t('collapse_response')
? $t('expand_response') "
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'" :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse" @click.native="ToggleExpandResponse"
/> />

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

@@ -7,11 +7,9 @@
v-if="response.body" v-if="response.body"
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !expandResponse !expandResponse ? $t('expand_response') : $t('collapse_response')
? $t('expand_response') "
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'" :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse" @click.native="ToggleExpandResponse"
/> />

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

@@ -7,11 +7,9 @@
v-if="response.body" v-if="response.body"
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !expandResponse !expandResponse ? $t('expand_response') : $t('collapse_response')
? $t('expand_response') "
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'" :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse" @click.native="ToggleExpandResponse"
/> />

31
components/profile/Picture.vue
View File

@@ -1,17 +1,16 @@
<template> <template>
<div <div class="relative flex items-center justify-center h-5 w-5 cursor-pointer">
class="relative flex items-center justify-center"
:class="`h-${size} w-${size}`"
>
<img <img
class=" class="
absolute absolute
object-cover object-center object-cover object-center
transition transition
rounded-lg rounded-full
bg-primaryDark bg-primaryDark
h-5
w-5
bg-primaryLight
" "
:class="`h-${size} w-${size} bg-${color}`"
:src="url" :src="url"
:alt="alt" :alt="alt"
loading="lazy" loading="lazy"
@@ -29,29 +28,9 @@ export default {
.toString(36) .toString(36)
.substring(7)}.svg?mood[]=happy`, .substring(7)}.svg?mood[]=happy`,
}, },
size: {
type: Number,
default: 6,
},
radius: {
type: String,
default: "md",
},
color: {
type: String,
default: "gray",
},
alt: { alt: {
type: String, type: String,
default: "Profile picture", default: "Profile picture",
// default() {
// return this.url
// .split('/')
// .pop()
// .split('.')[0]
// .split('#')[0]
// .split('?')[0]
// },
}, },
}, },
} }

4
components/realtime/Sse.vue
View File

@@ -21,8 +21,8 @@
:disabled="!serverValid" :disabled="!serverValid"
name="start" name="start"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg" class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="!connectionSSEState ? $t('start') : $t('stop')" :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
:label="!connectionSSEState ? 'sync' : 'sync_disabled'" :label="!connectionSSEState ? $t('start') : $t('stop')"
reverse reverse
@click.native="toggleSSEConnection" @click.native="toggleSSEConnection"
/> />

8
components/realtime/Websocket.vue
View File

@@ -63,13 +63,13 @@
<li> <li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: protocol.hasOwnProperty('active') protocol.hasOwnProperty('active')
? protocol.active ? protocol.active
? $t('turn_off') ? $t('turn_off')
: $t('turn_on') : $t('turn_on')
: $t('turn_off'), : $t('turn_off')
}" "
@click.native=" @click.native="
protocol.active = protocol.hasOwnProperty('active') protocol.active = protocol.hasOwnProperty('active')
? !protocol.active ? !protocol.active

3
components/smart/ChangeLanguage.vue
View File

@@ -9,7 +9,7 @@
:animate-fill="false" :animate-fill="false"
> >
<template #trigger> <template #trigger>
<SmartItem <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('choose_language')" :title="$t('choose_language')"
:label="`${ :label="`${
@@ -24,6 +24,7 @@
:key="locale.code" :key="locale.code"
:to="switchLocalePath(locale.code).toString()" :to="switchLocalePath(locale.code).toString()"
:label="`${locale.country} ${locale.name}`" :label="`${locale.country} ${locale.name}`"
@click.native="$refs.language.tippy().hide()"
/> />
</tippy> </tippy>
</span> </span>

75
components/smart/Modal.vue
View File

@@ -2,24 +2,48 @@
<transition name="modal" appear @leave="onTransitionLeaveStart"> <transition name="modal" appear @leave="onTransitionLeaveStart">
<div <div
ref="modal" ref="modal"
class="modal-backdrop" class="
fixed
inset-0
z-50
w-full
h-full
flex
items-center
justify-center
transition
bg-primaryLight
"
@touchstart="onBackdropMouseDown" @touchstart="onBackdropMouseDown"
@touchend="onBackdropMouseUp" @touchend="onBackdropMouseUp"
@mouseup="onBackdropMouseUp" @mouseup="onBackdropMouseUp"
@mousedown="onBackdropMouseDown" @mousedown="onBackdropMouseDown"
> >
<div class="modal-container"> <div
<div class="modal-header"> class="
<div class="row-wrapper"> modal-container
relative
flex flex-1 flex-col
m-2
p-4
transition
bg-primary
rounded-lg
shadow-xl
max-w-md
"
>
<div class="pl-2">
<div class="flex items-center justify-between">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
</div> </div>
<div class="modal-body"> <div class="my-4 overflow-auto max-h-xl">
<div class="flex flex-col"> <div class="flex flex-col">
<slot name="body"></slot> <slot name="body"></slot>
</div> </div>
</div> </div>
<div v-if="hasFooterSlot" class="modal-footer"> <div v-if="hasFooterSlot" class="p-2">
<div class="row-wrapper"> <div class="row-wrapper">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
@@ -114,45 +138,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.modal-backdrop {
@apply fixed;
@apply inset-0;
@apply z-50;
@apply w-full;
@apply h-full;
@apply flex;
@apply items-center;
@apply justify-center;
@apply transition;
@apply bg-primaryLight;
}
.modal-container {
@apply relative;
@apply flex flex-1 flex-col;
@apply m-2;
@apply p-4;
@apply transition;
@apply bg-primary;
@apply rounded-lg;
@apply shadow-xl;
@apply max-w-md;
}
.modal-header {
@apply pl-2;
}
.modal-body {
@apply my-4;
@apply overflow-auto;
@apply max-h-xl;
}
.modal-footer {
@apply p-2;
}
.modal-enter, .modal-enter,
.modal-leave-active { .modal-leave-active {
@apply opacity-0; @apply opacity-0;

82
components/teams/Edit.vue
View File

@@ -55,7 +55,13 @@
</li> </li>
<li> <li>
<span class="select-wrapper"> <span class="select-wrapper">
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<input <input
class="input" class="input"
@@ -69,18 +75,27 @@
readonly readonly
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary @click.native="updateRole(index, 'OWNER')" /> label="OWNER"
OWNER @click.native="
</div> updateRole(index, 'OWNER')
<div> $refs.options.tippy().hide()
<ButtonSecondary @click.native="updateRole(index, 'EDITOR')" /> "
EDITOR />
</div> <SmartItem
<div> label="EDITOR"
<ButtonSecondary @click.native="updateRole(index, 'VIEWER')" /> @click.native="
VIEWER updateRole(index, 'EDITOR')
</div> $refs.options.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
updateRole(index, 'VIEWER')
$refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</span> </span>
</li> </li>
@@ -119,7 +134,13 @@
</li> </li>
<li> <li>
<span class="select-wrapper"> <span class="select-wrapper">
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="memberOptions"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<input <input
class="input" class="input"
@@ -133,18 +154,27 @@
readonly readonly
/> />
</template> </template>
<div> <SmartItem
<ButtonSecondary @click.native="member.value = 'OWNER'" /> label="OWNER"
OWNER @click.native="
</div> member.value = 'OWNER'
<div> $refs.options.tippy().hide()
<ButtonSecondary @click.native="member.value = 'EDITOR'" /> "
EDITOR />
</div> <SmartItem
<div> label="EDITOR"
<ButtonSecondary @click.native="member.value = 'VIEWER'" /> @click.native="
VIEWER member.value = 'EDITOR'
</div> $refs.options.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
member.value = 'VIEWER'
$refs.options.tippy().hide()
"
/>
</tippy> </tippy>
</span> </span>
</li> </li>

69
components/teams/Team.vue
View File

@@ -9,46 +9,47 @@
@click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''" @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
/> />
</div> </div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<ButtonSecondary <TabPrimary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
/> />
</template> </template>
<div v-if="team.myRole === 'OWNER'"> <SmartItem
<ButtonSecondary v-if="team.myRole === 'OWNER'"
icon="create" icon="create"
:label="$t('edit')" :label="$t('edit')"
@click.native="$emit('edit-team')" @click.native="
/> $emit('edit-team')
</div> $refs.options.tippy().hide()
<div v-if="team.myRole === 'OWNER'"> "
<ButtonSecondary />
icon="delete" <SmartItem
:label="$t('delete')" v-if="team.myRole === 'OWNER'"
@click.native="deleteTeam" icon="delete"
/> :label="$t('delete')"
</div> @click.native="
<div> deleteTeam
<ButtonSecondary $refs.options.tippy().hide()
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1" "
icon="remove" />
@click.native="exitTeam" <SmartItem
/> v-tippy="{ theme: 'tooltip' }"
<div :title="
v-tippy="{ theme: 'tooltip' }" team.myRole === 'OWNER' && team.ownersCount == 1
title="{ ? $t('disable_exit')
content: : ''
team.myRole === 'OWNER' && team.ownersCount == 1 "
? $t('disable_exit') :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
: '', icon="remove"
}" :label="$t('exit')"
> @click.native="
<span>{{ $t("exit") }}</span> exitTeam
</div> $refs.options.tippy().hide()
</div> "
/>
</tippy> </tippy>
</div> </div>
</template> </template>

25
components/translate/Fade.vue
View File

@@ -1,25 +0,0 @@
<template>
<transition
:appear="appear"
name="translate-fade"
enter-active-class="transition"
enter-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition"
leave-class="opacity-100"
leave-to-class="opacity-0"
>
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>

41
components/translate/SlideLeft.vue
View File

@@ -1,41 +0,0 @@
<template>
<transition :appear="appear" name="translate-slide-left">
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>
<style scoped lang="scss">
.translate-slide-left {
&-enter,
&-leave-to {
width: 0%;
opacity: 0;
margin-left: 0;
}
&-enter-to,
&-leave {
width: var(--width, 33%);
margin-left: var(--ml, 0);
opacity: 1;
}
&-enter-active,
&-leave-active {
overflow-x: hidden;
white-space: nowrap;
transition: width 0.5s ease, opacity 0.3s ease, margin-left 0.5s ease;
}
}
</style>

25
components/translate/SlideRight.vue
View File

@@ -1,25 +0,0 @@
<template>
<transition
:appear="appear"
name="translate-slide-right"
enter-active-class="transition transform"
enter-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition transform"
leave-class="translate-x-0"
leave-to-class="-translate-x-full"
>
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>

4
lang/en-US.json
View File

@@ -342,5 +342,7 @@
"protocols": "Protocols", "protocols": "Protocols",
"protocol_count": "protocol {count}", "protocol_count": "protocol {count}",
"share": "Share", "share": "Share",
"interceptor": "Interceptor" "interceptor": "Interceptor",
"profile": "Profile",
"are_you_sure_logout": "Are you sure you want to logout?"
} }

87
pages/api.vue
View File

@@ -10,7 +10,13 @@
<li class="shrink"> <li class="shrink">
<label for="method">{{ $t("method") }}</label> <label for="method">{{ $t("method") }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<tippy tabindex="-1" trigger="click" theme="popover" arrow> <tippy
ref="options"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger> <template #trigger>
<input <input
id="method" id="method"
@@ -20,19 +26,17 @@
autofocus autofocus
/> />
</template> </template>
<div <SmartItem
v-for="(methodMenuItem, index) in methodMenuItems" v-for="(methodMenuItem, index) in methodMenuItems"
:key="`method-${index}`" :key="`method-${index}`"
> @click.native="
<ButtonSecondary customMethod =
@click.native=" methodMenuItem == 'CUSTOM' ? true : false
customMethod = method = methodMenuItem
methodMenuItem == 'CUSTOM' ? true : false $refs.options.tippy().hide()
method = methodMenuItem "
" :label="methodMenuItem"
/> />
{{ methodMenuItem }}
</div>
</tippy> </tippy>
</span> </span>
</li> </li>
@@ -101,6 +105,7 @@
}}</label> }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<tippy <tippy
ref="contentTypeOptions"
tabindex="-1" tabindex="-1"
trigger="click" trigger="click"
theme="popover" theme="popover"
@@ -114,17 +119,17 @@
readonly readonly
/> />
</template> </template>
<div <SmartItem
v-for="( v-for="(
contentTypeMenuItem, index contentTypeMenuItem, index
) in validContentTypes" ) in validContentTypes"
:key="`content-type-${index}`" :key="`content-type-${index}`"
> @click.native="
<ButtonSecondary contentType = contentTypeMenuItem
@click.native="contentType = contentTypeMenuItem" $refs.contentTypeOptions.tippy().hide()
/> "
{{ contentTypeMenuItem }} :label="contentTypeMenuItem"
</div> />
</tippy> </tippy>
</span> </span>
<!-- <SmartAutoComplete <!-- <SmartAutoComplete
@@ -600,33 +605,27 @@
</Splitpanes> </Splitpanes>
</Pane> </Pane>
<Pane max-size="40" class="bg-pink-100"> <Pane max-size="40" class="bg-pink-100">
<TranslateSlideLeft> <aside class="lg:max-w-md">
<aside class="lg:max-w-md"> <section>
<section> <SmartTabs>
<SmartTabs> <SmartTab :id="'history'" :label="$t('history')" :selected="true">
<SmartTab <History
:id="'history'" :page="'rest'"
:label="$t('history')" @useHistory="handleUseHistory"
:selected="true" ref="historyComponent"
> />
<History </SmartTab>
:page="'rest'"
@useHistory="handleUseHistory"
ref="historyComponent"
/>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')"> <SmartTab :id="'collections'" :label="$t('collections')">
<Collections /> <Collections />
</SmartTab> </SmartTab>
<SmartTab :id="'env'" :label="$t('environments')"> <SmartTab :id="'env'" :label="$t('environments')">
<Environments /> <Environments />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</section> </section>
</aside> </aside>
</TranslateSlideLeft>
</Pane> </Pane>
</Splitpanes> </Splitpanes>

8
pages/doc.vue
View File

@@ -64,13 +64,13 @@
<div v-else class="row-wrapper"> <div v-else class="row-wrapper">
<div <div
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !currentUser !currentUser
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com' : currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: null, : null
}" "
> >
<ButtonSecondary <ButtonSecondary
:disabled=" :disabled="

228
pages/graphql.vue
View File

@@ -92,13 +92,13 @@
<li> <li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: header.hasOwnProperty('active') header.hasOwnProperty('active')
? header.active ? header.active
? $t('turn_off') ? $t('turn_off')
: $t('turn_on') : $t('turn_on')
: $t('turn_off'), : $t('turn_off')
}" "
@click.native=" @click.native="
$store.commit('setActiveGQLHeader', { $store.commit('setActiveGQLHeader', {
index, index,
@@ -149,11 +149,11 @@
<ButtonSecondary <ButtonSecondary
ref="ToggleExpandResponse" ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="{ :title="
content: !expandResponse !expandResponse
? $t('expand_response') ? $t('expand_response')
: $t('collapse_response'), : $t('collapse_response')
}" "
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'" :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse" @click.native="ToggleExpandResponse"
/> />
@@ -323,122 +323,120 @@
</AppSection> </AppSection>
</div> </div>
<TranslateSlideLeft> <aside class="lg:max-w-md">
<aside class="lg:max-w-md"> <SmartTabs>
<SmartTabs> <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true"> <AppSection label="docs">
<AppSection label="docs"> <section class="flex-col">
<section class="flex-col"> <input
<input v-model="graphqlFieldsFilterText"
v-model="graphqlFieldsFilterText" type="text"
type="text" :placeholder="$t('search')"
:placeholder="$t('search')" class="input rounded-t-lg"
class="input rounded-t-lg" />
/> <SmartTabs ref="gqlTabs" styles="m-4">
<SmartTabs ref="gqlTabs" styles="m-4"> <div class="gqlTabs">
<div class="gqlTabs"> <SmartTab
<SmartTab v-if="queryFields.length > 0"
v-if="queryFields.length > 0" :id="'queries'"
:id="'queries'" :label="$t('queries')"
:label="$t('queries')" :selected="true"
:selected="true" >
<div
v-for="field in filteredQueryFields"
:key="field.name"
> >
<div <GraphqlField
v-for="field in filteredQueryFields" :gql-field="field"
:key="field.name" :jump-type-callback="handleJumpToType"
> />
<GraphqlField </div>
:gql-field="field" </SmartTab>
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab <SmartTab
v-if="mutationFields.length > 0" v-if="mutationFields.length > 0"
:id="'mutations'" :id="'mutations'"
:label="$t('mutations')" :label="$t('mutations')"
>
<div
v-for="field in filteredMutationFields"
:key="field.name"
> >
<div <GraphqlField
v-for="field in filteredMutationFields" :gql-field="field"
:key="field.name" :jump-type-callback="handleJumpToType"
> />
<GraphqlField </div>
:gql-field="field" </SmartTab>
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab <SmartTab
v-if="subscriptionFields.length > 0" v-if="subscriptionFields.length > 0"
:id="'subscriptions'" :id="'subscriptions'"
:label="$t('subscriptions')" :label="$t('subscriptions')"
>
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
> >
<div <GraphqlField
v-for="field in filteredSubscriptionFields" :gql-field="field"
:key="field.name" :jump-type-callback="handleJumpToType"
> />
<GraphqlField </div>
:gql-field="field" </SmartTab>
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab <SmartTab
v-if="graphqlTypes.length > 0" v-if="graphqlTypes.length > 0"
:id="'types'" :id="'types'"
ref="typesTab" ref="typesTab"
:label="$t('types')" :label="$t('types')"
>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
> >
<div <GraphqlType
v-for="type in filteredGraphqlTypes" :gql-type="type"
:key="type.name" :gql-types="graphqlTypes"
> :is-highlighted="
<GraphqlType isGqlTypeHighlighted({ gqlType: type })
:gql-type="type" "
:gql-types="graphqlTypes" :highlighted-fields="
:is-highlighted=" getGqlTypeHighlightedFields({ gqlType: type })
isGqlTypeHighlighted({ gqlType: type }) "
" :jump-type-callback="handleJumpToType"
:highlighted-fields=" />
getGqlTypeHighlightedFields({ gqlType: type }) </div>
" </SmartTab>
:jump-type-callback="handleJumpToType" </div>
/> </SmartTabs>
</div> </section>
</SmartTab> <p
</div> v-if="
</SmartTabs> queryFields.length === 0 &&
</section> mutationFields.length === 0 &&
<p subscriptionFields.length === 0 &&
v-if=" graphqlTypes.length === 0
queryFields.length === 0 && "
mutationFields.length === 0 && >
subscriptionFields.length === 0 && {{ $t("send_request_first") }}
graphqlTypes.length === 0 </p>
" </AppSection>
> </SmartTab>
{{ $t("send_request_first") }}
</p>
</AppSection>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')"> <SmartTab :id="'history'" :label="$t('history')">
<History <History
ref="graphqlHistoryComponent" ref="graphqlHistoryComponent"
:page="'graphql'" :page="'graphql'"
@useHistory="handleUseHistory" @useHistory="handleUseHistory"
/> />
</SmartTab> </SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')"> <SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql /> <CollectionsGraphql />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</aside> </aside>
</TranslateSlideLeft>
</div> </div>
<CollectionsSaveRequest <CollectionsSaveRequest
mode="graphql" mode="graphql"