You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
3.6 KiB
90 lines
3.6 KiB
<app-file-files>
|
|
|
|
<div>
|
|
|
|
<!-- show parent only if path is set -->
|
|
<app-file-parent handleClick={ (event) => handleParentClick(evnet) } if={ state.path.length > 0 }></app-file-parent>
|
|
|
|
<div class="file__table">
|
|
<div class="{ rowClasses(file) }" each={ (file, index) in state.files }>
|
|
|
|
<!-- marked -->
|
|
<div class="file__table-column file__table-column--select" onchange={ (event) => { handleMarked(event, file) } }>
|
|
<input id="marked_{ index }" type="checkbox" value="true" />
|
|
<label for="marked_{ index }">
|
|
<svg class="icon checked" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-checkbox_checked"></use>
|
|
</svg>
|
|
<svg class="icon unchecked" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-checkbox"></use>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- show name of file, and icon if directory-->
|
|
<div if={ !file.is_directory } class="file__table-column file__table-column--filename">
|
|
{ file.name }
|
|
</div>
|
|
<div if={ file.is_directory } class="file__table-column file__table-column--filename" onclick={ (event) => { handleDirectoryClick(event, file) } }>
|
|
<svg class="icon m-right-2" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-folder"></use>
|
|
</svg>
|
|
{ file.name }
|
|
</div>
|
|
|
|
<!-- -->
|
|
<div class="file__table-column file__table-column--size">
|
|
<div if={ !file.is_directory } class="w-100">{ file.size }</div>
|
|
</div>
|
|
|
|
<div class="file__table-column file__table-column--date">
|
|
<div class="w-100 right">{ file.updated_at }</div>
|
|
</div>
|
|
|
|
<!-- actions -->
|
|
<div class="file__table-column file__table-column--actions">
|
|
<div class="w-100 right">
|
|
<button class="button m-bottom-0 p-2 m-right-3" type="button" onclick={ (event) => { handleDownload(event, file) } }>
|
|
<svg class="icon fill-success" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-download"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="button m-bottom-0 p-2" type="button" onclick={ (event) => { handleDelete(event, file) } }>
|
|
<svg class="icon fill-danger" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
import filesMixin from './../../mixins/file.js'
|
|
|
|
export default () => {
|
|
return {
|
|
|
|
...filesMixin, // adding basic funtion for sidebar
|
|
|
|
rowClasses(file) {
|
|
const classes = [
|
|
'file__table-row'
|
|
]
|
|
|
|
if (this.isFileInArray(file)) {
|
|
classes.push('file__table-row--selected')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</app-file-files> |