some work on the updated interface

diff --git a/core/css/styles.css b/core/css/styles.css
index f9b536a2b0442b9d50a84913be40bca50c8a0e33..2bc2988225095600fbbfc8b2273b832d53810901 100644 (file)
--- 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 (file)
index 0000000..52742e3
Binary files /dev/null and b/core/img/breadcrumb-divider.png differ

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 2a9a817498d5ff53a3c88e76627072d3a600ed1d..dedb6e2e4a1b4633c04965055a53715ffe2eac5d 100644 (file)
--- 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 f4da6fae98cb30dc6fe9808c067f3902c71b6cd4..f119fe90a74d08a3dd2fa70baa9cfd1e863f9326 100644 (file)
--- 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 2c662087ab28d0034bd30c415d0481629fc82ac6..9300e311076fc51a1dce55f9d1d2431706349dc7 100644 (file)
--- 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 d4191215972bb6dc7237505af63d9985c2a0445b..4a3de095509c10a4e7f5ec7a53274d73b71f199d 100644 (file)
--- 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 efc929006379d541099fe2f62b943cf85ec12513..7cdb81b2d66cb937514cf718e722b7af9c96bc99 100644 (file)
--- 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" />&nbsp;
                        <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 64e0a47472823b73dd290ca519ee4b9134b7d2c1..20c436926c6d51873451665f843254c1b6aec78e 100644 (file)
--- 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 d717f288851226c2632408d215b3fd1909f2f108..1468f485c234a8b871753d0ffe1a843182c6a53a 100644 (file)
--- 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; ?>