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

refactor: remove shortcut hints in mobile devices

Browse Source
This commit is contained in:
liyasthomas
2021-12-20 14:40:38 +05:30
parent fac1288ef2
commit f94ee7c73f
23 changed files with 410 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -148,7 +148,8 @@ a {
font-size: 88%; font-size: 88%;
kbd { kbd {
@apply inline-flex; @apply hidden;
@apply sm:inline-flex;
@apply font-sans; @apply font-sans;
@apply bg-gray-500; @apply bg-gray-500;
@apply bg-opacity-45; @apply bg-opacity-45;

32
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -31,7 +31,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -44,9 +44,10 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.d="$refs.documentation.$el.click()" @keyup.d="documentation.$el.click()"
@keyup.s="$refs.shortcuts.$el.click()" @keyup.s="shortcuts.$el.click()"
@keyup.c="$refs.chat.$el.click()" @keyup.c="chat.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="documentation" ref="documentation"
@@ -55,7 +56,7 @@
to="https://docs.hoppscotch.io" to="https://docs.hoppscotch.io"
blank blank
:shortcut="['D']" :shortcut="['D']"
@click.native="$refs.options.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<SmartItem <SmartItem
ref="shortcuts" ref="shortcuts"
@@ -65,7 +66,7 @@
@click.native=" @click.native="
() => { () => {
showShortcuts = true showShortcuts = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -77,7 +78,7 @@
@click.native=" @click.native="
() => { () => {
chatWithUs() chatWithUs()
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -87,14 +88,14 @@
:label="`${t('app.github')}`" :label="`${t('app.github')}`"
to="https://github.com/hoppscotch/hoppscotch" to="https://github.com/hoppscotch/hoppscotch"
blank blank
@click.native="$refs.options.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<SmartItem <SmartItem
svg="twitter" svg="twitter"
:label="`${t('app.twitter')}`" :label="`${t('app.twitter')}`"
to="https://hoppscotch.io/twitter" to="https://hoppscotch.io/twitter"
blank blank
@click.native="$refs.options.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<SmartItem <SmartItem
svg="user-plus" svg="user-plus"
@@ -102,7 +103,7 @@
@click.native=" @click.native="
() => { () => {
showShare = true showShare = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -111,14 +112,14 @@
:label="`${t('app.terms_and_privacy')}`" :label="`${t('app.terms_and_privacy')}`"
to="https://docs.hoppscotch.io/privacy" to="https://docs.hoppscotch.io/privacy"
blank blank
@click.native="$refs.options.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<SmartItem <SmartItem
svg="gift" svg="gift"
:label="`${t('app.whats_new')}`" :label="`${t('app.whats_new')}`"
to="https://docs.hoppscotch.io/changelog" to="https://docs.hoppscotch.io/changelog"
blank blank
@click.native="$refs.options.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<!-- <SmartItem :label="t('app.status')" /> --> <!-- <SmartItem :label="t('app.status')" /> -->
<div class="flex opacity-50 py-2 px-4"> <div class="flex opacity-50 py-2 px-4">
@@ -222,4 +223,11 @@ const nativeShare = () => {
const chatWithUs = () => { const chatWithUs = () => {
showChat() showChat()
} }
// Template refs
const tippyActions = ref<any | null>(null)
const documentation = ref<any | null>(null)
const shortcuts = ref<any | null>(null)
const chat = ref<any | null>(null)
const options = ref<any | null>(null)
</script> </script>

24
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -58,12 +58,12 @@
/> />
<span class="px-2"> <span class="px-2">
<tippy <tippy
ref="user" ref="options"
interactive interactive
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ProfilePicture <ProfilePicture
@@ -89,9 +89,10 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.enter="$refs.profile.$el.click()" @keyup.enter="profile.$el.click()"
@keyup.s="$refs.settings.$el.click()" @keyup.s="settings.$el.click()"
@keyup.l="$refs.logout.$el.click()" @keyup.l="logout.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="profile" ref="profile"
@@ -99,7 +100,7 @@
svg="user" svg="user"
:label="t('navigation.profile')" :label="t('navigation.profile')"
:shortcut="['↩']" :shortcut="['↩']"
@click.native="$refs.user.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<SmartItem <SmartItem
ref="settings" ref="settings"
@@ -107,12 +108,12 @@
svg="settings" svg="settings"
:label="t('navigation.settings')" :label="t('navigation.settings')"
:shortcut="['S']" :shortcut="['S']"
@click.native="$refs.user.tippy().hide()" @click.native="options.tippy().hide()"
/> />
<FirebaseLogout <FirebaseLogout
ref="logout" ref="logout"
:shortcut="['L']" :shortcut="['L']"
@confirm-logout="$refs.user.tippy().hide()" @confirm-logout="options.tippy().hide()"
/> />
</div> </div>
</tippy> </tippy>
@@ -203,4 +204,11 @@ onMounted(() => {
}) })
} }
}) })
// Template refs
const tippyActions = ref<any | null>(null)
const profile = ref<any | null>(null)
const settings = ref<any | null>(null)
const logout = ref<any | null>(null)
const options = ref<any | null>(null)
</script> </script>

60
packages/hoppscotch-app/components/app/PowerSearch.vue
View File

@@ -6,35 +6,37 @@
@close="$emit('hide-modal')" @close="$emit('hide-modal')"
> >
<template #body> <template #body>
<input <div class="flex flex-col border-b border-dividerLight">
id="command" <input
v-model="search" id="command"
v-focus v-model="search"
type="text" v-focus
autocomplete="off" type="text"
name="command" autocomplete="off"
:placeholder="`${t('app.type_a_command_search')}`" name="command"
class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6" :placeholder="`${t('app.type_a_command_search')}`"
/> class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
<div />
class="border-b border-dividerLight flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar" <div
> class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar <sm:hidden"
<div class="flex items-center"> >
<kbd class="shortcut-key">↑</kbd> <div class="flex items-center">
<kbd class="shortcut-key">↓</kbd> <kbd class="shortcut-key">↑</kbd>
<span class="ml-2 truncate"> <kbd class="shortcut-key">↓</kbd>
{{ t("action.to_navigate") }} <span class="ml-2 truncate">
</span> {{ t("action.to_navigate") }}
<kbd class="shortcut-key">↩</kbd> </span>
<span class="ml-2 truncate"> <kbd class="shortcut-key">↩</kbd>
{{ t("action.to_select") }} <span class="ml-2 truncate">
</span> {{ t("action.to_select") }}
</div> </span>
<div class="flex items-center"> </div>
<kbd class="shortcut-key">ESC</kbd> <div class="flex items-center">
<span class="ml-2 truncate"> <kbd class="shortcut-key">ESC</kbd>
{{ t("action.to_close") }} <span class="ml-2 truncate">
</span> {{ t("action.to_close") }}
</span>
</div>
</div> </div>
</div> </div>
<AppFuse <AppFuse

2
packages/hoppscotch-app/components/button/Primary.vue
View File

@@ -52,7 +52,7 @@
]" ]"
/> />
{{ label }} {{ label }}
<div v-if="shortcut.length" class="ml-2"> <div v-if="shortcut.length" class="ml-2 <sm:hidden">
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"

2
packages/hoppscotch-app/components/button/Secondary.vue
View File

@@ -51,7 +51,7 @@
]" ]"
/> />
{{ label }} {{ label }}
<div v-if="shortcut.length" class="ml-2"> <div v-if="shortcut.length" class="ml-2 <sm:hidden">
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"

32
packages/hoppscotch-app/components/collections/graphql/Collection.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -47,7 +47,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -60,12 +60,13 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.n="$refs.folder.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="folder" ref="folderAction"
svg="folder-plus" svg="folder-plus"
:label="`${$t('folder.new')}`" :label="`${$t('folder.new')}`"
:shortcut="['N']" :shortcut="['N']"
@@ -74,7 +75,7 @@
$emit('add-folder', { $emit('add-folder', {
path: `${collectionIndex}`, path: `${collectionIndex}`,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -86,19 +87,19 @@
@click.native=" @click.native="
() => { () => {
$emit('edit-collection') $emit('edit-collection')
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="`${$t('action.delete')}`" :label="`${$t('action.delete')}`"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -174,7 +175,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { import {
removeGraphqlCollection, removeGraphqlCollection,
moveGraphqlRequest, moveGraphqlRequest,
@@ -190,6 +191,15 @@ export default defineComponent({
doc: Boolean, doc: Boolean,
isFiltered: Boolean, isFiltered: Boolean,
}, },
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
folderAction: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() { data() {
return { return {
showChildren: false, showChildren: false,

32
packages/hoppscotch-app/components/collections/graphql/Folder.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -43,7 +43,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -56,19 +56,20 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.n="$refs.folder.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="folder" ref="folderAction"
svg="folder-plus" svg="folder-plus"
:label="`${$t('folder.new')}`" :label="`${$t('folder.new')}`"
:shortcut="['N']" :shortcut="['N']"
@click.native=" @click.native="
() => { () => {
$emit('add-folder', { folder, path: folderPath }) $emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -80,19 +81,19 @@
@click.native=" @click.native="
() => { () => {
$emit('edit-folder', { folder, folderPath }) $emit('edit-folder', { folder, folderPath })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="`${$t('action.delete')}`" :label="`${$t('action.delete')}`"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -171,7 +172,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections" import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
export default defineComponent({ export default defineComponent({
@@ -187,6 +188,15 @@ export default defineComponent({
doc: Boolean, doc: Boolean,
isFiltered: Boolean, isFiltered: Boolean,
}, },
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
folderAction: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() { data() {
return { return {
showChildren: false, showChildren: false,

30
packages/hoppscotch-app/components/collections/graphql/Request.vue
View File

@@ -7,7 +7,7 @@
@dragover.stop @dragover.stop
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-2 w-16 items-center justify-center truncate" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -43,7 +43,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -56,9 +56,10 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="$refs.duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="edit" ref="edit"
@@ -72,7 +73,7 @@
requestIndex, requestIndex,
folderPath, folderPath,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -88,19 +89,19 @@
requestIndex, requestIndex,
folderPath, folderPath,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="`${$t('action.delete')}`" :label="`${$t('action.delete')}`"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -119,7 +120,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "@nuxtjs/composition-api" import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data" import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
import { removeGraphqlRequest } from "~/newstore/collections" import { removeGraphqlRequest } from "~/newstore/collections"
import { setGQLSession } from "~/newstore/GQLSession" import { setGQLSession } from "~/newstore/GQLSession"
@@ -135,6 +136,15 @@ export default defineComponent({
requestIndex: { type: Number, default: null }, requestIndex: { type: Number, default: null },
doc: Boolean, doc: Boolean,
}, },
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
edit: ref<any | null>(null),
duplicate: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() { data() {
return { return {
dragging: false, dragging: false,

38
packages/hoppscotch-app/components/collections/my/Collection.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -65,7 +65,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -78,12 +78,13 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.n="$refs.folder.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="folder" ref="folderAction"
svg="folder-plus" svg="folder-plus"
:label="$t('folder.new')" :label="$t('folder.new')"
:shortcut="['N']" :shortcut="['N']"
@@ -93,7 +94,7 @@
folder: collection, folder: collection,
path: `${collectionIndex}`, path: `${collectionIndex}`,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -105,19 +106,19 @@
@click.native=" @click.native="
() => { () => {
$emit('edit-collection') $emit('edit-collection')
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="$t('action.delete')" :label="$t('action.delete')"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -182,7 +183,7 @@
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.collection')" :alt="`${$t('empty.collection')}`"
/> />
<span class="text-center"> <span class="text-center">
{{ $t("empty.collection") }} {{ $t("empty.collection") }}
@@ -199,8 +200,8 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { moveRESTRequest } from "~/newstore/collections" import { moveRESTRequest } from "~/newstore/collections"
export default defineComponent({ export default defineComponent({
@@ -214,6 +215,15 @@ export default defineComponent({
collectionsType: { type: Object, default: () => {} }, collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} }, picked: { type: Object, default: () => {} },
}, },
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
folderAction: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() { data() {
return { return {
showChildren: false, showChildren: false,
@@ -226,7 +236,7 @@ export default defineComponent({
} }
}, },
computed: { computed: {
isSelected() { isSelected(): boolean {
return ( return (
this.picked && this.picked &&
this.picked.pickedType === "my-collection" && this.picked.pickedType === "my-collection" &&

58
packages/hoppscotch-app/components/collections/my/Folder.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -32,7 +32,7 @@
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="t('folder.new')"
class="hidden group-hover:inline-flex" class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })" @click.native="$emit('add-folder', { folder, path: folderPath })"
/> />
@@ -43,12 +43,12 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')" :title="t('action.more')"
svg="more-vertical" svg="more-vertical"
/> />
</template> </template>
@@ -56,26 +56,27 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.n="$refs.folder.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="folder" ref="folderAction"
svg="folder-plus" svg="folder-plus"
:label="$t('folder.new')" :label="t('folder.new')"
:shortcut="['N']" :shortcut="['N']"
@click.native=" @click.native="
() => { () => {
$emit('add-folder', { folder, path: folderPath }) $emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="edit" ref="edit"
svg="edit" svg="edit"
:label="$t('action.edit')" :label="t('action.edit')"
:shortcut="['E']" :shortcut="['E']"
@click.native=" @click.native="
() => { () => {
@@ -85,19 +86,19 @@
collectionIndex, collectionIndex,
folderPath, folderPath,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="$t('action.delete')" :label="t('action.delete')"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -162,25 +163,26 @@
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.folder')" :alt="`${t('empty.folder')}`"
/> />
<span class="text-center"> <span class="text-center">
{{ $t("empty.folder") }} {{ t("empty.folder") }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="$t('confirm.remove_folder')" :title="t('confirm.remove_folder')"
@hide-modal="confirmRemove = false" @hide-modal="confirmRemove = false"
@resolve="removeFolder" @resolve="removeFolder"
/> />
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { useI18n } from "~/helpers/utils/composables"
import { import {
removeRESTFolder, removeRESTFolder,
removeRESTRequest, removeRESTRequest,
@@ -200,6 +202,18 @@ export default defineComponent({
collectionsType: { type: Object, default: () => {} }, collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} }, picked: { type: Object, default: () => {} },
}, },
setup() {
const t = useI18n()
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
folderAction: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
t,
}
},
data() { data() {
return { return {
showChildren: false, showChildren: false,
@@ -210,7 +224,7 @@ export default defineComponent({
} }
}, },
computed: { computed: {
isSelected() { isSelected(): boolean {
return ( return (
this.picked && this.picked &&
this.picked.pickedType === "my-folder" && this.picked.pickedType === "my-folder" &&
@@ -248,7 +262,7 @@ export default defineComponent({
this.$emit("select", { picked: null }) this.$emit("select", { picked: null })
} }
removeRESTFolder(this.folderPath) removeRESTFolder(this.folderPath)
this.$toast.success(this.$t("state.deleted")) this.$toast.success(`${this.$t("state.deleted")}`)
}, },
dropEvent({ dataTransfer }) { dropEvent({ dataTransfer }) {
this.dragging = !this.dragging this.dragging = !this.dragging

32
packages/hoppscotch-app/components/collections/my/Request.vue
View File

@@ -7,7 +7,7 @@
@dragover.stop @dragover.stop
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-2 w-16 items-center justify-center truncate" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -59,7 +59,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -72,9 +72,10 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="$refs.duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="edit" ref="edit"
@@ -91,7 +92,7 @@
requestIndex, requestIndex,
folderPath, folderPath,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -110,19 +111,19 @@
requestIndex, requestIndex,
folderPath, folderPath,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="$t('action.delete')" :label="$t('action.delete')"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -140,8 +141,8 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { translateToNewRequest } from "@hoppscotch/data" import { translateToNewRequest } from "@hoppscotch/data"
import { useReadonlyStream } from "~/helpers/utils/composables" import { useReadonlyStream } from "~/helpers/utils/composables"
import { import {
@@ -168,6 +169,11 @@ export default defineComponent({
const active = useReadonlyStream(restSaveContext$, null) const active = useReadonlyStream(restSaveContext$, null)
return { return {
active, active,
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
edit: ref<any | null>(null),
duplicate: ref<any | null>(null),
deleteAction: ref<any | null>(null),
} }
}, },
data() { data() {
@@ -184,7 +190,7 @@ export default defineComponent({
} }
}, },
computed: { computed: {
isSelected() { isSelected(): boolean {
return ( return (
this.picked && this.picked &&
this.picked.pickedType === "my-request" && this.picked.pickedType === "my-request" &&
@@ -235,7 +241,7 @@ export default defineComponent({
requestIndex: this.$props.requestIndex, requestIndex: this.$props.requestIndex,
}) })
}, },
getRequestLabelColor(method) { getRequestLabelColor(method: string): string {
return ( return (
this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels[method.toLowerCase()] ||
this.requestMethodLabels.default this.requestMethodLabels.default

62
packages/hoppscotch-app/components/collections/teams/Collection.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -32,7 +32,7 @@
<ButtonSecondary <ButtonSecondary
v-if="doc && !selected" v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('import.title')" :title="t('import.title')"
svg="circle" svg="circle"
color="green" color="green"
@click.native="$emit('select-collection')" @click.native="$emit('select-collection')"
@@ -40,7 +40,7 @@
<ButtonSecondary <ButtonSecondary
v-if="doc && selected" v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')" :title="t('action.remove')"
svg="check-circle" svg="check-circle"
color="green" color="green"
@click.native="$emit('unselect-collection')" @click.native="$emit('unselect-collection')"
@@ -49,7 +49,7 @@
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
svg="folder-plus" svg="folder-plus"
:title="$t('folder.new')" :title="t('folder.new')"
class="hidden group-hover:inline-flex" class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
@@ -66,12 +66,12 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')" :title="t('action.more')"
svg="more-vertical" svg="more-vertical"
/> />
</template> </template>
@@ -79,14 +79,15 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.n="$refs.folder.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="folder" ref="folderAction"
svg="folder-plus" svg="folder-plus"
:label="$t('folder.new')" :label="t('folder.new')"
:shortcut="['N']" :shortcut="['N']"
@click.native=" @click.native="
() => { () => {
@@ -94,31 +95,31 @@
folder: collection, folder: collection,
path: `${collectionIndex}`, path: `${collectionIndex}`,
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="edit" ref="edit"
svg="edit" svg="edit"
:label="$t('action.edit')" :label="t('action.edit')"
:shortcut="['E']" :shortcut="['E']"
@click.native=" @click.native="
() => { () => {
$emit('edit-collection') $emit('edit-collection')
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="$t('action.delete')" :label="t('action.delete')"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -181,27 +182,28 @@
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.collection')" :alt="`${t('empty.collection')}`"
/> />
<span class="text-center"> <span class="text-center">
{{ $t("empty.collection") }} {{ t("empty.collection") }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="$t('confirm.remove_collection')" :title="t('confirm.remove_collection')"
@hide-modal="confirmRemove = false" @hide-modal="confirmRemove = false"
@resolve="removeCollection" @resolve="removeCollection"
/> />
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either" import * as E from "fp-ts/Either"
import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest" import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({ export default defineComponent({
props: { props: {
@@ -214,6 +216,18 @@ export default defineComponent({
collectionsType: { type: Object, default: () => {} }, collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} }, picked: { type: Object, default: () => {} },
}, },
setup() {
const t = useI18n()
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
folderAction: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
t,
}
},
data() { data() {
return { return {
showChildren: false, showChildren: false,
@@ -226,7 +240,7 @@ export default defineComponent({
} }
}, },
computed: { computed: {
isSelected() { isSelected(): boolean {
return ( return (
this.picked && this.picked &&
this.picked.pickedType === "teams-collection" && this.picked.pickedType === "teams-collection" &&
@@ -281,7 +295,7 @@ export default defineComponent({
this.collection.id this.collection.id
)() )()
if (E.isLeft(moveRequestResult)) if (E.isLeft(moveRequestResult))
this.$toast.error(this.$t("error.something_went_wrong")) this.$toast.error(`${this.$t("error.something_went_wrong")}`)
}, },
removeRequest({ collectionIndex, folderName, requestIndex }) { removeRequest({ collectionIndex, folderName, requestIndex }) {
this.$emit("remove-request", { this.$emit("remove-request", {

44
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -8,7 +8,7 @@
@drop="dragging = false" @drop="dragging = false"
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -45,7 +45,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -58,19 +58,20 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.n="$refs.folder.$el.click()" @keyup.n="folderAction.$el.click()"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="folder" ref="folderAction"
svg="folder-plus" svg="folder-plus"
:label="$t('folder.new')" :label="$t('folder.new')"
:shortcut="['N']" :shortcut="['N']"
@click.native=" @click.native="
() => { () => {
$emit('add-folder', { folder, path: folderPath }) $emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -87,19 +88,19 @@
collectionIndex, collectionIndex,
folderPath: '', folderPath: '',
}) })
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="$t('action.delete')" :label="$t('action.delete')"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -160,7 +161,7 @@
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex" class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
:alt="$t('empty.folder')" :alt="`${$t('empty.folder')}`"
/> />
<span class="text-center"> <span class="text-center">
{{ $t("empty.folder") }} {{ $t("empty.folder") }}
@@ -177,8 +178,8 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either" import * as E from "fp-ts/Either"
import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest" import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
import * as teamUtils from "~/helpers/teams/utils" import * as teamUtils from "~/helpers/teams/utils"
@@ -196,6 +197,15 @@ export default defineComponent({
collectionsType: { type: Object, default: () => {} }, collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} }, picked: { type: Object, default: () => {} },
}, },
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
folderAction: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() { data() {
return { return {
showChildren: false, showChildren: false,
@@ -206,7 +216,7 @@ export default defineComponent({
} }
}, },
computed: { computed: {
isSelected() { isSelected(): boolean {
return ( return (
this.picked && this.picked &&
this.picked.pickedType === "teams-folder" && this.picked.pickedType === "teams-folder" &&
@@ -247,11 +257,11 @@ export default defineComponent({
teamUtils teamUtils
.deleteCollection(this.$apollo, this.folder.id) .deleteCollection(this.$apollo, this.folder.id)
.then(() => { .then(() => {
this.$toast.success(this.$t("state.deleted")) this.$toast.success(`${this.$t("state.deleted")}`)
this.$emit("update-team-collections") this.$emit("update-team-collections")
}) })
.catch((e) => { .catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong")) this.$toast.error(`${this.$t("error.something_went_wrong")}`)
console.error(e) console.error(e)
}) })
this.$emit("update-team-collections") this.$emit("update-team-collections")
@@ -268,7 +278,7 @@ export default defineComponent({
this.folder.id this.folder.id
)() )()
if (E.isLeft(moveRequestResult)) if (E.isLeft(moveRequestResult))
this.$toast.error(this.$t("error.something_went_wrong")) this.$toast.error(`${this.$t("error.something_went_wrong")}`)
}, },
removeRequest({ collectionIndex, folderName, requestIndex }) { removeRequest({ collectionIndex, folderName, requestIndex }) {
this.$emit("remove-request", { this.$emit("remove-request", {

41
packages/hoppscotch-app/components/collections/teams/Request.vue
View File

@@ -7,7 +7,7 @@
@dragover.stop @dragover.stop
@dragleave="dragging = false" @dragleave="dragging = false"
@dragend="dragging = false" @dragend="dragging = false"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-2 w-16 items-center justify-center truncate" class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -59,7 +59,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -72,8 +72,9 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()" @keyup.delete="deleteAction.$el.click()"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="edit" ref="edit"
@@ -81,24 +82,28 @@
:label="$t('action.edit')" :label="$t('action.edit')"
:shortcut="['E']" :shortcut="['E']"
@click.native=" @click.native="
$emit('edit-request', { () => {
collectionIndex, $emit('edit-request', {
folderIndex, collectionIndex,
folderName, folderIndex,
request, folderName,
requestIndex, request,
}) requestIndex,
$refs.options.tippy().hide() })
options.tippy().hide()
}
" "
/> />
<SmartItem <SmartItem
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="$t('action.delete')" :label="$t('action.delete')"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
confirmRemove = true () => {
$refs.options.tippy().hide() confirmRemove = true
options.tippy().hide()
}
" "
/> />
</div> </div>
@@ -116,7 +121,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { translateToNewRequest } from "@hoppscotch/data" import { translateToNewRequest } from "@hoppscotch/data"
import { useReadonlyStream } from "~/helpers/utils/composables" import { useReadonlyStream } from "~/helpers/utils/composables"
import { import {
@@ -142,6 +147,10 @@ export default defineComponent({
const active = useReadonlyStream(restSaveContext$, null) const active = useReadonlyStream(restSaveContext$, null)
return { return {
active, active,
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
edit: ref<any | null>(null),
deleteAction: ref<any | null>(null),
} }
}, },
data() { data() {

30
packages/hoppscotch-app/components/environments/Environment.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
class="flex items-stretch group" class="flex items-stretch group"
@contextmenu.prevent="$refs.options.tippy().show()" @contextmenu.prevent="options.tippy().show()"
> >
<span <span
class="cursor-pointer flex px-4 items-center justify-center" class="cursor-pointer flex px-4 items-center justify-center"
@@ -24,7 +24,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -37,11 +37,12 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.e="$refs.edit.$el.click()" @keyup.e="edit.$el.click()"
@keyup.d="$refs.duplicate.$el.click()" @keyup.d="duplicate.$el.click()"
@keyup.delete=" @keyup.delete="
!(environmentIndex === 'Global') ? $refs.delete.$el.click() : null !(environmentIndex === 'Global') ? deleteAction.$el.click() : null
" "
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
ref="edit" ref="edit"
@@ -51,7 +52,7 @@
@click.native=" @click.native="
() => { () => {
$emit('edit-environment') $emit('edit-environment')
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -63,20 +64,20 @@
@click.native=" @click.native="
() => { () => {
duplicateEnvironment() duplicateEnvironment()
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
<SmartItem <SmartItem
v-if="!(environmentIndex === 'Global')" v-if="!(environmentIndex === 'Global')"
ref="delete" ref="deleteAction"
svg="trash-2" svg="trash-2"
:label="`${$t('action.delete')}`" :label="`${$t('action.delete')}`"
:shortcut="['⌫']" :shortcut="['⌫']"
@click.native=" @click.native="
() => { () => {
confirmRemove = true confirmRemove = true
$refs.options.tippy().hide() options.tippy().hide()
} }
" "
/> />
@@ -93,7 +94,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "@nuxtjs/composition-api" import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
import { import {
deleteEnvironment, deleteEnvironment,
duplicateEnvironment, duplicateEnvironment,
@@ -111,6 +112,15 @@ export default defineComponent({
default: null, default: null,
}, },
}, },
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
edit: ref<any | null>(null),
duplicate: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() { data() {
return { return {
confirmRemove: false, confirmRemove: false,

46
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -30,8 +30,10 @@
: 'radio_button_unchecked' : 'radio_button_unchecked'
" "
@click.native=" @click.native="
authType = 'none' () => {
$refs.authTypeOptions.tippy().hide() authType = 'none'
authTypeOptions.tippy().hide()
}
" "
/> />
<SmartItem <SmartItem
@@ -42,8 +44,10 @@
: 'radio_button_unchecked' : 'radio_button_unchecked'
" "
@click.native=" @click.native="
authType = 'basic' () => {
$refs.authTypeOptions.tippy().hide() authType = 'basic'
authTypeOptions.tippy().hide()
}
" "
/> />
<SmartItem <SmartItem
@@ -54,8 +58,10 @@
: 'radio_button_unchecked' : 'radio_button_unchecked'
" "
@click.native=" @click.native="
authType = 'bearer' () => {
$refs.authTypeOptions.tippy().hide() authType = 'bearer'
authTypeOptions.tippy().hide()
}
" "
/> />
<SmartItem <SmartItem
@@ -66,8 +72,10 @@
: 'radio_button_unchecked' : 'radio_button_unchecked'
" "
@click.native=" @click.native="
authType = 'oauth-2' () => {
$refs.authTypeOptions.tippy().hide() authType = 'oauth-2'
authTypeOptions.tippy().hide()
}
" "
/> />
<SmartItem <SmartItem
@@ -78,8 +86,10 @@
: 'radio_button_unchecked' : 'radio_button_unchecked'
" "
@click.native=" @click.native="
authType = 'api-key' () => {
$refs.authTypeOptions.tippy().hide() authType = 'api-key'
authTypeOptions.tippy().hide()
}
" "
/> />
</tippy> </tippy>
@@ -215,8 +225,10 @@
" "
:label="'Headers'" :label="'Headers'"
@click.native=" @click.native="
addTo = 'Headers' () => {
$refs.addToOptions.tippy().hide() addTo = 'Headers'
addToOptions.tippy().hide()
}
" "
/> />
<SmartItem <SmartItem
@@ -227,8 +239,10 @@
" "
:label="'Query params'" :label="'Query params'"
@click.native=" @click.native="
addTo = 'Query params' () => {
$refs.addToOptions.tippy().hide() addTo = 'Query params'
addToOptions.tippy().hide()
}
" "
/> />
</tippy> </tippy>
@@ -253,7 +267,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, Ref } from "@nuxtjs/composition-api" import { computed, defineComponent, ref, Ref } from "@nuxtjs/composition-api"
import { import {
HoppRESTAuthBasic, HoppRESTAuthBasic,
HoppRESTAuthBearer, HoppRESTAuthBearer,
@@ -314,6 +328,8 @@ export default defineComponent({
apiKey, apiKey,
apiValue, apiValue,
addTo, addTo,
authTypeOptions: ref<any | null>(null),
addToOptions: ref<any | null>(null),
} }
}, },
}) })

29
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -69,7 +69,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.sendTippyActions.focus()" :on-shown="() => sendTippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonPrimary class="rounded-l-none" filled svg="chevron-down" /> <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
@@ -78,12 +78,13 @@
ref="sendTippyActions" ref="sendTippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.c="$refs.import.$el.click()" @keyup.c="curl.$el.click()"
@keyup.s="$refs.show.$el.click()" @keyup.s="show.$el.click()"
@keyup.delete="$refs.clearAll.$el.click()" @keyup.delete="clearAll.$el.click()"
@keyup.escape="sendOptions.tippy().hide()"
> >
<SmartItem <SmartItem
ref="import" ref="curl"
:label="`${t('import.curl')}`" :label="`${t('import.curl')}`"
svg="file-code" svg="file-code"
:shortcut="['C']" :shortcut="['C']"
@@ -139,7 +140,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.saveTippyActions.focus()" :on-shown="() => saveTippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -152,8 +153,9 @@
ref="saveTippyActions" ref="saveTippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.c="$refs.copyRequest.$el.click()" @keyup.c="copyRequestAction.$el.click()"
@keyup.s="$refs.saveRequest.$el.click()" @keyup.s="saveRequestAction.$el.click()"
@keyup.escape="saveOptions.tippy().hide()"
> >
<input <input
id="request-name" id="request-name"
@@ -166,7 +168,7 @@
@keyup.enter="saveOptions.tippy().hide()" @keyup.enter="saveOptions.tippy().hide()"
/> />
<SmartItem <SmartItem
ref="copyRequest" ref="copyRequestAction"
:label="shareButtonText" :label="shareButtonText"
:svg="copyLinkIcon" :svg="copyLinkIcon"
:loading="fetchingShareLink" :loading="fetchingShareLink"
@@ -178,7 +180,7 @@
" "
/> />
<SmartItem <SmartItem
ref="saveRequest" ref="saveRequestAction"
:label="`${t('request.save_as')}`" :label="`${t('request.save_as')}`"
svg="folder-plus" svg="folder-plus"
:shortcut="['S']" :shortcut="['S']"
@@ -279,6 +281,13 @@ const hasNavigatorShare = !!navigator.share
const methodOptions = ref<any | null>(null) const methodOptions = ref<any | null>(null)
const saveOptions = ref<any | null>(null) const saveOptions = ref<any | null>(null)
const sendOptions = ref<any | null>(null) const sendOptions = ref<any | null>(null)
const sendTippyActions = ref<any | null>(null)
const saveTippyActions = ref<any | null>(null)
const curl = ref<any | null>(null)
const show = ref<any | null>(null)
const clearAll = ref<any | null>(null)
const copyRequestAction = ref<any | null>(null)
const saveRequestAction = ref<any | null>(null)
// Update Nuxt Loading bar // Update Nuxt Loading bar
watch(loading, () => { watch(loading, () => {

7
packages/hoppscotch-app/components/profile/Picture.vue
View File

@@ -1,7 +1,10 @@
<template> <template>
<div class="cursor-pointer flex h-5 w-5 relative items-center justify-center"> <div
tabindex="0"
class="cursor-pointer flex rounded-full h-5 w-5 relative items-center justify-center focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
>
<img <img
class="bg-primaryDark rounded-full object-cover object-center h-5 transition w-5 absolute" class="bg-primaryDark rounded-full object-cover object-center h-5 w-5 transition absolute"
:src="url" :src="url"
:alt="alt" :alt="alt"
loading="lazy" loading="lazy"

1
packages/hoppscotch-app/components/smart/AutoComplete.vue
View File

@@ -8,7 +8,6 @@
:placeholder="placeholder" :placeholder="placeholder"
:spellcheck="spellcheck" :spellcheck="spellcheck"
:autocapitalize="autocapitalize" :autocapitalize="autocapitalize"
:autocorrect="spellcheck"
:class="styles" :class="styles"
@input="updateSuggestions" @input="updateSuggestions"
@keyup="updateSuggestions" @keyup="updateSuggestions"

4
packages/hoppscotch-app/components/smart/Item.vue
View File

@@ -64,7 +64,7 @@
> >
{{ infoIcon }} {{ infoIcon }}
</i> </i>
<div v-if="shortcut.length" class="ml-2"> <div v-if="shortcut.length" class="ml-2 <sm:hidden">
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"
@@ -76,7 +76,7 @@
</SmartLink> </SmartLink>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
export default defineComponent({ export default defineComponent({

52
packages/hoppscotch-app/components/teams/Team.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
class="border border-divider rounded flex flex-col flex-1" class="border border-divider rounded flex flex-col flex-1"
@contextmenu.prevent="!compact ? $refs.options.tippy().show() : null" @contextmenu.prevent="!compact ? options.tippy().show() : null"
> >
<div <div
class="flex flex-1 items-start" class="flex flex-1 items-start"
@@ -73,7 +73,7 @@
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
:on-shown="() => $refs.tippyActions.focus()" :on-shown="() => tippyActions.focus()"
> >
<template #trigger> <template #trigger>
<ButtonSecondary <ButtonSecondary
@@ -86,15 +86,16 @@
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.e="team.myRole === 'OWNER' ? $refs.edit.$el.click() : null" @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
@keyup.delete="
team.myRole === 'OWNER' ? $refs.delete.$el.click() : null
"
@keyup.x=" @keyup.x="
!(team.myRole === 'OWNER' && team.ownersCount == 1) !(team.myRole === 'OWNER' && team.ownersCount == 1)
? $refs.exit.$el.click() ? exit.$el.click()
: null : null
" "
@keyup.delete="
team.myRole === 'OWNER' ? deleteAction.$el.click() : null
"
@keyup.escape="options.tippy().hide()"
> >
<SmartItem <SmartItem
v-if="team.myRole === 'OWNER'" v-if="team.myRole === 'OWNER'"
@@ -105,20 +106,7 @@
@click.native=" @click.native="
() => { () => {
$emit('edit-team') $emit('edit-team')
$refs.options.tippy().hide() options.tippy().hide()
}
"
/>
<SmartItem
v-if="team.myRole === 'OWNER'"
ref="delete"
svg="trash-2"
:label="t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
} }
" "
/> />
@@ -131,7 +119,20 @@
@click.native=" @click.native="
() => { () => {
confirmExit = true confirmExit = true
$refs.options.tippy().hide() options.tippy().hide()
}
"
/>
<SmartItem
v-if="team.myRole === 'OWNER'"
ref="deleteAction"
svg="trash-2"
:label="t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
options.tippy().hide()
} }
" "
/> />
@@ -227,4 +228,11 @@ const exitTeam = () => {
const noPermission = () => { const noPermission = () => {
toast.error(`${t("profile.no_permission")}`) toast.error(`${t("profile.no_permission")}`)
} }
// Template refs
const tippyActions = ref<any | null>(null)
const options = ref<any | null>(null)
const edit = ref<any | null>(null)
const deleteAction = ref<any | null>(null)
const exit = ref<any | null>(null)
</script> </script>

2
packages/hoppscotch-app/pages/profile.vue
View File

@@ -32,7 +32,7 @@
v-if="currentUser.photoURL" v-if="currentUser.photoURL"
:src="currentUser.photoURL" :src="currentUser.photoURL"
class="rounded-lg h-16 ring-primary ring-4 w-16" class="rounded-lg h-16 ring-primary ring-4 w-16"
:alt="currentUser.displayName" :alt="`${currentUser.displayName}`"
/> />
<SmartIcon v-else name="user" class="svg-icons" /> <SmartIcon v-else name="user" class="svg-icons" />
<div class="ml-4"> <div class="ml-4">