Better dropdown menu setup, more options

Still rough
This commit is contained in:
Dane Everitt 2016-10-01 15:40:38 -04:00
parent d812e1a23c
commit 6098f31f9a
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
5 changed files with 50 additions and 29 deletions

View File

@ -185,7 +185,8 @@ class FileRepository
'entry' => $value->name,
'directory' => trim($directory, '/'),
'size' => null,
'date' => strtotime($value->modified)
'date' => strtotime($value->modified),
'mime' => $value->mime
]]);
} else if ($value->file === true) {
@ -195,7 +196,8 @@ class FileRepository
'directory' => trim($directory, '/'),
'extension' => pathinfo($value->name, PATHINFO_EXTENSION),
'size' => HelperRepository::bytesToHuman($value->size),
'date' => strtotime($value->modified)
'date' => strtotime($value->modified),
'mime' => $value->mime
]]);
}

View File

@ -56,14 +56,6 @@
</div>
</div>
</div>
<ul id="fileOptionMenu" class="dropdown-menu" role="menu" style="display:none" >
<li data-action="move"><a tabindex="-1" href="#"><i class="fa fa-arrow-right"></i> Move</a></li>
<li data-action="rename"><a tabindex="-1" href="#"><i class="fa fa-pencil-square-o"></i> Rename</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-archive-o"></i> Compress</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="fa fa-download"></i> Download</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
</ul>
</div>
<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'index.js']) }}"></script>
<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'actions.js']) }}"></script>

View File

@ -30,7 +30,7 @@
</thead>
<tbody>
@if (isset($directory['first']) && $directory['first'] === true)
<tr>
<tr data-type="disabled">
<td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
<td><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr;</a></a></td>
<td></td>
@ -39,7 +39,7 @@
</tr>
@endif
@if (isset($directory['show']) && $directory['show'] === true)
<tr>
<tr data-type="disabled">
<td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
<td><a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory['link']) }}" data-action="directory-view">&larr; {{ $directory['link_show'] }}</a></a></td>
<td></td>
@ -48,9 +48,11 @@
</tr>
@endif
@foreach ($folders as $folder)
<tr class="align-middle" data-path="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}">
<tr class="align-middle" data-type="folder" data-path="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}">
<td data-identifier="type"><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
<td data-identifier="name" data-hash="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}"><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">{{ $folder['entry'] }}</a></td>
<td data-identifier="name" data-hash="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}">
<a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">{{ $folder['entry'] }}</a>
</td>
<td data-identifier="size">{{ $folder['size'] }}</td>
<td data-identifier="modified">{{ date('m/d/y H:i:s', $folder['date']) }}</td>
{{-- <td class="text-center">
@ -68,9 +70,9 @@
</tr>
@endforeach
@foreach ($files as $file)
<tr class="align-middle">
<td><i class="fa fa-file-text" style="margin-left: 2px;"></i></td>
<td>
<tr class="align-middle" data-type="file" data-mime="{{ $file['mime'] }}">
<td data-identifier="type"><i class="fa fa-file-text" style="margin-left: 2px;"></i></td>
<td data-identifier="name" data-hash="@if($file['directory'] !== ''){{ rawurlencode($file['directory']) }}/@endif{{ rawurlencode($file['entry']) }}">
@if(in_array($file['extension'], $extensions))
@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>
@ -81,8 +83,8 @@
{{ $file['entry'] }}
@endif
</td>
<td>{{ $file['size'] }}</td>
<td>{{ date('m/d/y H:i:s', $file['date']) }}</td>
<td data-identifier="size">{{ $file['size'] }}</td>
<td data-identifier="modified">{{ date('m/d/y H:i:s', $file['date']) }}</td>
{{-- <td style="text-align:center;">
<div class="row" style="text-align:center;">
<div class="col-md-3 hidden-xs hidden-sm">

View File

@ -29,30 +29,55 @@ class FileActions {
this.rightClick();
}
makeMenu() {
$(document).find('#fileOptionMenu').remove();
return $('<ul id="fileOptionMenu" class="dropdown-menu" role="menu" style="display:none" > \
<li data-action="move"><a tabindex="-1" href="#"><i class="fa fa-arrow-right"></i> Move</a></li> \
<li data-action="rename"><a tabindex="-1" href="#"><i class="fa fa-pencil-square-o"></i> Rename</a></li> \
<li data-action="compress" class="hidden"><a tabindex="-1" href="#"><i class="fa fa-file-archive-o"></i> Compress</a></li> \
<li data-action="decompress" class="hidden"><a tabindex="-1" href="#"><i class="fa fa-expand"></i> Decompress</a></li> \
<li class="divider"></li> \
<li data-action="download" class="hidden"><a tabindex="-1" href="#"><i class="fa fa-download"></i> Download</a></li> \
<li data-action="delete"><a tabindex="-1" href="#"><i class="fa fa-trash-o"></i> Delete</a></li> \
</ul>');
}
rightClick() {
$('#file_listing > tbody').on('contextmenu', event => {
event.preventDefault();
const parent = $(event.target).parent();
$('#fileOptionMenu').appendTo('body');
$('#fileOptionMenu').data('invokedOn', $(event.target)).show().css({
const parent = $(event.target).parent();
const menu = this.makeMenu();
if (parent.data('type') === 'disabled') return;
event.preventDefault();
menu.appendTo('body');
menu.data('invokedOn', $(event.target)).show().css({
position: 'absolute',
left: event.pageX,
top: event.pageY,
});
if (parent.data('type') === 'file') {
menu.find('li[data-action="download"]').removeClass('hidden');
}
if (_.without(['application/zip', 'application/gzip', 'application/x-gzip'], parent.data('mime')).length < 3) {
menu.find('li[data-action="decompress"]').removeClass('hidden');
}
// Handle Events
var Context = new ContextMenuActions(parent);
$('#fileOptionMenu li[data-action="move"]').unbind().on('click', e => {
menu.find('li[data-action="move"]').unbind().on('click', e => {
Context.move();
});
$('#fileOptionMenu li[data-action="rename"]').unbind().on('click', e => {
menu.find('li[data-action="rename"]').unbind().on('click', e => {
Context.rename();
});
$(window).click(() => {
$('#fileOptionMenu').hide();
$(window).on('click', () => {
menu.remove();
});
});
}

View File

@ -28,7 +28,7 @@ class FileManager {
$('[data-toggle="tooltip"]').tooltip();
}
list(path) {
list(path, isError) {
if (_.isUndefined(path)) {
path = this.decodeHash();
}
@ -54,7 +54,7 @@ class FileManager {
title: 'File Error',
text: 'An error occured while attempting to process this request. Please try again.',
});
this.list('/');
if (!isError) this.list('/', true);
console.log(jqXHR);
}).always(() => {
this.loader(false);