adding

public/symbol-defs.svg

@@ -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>

resources/icons/move.svg

@@ -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>

resources/js/components/filemanager/actions.riot

@@ -1,11 +1,25 @@
 <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>
     <script>
 

resources/js/components/filemanager/filemanager.riot

@@ -1,5 +1,8 @@
 <urban-filemanager>
     <div class="bucket-filemanager">
+        <div class="file-multi">
+            <urban-filemanager-actions files={ state.marked }></urban-filemanager-actions>
+        </div>
         <div class="file-table">
             <urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent>
             <template each={ file in state.files }>
@@ -70,6 +73,7 @@
     riot.register('urban-filemanager-file', File)
     riot.register('urban-filemanager-directory', Directory)
     riot.register('urban-filemanager-parent', Parent)
+    riot.register('urban-filemanager-actions', Actions)
 
     export default {
 
@@ -79,6 +83,9 @@
             ],
             path: [
 
+            ],
+            marked: [
+
             ]
         },
 
@@ -124,6 +131,32 @@
             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()
             })
         },
-
-        /**
-         *
-         *
-         */
-        handleMarked() {
-            console.log('marked')
-        },
     }
 
     </script>

resources/scss/components/_file-table.scss

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