adding

resources/js/components/filemanager/file.riot

@@ -14,16 +14,16 @@
         </div>
         <div class="file-table__column file-table__column--actions">
             <div class="file-table__inner has-text-right">
-                <svg class="icon fill-success mr-1" aria-hidden="true">
+                <svg class="icon fill-success mr-1" aria-hidden="true" disabled onclick={ () => { props.actions.handlePreview(event, this) } }>
                     <use xlink:href="/symbol-defs.svg#icon-eye"></use>
                 </svg>
-                <svg class="icon fill-success mr-1" aria-hidden="true">
+                <svg class="icon fill-success mr-1" aria-hidden="true" onclick={ () => { props.actions.handleDownload(event, this) } }>
                     <use xlink:href="/symbol-defs.svg#icon-download"></use>
                 </svg>
-                <svg class="icon fill-danger mr-1" aria-hidden="true">
+                <svg class="icon fill-danger mr-1" aria-hidden="true" onclick={ () => { props.actions.handleDelete(event, this) } }>
                     <use xlink:href="/symbol-defs.svg#icon-delete"></use>
                 </svg>
-                <svg class="icon fill-grey mr-1" aria-hidden="true">
+                <svg class="icon fill-grey mr-1" aria-hidden="true" onclick={ () => { props.actions.handleMarked(event, this) } }>
                     <use xlink:href="/symbol-defs.svg#icon-build"></use>
                 </svg>
             </div>

resources/js/components/filemanager/filemanager.riot

@@ -3,18 +3,58 @@
         <div class="file-table">
             <urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent>
             <template each={ file in state.files }>
-                <urban-filemanager-file
-                    if={ file.is_file }
-                    file={ file }
-                    handleClick={ handleFileClick }
-                    handleMarked={ handleMarked }
-                ></urban-filemanager-file>
-                <urban-filemanager-directory
-                    if={ !file.is_file }
-                    file={ file }
-                    handleClick={ handleDirectoryClick }
-                    handleMarked={ handleMarked }
-                ></urban-filemanager-directory>
+                <div class="file-table__row">
+                    <div class="file-table__column file-table__column--select" onchange={ (event) => { handleMarked(event, file) } }>
+                        <input type="checkbox" value="true" />
+                    </div>
+
+                    <div if={ file.is_file } class="file-table__column file-table__column--filename">
+                        { file.filename }
+                    </div>
+                    <div if={ !file.is_file } class="file-table__column file-table__column--filename" onclick={ (event) => { handleDirectoryClick(event, file) } }>
+                        <svg class="icon fill-primary mr-2" aria-hidden="true">
+                            <use xlink:href="/symbol-defs.svg#icon-folder"></use>
+                        </svg>
+                        { file.filename }
+                    </div>
+
+                    <div if={ file.is_file } class="file-table__column file-table__column--size">
+                        <div class="file-table__inner has-text-right width-100">{ file.meta.size }</div>
+                    </div>
+
+                    <div if={ file.is_file } class="file-table__column file-table__column--date">
+                        <div class="file-table__inner has-text-right">{ file.meta.updated_at }</div>
+                    </div>
+
+                    <div class="file-table__column file-table__column--actions">
+                        <div class="file-table__inner has-text-right">
+                            <button type="button" disabled={ true } onclick={ (event) => { handlePreview(event, file) } }>
+                                <svg class="icon fill-success mr-1" aria-hidden="true">
+                                    <use xlink:href="/symbol-defs.svg#icon-eye"></use>
+                                </svg>
+                            </button>
+
+                            <button type="button" onclick={ (event) => { handlePreview(event, file) } }>
+                                <svg class="icon fill-success mr-1" aria-hidden="true">
+                                    <use xlink:href="/symbol-defs.svg#icon-download"></use>
+                                </svg>
+                            </button>
+
+                            <button type="button" onclick={ (event) => { handlePreview(event, file) } }>
+                                <svg class="icon fill-danger mr-1" aria-hidden="true">
+                                    <use xlink:href="/symbol-defs.svg#icon-delete"></use>
+                                </svg>
+                            </button>
+
+                            <button type="button" onclick={ (event) => { handlePreview(event, file) } }>
+                                <svg class="icon fill-grey mr-1" aria-hidden="true">
+                                    <use xlink:href="/symbol-defs.svg#icon-build"></use>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                </div>
             </template>
         </div>
     </div>
@@ -42,18 +82,31 @@
             ]
         },
 
+        /**
+         *
+         *
+         *  @param  {[type]} props [description]
+         *  @param  {[type]} state [description]
+         *
+         *
+         */
         onBeforeMount(props, state) {
             state.files = props.files
         },
 
-        handleFileClick() {
-
+        /**
+         *
+         *  @param  {[type]} event [description]
+         *  @param  {[type]} file  [description]
+         *
+         */
+        handlePreview(event, file) {
+            console.log(file)
         },
 
         /**
          *
          *
-         *  @param  {object} event
          *
          */
         handleParentClick(event) {
@@ -67,7 +120,7 @@
          *
          */
         handleDirectoryClick(event, file) {
-            this.state.path.push(file)
+            this.state.path.push(file.filename)
             this.files()
         },
 

resources/scss/components/_file-table.scss

@@ -41,6 +41,26 @@
 
             &--actions {
                 max-width: 180px;
+
+                button {
+                    border: 0;
+                    padding: 0;
+
+                    .icon {
+                        width: 2.4em;
+                        height: 2.4em;
+                    }
+
+                    &:disabled {
+                        .icon {
+                            opacity: 0.3;
+
+                            &:hover {
+                                cursor: not-allowed;
+                            }
+                        }
+                    }
+                }
             }
         }
     }