q-layout.fileman(view='hHh lpR lFr', container)
q-header.card-header
q-toolbar(dark)
q-icon(name='img:/_assets/icons/fluent-folder.svg', left, size='md')
span {{t(`fileman.title`)}}
q-toolbar(dark)
q-input(
dark
v-model='state.search'
standout='bg-white text-dark'
dense
ref='searchField'
style='width: 100%;'
label='Search folder...'
:debounce='500'
)
template(v-slot:prepend)
q-icon(name='las la-search')
template(v-slot:append)
q-icon.cursor-pointer(
name='las la-times'
@click='state.search=``'
v-if='state.search.length > 0'
:color='$q.dark.isActive ? `blue` : `grey-4`'
)
q-toolbar(dark)
q-space
q-btn(
flat
dense
no-caps
color='red-3'
:aria-label='t(`common.actions.close`)'
icon='las la-times'
@click='close'
)
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.close`)}}
q-drawer.fileman-left(:model-value='true', :width='350')
.q-px-md.q-pb-sm
tree(
ref='treeComp'
:nodes='state.treeNodes'
:roots='state.treeRoots'
v-model:selected='state.currentFolderId'
@lazy-load='treeLazyLoad'
:use-lazy-load='true'
@context-action='treeContextAction'
:display-mode='state.displayMode'
)
q-drawer.fileman-right(:model-value='$q.screen.gt.md', :width='350', side='right')
.q-pa-md
template(v-if='currentFileDetails')
q-img.rounded-borders.q-mb-md(
src='/_assets/illustrations/fileman-page.svg'
width='100%'
fit='cover'
:ratio='16/10'
no-spinner
)
.fileman-details-row(
v-for='item of currentFileDetails.items'
)
label {{item.label}}
span {{item.value}}
q-page-container
q-page.fileman-center
//- TOOLBAR -----------------------------------------------------
q-toolbar.fileman-toolbar
template(v-if='state.isUploading')
.fileman-progressbar
div(:style='`width: ` + state.uploadPercentage + `%`') {{state.uploadPercentage}}%
q-btn.acrylic-btn.q-ml-sm(
flat
dense
no-caps
color='negative'
:aria-label='t(`common.actions.cancel`)'
icon='las la-square'
@click='uploadCancel'
v-if='state.uploadPercentage < 100'
)
template(v-else)
q-space
q-btn.q-mr-sm(
flat
dense
no-caps
color='grey'
:aria-label='t(`fileman.viewOptions`)'
icon='las la-th-list'
@click=''
)
q-tooltip(anchor='bottom middle', self='top middle') {{t(`fileman.viewOptions`)}}
q-menu(
transition-show='jump-down'
transition-hide='jump-up'
anchor='bottom right'
self='top right'
)
q-card.q-pa-sm
.text-center
small.text-grey {{t(`fileman.viewOptions`)}}
q-list(dense)
q-separator.q-my-sm
q-item(clickable)
q-item-section(side)
q-icon(name='las la-list', color='grey', size='xs')
q-item-section.q-pr-sm Browse using...
q-item-section(side)
q-icon(name='las la-angle-right', color='grey', size='xs')
q-menu(
anchor='top end'
self='top start'
)
q-list.q-pa-sm(dense)
q-item(clickable, @click='state.displayMode = `path`')
q-item-section(side)
q-icon(
:name='state.displayMode === `path` ? `las la-check-circle` : `las la-circle`'
:color='state.displayMode === `path` ? `positive` : `grey`'
size='xs'
)
q-item-section.q-pr-sm Browse Using Paths
q-item(clickable, @click='state.displayMode = `title`')
q-item-section(side)
q-icon(
:name='state.displayMode === `title` ? `las la-check-circle` : `las la-circle`'
:color='state.displayMode === `title` ? `positive` : `grey`'
size='xs'
)
q-item-section.q-pr-sm Browse Using Titles
q-item(clickable, @click='state.isCompact = !state.isCompact')
q-item-section(side)
q-icon(
:name='state.isCompact ? `las la-check-square` : `las la-stop`'
:color='state.isCompact ? `positive` : `grey`'
size='xs'
)
q-item-section.q-pr-sm Compact List
q-item(clickable, @click='state.shouldShowFolders = !state.shouldShowFolders')
q-item-section(side)
q-icon(
:name='state.shouldShowFolders ? `las la-check-square` : `las la-stop`'
:color='state.shouldShowFolders ? `positive` : `grey`'
size='xs'
)
q-item-section.q-pr-sm Show Folders
q-btn.q-mr-sm(
flat
dense
no-caps
color='grey'
:aria-label='t(`common.actions.refresh`)'
icon='las la-redo-alt'
@click='reloadFolder(state.currentFolderId)'
)
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.refresh`)}}
q-separator.q-mr-sm(inset, vertical)
q-btn.q-mr-sm(
flat
dense
no-caps
color='blue'
:label='t(`common.actions.new`)'
:aria-label='t(`common.actions.new`)'
icon='las la-plus-circle'
@click=''
)
new-menu(
:hide-asset-btn='true'
:show-new-folder='true'
@new-folder='() => newFolder(state.currentFolderId)'
)
q-btn(
flat
dense
no-caps
color='positive'
:label='t(`common.actions.upload`)'
:aria-label='t(`common.actions.upload`)'
icon='las la-cloud-upload-alt'
@click='uploadFile'
)
.fileman-emptylist(v-if='files.length < 1')
template(v-if='state.fileListLoading')
q-spinner.q-mr-sm(color='primary', size='xs', :thickness='3')
span.text-primary Loading...
template(v-else)
q-icon.q-mr-sm(name='las la-exclamation-triangle', size='sm')
span This folder is empty.
q-list.fileman-filelist(v-else)
q-item(
v-for='item of files'
:key='item.id'
clickable
active-class='active'
:active='item.id === state.currentFileId'
@click.native='selectItem(item)'
@dblclick.native='openItem(item)'
)
q-item-section.fileman-filelist-icon(avatar)
q-icon(:name='item.icon', :size='state.isCompact ? `md` : `xl`')
q-item-section.fileman-filelist-label
q-item-label {{item.title}}
q-item-label(caption, v-if='!state.isCompact') {{item.caption}}
q-item-section.fileman-filelist-side(side, v-if='item.side')
.text-caption {{item.side}}
//- RIGHT-CLICK MENU
q-menu(
touch-position
context-menu
auto-close
transition-show='jump-down'
transition-hide='jump-up'
)
q-card.q-pa-sm
q-list(dense, style='min-width: 150px;')
q-item(clickable, v-if='item.type === `page`')
q-item-section(side)
q-icon(name='las la-edit', color='orange')
q-item-section Edit
q-item(clickable, v-if='item.type !== `folder`', @click='openItem(item)')
q-item-section(side)
q-icon(name='las la-eye', color='primary')
q-item-section View
q-item(clickable, v-if='item.type !== `folder`', @click='copyItemURL(item)')
q-item-section(side)
q-icon(name='las la-clipboard', color='primary')
q-item-section Copy URL
q-item(clickable)
q-item-section(side)
q-icon(name='las la-copy', color='teal')
q-item-section Duplicate...
q-item(clickable)
q-item-section(side)
q-icon(name='las la-redo', color='teal')
q-item-section Rename...
q-item(clickable)
q-item-section(side)
q-icon(name='las la-arrow-right', color='teal')
q-item-section Move to...
q-item(clickable, @click='delItem(item)')
q-item-section(side)
q-icon(name='las la-trash-alt', color='negative')
q-item-section.text-negative Delete
q-footer
q-bar.fileman-path
small.text-caption.text-grey-7 {{folderPath}}
input(
type='file'
ref='fileIpt'
multiple
@change='uploadNewFiles'
style='display: none'
)