perf: Content tab for mobile users (#602) @Larsluph

This commit is contained in:
Rémi Marseault 2023-01-14 09:07:47 +01:00 committed by GitHub
parent f175a6af65
commit fc371a296c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -3,17 +3,17 @@
<v-treeview v-model="selected" :items="fileTree" :open.sync="opened" activatable selectable item-key="fullName" open-all>
<template #prepend="{ item, open }">
<v-icon v-if="!item.icon">
{{ open ? mdiFolderOpen : mdiFolderOpen }}
{{ open ? mdiFolderOpen : mdiFolder }}
</v-icon>
<v-icon v-else>
{{ item.icon }}
</v-icon>
</template>
<template #label="{ item }">
<span v-if="!item.editing">{{ item.name }}</span>
<span class="item-name" v-if="!item.editing">{{ item.name }}</span>
<v-text-field v-if="item.editing" v-model="item.newName" autofocus />
</template>
<template v-if="!$vuetify.breakpoint.smAndDown" #append="{ item }">
<template #append="{ item }">
<div v-if="!item.icon">
<span class="ml-4">{{ item.children.length }} Files</span>
<v-btn v-if="!item.editing" fab x-small class="accent white--text elevation-0 px-4 ml-2" @click="edit(item)">
@ -27,9 +27,9 @@
</v-btn>
</div>
<div v-else>
<span>[{{ item.size }}]</span>
<span class="ml-4">{{ item.progress }}%</span>
<span class="ml-4">[ {{ item.priority | priority }} ]</span>
<span v-if="!$vuetify.breakpoint.xsOnly && !item.editing">[{{ item.size }}]</span>
<span v-if="!$vuetify.breakpoint.xsOnly && !item.editing" class="ml-4">{{ item.progress }}%</span>
<span v-if="!$vuetify.breakpoint.xsOnly && !item.editing" class="ml-4">[ {{ item.priority | priority }} ]</span>
<v-menu open-on-hover offset-y>
<template #activator="{ on }">
<v-btn fab x-small class="accent white--text elevation-0 px-4 ml-2" v-on="on">
@ -68,17 +68,16 @@ import { mdiClose, mdiContentSave, mdiPencil, mdiFolderOpen, mdiFolder, mdiFile,
import Vue from 'vue'
const FILE_PRIORITY_OPTIONS = [
{ name: 'max', icon: mdiPriorityHigh, value: 7 },
{ name: 'high', icon: mdiArrowUp, value: 6 },
{ name: 'normal', icon: mdiArrowDown, value: 1 },
{ name: 'unwanted', icon: mdiPriorityLow, value: 0 }
{ name: 'Max', icon: mdiPriorityHigh, value: 7 },
{ name: 'High', icon: mdiArrowUp, value: 6 },
{ name: 'Normal', icon: mdiArrowDown, value: 1 },
{ name: 'Unwanted', icon: mdiPriorityLow, value: 0 }
]
export default {
name: 'Content',
filters: {
priority(value) {
if (value === 4) return 'normal'
const res = FILE_PRIORITY_OPTIONS.find(el => el.value === value)
return res ? res.name : 'undefined'
@ -212,3 +211,9 @@ export default {
}
}
</script>
<style scoped lang="scss">
.item-name {
white-space: normal;
}
</style>