Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesign parts of the file manager

Browse source 
ignore yarn.lock file
This commit is contained in:
Jakob Schrettenbrunner 2017-01-27 00:44:59 +01:00
parent 0c1559c922
commit c62312b8af
10 changed files with 179 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -9,4 +9,5 @@ Homestead.yaml
Vagrantfile Vagrantfile
Vagrantfile Vagrantfile
node_modules node_modules
yarn.lock

6
public/themes/pterodactyl/js/frontend/files/filemanager.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/themes/pterodactyl/js/frontend/files/filemanager.min.js.map
View file

File diff suppressed because one or more lines are too long

21
public/themes/pterodactyl/js/frontend/files/src/actions.js
View file

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

2
public/themes/pterodactyl/js/frontend/files/src/contextmenu.js
View file

@ -33,7 +33,7 @@ class ContextMenuClass {
$(document).find('#fileOptionMenu').remove(); $(document).find('#fileOptionMenu').remove();
if (!_.isNull(this.activeLine)) this.activeLine.removeClass('active'); 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') { if (parent.data('type') === 'folder') {
const nameBlock = parent.find('td[data-identifier="name"]'); const nameBlock = parent.find('td[data-identifier="name"]');
const currentName = decodeURIComponent(nameBlock.attr('data-name')); const currentName = decodeURIComponent(nameBlock.attr('data-name'));

7
public/themes/pterodactyl/js/frontend/files/src/index.js
View file

@ -44,6 +44,7 @@ class FileManager {
$('#load_files').slideUp(10).html(data).slideDown(10, () => { $('#load_files').slideUp(10).html(data).slideDown(10, () => {
ContextMenu.run(); ContextMenu.run();
this.reloadFilesButton(); this.reloadFilesButton();
this.addFolderButton();
if (_.isFunction(next)) { if (_.isFunction(next)) {
return 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() { decodeHash() {
return decodeURIComponent(window.location.hash.substring(1)); return decodeURIComponent(window.location.hash.substring(1));
} }

2
public/themes/pterodactyl/js/frontend/files/upload.js
View file

@ -84,7 +84,7 @@
window.onbeforeunload = function () { window.onbeforeunload = function () {
return 'A file upload in in progress, are you sure you want to continue?'; 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); event.file.meta.identifier = Math.random().toString(36).slice(2);
$('#append_files_to').append('<tr id="file-upload-' + event.file.meta.identifier +'"> \ $('#append_files_to').append('<tr id="file-upload-' + event.file.meta.identifier +'"> \

1
resources/lang/en/server.php
View file

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

6
resources/themes/pterodactyl/server/files/index.blade.php
View file

@ -38,8 +38,10 @@
<div class="col-xs-12"> <div class="col-xs-12">
<div class="box box-primary"> <div class="box box-primary">
<div class="overlay file-overlay"><i class="fa fa-refresh fa-spin"></i></div> <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="callout callout-info" style="margin:10px;">@lang('server.files.loading')</div> <div class="box-body table-responsive no-padding">
<div class="callout callout-info" style="margin:10px;">@lang('server.files.loading')</div>
</div>
</div> </div>
<div class="box-footer with-border"> <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> <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>

287
resources/themes/pterodactyl/server/files/list.blade.php
View file

@ -17,148 +17,151 @@
{{-- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, --}} {{-- 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 --}} {{-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE --}}
{{-- SOFTWARE. --}} {{-- SOFTWARE. --}}
<table class="table table-hover" id="file_listing">
<thead> <div class="box-header">
<tr> <i class="fa fa-refresh muted muted-hover use-pointer" data-action="reload-files"></i>
<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> <code class="box-title">/home/container{{ $directory['header'] }}</code>
<th style="width:55%">@lang('server.files.file_name')</th> <a class="text-muted">
<th style="width:15%" class="hidden-xs">@lang('server.files.size')</th> <i class="fa fa-plus" data-action="add-folder" data-toggle="tooltip" data-placement="top" title="@lang('server.files.add_folder')"></i>
<th style="width:20%" class="hidden-xs">@lang('server.files.last_modified')</th> </a>
<th style="width:8%"> <div class="box-tools pull-right">
<label class="btn btn-primary btn-xs btn-file"> <a class="btn btn-primary btn-sm" href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif">
Upload <input type="file" id="files_touch_target" style="display: none;"/> <i class="fa fa-file"></i> Create File
</label> </a>
</th> <a class="btn btn-primary btn-sm btn-icon btn-file">
</tr> <i class="fa fa-upload"></i> Upload <input type="file" id="files_touch_target" style="display: none;">
<tr id="headerTableRow" data-currentdir="{{ $directory['header'] }}"> </a>
<th><i class="fa fa-folder-open"></i></th> </div>
<th colspan="4"> </div>
<code>/home/container{{ $directory['header'] }}</code> <div class="box-body table-responsive no-padding">
<small> <table class="table table-hover" id="file_listing" data-current-dir="{{ $directory['header'] }}">
<a href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif" class="text-muted"> <thead>
<i class="fa fa-plus" data-toggle="tooltip" data-placement="top" title="@lang('server.files.add_new')"></i> <tr>
</a> <th style="width:2%;" class="middle"></th>
</small> <th style="width:55%">@lang('server.files.file_name')</th>
</th> <th style="width:15%" class="hidden-xs">@lang('server.files.size')</th>
</tr> <th style="width:20%" class="hidden-xs">@lang('server.files.last_modified')</th>
</thead> <th style="width:8%"></th>
<tbody id="append_files_to">
@if (isset($directory['first']) && $directory['first'] === true)
<tr data-type="disabled">
<td><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td>
<td><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr;</a></a></td>
<td class="hidden-xs"></td>
<td class="hidden-xs"></td>
<td></td>
</tr> </tr>
@endif </thead>
@if (isset($directory['show']) && $directory['show'] === true) <tbody id="append_files_to">
<tr data-type="disabled"> @if (isset($directory['first']) && $directory['first'] === true)
<td><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td> <tr data-type="disabled">
<td data-name="{{ rawurlencode($directory['link']) }}"> <td><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td>
<a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr; {{ $directory['link_show'] }}</a> <td><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr;</a></a></td>
</td> <td class="hidden-xs"></td>
<td class="hidden-xs"></td> <td class="hidden-xs"></td>
<td class="hidden-xs"></td> <td></td>
<td></td> </tr>
</tr> @endif
@endif @if (isset($directory['show']) && $directory['show'] === true)
@foreach ($folders as $folder) <tr data-type="disabled">
<tr data-type="folder"> <td><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td>
<td data-identifier="type" class="middle"><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td> <td data-name="{{ rawurlencode($directory['link']) }}">
<td data-identifier="name" data-name="{{ rawurlencode($folder['entry']) }}" data-path="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}@endif/"> <a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr; {{ $directory['link_show'] }}</a>
<a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">{{ $folder['entry'] }}</a> </td>
</td> <td class="hidden-xs"></td>
<td data-identifier="size" class="hidden-xs">{{ $folder['size'] }}</td> <td class="hidden-xs"></td>
<td data-identifier="modified" class="hidden-xs"> <td></td>
<?php $carbon = Carbon::createFromTimestamp($folder['date'])->timezone(env('APP_TIMEZONE', 'America/New_York')); ?> </tr>
@if($carbon->diffInMinutes(Carbon::now()) > 60) @endif
{{ $carbon->format('m/d/y H:i:s') }} @foreach ($folders as $folder)
@elseif($carbon->diffInSeconds(Carbon::now()) < 5 || $carbon->isFuture()) <tr data-type="folder">
<em>@lang('server.files.seconds_ago')</em> <td data-identifier="type" class="middle"><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td>
@else <td data-identifier="name" data-name="{{ rawurlencode($folder['entry']) }}" data-path="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}@endif/">
{{ $carbon->diffForHumans() }} <a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">{{ $folder['entry'] }}</a>
@endif </td>
</td> <td data-identifier="size" class="hidden-xs">{{ $folder['size'] }}</td>
<td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button></td> <td data-identifier="modified" class="hidden-xs">
</tr> <?php $carbon = Carbon::createFromTimestamp($folder['date'])->timezone(env('APP_TIMEZONE', 'America/New_York')); ?>
@endforeach @if($carbon->diffInMinutes(Carbon::now()) > 60)
@foreach ($files as $file) {{ $carbon->format('m/d/y H:i:s') }}
<tr data-type="file" data-mime="{{ $file['mime'] }}"> @elseif($carbon->diffInSeconds(Carbon::now()) < 5 || $carbon->isFuture())
<td data-identifier="type" class="middle"> <em>@lang('server.files.seconds_ago')</em>
{{-- oh boy --}} @else
@if(in_array($file['mime'], [ {{ $carbon->diffForHumans() }}
'application/x-7z-compressed', @endif
'application/zip', </td>
'application/x-compressed-zip', <td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button></td>
'application/x-tar', </tr>
'application/x-gzip', @endforeach
'application/x-bzip', @foreach ($files as $file)
'application/x-bzip2', <tr data-type="file" data-mime="{{ $file['mime'] }}">
'application/java-archive' <td data-identifier="type" class="middle">
])) {{-- oh boy --}}
<i class="fa fa-file-archive-o" style="margin-left: 2px;"></i> @if(in_array($file['mime'], [
@elseif(in_array($file['mime'], [ 'application/x-7z-compressed',
'application/json', 'application/zip',
'application/javascript', 'application/x-compressed-zip',
'application/xml', 'application/x-tar',
'application/xhtml+xml', 'application/x-gzip',
'text/xml', 'application/x-bzip',
'text/css', 'application/x-bzip2',
'text/html', 'application/java-archive'
'text/x-perl', ]))
'text/x-shellscript' <i class="fa fa-file-archive-o" style="margin-left: 2px;"></i>
])) @elseif(in_array($file['mime'], [
<i class="fa fa-file-code-o" style="margin-left: 2px;"></i> 'application/json',
@elseif(starts_with($file['mime'], 'image')) 'application/javascript',
<i class="fa fa-file-image-o" style="margin-left: 2px;"></i> 'application/xml',
@elseif(starts_with($file['mime'], 'video')) 'application/xhtml+xml',
<i class="fa fa-file-video-o" style="margin-left: 2px;"></i> 'text/xml',
@elseif(starts_with($file['mime'], 'video')) 'text/css',
<i class="fa fa-file-audio-o" style="margin-left: 2px;"></i> 'text/html',
@elseif(starts_with($file['mime'], 'application/vnd.ms-powerpoint')) 'text/x-perl',
<i class="fa fa-file-powerpoint-o" style="margin-left: 2px;"></i> 'text/x-shellscript'
@elseif(in_array($file['mime'], [ ]))
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', <i class="fa fa-file-code-o" style="margin-left: 2px;"></i>
'application/vnd.openxmlformats-officedocument.wordprocessingml.template', @elseif(starts_with($file['mime'], 'image'))
'application/msword' <i class="fa fa-file-image-o" style="margin-left: 2px;"></i>
]) || starts_with($file['mime'], 'application/vnd.ms-word')) @elseif(starts_with($file['mime'], 'video'))
<i class="fa fa-file-word-o" style="margin-left: 2px;"></i> <i class="fa fa-file-video-o" style="margin-left: 2px;"></i>
@elseif(in_array($file['mime'], [ @elseif(starts_with($file['mime'], 'video'))
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', <i class="fa fa-file-audio-o" style="margin-left: 2px;"></i>
'application/vnd.openxmlformats-officedocument.spreadsheetml.template', @elseif(starts_with($file['mime'], 'application/vnd.ms-powerpoint'))
]) || starts_with($file['mime'], 'application/vnd.ms-excel')) <i class="fa fa-file-powerpoint-o" style="margin-left: 2px;"></i>
<i class="fa fa-file-excel-o" style="margin-left: 2px;"></i> @elseif(in_array($file['mime'], [
@elseif($file['mime'] === 'application/pdf') 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
<i class="fa fa-file-pdf-o" style="margin-left: 2px;"></i> 'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
@else 'application/msword'
<i class="fa fa-file-text-o" style="margin-left: 2px;"></i> ]) || starts_with($file['mime'], 'application/vnd.ms-word'))
@endif <i class="fa fa-file-word-o" style="margin-left: 2px;"></i>
</td> @elseif(in_array($file['mime'], [
<td data-identifier="name" data-name="{{ rawurlencode($file['entry']) }}" data-path="@if($file['directory'] !== ''){{ rawurlencode($file['directory']) }}@endif/"> 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
@if(in_array($file['mime'], $editableMime)) 'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
@can('edit-files', $server) ]) || starts_with($file['mime'], 'application/vnd.ms-excel'))
<a href="/server/{{ $server->uuidShort }}/files/edit/@if($file['directory'] !== ''){{ rawurlencode($file['directory']) }}/@endif{{ rawurlencode($file['entry']) }}" class="edit_file">{{ $file['entry'] }}</a> <i class="fa fa-file-excel-o" style="margin-left: 2px;"></i>
@elseif($file['mime'] === 'application/pdf')
<i class="fa fa-file-pdf-o" style="margin-left: 2px;"></i>
@else
<i class="fa fa-file-text-o" style="margin-left: 2px;"></i>
@endif
</td>
<td data-identifier="name" data-name="{{ rawurlencode($file['entry']) }}" data-path="@if($file['directory'] !== ''){{ rawurlencode($file['directory']) }}@endif/">
@if(in_array($file['mime'], $editableMime))
@can('edit-files', $server)
<a href="/server/{{ $server->uuidShort }}/files/edit/@if($file['directory'] !== ''){{ rawurlencode($file['directory']) }}/@endif{{ rawurlencode($file['entry']) }}" class="edit_file">{{ $file['entry'] }}</a>
@else
{{ $file['entry'] }}
@endcan
@else @else
{{ $file['entry'] }} {{ $file['entry'] }}
@endcan @endif
@else </td>
{{ $file['entry'] }} <td data-identifier="size" class="hidden-xs">{{ $file['size'] }}</td>
@endif <td data-identifier="modified" class="hidden-xs">
</td> <?php $carbon = Carbon::createFromTimestamp($file['date'])->timezone(env('APP_TIMEZONE', 'America/New_York')); ?>
<td data-identifier="size" class="hidden-xs">{{ $file['size'] }}</td> @if($carbon->diffInMinutes(Carbon::now()) > 60)
<td data-identifier="modified" class="hidden-xs"> {{ $carbon->format('m/d/y H:i:s') }}
<?php $carbon = Carbon::createFromTimestamp($file['date'])->timezone(env('APP_TIMEZONE', 'America/New_York')); ?> @elseif($carbon->diffInSeconds(Carbon::now()) < 5 || $carbon->isFuture())
@if($carbon->diffInMinutes(Carbon::now()) > 60) <em>@lang('server.files.seconds_ago')</em>
{{ $carbon->format('m/d/y H:i:s') }} @else
@elseif($carbon->diffInSeconds(Carbon::now()) < 5 || $carbon->isFuture()) {{ $carbon->diffForHumans() }}
<em>@lang('server.files.seconds_ago')</em> @endif
@else </td>
{{ $carbon->diffForHumans() }} <td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button></td>
@endif </tr>
</td> @endforeach
<td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button></td> </tbody>
</tr> </table>
@endforeach </div>
</tbody>
</table>