refactor: remove shortcut hints in mobile devices

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

View File

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