Browse Source

adding

master
Björn 3 years ago
parent
commit
5891a5a505
9 changed files with 69 additions and 25 deletions
  1. +1
    -1
      public/css/bootstrap.css
  2. +1
    -1
      public/js/bucket-single.js
  3. +1
    -1
      public/js/bucket.js
  4. +1
    -1
      public/js/home.js
  5. +1
    -1
      public/symbol-defs.svg
  6. +5
    -0
      resources/icons/move.svg
  7. +21
    -7
      resources/js/components/filemanager/actions.riot
  8. +33
    -8
      resources/js/components/filemanager/filemanager.riot
  9. +5
    -5
      resources/scss/components/_file-table.scss

+ 1
- 1
public/css/bootstrap.css
File diff suppressed because it is too large
View File


+ 1
- 1
public/js/bucket-single.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/js/bucket.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/js/home.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/symbol-defs.svg View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-back" viewBox="0 0 30 30"><title>back</title><path d="M12.48 11.25q6.094.879 9.404 4.658t4.365 9.111q-4.512-6.387-13.77-6.387v5.098L3.749 15l8.73-8.73v4.98z"/></symbol><symbol id="icon-build" viewBox="0 0 30 30"><title>build</title><path d="M28.359 23.73q.41.234.381.791t-.498.967l-2.871 2.871q-.879.879-1.758 0L12.246 16.992q-2.109.879-4.482.381t-4.131-2.256q-1.875-1.875-2.344-4.453t.703-4.805L7.5 11.25l3.75-3.75-5.391-5.391q2.227-1.055 4.805-.645t4.453 2.285q1.758 1.758 2.256 4.131t-.381 4.482z"/></symbol><symbol id="icon-delete" viewBox="0 0 30 30"><title>delete</title><path d="M23.73 4.98V7.5H6.269V4.98h4.336l1.289-1.23h6.211l1.289 1.23h4.336zM7.5 23.73v-15h15v15q0 .996-.762 1.758t-1.758.762h-9.961q-.996 0-1.758-.762t-.762-1.758z"/></symbol><symbol id="icon-download" viewBox="0 0 30 30"><title>download</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm17.46-11.25L15 19.98l-8.73-8.73h4.98v-7.5h7.5v7.5h4.98z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-eye" viewBox="0 0 30 30"><title>eye</title><path d="M15 11.25q1.523 0 2.637 1.113T18.75 15t-1.113 2.637T15 18.75t-2.637-1.113T11.25 15t1.113-2.637T15 11.25zm0 10.02q2.578 0 4.424-1.846T21.27 15t-1.846-4.424T15 8.73t-4.424 1.846T8.73 15t1.846 4.424T15 21.27zm0-15.645q4.629 0 8.379 2.578T28.77 15q-1.641 4.219-5.391 6.797T15 24.375t-8.379-2.578T1.23 15q1.641-4.219 5.391-6.797T15 5.625z"/></symbol><symbol id="icon-folder" viewBox="0 0 30 30"><title>folder</title><path d="M12.48 4.98L15 7.5h10.02q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol><symbol id="icon-upload" viewBox="0 0 30 30"><title>upload</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm4.98-2.52v-7.5H6.27L15 3.75l8.73 8.73h-4.98v7.5h-7.5z"/></symbol></svg>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-back" viewBox="0 0 30 30"><title>back</title><path d="M12.48 11.25q6.094.879 9.404 4.658t4.365 9.111q-4.512-6.387-13.77-6.387v5.098L3.749 15l8.73-8.73v4.98z"/></symbol><symbol id="icon-build" viewBox="0 0 30 30"><title>build</title><path d="M28.359 23.73q.41.234.381.791t-.498.967l-2.871 2.871q-.879.879-1.758 0L12.246 16.992q-2.109.879-4.482.381t-4.131-2.256q-1.875-1.875-2.344-4.453t.703-4.805L7.5 11.25l3.75-3.75-5.391-5.391q2.227-1.055 4.805-.645t4.453 2.285q1.758 1.758 2.256 4.131t-.381 4.482z"/></symbol><symbol id="icon-delete" viewBox="0 0 30 30"><title>delete</title><path d="M23.73 4.98V7.5H6.269V4.98h4.336l1.289-1.23h6.211l1.289 1.23h4.336zM7.5 23.73v-15h15v15q0 .996-.762 1.758t-1.758.762h-9.961q-.996 0-1.758-.762t-.762-1.758z"/></symbol><symbol id="icon-download" viewBox="0 0 30 30"><title>download</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm17.46-11.25L15 19.98l-8.73-8.73h4.98v-7.5h7.5v7.5h4.98z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-eye" viewBox="0 0 30 30"><title>eye</title><path d="M15 11.25q1.523 0 2.637 1.113T18.75 15t-1.113 2.637T15 18.75t-2.637-1.113T11.25 15t1.113-2.637T15 11.25zm0 10.02q2.578 0 4.424-1.846T21.27 15t-1.846-4.424T15 8.73t-4.424 1.846T8.73 15t1.846 4.424T15 21.27zm0-15.645q4.629 0 8.379 2.578T28.77 15q-1.641 4.219-5.391 6.797T15 24.375t-8.379-2.578T1.23 15q1.641-4.219 5.391-6.797T15 5.625z"/></symbol><symbol id="icon-folder" viewBox="0 0 30 30"><title>folder</title><path d="M12.48 4.98L15 7.5h10.02q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5z"/></symbol><symbol id="icon-move" viewBox="0 0 30 30"><title>move</title><path d="M15 11.25l4.98 5.039-4.98 4.98-1.816-1.758 1.992-1.992H10.02v-2.52h5.156l-1.934-1.992zM25.02 22.5V10.02H4.981V22.5H25.02zm0-15q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5l2.52 2.52h10.02z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol><symbol id="icon-upload" viewBox="0 0 30 30"><title>upload</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm4.98-2.52v-7.5H6.27L15 3.75l8.73 8.73h-4.98v7.5h-7.5z"/></symbol></svg>

+ 5
- 0
resources/icons/move.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<title>move</title>
<path d="M15 11.25l4.98 5.039-4.98 4.98-1.816-1.758 1.992-1.992h-5.156v-2.52h5.156l-1.934-1.992zM25.020 22.5v-12.48h-20.039v12.48h20.039zM25.020 7.5q0.996 0 1.729 0.762t0.732 1.758v12.48q0 0.996-0.732 1.758t-1.729 0.762h-20.039q-0.996 0-1.729-0.762t-0.732-1.758v-15q0-0.996 0.732-1.758t1.729-0.762h7.5l2.52 2.52h10.020z"></path>
</svg>

+ 21
- 7
resources/js/components/filemanager/actions.riot View File

@ -1,11 +1,25 @@
<urban-filemanager-actions> <urban-filemanager-actions>
<div class="file-table__row">
<svg class="icon fill-grey mr-2" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
</svg>
<svg class="icon fill-grey mr-2" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-build"></use>
</svg>
<div if={ props.files.length > 0 }>
<div class="buttons">
<span class="filemanager-actions__selected">
<strong>{ props.files.length }</strong> files selected
</span>
<button class="button is-small is-success">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-download"></use>
</svg>
</button>
<button class="button is-small is-danger">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-move"></use>
</svg>
</button>
<button class="button is-small is-danger">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
</svg>
</button>
</div>
</div> </div>
<script> <script>


+ 33
- 8
resources/js/components/filemanager/filemanager.riot View File

@ -1,5 +1,8 @@
<urban-filemanager> <urban-filemanager>
<div class="bucket-filemanager"> <div class="bucket-filemanager">
<div class="file-multi">
<urban-filemanager-actions files={ state.marked }></urban-filemanager-actions>
</div>
<div class="file-table"> <div class="file-table">
<urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent> <urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent>
<template each={ file in state.files }> <template each={ file in state.files }>
@ -70,6 +73,7 @@
riot.register('urban-filemanager-file', File) riot.register('urban-filemanager-file', File)
riot.register('urban-filemanager-directory', Directory) riot.register('urban-filemanager-directory', Directory)
riot.register('urban-filemanager-parent', Parent) riot.register('urban-filemanager-parent', Parent)
riot.register('urban-filemanager-actions', Actions)
export default { export default {
@ -79,6 +83,9 @@
], ],
path: [ path: [
],
marked: [
] ]
}, },
@ -124,6 +131,32 @@
this.files() this.files()
}, },
/**
*
*
*
*
*/
handleMarked(event, file) {
let exists = false
this.state.marked.forEach((f, index) => {
if (file.filename === f.filename) {
exists = true
}
})
if (exists === false) {
this.state.marked.push(file)
} else {
this.state.marked.splice(this.state.marked.indexOf(file), 1)
}
this.update()
},
/** /**
* *
* *
@ -139,14 +172,6 @@
this.update() this.update()
}) })
}, },
/**
*
*
*/
handleMarked() {
console.log('marked')
},
} }
</script> </script>

+ 5
- 5
resources/scss/components/_file-table.scss View File

@ -6,6 +6,11 @@
@mixin component__file-table() @mixin component__file-table()
{ {
.filemanager-actions__selected {
padding: 5px 10px 15px 0;
display: inline-block;
}
.file-table { .file-table {
display: block; display: block;
width: 100%; width: 100%;
@ -64,9 +69,4 @@
} }
} }
} }
.bucket-filemanager {
padding: 10px 15px 15px 15px;
border: 1px solid $grey-light;
}
} }

Loading…
Cancel
Save