parent
8e5b1e5bbe
commit
ddbe23067f
|
After Width: | Height: | Size: 283 B |
|
After Width: | Height: | Size: 396 B |
|
After Width: | Height: | Size: 435 B |
@ -0,0 +1,90 @@
|
||||
<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>
|
||||
@ -0,0 +1,22 @@
|
||||
<app-file-parent>
|
||||
<div class="file__table-row">
|
||||
<div class="file__table-column file__table-column--back">
|
||||
<svg class="icon" aria-hidden="true" onclick={ (event) => { props.handleClick(event, this) } }>
|
||||
<use xlink:href="/symbol-defs.svg#icon-back"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</app-file-parent>
|
||||
@ -0,0 +1,65 @@
|
||||
<app-file-video>
|
||||
|
||||
<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="file__table-row" each={ (file, index) in state.files }>
|
||||
|
||||
<!-- 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
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</app-file-video>
|
||||
@ -0,0 +1,99 @@
|
||||
import fileStore from './../stores/file.js'
|
||||
|
||||
/**
|
||||
* Mixin to Extend a Sidebar
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/sidebar-form
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
files: [],
|
||||
path: [],
|
||||
marked: []
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
fileStore.on('update', (data) => {
|
||||
this.state.files = data
|
||||
this.update()
|
||||
})
|
||||
|
||||
fileStore.get(this.props.hubId)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
handleParentClick(event) {
|
||||
this.state.path.pop()
|
||||
fileStore.get(this.props.hubId, this.state.path)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
handleMarked(event, file) {
|
||||
|
||||
let exists = this.isFileInArray(file)
|
||||
|
||||
if (exists === false) {
|
||||
this.state.marked.push(file)
|
||||
} else {
|
||||
this.state.marked.splice(this.state.marked.indexOf(file), 1)
|
||||
}
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @return {Boolean} [description]
|
||||
*/
|
||||
isFileInArray(file)
|
||||
{
|
||||
let exists = false
|
||||
|
||||
this.state.marked.forEach((f, index) => {
|
||||
if (file.name === f.name) {
|
||||
exists = true
|
||||
}
|
||||
})
|
||||
|
||||
return exists
|
||||
},
|
||||
|
||||
handleDirectoryClick(event, file) {
|
||||
this.state.path.push(file.name)
|
||||
fileStore.get(this.props.hubId, this.state.path)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {[type]} event [description]
|
||||
* @param {[type]} file [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
handleDownload(event, file) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {[type]} event [description]
|
||||
* @param {[type]} file [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
handleDelete(event, file) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
$file__color-hover: #e3e3e3;
|
||||
|
||||
.file {
|
||||
|
||||
// table to show files
|
||||
&__table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0.25em;
|
||||
border-bottom: $border;
|
||||
|
||||
&:hover {
|
||||
background-color: $file__color-hover;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: #02acff;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#02acff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-column {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
&--select {
|
||||
max-width: 30px;
|
||||
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
+ label {
|
||||
margin: -4px 0 0 0;
|
||||
|
||||
.checked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label .checked {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:checked + label .unchecked {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checked, .unchecked {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
&--back {
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
&--actions {
|
||||
line-height: 0;
|
||||
|
||||
button {
|
||||
&:disabled {
|
||||
.icon {
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 67 KiB |
Loading…
Reference in new issue