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

feat: quick shortcut key for menu items

Browse Source
This commit is contained in:
liyasthomas
2021-12-20 00:22:31 +05:30
parent 39d6b1bfeb
commit 827f2157fa
25 changed files with 749 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,6 +47,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -55,38 +56,53 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="folder-plus"
:label="`${$t('folder.new')}`"
@click.native="
() => {
$emit('add-folder', {
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="edit"
:label="`${$t('action.edit')}`"
@click.native="
() => {
$emit('edit-collection')
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="trash-2"
:label="`${$t('action.delete')}`"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.n="$refs.folder.$el.click()"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="folder"
svg="folder-plus"
:label="`${$t('folder.new')}`"
:shortcut="['N']"
@click.native="
() => {
$emit('add-folder', {
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="edit"
svg="edit"
:label="`${$t('action.edit')}`"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-collection')
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="`${$t('action.delete')}`"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -43,6 +43,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -51,36 +52,51 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="folder-plus"
:label="`${$t('folder.new')}`"
@click.native="
() => {
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="edit"
:label="`${$t('action.edit')}`"
@click.native="
() => {
$emit('edit-folder', { folder, folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="trash-2"
:label="`${$t('action.delete')}`"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.n="$refs.folder.$el.click()"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="folder"
svg="folder-plus"
:label="`${$t('folder.new')}`"
:shortcut="['N']"
@click.native="
() => {
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="edit"
svg="edit"
:label="`${$t('action.edit')}`"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-folder', { folder, folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="`${$t('action.delete')}`"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -43,6 +43,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -51,44 +52,59 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="edit"
:label="`${$t('action.edit')}`"
@click.native="
() => {
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="copy"
:label="`${$t('action.duplicate')}`"
@click.native="
() => {
$emit('duplicate-request', {
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="trash-2"
:label="`${$t('action.delete')}`"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.e="$refs.edit.$el.click()"
@keyup.d="$refs.duplicate.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="edit"
svg="edit"
:label="`${$t('action.edit')}`"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="duplicate"
svg="copy"
:label="`${$t('action.duplicate')}`"
:shortcut="['D']"
@click.native="
() => {
$emit('duplicate-request', {
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="`${$t('action.delete')}`"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -65,6 +65,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -73,39 +74,54 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
() => {
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
() => {
$emit('edit-collection')
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="trash-2"
:label="$t('action.delete')"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.n="$refs.folder.$el.click()"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="folder"
svg="folder-plus"
:label="$t('folder.new')"
:shortcut="['N']"
@click.native="
() => {
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="edit"
svg="edit"
:label="$t('action.edit')"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-collection')
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="$t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -43,6 +43,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -51,41 +52,56 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
() => {
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
() => {
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="trash-2"
:label="$t('action.delete')"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.n="$refs.folder.$el.click()"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="folder"
svg="folder-plus"
:label="$t('folder.new')"
:shortcut="['N']"
@click.native="
() => {
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="edit"
svg="edit"
:label="$t('action.edit')"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="$t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -59,6 +59,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -67,50 +68,65 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
() => {
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="copy"
:label="$t('action.duplicate')"
@click.native="
() => {
$emit('duplicate-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
svg="trash-2"
:label="$t('action.delete')"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.e="$refs.edit.$el.click()"
@keyup.d="$refs.duplicate.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="edit"
svg="edit"
:label="$t('action.edit')"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="duplicate"
svg="copy"
:label="$t('action.duplicate')"
:shortcut="['D']"
@click.native="
() => {
$emit('duplicate-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="$t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -66,6 +66,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -74,42 +75,54 @@
svg="more-vertical"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
() => {
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
svg="edit"
:label="$t('action.edit')"
@click.native="
() => {
$emit('edit-collection')
$refs.options.tippy().hide()
}
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
svg="trash-2"
:label="$t('action.delete')"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.n="$refs.folder.$el.click()"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="folder"
svg="folder-plus"
:label="$t('folder.new')"
:shortcut="['N']"
@click.native="
() => {
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="edit"
svg="edit"
:label="$t('action.edit')"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-collection')
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="$t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -45,6 +45,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -53,44 +54,56 @@
svg="more-vertical"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
() => {
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
svg="edit"
:label="$t('action.edit')"
@click.native="
() => {
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath: '',
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
svg="trash-2"
:label="$t('action.delete')"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.n="$refs.folder.$el.click()"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="folder"
svg="folder-plus"
:label="$t('folder.new')"
:shortcut="['N']"
@click.native="
() => {
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="edit"
svg="edit"
:label="$t('action.edit')"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath: '',
})
$refs.options.tippy().hide()
}
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="$t('action.delete')"
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
$refs.options.tippy().hide()
}
"
/>
</div>
</tippy>
</span>
</div>

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

@@ -59,6 +59,7 @@
trigger="click"
theme="popover"
arrow
:on-shown="() => $refs.tippyActions.focus()"
>
<template #trigger>
<ButtonSecondary
@@ -67,28 +68,40 @@
svg="more-vertical"
/>
</template>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="trash-2"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.e="$refs.edit.$el.click()"
@keyup.delete="$refs.delete.$el.click()"
>
<SmartItem
ref="edit"
svg="edit"
:label="$t('action.edit')"
:shortcut="['E']"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
ref="delete"
svg="trash-2"
:label="$t('action.delete')"
:shortcut="['⌫']"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</div>
</tippy>
</span>
</div>