From d332b1d4a2e9382aaa8e8a11b6200efaadb18768 Mon Sep 17 00:00:00 2001 From: Georg Ehrke Date: Tue, 2 Jul 2013 11:13:22 +0200 Subject: implement preview loading after upload --- apps/files/js/filelist.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index e19a35bbc5b..11bf028d93a 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -172,8 +172,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 = $('#dir').val()+'/'+name; + getPreviewIcon(path, function(previewpath){ + tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); tr.find('td.filename').draggable(dragOptions); }, -- cgit v1.2.3 From 4f525c864df7eb6caf1bc945c3c9e48b20bcce5e Mon Sep 17 00:00:00 2001 From: Georg Ehrke Date: Wed, 14 Aug 2013 13:25:07 +0200 Subject: lazy load preview icons --- apps/files/js/filelist.js | 2 +- apps/files/js/files.js | 20 ++++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 288648693be..138329940b4 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -186,7 +186,7 @@ var FileList={ tr.attr('data-id', id); } var path = $('#dir').val()+'/'+name; - getPreviewIcon(path, function(previewpath){ + lazyLoadPreview(path, mime, function(previewpath){ tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); tr.find('td.filename').draggable(dragOptions); diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 180c23cbfa4..7b01a5202da 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -366,8 +366,8 @@ $(document).ready(function() { var tr=$('tr').filterAttr('data-file',name); tr.attr('data-mime',result.data.mime); tr.attr('data-id', result.data.id); - var path = $('#dir').val()+'/'+name; - getPreviewIcon(path, function(previewpath){ + var path = $('#dir').val() + '/' + name; + lazyLoadPreview(path, result.data.mime, function(previewpath){ tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); } else { @@ -432,7 +432,7 @@ $(document).ready(function() { tr.data('mime',mime).data('id',id); tr.attr('data-id', id); var path = $('#dir').val()+'/'+localName; - getPreviewIcon(path, function(previewpath){ + lazyLoadPreview(path, mime, function(previewpath){ tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); }); @@ -639,7 +639,7 @@ var createDragShadow = function(event){ newtr.find('td.filename').attr('style','background-image:url('+OC.imagePath('core', 'filetypes/folder.png')+')'); } else { var path = $('#dir').val()+'/'+elem.name; - getPreviewIcon(path, function(previewpath){ + lazyLoadPreview(path, elem.mime, function(previewpath){ newtr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); } @@ -824,10 +824,18 @@ function getMimeIcon(mime, ready){ } getMimeIcon.cache={}; -function getPreviewIcon(path, ready){ +function lazyLoadPreview(path, mime, ready) { + getMimeIcon(mime,ready); var x = $('#filestable').data('preview-x'); var y = $('#filestable').data('preview-y'); - ready(OC.Router.generate('core_ajax_preview', {file: encodeURIComponent(path), x:x, y:y})); + var previewURL = OC.Router.generate('core_ajax_preview', {file: encodeURIComponent(path), x:x, y:y}); + $.ajax({ + url: previewURL, + type: 'GET', + success: function() { + ready(previewURL); + } + }); } function getUniqueName(name){ -- cgit v1.2.3 From cba0f696226d344e5caf25631eefb92213c8b6c2 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 14 Aug 2013 20:41:20 +0200 Subject: increase row height to 50px, properly position everything, checkboxes, actions etc --- apps/files/css/files.css | 143 +++++++++++++++++++++++++++++-------- apps/files/js/filelist.js | 2 +- apps/files/templates/index.php | 25 ++++--- apps/files/templates/part.list.php | 5 +- core/css/styles.css | 2 +- 5 files changed, 132 insertions(+), 45 deletions(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index c66484db536..de7be0a6a22 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -64,7 +64,7 @@ #filestable { position: relative; top:37px; width:100%; } tbody tr { background-color: #fff; - height: 44px; + height: 50px; } tbody tr:hover, tbody tr:active { background-color: rgb(240,240,240); @@ -79,8 +79,9 @@ tr:hover span.extension { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op table tr.mouseOver td { background-color:#eee; } table th { height:2em; padding:0 .5em; color:#999; } table th .name { - float: left; - margin-left: 17px; + position: absolute; + left: 55px; + top: 15px; } table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; } table td { @@ -89,17 +90,33 @@ table td { background-position: 8px center; 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#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; - padding:0 .1em 0 1em; - text-align:left; + 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: 64px; width:100%; } table.multiselect thead th { background-color: rgba(210,210,210,.7); @@ -107,27 +124,41 @@ table.multiselect thead th { 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 { + position:relative; /* Firefox needs to explicitly have this default set … */ + -moz-box-sizing: border-box; box-sizing: border-box; display: block; - height: 44px; + height: 50px; vertical-align: middle; - margin-left: 50px; + 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 .3em; } table td.filename .nametext, .uploadtext, .modified { float:left; padding:.3em 0; } -.modified { + +#modified { position: absolute; - top: 10px; + top: 15px; +} +.modified { + position: relative; + top: 11px; + left: 5px; } + /* TODO fix usability bug (accidental file/folder selection) */ table td.filename .nametext { position: absolute; - top: 10px; + top: 16px; + left: 55px; + padding: 0; overflow: hidden; text-overflow: ellipsis; max-width: 800px; @@ -135,28 +166,58 @@ table td.filename .nametext { 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 0 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: 100; +} +#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:.3em 0.6em 0 .5em; } + #uploadsize-message,#delete-confirm { display:none; } /* File actions */ .fileactions { position: absolute; - top: 13px; + 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); @@ -166,19 +227,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: 16px 8px !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; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 138329940b4..3a6b118ec9c 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -17,7 +17,7 @@ var FileList={ "class": "filename", "style": 'background-image:url('+iconurl+')' }); - td.append(''); + td.append(''); var link_elem = $('').attr({ "class": "name", "href": linktarget diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php index 8598ead2404..714ff497f9d 100644 --- a/apps/files/templates/index.php +++ b/apps/files/templates/index.php @@ -63,17 +63,20 @@ - - t( 'Name' )); ?> - - - - Download" /> - t('Download'))?> - - - +
+ + + t( 'Name' )); ?> + + + + Download" /> + t('Download'))?> + + + +
t('Size')); ?> diff --git a/apps/files/templates/part.list.php b/apps/files/templates/part.list.php index ab1b91167db..93d1aaf9dca 100644 --- a/apps/files/templates/part.list.php +++ b/apps/files/templates/part.list.php @@ -47,7 +47,10 @@ $totalsize = 0; ?> > - + + + + diff --git a/core/css/styles.css b/core/css/styles.css index 0dd66fb5b7c..db7f01cfebd 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -142,7 +142,7 @@ a.disabled, a.disabled:hover, a.disabled:focus { .searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('../img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; margin-top:10px; float:right; } input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; } -#select_all{ margin-top:.4em !important;} + /* CONTENT ------------------------------------------------------------------ */ #controls { -- cgit v1.2.3 From 7e4dcd268f6cb6618600718a51c4d882e9027829 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sat, 17 Aug 2013 10:46:03 +0200 Subject: vertically center rename input box --- apps/files/css/files.css | 10 ++++++++-- apps/files/js/filelist.js | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 20eb5fd083f..be42a0056d8 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -142,7 +142,13 @@ table td.filename a.name { 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 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; } @@ -176,7 +182,7 @@ table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; } filter: alpha(opacity=0); opacity: 0; float: left; - margin: 32px 0 0 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ + 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, diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 536becad49a..10a297ddadb 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -199,7 +199,7 @@ var FileList={ tr=$('tr').filterAttr('data-file',name); tr.data('renaming',true); td=tr.children('td.filename'); - input=$('').val(name); + input=$('').val(name); form=$('
'); form.append(input); td.children('a.name').hide(); -- cgit v1.2.3 From 13e34649bfb1a7d15833c209d629e3540d3366ef Mon Sep 17 00:00:00 2001 From: Georg Ehrke Date: Fri, 23 Aug 2013 23:19:21 +0200 Subject: move path generation for previews to dedicated function --- apps/files/js/filelist.js | 2 +- apps/files/js/files.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 41245c00ba6..e3e985af38b 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -185,7 +185,7 @@ var FileList={ if (id != null) { tr.attr('data-id', id); } - var path = $('#dir').val()+'/'+name; + var path = getPathForPreview(name); lazyLoadPreview(path, mime, function(previewpath){ tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); diff --git a/apps/files/js/files.js b/apps/files/js/files.js index f88ecd961b1..79fa01aa0aa 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -382,7 +382,7 @@ $(document).ready(function() { tr.attr('data-size',result.data.size); tr.attr('data-id', result.data.id); tr.find('.filesize').text(humanFileSize(result.data.size)); - var path = $('#dir').val() + '/' + name; + var path = getPathForPreview(name); lazyLoadPreview(path, result.data.mime, function(previewpath){ tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); @@ -654,7 +654,7 @@ var createDragShadow = function(event){ if (elem.type === 'dir') { newtr.find('td.filename').attr('style','background-image:url('+OC.imagePath('core', 'filetypes/folder.png')+')'); } else { - var path = $('#dir').val()+'/'+elem.name; + var path = getPathForPreview(elem.name); lazyLoadPreview(path, elem.mime, function(previewpath){ newtr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); @@ -832,6 +832,11 @@ 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'); -- cgit v1.2.3 From d538a566acac35eab811b2bfa16596fb8534db0f Mon Sep 17 00:00:00 2001 From: Georg Ehrke Date: Mon, 26 Aug 2013 14:36:18 +0200 Subject: fix background size in filelist.js --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index e3e985af38b..7a48453488a 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -15,7 +15,7 @@ var FileList={ // filename td td = $('').attr({ "class": "filename", - "style": 'background-image:url('+iconurl+'); background-size: 16px;' + "style": 'background-image:url('+iconurl+'); background-size: 32px;' }); td.append(''); var link_elem = $('').attr({ -- cgit v1.2.3 From b16a018da99259278ba2f93f1e0c2d2e2bce6fb0 Mon Sep 17 00:00:00 2001 From: Georg Ehrke Date: Mon, 26 Aug 2013 16:33:51 +0200 Subject: use random string as id for checkbox --- apps/files/js/filelist.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'apps/files/js/filelist.js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 7a48453488a..cbeca1764ea 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -17,7 +17,8 @@ var FileList={ "class": "filename", "style": 'background-image:url('+iconurl+'); background-size: 32px;' }); - td.append(''); + var rand = Math.random().toString(16).slice(2); + td.append(''); var link_elem = $('').attr({ "class": "name", "href": linktarget -- cgit v1.2.3