New button in file manager that triggers the right click menu

Enable’s support on mobile devices and those who cannot right click
(blessed be them)

closes #182

CHANGELOG.md

@@ -6,6 +6,7 @@ This project follows [Semantic Versioning](http://semver.org) guidelines.
 ## v0.5.4 (Bodacious Boreopterus)
 ### Added
 * Changing node configuration values now automatically makes a call to the daemon and updates the configuration there. Changing daemon tokens now does not require any intervention, and takes effect immediately. SSL & Port configurations will still require a daemon reboot.
+* New button in file manager that triggers the right click menu to enable support on mobile devices and those who cannot right click (blessed be them).
 
 ### Changed
 * File uploads now account for a maximum file size that is assigned for the daemon, and gives cleaner errors when that limit is reached.

resources/views/server/files/list.blade.php

@@ -21,13 +21,14 @@
     <thead>
         <tr>
             <th style="width:2%;text-align:center;"><i class="fa fa-refresh muted muted-hover use-pointer" data-action="reload-files"></i></th>
-            <th style="width:45%">File Name</th>
+            <th style="width:55%">File Name</th>
             <th style="width:15%">Size</th>
             <th style="width:20%">Last Modified</th>
+            <th style="width:8%"></th>
         </tr>
         <tr id="headerTableRow" data-currentdir="{{ $directory['header'] }}">
             <th><i class="fa fa-folder-open"></i></th>
-            <th colspan="3">
+            <th colspan="4">
                 <code>/home/container{{ $directory['header'] }}</code>
                 <small>
                     <a href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif" class="text-muted">
@@ -44,6 +45,7 @@
                 <td><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr;</a></a></td>
                 <td></td>
                 <td></td>
+                <td></td>
             </tr>
         @endif
         @if (isset($directory['show']) && $directory['show'] === true)
@@ -54,6 +56,7 @@
                 </td>
                 <td></td>
                 <td></td>
+                <td></td>
             </tr>
         @endif
         @foreach ($folders as $folder)
@@ -73,6 +76,7 @@
                         {{ $carbon->diffForHumans() }}
                     @endif
                 </td>
+                <td><button class="btn btn-xxs btn-default" data-action="toggleMenu" style="padding:0px 6px;"><i class="fa fa-ellipsis-h"></i></button></td>
             </tr>
         @endforeach
         @foreach ($files as $file)
@@ -149,6 +153,7 @@
                         {{ $carbon->diffForHumans() }}
                     @endif
                 </td>
+                <td><button class="btn btn-xxs btn-default" data-action="toggleMenu" style="padding:0px 6px;"><i class="fa fa-ellipsis-h"></i></button></td>
             </tr>
         @endforeach
     </tbody>

resources/views/server/js/filemanager/contextmenu.blade.php

@@ -56,8 +56,16 @@ class ContextMenuClass {
     }
 
     rightClick() {
+        $('[data-action="toggleMenu"]').on('mousedown', () => {
+            event.preventDefault();
+            this.showMenu(event);
+        });
         $('#file_listing > tbody td').on('contextmenu', event => {
+            this.showMenu(event);
+        });
+    }
 
+    showMenu(event) {
         const parent = $(event.target).closest('tr');
         const menu = $(this.makeMenu(parent));
 
@@ -67,7 +75,7 @@ class ContextMenuClass {
         $(menu).appendTo('body');
         $(menu).data('invokedOn', $(event.target)).show().css({
             position: 'absolute',
-                left: event.pageX,
+            left: event.pageX - 150,
             top: event.pageY,
         });
 
@@ -152,7 +160,6 @@ class ContextMenuClass {
             $(menu).remove();
             if(!_.isNull(this.activeLine)) this.activeLine.removeClass('active');
         });
-        });
     }
 
     directoryClick() {