From be6b5c8e774f9e389e4ff4a817caa3ebf5677182 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Thu, 21 Jul 2011 22:01:55 +0200 Subject: [PATCH] some work on the updated interface --- core/css/styles.css | 49 ++++---------------- core/img/breadcrumb-divider.png | Bin 0 -> 1012 bytes core/templates/layout.user.php | 7 ++- files/css/files.css | 46 ++++++++++++++++++- files/js/filelist.js | 8 +--- files/js/files.js | 68 ++++++++++++++++++++++++---- files/templates/index.php | 24 +++++----- files/templates/part.breadcrumb.php | 5 +- files/templates/part.list.php | 5 +- 9 files changed, 133 insertions(+), 79 deletions(-) create mode 100644 core/img/breadcrumb-divider.png diff --git a/core/css/styles.css b/core/css/styles.css index f9b536a2b0..2bc2988225 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -1,6 +1,6 @@ * { margin:0; padding:0; border:0; } body { background:#fefefe url('../img/body_background.jpg') repeat-y left top; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; } -#header { position:fixed; top:0; z-index:100; width:100%; height:5.5em; padding:0.5em 1.5em; background:url('../img/header-a.png') repeat-x left top; } +#header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:0.5em 1.5em; background:url('../img/header-a.png') repeat-x left top; } #body-settings #header { background-image:url('../img/header-settings-a.png'); } #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; } @@ -20,7 +20,7 @@ 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; } -div.controls { width:91%; margin:1em 1em 1em 2em; padding:0.5em 0; background-color:#f7f7f7; border:1px solid #eee; } +div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed } /* LOG IN & INSTALLATION ------------------------------------------------------------ */ #body-login { width:100%; background-image:none; background-color:#ddd; } @@ -196,17 +196,17 @@ div.controls { width:91%; margin:1em 1em 1em 2em; padding:0.5em 0; background-co .prettybutton:hover, .prettybutton:focus { background-color:#ccc; outline:0; } /* META NAVIGATION (Settings, Log out) ---------------------------------------------------------------- */ -#metanav { float:right; position:relative; top:1.5em; right:2.5em; list-style:none; margin:0; padding:0; } +#metanav { float:right; position:relative; top:0.5em; right:2.5em; list-style:none; margin:0; padding:0; } #metanav li { display:inline; } #metanav li a { margin:.1em; padding:1em; } #metanav li a:hover, #metanav li a:focus { background:rgba(0,0,0,.5); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; outline:0; box-shadow:#555 0 1px 0; -moz-box-shadow:#555 0 1px 0; -webkit-box-shadow:#555 0 1px 0; } #metanav li a img { vertical-align:middle; } /* SEARCH --------------------------------------------------------------------- */ -form.searchbox { display:inline; position:fixed; top:2em; right:10em; margin:0; padding:0; } +form.searchbox { display:inline; position:fixed; top:1em; right:10em; margin:0; padding:0; } /* NAVIGATION ------------------------------------------------------------- */ -#plugins { position:fixed; top:7em; float:left; width:15.7em; padding:0; } +#plugins { position:fixed; top:3.5em; float:left; width:15.7em; padding:0; } #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; } @@ -215,47 +215,16 @@ form.searchbox { display:inline; position:fixed; top:2em; right:10em; margin:0; #plugins .subentry.active { background-color:#bbb; border-top:1px solid #aaa; border-bottom:1px solid #ccc; color:#000; outline:0; } /* CONTENT ------------------------------------------------------------------ */ -#content { margin:7em 0 0 16em; } -table { margin:1em 5em 2em 3em; } -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; } -#fileList tr input[type=checkbox]:checked { display:inline; } -#fileList tr:hover input[type=checkbox] { display:inline; } +#content { margin:3.5em 0 0 15.7em; } + /* NAVIGATION BAR */ -span.nav { margin:1em 0 0 2em; padding:0.8em; line-height:16px; font-weight:bold; display:block} +span.nav { padding:1em 0 0 2em; } 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; } /* ACTIONS BAR */ -p.actions, div.actions { padding:0; } +p.actions, div.actions { padding:7px; float:right; margin-right:16em; } p.actions a, div.actions a { padding:0.5em 0.5em 0.5em 3em; background-position:1em center; background-repeat:no-repeat; background-image:url('../img/action.png'); border-right:1px solid #eee; text-decoration:none; color:#333; } p.actions a:hover, p.actions a:focus, div.actions a:hover, div.actions a:focus { background-color:#eee; color:#000; outline:0; } p.actions a:active, div.actions a:active { outline:0; } diff --git a/core/img/breadcrumb-divider.png b/core/img/breadcrumb-divider.png new file mode 100644 index 0000000000000000000000000000000000000000..52742e37238296beea96a2f932c5870924a3b3bb GIT binary patch literal 1012 zcmVPx#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipe~ z4H-H#9^ME500VSML_t(I%av4JZ`x)UJvQJ#4Z$+`zVLn#bj_P zq1kiwzJ7glo^zh}Js4&f-%qL32f18sPEiyG0F=vR3@WnKYE{?P)}G6<93}`NjB^xO zSCslU4<8l_qSzEg(O;|8MmUbcAVv~E`?(}let!HoUl7F$t!DEr{Er&>;{N^j)9Lib z)oRtPf9%Ib8rHRqCr|dax3^DKRh=)F%O(KOTYU-S=Xv-80RVXM_42at+ta7zN~JOi zfR|;N1b|Yh^eR)EAoRWZES)a=_~=m)z-3L-hR&#a+P0b3f3*%SPBgyL&eri$a_=lGj9V<0Z)uu7 z)}KTNL;yfHjjT6r-V9y6awTN5*>Xb^bxd^6y1^m}LPv|o=W|9P5#QA0Bu$d!FRaUT z+Rrhgy7k8F%na*rIG(XAtLV?WHyd;#$mvU$#$(Z_H#{+MN)W{F`Valu)0rHf zT)#fS2ZJQbvRQ}2(a_uKo8
+
+ +
    @@ -45,10 +48,6 @@
- -
- -
diff --git a/files/css/files.css b/files/css/files.css index f4da6fae98..f119fe90a7 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 diff --git a/files/js/filelist.js b/files/js/filelist.js index 2c662087ab..9300e31107 100644 --- a/files/js/filelist.js +++ b/files/js/filelist.js @@ -5,11 +5,9 @@ FileList={ addFile:function(name,size,lastModified,loading){ var img=(loading)?'img/loading.gif':'img/file.png'; var html=''; - html+=''; - html+=''+name+''; + html+=''+name+''; html+=''+size+''; html+=''+lastModified+''; - html+=''; html+=''; FileList.insertElement(name,'file',$(html)); if(loading){ @@ -20,11 +18,9 @@ FileList={ }, addDir:function(name,size,lastModified){ var html=''; - html+=''; - html+=''+name+''; + html+=''+name+''; html+=''+size+''; html+=''+lastModified+''; - html+=''; html+=''; FileList.insertElement(name,'dir',$(html)); diff --git a/files/js/files.js b/files/js/files.js index d419121597..4a3de09550 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -54,24 +54,27 @@ $(document).ready(function() { $('#select_all').click(function() { if($(this).attr('checked')){ // Check all - $('td.selection input:checkbox').attr('checked', true); - $('td.selection input:checkbox').parent().parent().addClass('selected'); + $('td.filename input:checkbox').attr('checked', true); + $('td.filename input:checkbox').parent().parent().addClass('selected'); }else{ // Uncheck all - $('td.selection input:checkbox').attr('checked', false); - $('td.selection input:checkbox').parent().parent().removeClass('selected'); + $('td.filename input:checkbox').attr('checked', false); + $('td.filename input:checkbox').parent().parent().removeClass('selected'); } + procesSelection(); }); - $('td.selection input:checkbox').live('click',function() { + $('td.filename input:checkbox').live('click',function() { + var selectedCount=$('td.filename input:checkbox:checked').length; $(this).parent().parent().toggleClass('selected'); if(!$(this).attr('checked')){ $('#select_all').attr('checked',false); }else{ - if($('td.selection input:checkbox:checked').length==$('td.selection input:checkbox').length){ + if(selectedCount==$('td.filename input:checkbox').length){ $('#select_all').attr('checked',true); } } + procesSelection(); }); $('#file_newfolder_form').submit(function(event) { @@ -109,7 +112,7 @@ $(document).ready(function() { $('.download').live('click',function(event) { var files=''; - $('td.selection input:checkbox:checked').parent().parent().each(function(i,element){ + $('td.filename input:checkbox:checked').parent().parent().each(function(i,element){ files+=';'+$(element).attr('data-file'); }); files=files.substr(1);//remove leading ; @@ -121,9 +124,9 @@ $(document).ready(function() { return false; }); - $('.delete').live('click',function(event) { + $('.delete').click(function(event) { var files=''; - $('td.selection input:checkbox:checked').parent().parent().each(function(i,element){ + $('td.filename input:checkbox:checked').parent().parent().each(function(i,element){ files+=';'+$(element).attr('data-file'); }); files=files.substr(1);//remove leading ; @@ -133,7 +136,7 @@ $(document).ready(function() { data: "dir="+$('#dir').val()+"&files="+encodeURIComponent(files), complete: function(data){ boolOperationFinished(data, function(){ - $('td.selection input:checkbox:checked').parent().parent().each(function(i,element){ + $('td.filename input:checkbox:checked').parent().parent().each(function(i,element){ FileList.remove($(element).attr('data-file')); }); }); @@ -282,4 +285,49 @@ var folderDropOptions={ });} }); } +} + +function procesSelection(){ + var selectedFiles=$('tr[data-type="file"]>td.filename>input:checkbox:checked').parent().parent(); + var selectedFolders=$('tr[data-type="dir"]>td.filename>input:checkbox:checked').parent().parent(); + if(selectedFiles.length==0 && selectedFolders.length==0){ + $('#headerName>span.name').text('Name'); + $('#headerSize').text('Size (MB)'); + }else{ + var totalSize=0; + selectedFiles.each(function(){ + totalSize+=parseInt($(this).attr('data-size')); + }); + selectedFolders.each(function(){ + totalSize+=parseInt($(this).attr('data-size')); + }); + if(totalSize>0){ + totalSize = Math.round(totalSize/(1024*102.4))/10; + if(totalSize < 0.1) { + totalSize='<0.1'; + }else if(totalSize > 1000) { + totalSize= '>1000'; + } + } + $('#headerSize').text(totalSize+' (MB)'); + var selection=''; + if(selectedFiles.length>0){ + if(selectedFiles.length==1){ + selection+='1 File'; + }else{ + selection+=selectedFiles.length+' Files'; + } + if(selectedFolders.length>0){ + selection+=' ,'; + } + } + if(selectedFolders.length>0){ + if(selectedFolders.length==1){ + selection+='1 Folder'; + }else{ + selection+=selectedFolders.length+' Folders'; + } + } + $('#headerName>span.name').text(selection+' Selected'); + } } \ No newline at end of file diff --git a/files/templates/index.php b/files/templates/index.php index efc9290063..7cdb81b2d6 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -1,4 +1,7 @@
+ + +
" id="max_upload"> @@ -14,26 +17,25 @@  
- t( 'Download' ); ?> - - t( 'Delete' ); ?>
- - - - - - - + + - diff --git a/files/templates/part.breadcrumb.php b/files/templates/part.breadcrumb.php index 64e0a47472..20c436926c 100644 --- a/files/templates/part.breadcrumb.php +++ b/files/templates/part.breadcrumb.php @@ -1,8 +1,5 @@ -
- ">" alt="Root"/> -
-
+
")'> ">
\ No newline at end of file diff --git a/files/templates/part.list.php b/files/templates/part.list.php index d717f28885..1468f485c2 100644 --- a/files/templates/part.list.php +++ b/files/templates/part.list.php @@ -1,9 +1,9 @@ -
- + '> -
t( 'Name' ); ?>t( 'Size (MB)' ); ?> + + t( 'Name' ); ?> + + Download + + Delete + + t( 'Size (MB)' ); ?> t( 'Modified' ); ?>
+ @@ -14,6 +14,5 @@