From be6b5c8e774f9e389e4ff4a817caa3ebf5677182 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 21 Jul 2011 22:01:55 +0200 Subject: some work on the updated interface --- files/css/files.css | 46 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) (limited to 'files/css/files.css') diff --git a/files/css/files.css b/files/css/files.css index f4da6fae98c..f119fe90a74 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -73,7 +73,9 @@ /* FILE TABLE */ table { - width: 90%; + position:relative; + top:37px; + width: 100%; } tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#eee; } @@ -118,4 +120,46 @@ span.extention{ div.crumb{ float:left; + background-repeat:no-repeat; + background-position:right 0px; + font-size:20px; + padding:8px; +} + +table tr.mouseOver td { background-color:#eee; } +table th, table td { padding:0; border-bottom:1px solid #ddd; text-align:left; font-style:italic; } +table th { padding:0.5em; } +table td { border-bottom:1px solid #eee; font-style:normal; } +table td.filesize, table td.date { width:5em; padding:0.5em 1em; text-align:right; } +table td.date { width:11em; } +table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } +table td.filename a { display:block; background-image:url('../img/file.png'); text-decoration:none; } +table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:0.5em 0.5em 0.5em 3em; background-position:1em center; background-repeat:no-repeat; } +table td.filename a:hover, table td.filename a:focus { outline:0; } +table td.filename a:active { outline:0; } +table em { font-weight:bold; } +table td.filename a.folder-up { background-image:url('../img/back.png'); font-style:italic; } +table td.filename a.folder { background-image:url('../img/folder.png'); } +table td.filename a.folder-home { background-image:url('../img/home.png'); } +table td.filename a.folder-music { background-image:url('../img/folder-music.png'); } +table td.filename a.folder-videos { background-image:url('../img/folder-video.png'); } +table td.filename a.folder-shared { background-image:url('../img/folder-shared.png'); } +table td.filename a.folder-images { background-image:url('../img/folder-image.png'); } +table td.filename a.file-txt { background-image:url('../img/file-txt.png'); } +table td.filename a.file-python { background-image:url('../img/file-python.png'); } +table td.filename a.file-php { background-image:url('../img/file.png'); } +table td.login { background-image:url('../img/login.png'); } +table td.logout { background-image:url('../img/logout.png'); } +table td.download { background-image:url('../img/download.png'); } +table td.upload { background-image:url('../img/upload.png'); } +table td.create { background-image:url('../img/folder-new.png'); } +table td.delete { background-image:url('../img/delete.png'); } +#fileList tr input[type=checkbox] { display:none; float:left; margin:0.7em; margin-left:1em; } +#fileList tr input[type=checkbox]:checked { display:inline; } +#fileList tr:hover input[type=checkbox] { display:inline; } +#fileList tr:hover td.filename a{background-image:none !important} +#fileList tr.selected td.filename a{background-image:none !important} +#select_all{float:left; margin:0.2em; margin-left:0.6em; } +#selectedActions{ + float:right; } \ No newline at end of file -- cgit v1.2.3 From bc40532109a334165a7c18f55d3c1abd88b866fe Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 21 Jul 2011 22:37:11 +0200 Subject: give the file sizes some more space --- files/css/files.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'files/css/files.css') diff --git a/files/css/files.css b/files/css/files.css index f119fe90a74..e0b06ea0cb5 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -83,10 +83,13 @@ tbody a { color:#000; } table td.filesize, table td.date { - width: 5em; + width: 7em; padding: 0.5em 1em; text-align: right; } +#headerSize{ + text-align:right; +} table td.date { @@ -130,7 +133,6 @@ table tr.mouseOver td { background-color:#eee; } table th, table td { padding:0; border-bottom:1px solid #ddd; text-align:left; font-style:italic; } table th { padding:0.5em; } table td { border-bottom:1px solid #eee; font-style:normal; } -table td.filesize, table td.date { width:5em; padding:0.5em 1em; text-align:right; } table td.date { width:11em; } table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } table td.filename a { display:block; background-image:url('../img/file.png'); text-decoration:none; } @@ -162,4 +164,5 @@ table td.delete { background-image:url('../img/delete.png'); } #select_all{float:left; margin:0.2em; margin-left:0.6em; } #selectedActions{ float:right; + display:none; } \ No newline at end of file -- cgit v1.2.3 From d9a79c0f7eade4915b236c1581ed30714ecab3ff Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Fri, 22 Jul 2011 00:18:41 +0200 Subject: show fileactions inline on hover --- apps/media/css/jplayer.css | 2 +- files/css/files.css | 30 +++++++++++------------------- files/js/fileactions.js | 26 ++++++++++++++++---------- files/js/files.js | 10 ++++++---- files/templates/index.php | 5 +---- 5 files changed, 35 insertions(+), 38 deletions(-) (limited to 'files/css/files.css') diff --git a/apps/media/css/jplayer.css b/apps/media/css/jplayer.css index c47d20c7228..4fd17882391 100644 --- a/apps/media/css/jplayer.css +++ b/apps/media/css/jplayer.css @@ -45,7 +45,7 @@ div.jp-interface { z-index:100; width:25em; left:201px; - top:-10px; + top:-20px; } div.jp-type-playlist{ width:100%; diff --git a/files/css/files.css b/files/css/files.css index e0b06ea0cb5..a886958f137 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -2,22 +2,17 @@ #file_menu { - display: none; - position: absolute; right:0px; - background-color: #EEE; -} - -#file_menu ul -{ - list-style-type: none; + position:absolute; + top:0; } -#file_menu li a +#file_menu a { - display: block; - padding: 0.5em 5em 0.5em 2em; - text-decoration: none; + display:block; + float:left; + background-image:none; + text-decoration: none; } .file_upload_form, #file_newfolder_form { @@ -36,12 +31,12 @@ } .file_upload_filename { - background-image:url(../img/file.png); font-weight:bold; + background-image:url("../img/file.png"); font-weight:bold; } .file_upload_start {opacity:0;filter: alpha(opacity = 0);} #file_newfolder_name { - background-image:url(../img/folder.png); font-weight:bold; + background-image:url("../img/folder.png"); font-weight:bold; width: 14em; } @@ -102,11 +97,8 @@ table td.selection, table th.selection, table td.fileaction text-align: center; } -table td.filename a -{ - display: block; - background-image: url(../img/file.png); - text-decoration: none; +td.filename{ + position:relative; } .dropArrow{ diff --git a/files/js/fileactions.js b/files/js/fileactions.js index b683dc0cd3a..3ad417c91c4 100644 --- a/files/js/fileactions.js +++ b/files/js/fileactions.js @@ -49,33 +49,39 @@ FileActions={ return actions[name]; }, display:function(parent){ - $('#file_menu ul').empty(); + $('#file_menu').empty(); parent.append($('#file_menu')); var actions=FileActions.get(FileActions.getCurrentMimeType(),FileActions.getCurrentType()); for(name in actions){ - var html='
  • '+name+'
    • '; + var html=''+name+''; var element=$(html); element.data('action',name); element.click(function(event){ + event.stopPropagation(); event.preventDefault(); - $('#file_menu').slideToggle(250); var action=actions[$(this).data('action')]; - $('#file_menu ul').empty(); - action(FileActions.getCurrentFile()); + var currentFile=FileActions.getCurrentFile(); + FileActions.hide(); + action(currentFile); }); - $('#file_menu>ul').append(element); + $('#file_menu').append(element); } - $('#file_menu').slideToggle(250); + $('#file_menu').show(); return false; }, + hide:function(){ + $('#file_menu').hide(); + $('#file_menu').empty(); + $('body').append($('#file_menu')); + }, getCurrentFile:function(){ - return $('#file_menu').parents('tr:first').attr('data-file'); + return $('#file_menu').parent().parent().attr('data-file'); }, getCurrentMimeType:function(){ - return $('#file_menu').parents('tr:first').attr('data-mime'); + return $('#file_menu').parent().parent().attr('data-mime'); }, getCurrentType:function(){ - return $('#file_menu').parents('tr:first').attr('data-type'); + return $('#file_menu').parent().parent().attr('data-type'); } } diff --git a/files/js/files.js b/files/js/files.js index b0970233739..f1c00650d0a 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -31,11 +31,13 @@ $(document).ready(function() { }); // Sets the file-action buttons behaviour : - $('td.fileaction a').live('click',function(event) { - event.preventDefault(); - FileActions.display($(this).parent()); + $('tr').live('mouseenter',function(event) { + FileActions.display($(this).children('td.filename')); }); - + $('tr').live('mouseleave',function(event) { + FileActions.hide(); + }); + // Sets the file link behaviour : $('td.filename a').live('click',function(event) { event.preventDefault(); diff --git a/files/templates/index.php b/files/templates/index.php index 7cdb81b2d66..18b805529a9 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -43,7 +43,4 @@ -
    -
      -
    -
    + -- cgit v1.2.3 From d6bf5cd251e4b3ce8a1bbbe09a029148881eeac9 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Fri, 22 Jul 2011 15:48:30 +0200 Subject: show error when trying to upload to large files --- files/css/files.css | 3 +- files/js/files.js | 75 ++++++++++++++++++++++++++++------------------- files/templates/index.php | 6 ++++ 3 files changed, 53 insertions(+), 31 deletions(-) (limited to 'files/css/files.css') diff --git a/files/css/files.css b/files/css/files.css index a886958f137..d45d93441de 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -157,4 +157,5 @@ table td.delete { background-image:url('../img/delete.png'); } #selectedActions{ float:right; display:none; -} \ No newline at end of file +} +#uploadsize-message{display:none} \ No newline at end of file diff --git a/files/js/files.js b/files/js/files.js index f1c00650d0a..dc59dda57e0 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -153,40 +153,55 @@ $(document).ready(function() { var uploadId=form.attr('data-upload-id'); var files=this.files; var target=form.children('iframe'); - target.load(function(){ - var response=jQuery.parseJSON(target.contents().find('body').text()); - //set mimetype and if needed filesize - if(response){ - for(var i=0;i$('#max_upload').val()){ + $( "#uploadsize-message" ).dialog({ + modal: true, + buttons: { + Close: function() { + $( this ).dialog( "close" ); } - FileList.loadingDone(file.name); } + }); + }else{ + target.load(function(){ + var response=jQuery.parseJSON(target.contents().find('body').text()); + //set mimetype and if needed filesize + if(response){ + for(var i=0;i0){ + var size=simpleFileSize(files[i].size); + }else{ + var size='Pending'; + } + FileList.addFile(files[i].name,size,uploadTime,true); } - }); - form.submit(); - var date=new Date(); - var uploadTime=formatDate(date); - for(var i=0;i0){ - var size=simpleFileSize(files[i].size); - }else{ - var size='Pending'; - } - FileList.addFile(files[i].name,size,uploadTime,true); + + //clone the upload form and hide the new one to allow users to start a new upload while the old one is still uploading + var clone=form.clone(); + uploadId++; + clone.attr('data-upload-id',uploadId); + clone.attr('target','file_upload_target_'+uploadId); + clone.children('iframe').attr('name','file_upload_target_'+uploadId) + clone.insertBefore(form); + form.hide(); } - - //clone the upload form and hide the new one to allow users to start a new upload while the old one is still uploading - var clone=form.clone(); - uploadId++; - clone.attr('data-upload-id',uploadId); - clone.attr('target','file_upload_target_'+uploadId); - clone.children('iframe').attr('name','file_upload_target_'+uploadId) - clone.insertBefore(form); - form.hide(); }); //add multiply file upload attribute to all browsers except konqueror (which crashes when it's used) diff --git a/files/templates/index.php b/files/templates/index.php index 18b805529a9..b0d4f556f4a 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -43,4 +43,10 @@ +
    +

    + t( 'The files you are trying to upload exceed the maximum size for file uploads on this server.' ); ?> +

    +
    + -- cgit v1.2.3 From ceb711dff4ceb02efd1c96b867df050f15ba4a93 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Fri, 22 Jul 2011 16:52:35 +0200 Subject: some work on the breadcrumb navigation for files --- core/css/styles.css | 4 ++-- core/img/breadcrumb-divider-start.png | Bin 0 -> 495 bytes files/css/files.css | 16 ++++++++++++++-- files/js/files.js | 22 ++++++++++++++++++++++ 4 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 core/img/breadcrumb-divider-start.png (limited to 'files/css/files.css') diff --git a/core/css/styles.css b/core/css/styles.css index b48092a9c07..7a26c2f6703 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -206,7 +206,7 @@ div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1 form.searchbox { display:inline; position:fixed; top:1em; right:10em; margin:0; padding:0; } /* NAVIGATION ------------------------------------------------------------- */ -#plugins { position:fixed; top:3.5em; float:left; width:15.7em; padding:0; } +#plugins { position:fixed; top:3.5em; float:left; width:15.7em; padding:0; z-index:100; } #plugins ul { list-style-type:none; border-top:1px solid #ccc; } #plugins a { display:block; padding:0.5em 0.5em 0.5em 3em; background-position:1.5em center; background-repeat:no-repeat; border-bottom:1px solid #ddd; border-top:1px solid #fff; text-decoration:none; font-size:1.2em; color:#666; } #plugins a.active, #plugins a:hover, #plugins a:focus, #plugins a.selected { background-color:#ccc; border-top:1px solid #ccc; border-bottom:1px solid #ccc; color:#000; outline:0; } @@ -219,7 +219,7 @@ form.searchbox { display:inline; position:fixed; top:1em; right:10em; margin:0; /* NAVIGATION BAR */ -span.nav { padding:1em 0 0 2em; } +span.nav { display:block; float:left; /*margin-right:55em;*/ } span.nav a { padding:0.5em 1.5em 0.5em 0.5em; background-position:right center; background-repeat:no-repeat; background-image:url('../img/arrow.png'); text-decoration:none; } span.nav a img { height:16px; vertical-align:text-top; } diff --git a/core/img/breadcrumb-divider-start.png b/core/img/breadcrumb-divider-start.png new file mode 100644 index 00000000000..24d1eb40857 Binary files /dev/null and b/core/img/breadcrumb-divider-start.png differ diff --git a/files/css/files.css b/files/css/files.css index d45d93441de..590c7bac364 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -115,10 +115,13 @@ span.extention{ div.crumb{ float:left; + display:block; background-repeat:no-repeat; background-position:right 0px; font-size:20px; - padding:8px; + padding-top:8px; + padding-left:8px; + height:28px; /*36-8*/ } table tr.mouseOver td { background-color:#eee; } @@ -158,4 +161,13 @@ table td.delete { background-image:url('../img/delete.png'); } float:right; display:none; } -#uploadsize-message{display:none} \ No newline at end of file +#uploadsize-message{display:none} + +/* add breadcrumb divider to the File item in navigation panel */ +#plugins li:first-child{ + background-position: 15.7em 0px; + background-repeat:no-repeat; + background-image: url("/owncloud/core/img/breadcrumb-divider-start.png"); + width:15.7em; + padding-right:11px; +} diff --git a/files/js/files.js b/files/js/files.js index dc59dda57e0..49e2f412d49 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -208,6 +208,28 @@ $(document).ready(function() { if(navigator.userAgent.search(/konqueror/i)==-1){ $('.file_upload_start').attr('multiple','multiple') } + + //if the breadcrumb is to long, start by replacing foldernames with '...' except for the current folder + var crumb=$('div.crumb').first(); + while($('div.controls').height()>40 && crumb.next('div.crumb').length>0){ + crumb.children('a').text('...'); + crumb=crumb.next('div.crumb'); + } + //if that isn't enough, start removing items from the breacrumb except for the current folder and it's parent + var crumb=$('div.crumb').first(); + var next=crumb.next('div.crumb'); + while($('div.controls').height()>40 && next.next('div.crumb').length>0){ + crumb.remove(); + crumb=next; + next=crumb.next('div.crumb'); + } + //still not enough, start shorting down the current folder name + var crumb=$('div.crumb>a').last(); + while($('div.controls').height()>40 && crumb.text().length>6){ + var text=crumb.text() + text=text.substr(0,text.length-6)+'...'; + crumb.text(text); + } }); var adjustNewFolderSize = function() { -- cgit v1.2.3 From 25c48e6aed35084d3bd49e5b577a4ace9f640bc8 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 28 Jul 2011 00:21:11 +0200 Subject: lots of small style fixes for the file list --- core/css/styles.css | 4 ++- files/css/files.css | 65 ++++++++++------------------------------------- files/js/files.js | 32 +++++++++++++---------- files/templates/index.php | 6 ++--- 4 files changed, 37 insertions(+), 70 deletions(-) (limited to 'files/css/files.css') diff --git a/core/css/styles.css b/core/css/styles.css index 7a26c2f6703..f5f54a1c9f6 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -5,7 +5,9 @@ body { background:#fefefe url('../img/body_background.jpg') repeat-y left top; f #owncloud { float:left; margin:0 0 0 2em; } h1 { margin:1em 3em 1em 0; border-bottom:1px solid #666; text-transform:uppercase; font-weight:normal; font-style:italic; color:#666; } p.center { text-align:center; } -a { color:#000; text-decoration:none; } +a { color:#000; text-decoration:none; outline:0; } +table { white-space:nowrap; } +input { background:#fff; cursor:pointer; } form#user_settings { max-width:600px; } form#user_settings p label { display:block; float:left; width:35%; padding:0.4em 0.5em 0 0; text-align:right; } diff --git a/files/css/files.css b/files/css/files.css index 590c7bac364..c00b595fd2f 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -17,7 +17,6 @@ .file_upload_form, #file_newfolder_form { display: inline; - margin-left:3em; } #fileSelector, #file_upload_submit, #file_newfolder_submit { @@ -37,14 +36,14 @@ #file_newfolder_name { background-image:url("../img/folder.png"); font-weight:bold; - width: 14em; + width: 11em; } .file_upload_start, .file_upload_filename{ position:absolute; top:0px; left:0px; - width:30ex; + width:11em; font-size: 0.9em; } @@ -54,7 +53,7 @@ left:-2em; display: -moz-inline-box; /* fallback for older firefox versions*/ display: inline-block; - width:30ex; + width:12em; } #file_newfolder_submit, #file_upload_submit { @@ -76,39 +75,6 @@ table { tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#eee; } tbody a { color:#000; } -table td.filesize, table td.date -{ - width: 7em; - padding: 0.5em 1em; - text-align: right; -} -#headerSize{ - text-align:right; -} - -table td.date -{ - width: 11em; -} - -table td.selection, table th.selection, table td.fileaction -{ - width: 2em; - text-align: center; -} - -td.filename{ - position:relative; -} - -.dropArrow{ - height:16px; - width:16px; - display: -moz-inline-box; /* fallback for older firefox versions*/ - display: inline-block; - background-image:url('../img/drop-arrow.png'); -} - span.extention{ color:#999; } @@ -118,23 +84,23 @@ div.crumb{ display:block; background-repeat:no-repeat; background-position:right 0px; - font-size:20px; + font-weight:bold; padding-top:8px; padding-left:8px; height:28px; /*36-8*/ } table tr.mouseOver td { background-color:#eee; } -table th, table td { padding:0; border-bottom:1px solid #ddd; text-align:left; font-style:italic; } -table th { padding:0.5em; } +table th { padding:.5em; } +table th .name { float:left; margin-left:.5em; } +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; } -table td.date { width:11em; } +table th#headerSize, table td.filesize, table th#headerDate, table td.date { width:4em; padding:0 1em; text-align:right; cursor:help; } table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } table td.filename a { display:block; background-image:url('../img/file.png'); text-decoration:none; } -table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:0.5em 0.5em 0.5em 3em; background-position:1em center; background-repeat:no-repeat; } +table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.5em .5em .5em 3em; background-position:1em center; background-repeat:no-repeat; } table td.filename a:hover, table td.filename a:focus { outline:0; } table td.filename a:active { outline:0; } -table em { font-weight:bold; } table td.filename a.folder-up { background-image:url('../img/back.png'); font-style:italic; } table td.filename a.folder { background-image:url('../img/folder.png'); } table td.filename a.folder-home { background-image:url('../img/home.png'); } @@ -151,16 +117,11 @@ table td.download { background-image:url('../img/download.png'); } table td.upload { background-image:url('../img/upload.png'); } table td.create { background-image:url('../img/folder-new.png'); } table td.delete { background-image:url('../img/delete.png'); } -#fileList tr input[type=checkbox] { display:none; float:left; margin:0.7em; margin-left:1em; } -#fileList tr input[type=checkbox]:checked { display:inline; } -#fileList tr:hover input[type=checkbox] { display:inline; } -#fileList tr:hover td.filename a{background-image:none !important} -#fileList tr.selected td.filename a{background-image:none !important} +#fileList tr input[type=checkbox] { display:none; float:left; margin:.7em 0 0 1em; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ } +#fileList tr input[type=checkbox]:checked, #fileList tr:hover input[type=checkbox] { display:inline; } +#fileList tr.selected td.filename a, #fileList tr:hover td.filename a{background-image:none !important} #select_all{float:left; margin:0.2em; margin-left:0.6em; } -#selectedActions{ - float:right; - display:none; -} +#selectedActions { float:right; display:none; } #uploadsize-message{display:none} /* add breadcrumb divider to the File item in navigation panel */ diff --git a/files/js/files.js b/files/js/files.js index e1ac4e172fc..23d4c0205f0 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -328,7 +328,9 @@ function procesSelection(){ var selectedFolders=selected.filter(function(el){return el.type=='dir'}); if(selectedFiles.length==0 && selectedFolders.length==0){ $('#headerName>span.name').text('Name'); - $('#headerSize').text('Size (MB)'); + $('#headerSize').text('Size MB'); + $('#headerDate').text('Modified'); + $('th').css({background:'#fff',fontWeight:'normal'}); $('#selectedActions').hide(); }else{ $('#selectedActions').show(); @@ -347,26 +349,28 @@ function procesSelection(){ totalSize= '>1000'; } } - $('#headerSize').text(totalSize+' (MB)'); + $('#headerSize').text(totalSize+' MB'); var selection=''; - if(selectedFiles.length>0){ - if(selectedFiles.length==1){ - selection+='1 File'; + if(selectedFolders.length>0){ + if(selectedFolders.length==1){ + selection+='1 folder'; }else{ - selection+=selectedFiles.length+' Files'; + selection+=selectedFolders.length+' folders'; } - if(selectedFolders.length>0){ - selection+=' ,'; + if(selectedFiles.length>0){ + selection+=' & '; } } - if(selectedFolders.length>0){ - if(selectedFolders.length==1){ - selection+='1 Folder'; + if(selectedFiles.length>0){ + if(selectedFiles.length==1){ + selection+='1 file'; }else{ - selection+=selectedFolders.length+' Folders'; + selection+=selectedFiles.length+' files'; } } - $('#headerName>span.name').text(selection+' Selected'); + $('#headerName>span.name').text(selection); + $('#headerDate').text(''); + $('th').css({background:'#ddd', fontWeight:'bold'}); } } @@ -396,4 +400,4 @@ function getSelectedFiles(property){ } }); return files; -} \ No newline at end of file +} diff --git a/files/templates/index.php b/files/templates/index.php index b0d4f556f4a..e0c4fd39c15 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -34,8 +34,8 @@ Delete - t( 'Size (MB)' ); ?> - t( 'Modified' ); ?> + t( 'Size MB' ); ?> + t( 'Modified' ); ?> @@ -43,7 +43,7 @@ -
    +

    t( 'The files you are trying to upload exceed the maximum size for file uploads on this server.' ); ?>

    -- cgit v1.2.3 From 9a88f066c58c27152f8c58d5778140b872aa0be6 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 28 Jul 2011 01:15:36 +0200 Subject: first part of file action icons implementation --- core/img/actions/delete.png | Bin 0 -> 330 bytes core/img/actions/delete.svg | 70 ++++++++++++++++++++++++++++++++++++ core/img/actions/download.png | Bin 0 -> 264 bytes core/img/actions/download.svg | 73 ++++++++++++++++++++++++++++++++++++++ core/img/actions/rename.png | Bin 0 -> 339 bytes core/img/actions/rename.svg | 80 ++++++++++++++++++++++++++++++++++++++++++ core/img/actions/share.png | Bin 0 -> 478 bytes core/img/actions/share.svg | 70 ++++++++++++++++++++++++++++++++++++ files/css/files.css | 5 +-- files/templates/index.php | 4 +-- 10 files changed, 298 insertions(+), 4 deletions(-) create mode 100644 core/img/actions/delete.png create mode 100644 core/img/actions/delete.svg create mode 100644 core/img/actions/download.png create mode 100644 core/img/actions/download.svg create mode 100644 core/img/actions/rename.png create mode 100644 core/img/actions/rename.svg create mode 100644 core/img/actions/share.png create mode 100644 core/img/actions/share.svg (limited to 'files/css/files.css') diff --git a/core/img/actions/delete.png b/core/img/actions/delete.png new file mode 100644 index 00000000000..97f089524b2 Binary files /dev/null and b/core/img/actions/delete.png differ diff --git a/core/img/actions/delete.svg b/core/img/actions/delete.svg new file mode 100644 index 00000000000..e542b6fed3a --- /dev/null +++ b/core/img/actions/delete.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/core/img/actions/download.png b/core/img/actions/download.png new file mode 100644 index 00000000000..783ad448449 Binary files /dev/null and b/core/img/actions/download.png differ diff --git a/core/img/actions/download.svg b/core/img/actions/download.svg new file mode 100644 index 00000000000..67277b87e3e --- /dev/null +++ b/core/img/actions/download.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/core/img/actions/rename.png b/core/img/actions/rename.png new file mode 100644 index 00000000000..9a86919df5a Binary files /dev/null and b/core/img/actions/rename.png differ diff --git a/core/img/actions/rename.svg b/core/img/actions/rename.svg new file mode 100644 index 00000000000..adda394ddf9 --- /dev/null +++ b/core/img/actions/rename.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/core/img/actions/share.png b/core/img/actions/share.png new file mode 100644 index 00000000000..300ce57544d Binary files /dev/null and b/core/img/actions/share.png differ diff --git a/core/img/actions/share.svg b/core/img/actions/share.svg new file mode 100644 index 00000000000..7812971e387 --- /dev/null +++ b/core/img/actions/share.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/files/css/files.css b/files/css/files.css index c00b595fd2f..7db46e3b0a7 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -95,7 +95,7 @@ table th { padding:.5em; } table th .name { float:left; margin-left:.5em; } 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; } -table th#headerSize, table td.filesize, table th#headerDate, table td.date { width:4em; padding:0 1em; text-align:right; cursor:help; } +table th#headerSize, table td.filesize, table th#headerDate, table td.date { width:5em; padding:0 1em; text-align:right; cursor:help; } table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } table td.filename a { display:block; background-image:url('../img/file.png'); text-decoration:none; } table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.5em .5em .5em 3em; background-position:1em center; background-repeat:no-repeat; } @@ -122,7 +122,8 @@ table td.delete { background-image:url('../img/delete.png'); } #fileList tr.selected td.filename a, #fileList tr:hover td.filename a{background-image:none !important} #select_all{float:left; margin:0.2em; margin-left:0.6em; } #selectedActions { float:right; display:none; } -#uploadsize-message{display:none} +#selectedActions a { margin:0 .5em; } +#uploadsize-message{ display:none; } /* add breadcrumb divider to the File item in navigation panel */ #plugins li:first-child{ diff --git a/files/templates/index.php b/files/templates/index.php index e0c4fd39c15..ac890257394 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -29,9 +29,9 @@ t( 'Name' ); ?> - Download + Download - Delete + Delete t( 'Size MB' ); ?> -- cgit v1.2.3 From 7cd7e64498f54bbfff6ffe6d1bce80b844391938 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 28 Jul 2011 01:26:26 +0200 Subject: proper CSS formatting for better workflow --- core/css/styles.css | 194 ++++++++-------------------------------------------- files/css/files.css | 115 +++++-------------------------- 2 files changed, 46 insertions(+), 263 deletions(-) (limited to 'files/css/files.css') diff --git a/core/css/styles.css b/core/css/styles.css index ac4a6448af2..0782986eada 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -7,7 +7,7 @@ h1 { margin:1em 3em 1em 0; border-bottom:1px solid #666; text-transform:uppercas p.center { text-align:center; } a { color:#000; text-decoration:none; outline:0; } table { white-space:nowrap; } -input { background:#fff; } +input, select { background:#fff; color:#333; } a, a img, a strong, a span, input, button, select, li { cursor:pointer; } input[type="text"], input[type="password"] { cursor:text; } @@ -20,9 +20,9 @@ form input { padding:0.2em; border:1px solid #ddd; font-size:1.2em; } form input[type="submit"] { padding:0.1em 1em; border:1px solid #999; font-weight:bold; font-size:0.9em; cursor:pointer; } form input[type="submit"]:hover, form input[type="submit"]:focus { border:1px solid #999; background-color:#999; outline:0; } form input[type="submit"]:active { outline:0; } -form input[type="button"], form input[type="text"] { font-size: 0.9em; } +form input[type="button"], form input[type="text"] { font-size:0.9em; } fieldset { padding:1em; background-color:#f7f7f7; border:1px solid #ddd; max-width:600px; margin:2em 2em 2em 3em; } -legend { padding: 0.5em; font-size:1.2em; } +legend { padding:0.5em; font-size:1.2em; } div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:100 } @@ -30,170 +30,30 @@ div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1 #body-login { width:100%; background-image:none; background-color:#ddd; } #body-login p.info { width:16em; margin:4em auto; padding:1em; background-color:#eee; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } -#login -{ - margin: 0 auto 0 auto; - padding: 2em 0 0 0; - background-image: url(../img/header-login.png); - background-position: left 0; - background-repeat: repeat-x; - background-color: #EEE; - border-bottom: 1px solid #FFF; - text-align: center; -} - -#login_form -{ - width: 20em; - margin: 4em auto; - padding: 0; -} - -#login_form fieldset -{ - background-color: transparent; - border: 0; -} - -#login_form fieldset p -{ - margin: 0.5em 0 0 0; - padding: 0; - text-align: left; -} - -#login_form fieldset p.submit -{ - margin: 2em 0 0 0; - padding: 1em 0 0 0; - border-top: 1px solid #DDD; - text-align: right; -} - -#login_form label -{ - font-size: 1em; - color: #666; -} - -#login_form input -{ - width: 100%; - margin: 0 0 0.5em 0; - padding: 0.5em; - border: 1px solid #DDD; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - border-radius: 15px; - font-size: 1.5em; - color: #333; - text-align: center; -} - -#login_form input[type=submit] -{ - width: auto; - margin: 1em 0 0 0.5em; - text-align: center; - border: 1px solid #DDD; - background-color: #FFF; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - border-radius: 15px; - font-size: 1.5em -} - -#login_form input[type=submit]:hover -{ - border: 1px solid #666; - background-color: #666; - color: #FFF; -} -#login_form input[type="checkbox"] -{ - width:15px; -} - -#setup_form { - margin: 3em auto; - text-align: left; - width: 720px; -} - -#setup_form #use_mysql { - font-size: 0.9em; - margin: 0 0 0 1em; -} - -#setup_form p.intro { - color: #666; - font-size: 1.3em; - margin: 4em 0 3em 0; - padding: 0; - text-align: center; -} - -#setup_form ul.errors { - background-image: url(images/no.png); - background-position: 1em 1em; - background-repeat: no-repeat; - background-color: #FED7D7; - border: 1px solid #F00; - font-size: 1.2em; - list-style-indent: inside; - margin: 0 0 4em 0; - padding: 1em 1em 1em 5em; -} - -#setup_form fieldset { - margin: 0 0 3em 0; -} - -#setup_form p { - line-height: 1.8em; -} - -#setup_form legend { - font-weight: normal; -} - -#setup_form label { - cursor: pointer; - display: block; - float: left; - margin: 0 0 0.2em 0; - text-align: right; - width: 40%; -} - +#login { margin:0 auto 0 auto; padding:2em 0 0 0; background-image:url(../img/header-login.png); background-position:left 0; background-repeat:repeat-x; background-color:#EEE; border-bottom:1px solid #FFF; text-align:center; } +#login_form { width:20em; margin:4em auto; padding:0; } +#login_form fieldset { background-color:transparent; border:0; } +#login_form fieldset p { margin:0.5em 0 0 0; padding:0; text-align:left; } +#login_form fieldset p.submit { margin:2em 0 0 0; padding:1em 0 0 0; border-top:1px solid #DDD; text-align:right; } +#login_form label { font-size:1em; color:#666; } +#login_form input { width:100%; margin:0 0 0.5em 0; padding:0.5em; border:1px solid #DDD; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em; color:#333; text-align:center; } +#login_form input[type=submit] { width:auto; margin:1em 0 0 0.5em; text-align:center; border:1px solid #DDD; background-color:#FFF; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em } +#login_form input[type=submit]:hover { border:1px solid #666; background-color:#666; color:#FFF; } +#login_form input[type="checkbox"] { width:15px; } +#setup_form { margin:3em auto; text-align:left; width:720px; } +#setup_form #use_mysql { font-size:0.9em; margin:0 0 0 1em; } +#setup_form p.intro { color:#666; font-size:1.3em; margin:4em 0 3em 0; padding:0; text-align:center; } +#setup_form ul.errors { background-image:url(images/no.png); background-position:1em 1em; background-repeat:no-repeat; background-color:#FED7D7; border:1px solid #F00; font-size:1.2em; list-style-indent:inside; margin:0 0 4em 0; padding:1em 1em 1em 5em; } +#setup_form fieldset { margin:0 0 3em 0; } +#setup_form p { line-height:1.8em; } +#setup_form legend { font-weight:normal; } +#setup_form label { cursor:pointer; display:block; float:left; margin:0 0 0.2em 0; text-align:right; width:40%; } #setup_form input[type='text'], -#setup_form input[type='password'] { - font-size: 1em; - margin: 0 0 0 0.5em; - padding: 0.3em; -} - -#setup_form input[type='radio'] { - margin: 0 0 0 1em; -} - -#setup_form input[type='submit'] { - background-color: #DDD; - border: 1px solid #999; - color: #666; - font-size: 1.2em; -} - -#setup_form input[type='submit']:hover { - border-color: #000; - color: #000; -} - -#setup_form p.submit { - padding: 0 0 1em 0; - text-align: center; -} - +#setup_form input[type='password'] { font-size:1em; margin:0 0 0 0.5em; padding:0.3em; } +#setup_form input[type='radio'] { margin:0 0 0 1em; } +#setup_form input[type='submit'] { background-color:#DDD; border:1px solid #999; color:#666; font-size:1.2em; } +#setup_form input[type='submit']:hover { border-color:#000; color:#000; } +#setup_form p.submit { padding:0 0 1em 0; text-align:center; } .prettybutton { margin:0.1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em; text-decoration:none; color:#666; background-color:#fff; } @@ -252,4 +112,4 @@ p.actions a.delete, div.actions a.delete { background-image:url('../img/delete.p #logs_options input[type="submit"] { float:right; margin:0 2em 0 0; } #logs_options input[type="submit"].nofloat { float:none; margin:0 2em 0 0; } #logs_options input[type="text"] { margin:0; padding:0; border:1px solid #ccc; text-align:right; } -li.error{ list-style:none; width:640px; margin:4em auto; padding:1em 1em 1em 4em; background-color:#fee; background-image:url('../img/task-attention.png'); background-position:0.8em 0.8em; background-repeat:no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } +li.error { list-style:none; width:640px; margin:4em auto; padding:1em 1em 1em 4em; background-color:#fee; background-image:url('../img/task-attention.png'); background-position:0.8em 0.8em; background-repeat:no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } diff --git a/files/css/files.css b/files/css/files.css index 7db46e3b0a7..e956f8c03af 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -1,95 +1,24 @@ /* FILE MENU */ - -#file_menu -{ - right:0px; - position:absolute; - top:0; -} - -#file_menu a -{ - display:block; - float:left; - background-image:none; - text-decoration: none; -} - -.file_upload_form, #file_newfolder_form { - display: inline; -} - -#fileSelector, #file_upload_submit, #file_newfolder_submit { - display: none; -} - -.file_upload_filename, #file_newfolder_name { - background-repeat: no-repeat; - background-position: 0.5em 0; - padding-left: 2em; -} - -.file_upload_filename { - background-image:url("../img/file.png"); font-weight:bold; -} -.file_upload_start {opacity:0;filter: alpha(opacity = 0);} - -#file_newfolder_name { - background-image:url("../img/folder.png"); font-weight:bold; - width: 11em; -} - -.file_upload_start, .file_upload_filename{ - position:absolute; - top:0px; - left:0px; - width:11em; - font-size: 0.9em; -} - -.file_upload_wrapper{ - position:relative; - top:-1.2em; - left:-2em; - display: -moz-inline-box; /* fallback for older firefox versions*/ - display: inline-block; - width:12em; -} - -#file_newfolder_submit, #file_upload_submit { - width: 3em; -} - -.file_upload_target { - display: none; -} +#file_menu { right:0px; position:absolute; top:0; } +#file_menu a { display:block; float:left; background-image:none; text-decoration:none; } +.file_upload_form, #file_newfolder_form { display:inline; } +#fileSelector, #file_upload_submit, #file_newfolder_submit { display:none; } +.file_upload_filename, #file_newfolder_name { background-repeat:no-repeat; background-position:0.5em 0; padding-left:2em; } +.file_upload_filename { background-image:url("../img/file.png"); font-weight:bold; }.file_upload_start { opacity:0;filter:alpha(opacity = 0); } + +#file_newfolder_name { background-image:url("../img/folder.png"); font-weight:bold; width:11em; } +.file_upload_start, .file_upload_filename { position:absolute; top:0px; left:0px; width:11em; font-size:0.9em; } +.file_upload_wrapper { position:relative; top:-1.2em; left:-2em; display:-moz-inline-box; /* fallback for older firefox versions*/ display:inline-block; width:12em; } +#file_newfolder_submit, #file_upload_submit { width:3em; } +.file_upload_target { display:none; } /* FILE TABLE */ - -table { - position:relative; - top:37px; - width: 100%; -} - +table { position:relative; top:37px; width:100%; } tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#eee; } tbody a { color:#000; } -span.extention{ - color:#999; -} - -div.crumb{ - float:left; - display:block; - background-repeat:no-repeat; - background-position:right 0px; - font-weight:bold; - padding-top:8px; - padding-left:8px; - height:28px; /*36-8*/ -} - +span.extention { color:#999; } +div.crumb { float:left; display:block; background-repeat:no-repeat; background-position:right 0px; font-weight:bold; padding-top:8px; padding-left:8px; height:28px; /*36-8*/ } table tr.mouseOver td { background-color:#eee; } table th { padding:.5em; } table th .name { float:left; margin-left:.5em; } @@ -119,17 +48,11 @@ table td.create { background-image:url('../img/folder-new.png'); } table td.delete { background-image:url('../img/delete.png'); } #fileList tr input[type=checkbox] { display:none; float:left; margin:.7em 0 0 1em; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ } #fileList tr input[type=checkbox]:checked, #fileList tr:hover input[type=checkbox] { display:inline; } -#fileList tr.selected td.filename a, #fileList tr:hover td.filename a{background-image:none !important} -#select_all{float:left; margin:0.2em; margin-left:0.6em; } +#fileList tr.selected td.filename a, #fileList tr:hover td.filename a { background-image:none !important } +#select_all { float:left; margin:0.2em; margin-left:0.6em; } #selectedActions { float:right; display:none; } #selectedActions a { margin:0 .5em; } -#uploadsize-message{ display:none; } +#uploadsize-message { display:none; } /* add breadcrumb divider to the File item in navigation panel */ -#plugins li:first-child{ - background-position: 15.7em 0px; - background-repeat:no-repeat; - background-image: url("/owncloud/core/img/breadcrumb-divider-start.png"); - width:15.7em; - padding-right:11px; -} +#plugins li:first-child { background-position:15.7em 0px; background-repeat:no-repeat; background-image:url("/owncloud/core/img/breadcrumb-divider-start.png"); width:15.7em; padding-right:11px; } -- cgit v1.2.3 From ece6bd663cc2a03e339019c29d1ea9170d11c24e Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 28 Jul 2011 04:29:04 +0200 Subject: show icons instead of text for file actions --- apps/files_imageviewer/js/lightbox.js | 2 +- apps/media/js/files.js | 8 +++---- files/css/files.css | 3 ++- files/js/fileactions.js | 45 ++++++++++++++++++++++------------- files/js/filelist.js | 4 ++-- files/templates/part.list.php | 2 +- 6 files changed, 38 insertions(+), 26 deletions(-) (limited to 'files/css/files.css') diff --git a/apps/files_imageviewer/js/lightbox.js b/apps/files_imageviewer/js/lightbox.js index 6e45547ebb4..318c764458e 100644 --- a/apps/files_imageviewer/js/lightbox.js +++ b/apps/files_imageviewer/js/lightbox.js @@ -7,7 +7,7 @@ $(document).ready(function() { $( 'body' ).append(overlay); var container=$(' +
    +

    These items will be permanently deleted and cannot be recovered. Are you sure?

    +
    + -- cgit v1.2.3 From 19d81add3d847da063986b969b1d259de2e897d4 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 29 Jul 2011 01:27:02 +0200 Subject: remove legacy styles --- files/css/files.css | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'files/css/files.css') diff --git a/files/css/files.css b/files/css/files.css index d79e75468a5..328eaa40f50 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -31,22 +31,6 @@ table td.filename a, table td.login, table td.logout, table td.download, table t table td.filename .nametext, .modified { float:left; padding:.3em 0; } table td.filename .nametext { width:80%; } table td.filename form { float:left; font-size:.85em; } -table td.filename a.folder-up { background-image:url('../img/back.png'); font-style:italic; } -table td.filename a.folder { background-image:url('../img/folder.png'); } -table td.filename a.folder-home { background-image:url('../img/home.png'); } -table td.filename a.folder-music { background-image:url('../img/folder-music.png'); } -table td.filename a.folder-videos { background-image:url('../img/folder-video.png'); } -table td.filename a.folder-shared { background-image:url('../img/folder-shared.png'); } -table td.filename a.folder-images { background-image:url('../img/folder-image.png'); } -table td.filename a.file-txt { background-image:url('../img/file-txt.png'); } -table td.filename a.file-python { background-image:url('../img/file-python.png'); } -table td.filename a.file-php { background-image:url('../img/file.png'); } -table td.login { background-image:url('../img/login.png'); } -table td.logout { background-image:url('../img/logout.png'); } -table td.download { background-image:url('../img/download.png'); } -table td.upload { background-image:url('../img/upload.png'); } -table td.create { background-image:url('../img/folder-new.png'); } -table td.delete { background-image:url('../img/delete.png'); } #fileList tr input[type=checkbox] { display:none; float:left; margin:.7em 0 0 1em; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ } #fileList tr input[type=checkbox]:checked, #fileList tr:hover input[type=checkbox] { display:inline; } #fileList tr.selected td.filename a, #fileList tr:hover td.filename a { background-image:none !important } -- cgit v1.2.3