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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,6 +1,7 @@
|
|||||||
@import
|
@import
|
||||||
|
|
||||||
'@tiny-components/plain-ui/src/scss/plain-ui',
|
'@tiny-components/plain-ui/src/scss/plain-ui',
|
||||||
|
|
||||||
'components/field-error',
|
'components/field-error',
|
||||||
|
'components/file',
|
||||||
'components/breadcrumb';
|
'components/breadcrumb';
|
||||||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 67 KiB |
Loading…
Reference in new issue