open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

some work on the updated interface

Browse Source
remotes/origin/stable
Robin Appelman 14 years ago
parent 8eefd42a7d
commit be6b5c8e77
9 changed files with 133 additions and 79 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 49
      core/css/styles.css
  2. BIN
      core/img/breadcrumb-divider.png
  3. 7
      core/templates/layout.user.php
  4. 46
      files/css/files.css
  5. 8
      files/js/filelist.js
  6. 68
      files/js/files.js
  7. 24
      files/templates/index.php
  8. 5
      files/templates/part.breadcrumb.php
  9. 5
      files/templates/part.list.php

49
core/css/styles.css
Unescape View File

@ -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; }

BIN
core/img/breadcrumb-divider.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

7
core/templates/layout.user.php
Unescape View File

@ -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>

46
files/css/files.css
Unescape View File

@ -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;
}

8
files/js/filelist.js
Unescape View File

@ -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));

68
files/js/files.js
Unescape View File

@ -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');
}
}

24
files/templates/index.php
Unescape View File

@ -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">

5
files/templates/part.breadcrumb.php
Unescape View File

@ -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; ?>

5
files/templates/part.list.php
Unescape View File

@ -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; ?>

Write Preview
Loading…
Cancel
Save