diff options
-rw-r--r-- | core/css/styles.css | 49 | ||||
-rw-r--r-- | core/img/breadcrumb-divider.png | bin | 0 -> 1012 bytes | |||
-rw-r--r-- | core/templates/layout.user.php | 7 | ||||
-rw-r--r-- | files/css/files.css | 46 | ||||
-rw-r--r-- | files/js/filelist.js | 8 | ||||
-rw-r--r-- | files/js/files.js | 68 | ||||
-rw-r--r-- | files/templates/index.php | 24 | ||||
-rw-r--r-- | files/templates/part.breadcrumb.php | 5 | ||||
-rw-r--r-- | files/templates/part.list.php | 5 |
9 files changed, 133 insertions, 79 deletions
diff --git a/core/css/styles.css b/core/css/styles.css index f9b536a2b04..2bc29882250 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 Binary files differnew file mode 100644 index 00000000000..52742e37238 --- /dev/null +++ b/core/img/breadcrumb-divider.png diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 2a9a817498d..dedb6e2e4a1 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -38,6 +38,9 @@ </div> <div id="main"> + <div id="content"> + <?php echo $_['content']; ?> + </div> <div id="plugins"> <ul> <?php foreach($_['navigation'] as $entry): ?> @@ -45,10 +48,6 @@ <?php endforeach; ?> </ul> </div> - - <div id="content"> - <?php echo $_['content']; ?> - </div> </div> </body> </html> 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 diff --git a/files/js/filelist.js b/files/js/filelist.js index 2c662087ab2..9300e311076 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='<tr data-file="'+name+'" data-type="file">'; - html+='<td class="selection"><input type="checkbox" /></td>'; - html+='<td class="filename"><a style="background-image:url('+img+')" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>'; + html+='<td class="filename"><input type="checkbox" /><a style="background-image:url('+img+')" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>'; html+='<td class="filesize">'+size+'</td>'; html+='<td class="date">'+lastModified+'</td>'; - html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>'; html+='</tr>'; FileList.insertElement(name,'file',$(html)); if(loading){ @@ -20,11 +18,9 @@ FileList={ }, addDir:function(name,size,lastModified){ var html='<tr data-file="'+name+'" data-type="dir">'; - html+='<td class="selection"><input type="checkbox" /></td>'; - html+='<td class="filename"><a style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'"><strong>'+name+'</strong></a></td>'; + html+='<td class="filename"><input type="checkbox" /><a style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'"><strong>'+name+'</strong></a></td>'; html+='<td class="filesize">'+size+'</td>'; html+='<td class="date">'+lastModified+'</td>'; - html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>'; html+='</tr>'; FileList.insertElement(name,'dir',$(html)); diff --git a/files/js/files.js b/files/js/files.js index d4191215972..4a3de095509 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 efc92900637..7cdb81b2d66 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -1,4 +1,7 @@ <div class="controls"> + <span class="nav"> + <?php echo($_['breadcrumb']); ?> + </span> <div class="actions"> <form data-upload-id='1' class="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target_1"> <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload"> @@ -14,26 +17,25 @@ <input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" /> <input class="prettybutton" type="submit" id="file_newfolder_submit" name="file_newfolder_submit" value="OK" /> </form> - <a href="" title="" class="download"><?php echo $l->t( 'Download' ); ?></a> - <!--<a href="" title="" class="share"><?php echo $l->t( 'Share' ); ?></a>--> - <a href="" title="" class="delete"><?php echo $l->t( 'Delete' ); ?></a> </div> <div id="file_action_panel"> </div> </div> -<span class="nav"> - <?php echo($_['breadcrumb']); ?> -</span> - <table cellspacing="0"> <thead> <tr> - <th><input type="checkbox" id="select_all" /></th> - <th><?php echo $l->t( 'Name' ); ?></th> - <th><?php echo $l->t( 'Size (MB)' ); ?></th> + <th id='headerName'> + <input type="checkbox" id="select_all" /> + <span class='name'><?php echo $l->t( 'Name' ); ?></span> + <span id='selectedActions'> + <a href="" title="" class="download">Download</a> + <!--<a href="" title="" class="share">Share</a>--> + <a href="" title="" class="delete">Delete</a> + </span> + </th> + <th id='headerSize'><?php echo $l->t( 'Size (MB)' ); ?></th> <th><?php echo $l->t( 'Modified' ); ?></th> - <th></th> </tr> </thead> <tbody id="fileList"> diff --git a/files/templates/part.breadcrumb.php b/files/templates/part.breadcrumb.php index 64e0a474728..20c436926c6 100644 --- a/files/templates/part.breadcrumb.php +++ b/files/templates/part.breadcrumb.php @@ -1,8 +1,5 @@ - <div class='crumb' data-dir='/'> - <a href="<?php echo link_to("files", "index.php"); ?>"><img src="<?php echo image_path("", "actions/go-home.png"); ?>" alt="Root"/></a> - </div> <?php foreach($_["breadcrumb"] as $crumb): ?> - <div class='crumb' data-dir='<?php echo $crumb["dir"];?>'> + <div class='crumb' data-dir='<?php echo $crumb["dir"];?>' style='background-image:url("<?php echo image_path('core','breadcrumb-divider.png');?>")'> <a href="<?php echo link_to("files", "index.php?dir=".$crumb["dir"]); ?>"><?php echo htmlspecialchars($crumb["name"]); ?></a> </div> <?php endforeach; ?>
\ No newline at end of file diff --git a/files/templates/part.list.php b/files/templates/part.list.php index d717f288851..1468f485c23 100644 --- a/files/templates/part.list.php +++ b/files/templates/part.list.php @@ -1,9 +1,9 @@ <?php foreach($_['files'] as $file): $simple_file_size = simple_file_size($file['size']); $simple_size_color = 200-intval(pow(($file['size']/(1024*1024)),2)); ?> - <tr data-file="<?php echo $file['name'];?>" data-type="<?php echo ($file['type'] == 'dir')?'dir':'file'?>" data-mime="<?php echo $file['mime']?>"> - <td class="selection"><input type="checkbox" /></td> + <tr data-file="<?php echo $file['name'];?>" data-type="<?php echo ($file['type'] == 'dir')?'dir':'file'?>" data-mime="<?php echo $file['mime']?>" data-size='<?php echo $file['size'];?>'> <td class="filename"> + <input type="checkbox" /> <a style="background-image:url(<?php if($file['type'] == 'dir') echo mimetype_icon('dir'); else echo mimetype_icon($file['mime']); ?>)" href="<?php if($file['type'] == 'dir') echo link_to('files', 'index.php?dir='.$file['directory'].'/'.$file['name']); else echo link_to('files', 'download.php?file='.$file['directory'].'/'.$file['name']); ?>" title=""> <?php if($file['type'] == 'dir'):?> <strong><?php echo htmlspecialchars($file['name']);?></strong> @@ -14,6 +14,5 @@ </td> <td class="filesize" title="<?php echo human_file_size($file['size']); ?>" style="color:rgb(<?php echo $simple_size_color.','.$simple_size_color.','.$simple_size_color ?>)"><?php echo $simple_file_size; ?></td> <td class="date"><?php echo $file['date']; ?></td> - <td class="fileaction"><a href="" title="+" class="dropArrow"></a></td> </tr> <?php endforeach; ?> |