refactor: remove shortcut hints in mobile devices
This commit is contained in:
liyasthomas
@@ -31,7 +31,7 @@
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
:on-shown="() => $refs.tippyActions.focus()"
|
||||
:on-shown="() => tippyActions.focus()"
|
||||
>
|
||||
<template #trigger>
|
||||
<ButtonSecondary
|
||||
@@ -44,9 +44,10 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.d="$refs.documentation.$el.click()"
|
||||
@keyup.s="$refs.shortcuts.$el.click()"
|
||||
@keyup.c="$refs.chat.$el.click()"
|
||||
@keyup.d="documentation.$el.click()"
|
||||
@keyup.s="shortcuts.$el.click()"
|
||||
@keyup.c="chat.$el.click()"
|
||||
@keyup.escape="options.tippy().hide()"
|
||||
>
|
||||
<SmartItem
|
||||
ref="documentation"
|
||||
@@ -55,7 +56,7 @@
|
||||
to="https://docs.hoppscotch.io"
|
||||
blank
|
||||
:shortcut="['D']"
|
||||
@click.native="$refs.options.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="shortcuts"
|
||||
@@ -65,7 +66,7 @@
|
||||
@click.native="
|
||||
() => {
|
||||
showShortcuts = true
|
||||
$refs.options.tippy().hide()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
@@ -77,7 +78,7 @@
|
||||
@click.native="
|
||||
() => {
|
||||
chatWithUs()
|
||||
$refs.options.tippy().hide()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
@@ -87,14 +88,14 @@
|
||||
:label="`${t('app.github')}`"
|
||||
to="https://github.com/hoppscotch/hoppscotch"
|
||||
blank
|
||||
@click.native="$refs.options.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<SmartItem
|
||||
svg="twitter"
|
||||
:label="`${t('app.twitter')}`"
|
||||
to="https://hoppscotch.io/twitter"
|
||||
blank
|
||||
@click.native="$refs.options.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<SmartItem
|
||||
svg="user-plus"
|
||||
@@ -102,7 +103,7 @@
|
||||
@click.native="
|
||||
() => {
|
||||
showShare = true
|
||||
$refs.options.tippy().hide()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
@@ -111,14 +112,14 @@
|
||||
:label="`${t('app.terms_and_privacy')}`"
|
||||
to="https://docs.hoppscotch.io/privacy"
|
||||
blank
|
||||
@click.native="$refs.options.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<SmartItem
|
||||
svg="gift"
|
||||
:label="`${t('app.whats_new')}`"
|
||||
to="https://docs.hoppscotch.io/changelog"
|
||||
blank
|
||||
@click.native="$refs.options.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<!-- <SmartItem :label="t('app.status')" /> -->
|
||||
<div class="flex opacity-50 py-2 px-4">
|
||||
@@ -222,4 +223,11 @@ const nativeShare = () => {
|
||||
const chatWithUs = () => {
|
||||
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>
|
||||
|
||||
@@ -58,12 +58,12 @@
|
||||
/>
|
||||
<span class="px-2">
|
||||
<tippy
|
||||
ref="user"
|
||||
ref="options"
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
:on-shown="() => $refs.tippyActions.focus()"
|
||||
:on-shown="() => tippyActions.focus()"
|
||||
>
|
||||
<template #trigger>
|
||||
<ProfilePicture
|
||||
@@ -89,9 +89,10 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.enter="$refs.profile.$el.click()"
|
||||
@keyup.s="$refs.settings.$el.click()"
|
||||
@keyup.l="$refs.logout.$el.click()"
|
||||
@keyup.enter="profile.$el.click()"
|
||||
@keyup.s="settings.$el.click()"
|
||||
@keyup.l="logout.$el.click()"
|
||||
@keyup.escape="options.tippy().hide()"
|
||||
>
|
||||
<SmartItem
|
||||
ref="profile"
|
||||
@@ -99,7 +100,7 @@
|
||||
svg="user"
|
||||
:label="t('navigation.profile')"
|
||||
:shortcut="['↩']"
|
||||
@click.native="$refs.user.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<SmartItem
|
||||
ref="settings"
|
||||
@@ -107,12 +108,12 @@
|
||||
svg="settings"
|
||||
:label="t('navigation.settings')"
|
||||
:shortcut="['S']"
|
||||
@click.native="$refs.user.tippy().hide()"
|
||||
@click.native="options.tippy().hide()"
|
||||
/>
|
||||
<FirebaseLogout
|
||||
ref="logout"
|
||||
:shortcut="['L']"
|
||||
@confirm-logout="$refs.user.tippy().hide()"
|
||||
@confirm-logout="options.tippy().hide()"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -6,35 +6,37 @@
|
||||
@close="$emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<input
|
||||
id="command"
|
||||
v-model="search"
|
||||
v-focus
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
name="command"
|
||||
: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 items-center">
|
||||
<kbd class="shortcut-key">↑</kbd>
|
||||
<kbd class="shortcut-key">↓</kbd>
|
||||
<span class="ml-2 truncate">
|
||||
{{ t("action.to_navigate") }}
|
||||
</span>
|
||||
<kbd class="shortcut-key">↩</kbd>
|
||||
<span class="ml-2 truncate">
|
||||
{{ t("action.to_select") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<kbd class="shortcut-key">ESC</kbd>
|
||||
<span class="ml-2 truncate">
|
||||
{{ t("action.to_close") }}
|
||||
</span>
|
||||
<div class="flex flex-col border-b border-dividerLight">
|
||||
<input
|
||||
id="command"
|
||||
v-model="search"
|
||||
v-focus
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
name="command"
|
||||
:placeholder="`${t('app.type_a_command_search')}`"
|
||||
class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
|
||||
/>
|
||||
<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>
|
||||
<kbd class="shortcut-key">↓</kbd>
|
||||
<span class="ml-2 truncate">
|
||||
{{ t("action.to_navigate") }}
|
||||
</span>
|
||||
<kbd class="shortcut-key">↩</kbd>
|
||||
<span class="ml-2 truncate">
|
||||
{{ t("action.to_select") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<kbd class="shortcut-key">ESC</kbd>
|
||||
<span class="ml-2 truncate">
|
||||
{{ t("action.to_close") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppFuse
|
||||
|
||||
Reference in New Issue
Block a user