diff options
Diffstat (limited to 'apps/files')
| -rw-r--r-- | apps/files/css/files.css | 190 | ||||
| -rw-r--r-- | apps/files/index.php | 2 | ||||
| -rw-r--r-- | apps/files/js/file-upload.js | 12 | ||||
| -rw-r--r-- | apps/files/js/filelist.js | 12 | ||||
| -rw-r--r-- | apps/files/js/files.js | 22 | ||||
| -rw-r--r-- | apps/files/templates/index.php | 29 | ||||
| -rw-r--r-- | apps/files/templates/part.list.php | 32 |
7 files changed, 239 insertions, 60 deletions
diff --git a/apps/files/css/files.css b/apps/files/css/files.css index a9b93dc2dee..be2af2d1aa5 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -19,10 +19,13 @@ background:#f8f8f8; border:1px solid #ddd; border-radius:10px; border-top-left-radius:0; box-shadow:0 2px 7px rgba(170,170,170,.4); } -#new>ul>li { height:20px; margin:.3em; padding-left:2em; padding-bottom:0.1em; +#new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em; background-repeat:no-repeat; cursor:pointer; } -#new>ul>li>p { cursor:pointer; } -#new>ul>li>form>input { padding:0.3em; margin:-0.3em; } +#new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;} +#new>ul>li>form>input { + padding: 5px; + margin: 2px 0; +} #trash { margin: 0 1em; z-index:1010; float: right; } @@ -72,7 +75,10 @@ color:#888; text-shadow:#fff 0 1px 0; } #filestable { position: relative; top:37px; width:100%; } -tbody tr { background-color:#fff; height:2.5em; } +tbody tr { + background-color: #fff; + height: 50px; +} tbody tr:hover, tbody tr:active { background-color: rgb(240,240,240); } @@ -85,54 +91,153 @@ span.extension { text-transform:lowercase; -ms-filter:"progid:DXImageTransform.M tr:hover span.extension { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; color:#777; } table tr.mouseOver td { background-color:#eee; } table th { height:2em; padding:0 .5em; color:#999; } -table th .name { float:left; margin-left:.5em; } +table th .name { + position: absolute; + left: 55px; + top: 15px; +} table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; } -table td { border-bottom:1px solid #eee; font-style:normal; background-position:1em .5em; background-repeat:no-repeat; } -table th#headerName { width:100em; /* not really sure why this works better than 100% … table styling */ } -table th#headerSize, table td.filesize { min-width:3em; padding:0 1em; text-align:right; } -table th#headerDate, table td.date { min-width:11em; padding:0 .1em 0 1em; text-align:left; } +table td { + border-bottom: 1px solid #eee; + font-style: normal; + background-position: 8px center; + background-repeat: no-repeat; +} +table th#headerName { + position: relative; + width: 100em; /* not really sure why this works better than 100% … table styling */ + padding: 0; +} +#headerName-container { + position: relative; + height: 50px; +} +table th#headerSize, table td.filesize { + min-width: 3em; + padding: 0 1em; + text-align: right; +} +table th#headerDate, table td.date { + -moz-box-sizing: border-box; + box-sizing: border-box; + position: relative; + min-width: 11em; + display: block; + height: 51px; +} /* Multiselect bar */ -#filestable.multiselect { top:63px; } +#filestable.multiselect { + top: 88px; +} table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 80px; width:100%; } + table.multiselect thead th { background-color: rgba(210,210,210,.7); color: #000; font-weight: bold; border-bottom: 0; } -table.multiselect #headerName { width: 100%; } +table.multiselect #headerName { + position: relative; + width: 100%; +} table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } -table td.filename a.name { display:block; height:1.5em; vertical-align:middle; margin-left:3em; } +table td.filename a.name { + position:relative; /* Firefox needs to explicitly have this default set … */ + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block; + height: 50px; + vertical-align: middle; + padding: 0; +} table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; } -table td.filename input.filename { width:100%; cursor:text; } -table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.2em .5em .5em 0; } +table td.filename input.filename { + width: 80%; + font-size: 14px; + margin-top: 8px; + margin-left: 2px; + cursor: text; +} +table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.2em .5em .5em .3em; } table td.filename .nametext, .uploadtext, .modified { float:left; padding:.3em 0; } + +#modified { + position: absolute; + top: 15px; +} +.modified { + position: relative; + top: 11px; + left: 5px; +} + /* TODO fix usability bug (accidental file/folder selection) */ -table td.filename .nametext { overflow:hidden; text-overflow:ellipsis; max-width:800px; } +table td.filename .nametext { + position: absolute; + top: 16px; + left: 55px; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; + max-width: 800px; +} table td.filename .uploadtext { font-weight:normal; margin-left:.5em; } table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; } + /* File checkboxes */ -#fileList tr td.filename>input[type="checkbox"]:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; float:left; margin:.7em 0 0 1em; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ -webkit-transition:opacity 200ms; -moz-transition:opacity 200ms; -o-transition:opacity 200ms; transition:opacity 200ms; } -#fileList tr td.filename>input[type="checkbox"]:hover:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; } -/* Always show checkbox when selected */ -#fileList tr td.filename>input[type="checkbox"]:checked:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } -#fileList tr.selected td.filename>input[type="checkbox"]:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } +#fileList tr td.filename>input[type="checkbox"]:first-child { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + float: left; + margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ +} +/* Show checkbox when hovering, checked, or selected */ +#fileList tr:hover td.filename>input[type="checkbox"]:first-child, +#fileList tr td.filename>input[type="checkbox"]:checked:first-child, +#fileList tr.selected td.filename>input[type="checkbox"]:first-child { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} +/* Use label to have bigger clickable size for checkbox */ +#fileList tr td.filename>input[type="checkbox"] + label, +#select_all + label { + height: 50px; + position: absolute; + width: 50px; + z-index: 5; +} +#fileList tr td.filename>input[type="checkbox"] + label { + left: 0; +} +#select_all + label { + top: 0; +} +#select_all { + position: absolute; + top: 18px; + left: 18px; +} + #fileList tr td.filename { position:relative; width:100%; -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms; } -#select_all { float:left; margin:.4em 0.6em 0 .5em; } + #uploadsize-message,#delete-confirm { display:none; } /* File actions */ .fileactions { - position:absolute; top:.6em; right:0; - font-size:.8em; + position: absolute; + top: 16px; + right: 0; + font-size: 11px; } -#fileList .name { position:relative; /* Firefox needs to explicitly have this default set … */ } #fileList tr:hover .fileactions { /* background to distinguish when overlaying with file names */ background-color: rgba(240,240,240,0.898); box-shadow: -5px 0 7px rgba(240,240,240,0.898); @@ -142,15 +247,39 @@ table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; } box-shadow: -5px 0 7px rgba(230,230,230,.9); } #fileList .fileactions a.action img { position:relative; top:.2em; } -#fileList a.action { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; } + #fileList img.move2trash { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; float:right; } -a.action.delete { float:right; } +#fileList a.action.delete { + position: absolute; + right: 0; + top: 0; + margin: 0; + padding: 15px 14px 19px !important; +} a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; } -.selectedActions { display:none; float:right; } -.selectedActions a { display:inline; margin:-.5em 0; padding:.5em !important; } -.selectedActions a img { position:relative; top:.3em; } + +/* Actions for selected files */ +.selectedActions { + display: none; + position: absolute; + top: -1px; + right: 0; + padding: 15px 8px; +} +.selectedActions a { + display: inline; + padding: 17px 5px; +} +.selectedActions a img { + position:relative; + top:.3em; +} + #fileList a.action { + display: inline; + margin: -.5em 0; + padding: 18px 8px !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; @@ -185,9 +314,8 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; } padding-bottom: 8px; border-bottom: none; } - .summary .info { - margin-left: 3em; + margin-left: 55px; } #scanning-message{ top:40%; left:40%; position:absolute; display:none; } diff --git a/apps/files/index.php b/apps/files/index.php index e4d8e353858..f1e120c872c 100644 --- a/apps/files/index.php +++ b/apps/files/index.php @@ -74,6 +74,7 @@ foreach ($content as $i) { } } $i['directory'] = $dir; + $i['isPreviewAvailable'] = \OCP\Preview::isMimeSupported($i['mimetype']); $files[] = $i; } @@ -95,6 +96,7 @@ $list->assign('files', $files); $list->assign('baseURL', OCP\Util::linkTo('files', 'index.php') . '?dir='); $list->assign('downloadURL', OCP\Util::linkToRoute('download', array('file' => '/'))); $list->assign('disableSharing', false); +$list->assign('isPublic', false); $breadcrumbNav = new OCP\Template('files', 'part.breadcrumb', ''); $breadcrumbNav->assign('breadcrumb', $breadcrumb); $breadcrumbNav->assign('baseURL', OCP\Util::linkTo('files', 'index.php') . '?dir='); diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 1e6ab74fb6d..3d620c5640b 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -227,7 +227,7 @@ $(document).ready(function() { $(this).data('text',text); $(this).children('p').remove(); var form=$('<form></form>'); - var input=$('<input>'); + var input=$('<input type="text">'); form.append(input); $(this).append(form); input.focus(); @@ -268,8 +268,9 @@ $(document).ready(function() { tr.attr('data-mime',result.data.mime); tr.attr('data-id', result.data.id); tr.find('.filesize').text(humanFileSize(result.data.size)); - getMimeIcon(result.data.mime,function(path){ - tr.find('td.filename').attr('style','background-image:url('+path+')'); + var path = getPathForPreview(name); + lazyLoadPreview(path, result.data.mime, function(previewpath){ + tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); } else { OC.dialogs.alert(result.data.message, t('core', 'Error')); @@ -330,8 +331,9 @@ $(document).ready(function() { var tr=$('tr').filterAttr('data-file',localName); tr.data('mime',mime).data('id',id); tr.attr('data-id', id); - getMimeIcon(mime,function(path){ - tr.find('td.filename').attr('style','background-image:url('+path+')'); + var path = $('#dir').val()+'/'+localName; + lazyLoadPreview(path, mime, function(previewpath){ + tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); }); eventSource.listen('error',function(error){ diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index e11cc70802b..05e31094502 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -15,9 +15,10 @@ var FileList={ // filename td td = $('<td></td>').attr({ "class": "filename", - "style": 'background-image:url('+iconurl+'); background-size: 16px;' + "style": 'background-image:url('+iconurl+'); background-size: 32px;' }); - td.append('<input type="checkbox" />'); + var rand = Math.random().toString(16).slice(2); + td.append('<input id="select-'+rand+'" type="checkbox" /><label for="select-'+rand+'"></label>'); var link_elem = $('<a></a>').attr({ "class": "name", "href": linktarget @@ -187,8 +188,9 @@ var FileList={ if (id != null) { tr.attr('data-id', id); } - getMimeIcon(mime,function(path){ - tr.find('td.filename').attr('style','background-image:url('+path+')'); + var path = getPathForPreview(name); + lazyLoadPreview(path, mime, function(previewpath){ + tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); tr.find('td.filename').draggable(dragOptions); }, @@ -200,7 +202,7 @@ var FileList={ tr=$('tr').filterAttr('data-file',name); tr.data('renaming',true); td=tr.children('td.filename'); - input=$('<input class="filename"/>').val(name); + input=$('<input type="text" class="filename"/>').val(name); form=$('<form></form>'); form.append(input); td.children('a.name').hide(); diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 87311237e36..d729077ea72 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -454,8 +454,9 @@ var createDragShadow = function(event){ if (elem.type === 'dir') { newtr.find('td.filename').attr('style','background-image:url('+OC.imagePath('core', 'filetypes/folder.png')+')'); } else { - getMimeIcon(elem.mime,function(path){ - newtr.find('td.filename').attr('style','background-image:url('+path+')'); + var path = getPathForPreview(elem.name); + lazyLoadPreview(path, elem.mime, function(previewpath){ + newtr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); } }); @@ -631,6 +632,23 @@ function getMimeIcon(mime, ready){ } getMimeIcon.cache={}; +function getPathForPreview(name) { + var path = $('#dir').val() + '/' + name; + return path; +} + +function lazyLoadPreview(path, mime, ready) { + getMimeIcon(mime,ready); + var x = $('#filestable').data('preview-x'); + var y = $('#filestable').data('preview-y'); + var previewURL = OC.Router.generate('core_ajax_preview', {file: encodeURIComponent(path), x:x, y:y}); + $.get(previewURL, function() { + previewURL = previewURL.replace('(','%28'); + previewURL = previewURL.replace(')','%29'); + ready(previewURL + '&reload=true'); + }); +} + function getUniqueName(name){ if($('tr').filterAttr('data-file',name).length>0){ var parts=name.split('.'); diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php index 360874103f8..2f7e0af4f28 100644 --- a/apps/files/templates/index.php +++ b/apps/files/templates/index.php @@ -10,7 +10,7 @@ data-type='file'><p><?php p($l->t('Text file'));?></p></li> <li style="background-image:url('<?php p(OCP\mimetype_icon('dir')) ?>')" data-type='folder'><p><?php p($l->t('Folder'));?></p></li> - <li style="background-image:url('<?php p(OCP\image_path('core', 'actions/public.png')) ?>')" + <li style="background-image:url('<?php p(OCP\image_path('core', 'filetypes/web.svg')) ?>')" data-type='web'><p><?php p($l->t('From link'));?></p></li> </ul> </div> @@ -59,21 +59,24 @@ <div id="emptyfolder"><?php p($l->t('Nothing in here. Upload something!'))?></div> <?php endif; ?> -<table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>"> +<table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="36" data-preview-y="36"> <thead> <tr> <th id='headerName'> - <input type="checkbox" id="select_all" /> - <span class='name'><?php p($l->t( 'Name' )); ?></span> - <span class='selectedActions'> - <?php if($_['allowZipDownload']) : ?> - <a href="" class="download"> - <img class="svg" alt="Download" - src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>" /> - <?php p($l->t('Download'))?> - </a> - <?php endif; ?> - </span> + <div id="headerName-container"> + <input type="checkbox" id="select_all" /> + <label for="select_all"></label> + <span class="name"><?php p($l->t( 'Name' )); ?></span> + <span class="selectedActions"> + <?php if($_['allowZipDownload']) : ?> + <a href="" class="download"> + <img class="svg" alt="Download" + src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>" /> + <?php p($l->t('Download'))?> + </a> + <?php endif; ?> + </span> + </div> </th> <th id="headerSize"><?php p($l->t('Size')); ?></th> <th id="headerDate"> diff --git a/apps/files/templates/part.list.php b/apps/files/templates/part.list.php index 3e6f619868d..4076c1bb331 100644 --- a/apps/files/templates/part.list.php +++ b/apps/files/templates/part.list.php @@ -1,5 +1,7 @@ <input type="hidden" id="disableSharing" data-status="<?php p($_['disableSharing']); ?>"> <?php foreach($_['files'] as $file): + //strlen('files/') => 6 + $relativePath = substr($file['path'], 6); // the bigger the file, the darker the shade of grey; megabytes*2 $simple_size_color = intval(160-$file['size']/(1024*1024)*2); if($simple_size_color<0) $simple_size_color = 0; @@ -13,16 +15,38 @@ data-file="<?php p($name);?>" data-type="<?php ($file['type'] == 'dir')?p('dir'):p('file')?>" data-mime="<?php p($file['mimetype'])?>" - data-size='<?php p($file['size']);?>' - data-permissions='<?php p($file['permissions']); ?>'> + data-size="<?php p($file['size']);?>" + data-permissions="<?php p($file['permissions']); ?>"> + <?php if($file['isPreviewAvailable']): ?> + <td class="filename svg preview-icon" + <?php else: ?> <td class="filename svg" + <?php endif; ?> <?php if($file['type'] == 'dir'): ?> style="background-image:url(<?php print_unescaped(OCP\mimetype_icon('dir')); ?>)" <?php else: ?> - style="background-image:url(<?php print_unescaped(OCP\mimetype_icon($file['mimetype'])); ?>)" + <?php if($_['isPublic']): ?> + <?php + $relativePath = substr($relativePath, strlen($_['sharingroot'])); + ?> + <?php if($file['isPreviewAvailable']): ?> + style="background-image:url(<?php print_unescaped(OCP\publicPreview_icon($relativePath, $_['sharingtoken'])); ?>)" + <?php else: ?> + style="background-image:url(<?php print_unescaped(OCP\mimetype_icon($file['mimetype'])); ?>)" + <?php endif; ?> + <?php else: ?> + <?php if($file['isPreviewAvailable']): ?> + style="background-image:url(<?php print_unescaped(OCP\preview_icon($relativePath)); ?>)" + <?php else: ?> + style="background-image:url(<?php print_unescaped(OCP\mimetype_icon($file['mimetype'])); ?>)" + <?php endif; ?> + <?php endif; ?> <?php endif; ?> > - <?php if(!isset($_['readonly']) || !$_['readonly']): ?><input type="checkbox" /><?php endif; ?> + <?php if(!isset($_['readonly']) || !$_['readonly']): ?> + <input id="select-<?php p($file['fileid']); ?>" type="checkbox" /> + <label for="select-<?php p($file['fileid']); ?>"></label> + <?php endif; ?> <?php if($file['type'] == 'dir'): ?> <a class="name" href="<?php p(rtrim($_['baseURL'],'/').'/'.trim($directory,'/').'/'.$name); ?>" title=""> <?php else: ?> |