Skip to content
Snippets Groups Projects
Commit be6b5c8e authored by Robin Appelman's avatar Robin Appelman
Browse files

some work on the updated interface

parent 8eefd42a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 133 additions and 79 deletions
core/css/styles.css
+ 9
− 40
View file @ be6b5c8e
* { 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; }
......
core/img/breadcrumb-divider.png 0 → 100644
+ 0
− 0
View file @ be6b5c8e
core/img/breadcrumb-divider.png

1012 B

core/templates/layout.user.php
+ 3
− 4
View file @ be6b5c8e
......@@ -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>
files/css/files.css
+ 45
− 1
View file @ be6b5c8e
......@@ -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
files/js/filelist.js
+ 2
− 6
View file @ be6b5c8e
......@@ -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));
......
files/js/files.js
+ 58
− 10
View file @ be6b5c8e
......@@ -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
files/templates/index.php
+ 13
− 11
View file @ be6b5c8e
<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">
......
files/templates/part.breadcrumb.php
+ 1
− 4
View file @ be6b5c8e
<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
files/templates/part.list.php
+ 2
− 3
View file @ be6b5c8e
<?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; ?>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment