redesign parts of the file manager

ignore yarn.lock file

.gitignore

@@ -10,3 +10,4 @@ Vagrantfile
 Vagrantfile
 
 node_modules
+yarn.lock

public/themes/pterodactyl/js/frontend/files/src/actions.js

@@ -29,15 +29,22 @@ class ActionsClass {
         this.element = undefined;
     }
 
-    folder() {
+    folder(path) {
+        let inputValue
+        if (path) {
+            inputValue = path
+        } else {
             const nameBlock = $(this.element).find('td[data-identifier="name"]');
-        const currentName = decodeURIComponent(nameBlock.attr('data-name'));
+            const currentName = decodeURIComponent(nameBlock.data('name'));
             const currentPath = decodeURIComponent(nameBlock.data('path'));
 
-        let inputValue = `${currentPath}${currentName}/`;
             if ($(this.element).data('type') === 'file') {
                 inputValue = currentPath;
+            } else {
+                inputValue = `${currentPath}${currentName}/`;
             }
+        }
+
         swal({
             type: 'input',
             title: 'Create Folder',

public/themes/pterodactyl/js/frontend/files/src/contextmenu.js

@@ -33,7 +33,7 @@ class ContextMenuClass {
         $(document).find('#fileOptionMenu').remove();
         if (!_.isNull(this.activeLine)) this.activeLine.removeClass('active');
 
-        let newFilePath = $('#headerTableRow').attr('data-currentDir');
+        let newFilePath = $('#file_listing').data('current-dir');
         if (parent.data('type') === 'folder') {
             const nameBlock = parent.find('td[data-identifier="name"]');
             const currentName = decodeURIComponent(nameBlock.attr('data-name'));

public/themes/pterodactyl/js/frontend/files/src/index.js

@@ -44,6 +44,7 @@ class FileManager {
             $('#load_files').slideUp(10).html(data).slideDown(10, () => {
                 ContextMenu.run();
                 this.reloadFilesButton();
+                this.addFolderButton();
                 if (_.isFunction(next)) {
                     return next();
                 }
@@ -82,6 +83,12 @@ class FileManager {
         });
     }
 
+    addFolderButton() {
+        $('i[data-action="add-folder"]').unbind().on('click', () => {
+            new ActionsClass().folder($('#file_listing').data('current-dir') || '/');
+        })
+    }
+
     decodeHash() {
         return decodeURIComponent(window.location.hash.substring(1));
     }

public/themes/pterodactyl/js/frontend/files/upload.js

@@ -84,7 +84,7 @@
         window.onbeforeunload = function () {
             return 'A file upload in in progress, are you sure you want to continue?';
         };
-        event.file.meta.path = $('#headerTableRow').attr('data-currentdir');
+        event.file.meta.path = $('#file_listing').data('current-dir');
         event.file.meta.identifier = Math.random().toString(36).slice(2);
 
         $('#append_files_to').append('<tr id="file-upload-' + event.file.meta.identifier +'"> \

resources/lang/en/server.php

@@ -212,6 +212,7 @@ return [
         'size' => 'Size',
         'last_modified' => 'Last Modified',
         'add_new' => 'Add New File',
+        'add_folder' => 'Add New Folder',
         'edit' => [
             'header' => 'Edit File',
             'header_sub' => 'Make modifications to a file from the web.',

resources/themes/pterodactyl/server/files/index.blade.php

@@ -38,9 +38,11 @@
     <div class="col-xs-12">
         <div class="box box-primary">
             <div class="overlay file-overlay"><i class="fa fa-refresh fa-spin"></i></div>
-            <div class="box-body table-responsive no-padding" id="load_files">
+            <div id="load_files">
+                <div class="box-body table-responsive no-padding">
                     <div class="callout callout-info" style="margin:10px;">@lang('server.files.loading')</div>
                 </div>
+            </div>
             <div class="box-footer with-border">
                 <p class="text-muted small" style="margin: 0 0 2px;">@lang('server.files.path', ['path' => '<code>/home/container</code>', 'size' => '<code>' . $node->upload_size . ' MB</code>'])</p>
             </div>

resources/themes/pterodactyl/server/files/list.blade.php

@@ -17,29 +17,31 @@
 {{-- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, --}}
 {{-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE --}}
 {{-- SOFTWARE. --}}
-<table class="table table-hover" id="file_listing">
+
+<div class="box-header">
+    <i class="fa fa-refresh muted muted-hover use-pointer" data-action="reload-files"></i>
+    <code class="box-title">/home/container{{ $directory['header'] }}</code>
+    <a class="text-muted">
+        <i class="fa fa-plus" data-action="add-folder" data-toggle="tooltip" data-placement="top" title="@lang('server.files.add_folder')"></i>
+    </a>
+    <div class="box-tools pull-right">
+        <a class="btn btn-primary btn-sm" href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif">
+            <i class="fa fa-file"></i> Create File
+        </a>
+        <a class="btn btn-primary btn-sm btn-icon btn-file">
+            <i class="fa fa-upload"></i> Upload <input type="file" id="files_touch_target" style="display: none;">
+        </a>
+    </div>
+</div>
+<div class="box-body table-responsive no-padding">
+    <table class="table table-hover" id="file_listing" data-current-dir="{{ $directory['header'] }}">
         <thead>
             <tr>
-            <th style="width:2%;text-align:center;" class="middle"><i class="fa fa-refresh muted muted-hover use-pointer" data-action="reload-files"></i></th>
+                <th style="width:2%;" class="middle"></th>
                 <th style="width:55%">@lang('server.files.file_name')</th>
                 <th style="width:15%" class="hidden-xs">@lang('server.files.size')</th>
                 <th style="width:20%" class="hidden-xs">@lang('server.files.last_modified')</th>
-            <th style="width:8%">
+                <th style="width:8%"></th>
-                <label class="btn btn-primary btn-xs btn-file">
-                    Upload <input type="file" id="files_touch_target" style="display: none;"/>
-                </label>
-            </th>
-        </tr>
-        <tr id="headerTableRow" data-currentdir="{{ $directory['header'] }}">
-            <th><i class="fa fa-folder-open"></i></th>
-            <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">
-                        <i class="fa fa-plus" data-toggle="tooltip" data-placement="top" title="@lang('server.files.add_new')"></i>
-                    </a>
-                </small>
-            </th>
             </tr>
         </thead>
         <tbody id="append_files_to">
@@ -161,4 +163,5 @@
                 </tr>
             @endforeach
         </tbody>
-</table>
+    </table>
+</div>