mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

visual changes WIP

This commit is contained in:
Robin 2010-04-11 22:49:24 +02:00
parent e830718757
commit 2e39fba305
6 changed files with 239 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
css/default.php
View File

@ -2,10 +2,30 @@
header('Content-Type: text/css');
require_once('../inc/lib_base.php');
?>
body {
html,body {
background-color: #F9F9F9;
margin:0px;
height:100%;
width:100%;
position:absolute;
}
#mainlayout, #mainlayout>tbody{
width:100%;
height:100%;
}
#mainlayout .head{
height:175px;
}
#mainlayout .body{
vertical-align:top;
}
#mainlayout .foot{
height:75px;
}
body.error {background-color: #F0F0F0;}
body,th,td,ul,li,a,div,p,pre {color:#333333; font-family:Verdana,"Bitstream Vera Sans",Arial,Helvetica,Sans,"Bitstream Vera Serif"; font-size:9.0pt;}
@ -54,7 +74,10 @@ a#owncloud-logo span {
.errortext {color:#CC3333; font-size:9pt; font-weight:bold; text-decoration:none;}
.highlighttext {color:#333333; font-size:9pt; font-weight:bold; text-decoration:none;}
.datetext {color:#333333; font-size:7pt;}
.sizetext {color:#333333; font-size:7pt;}
.sizetext{
color:#333333;
font-size:7pt;
}
.footer {color:#999999; text-align:center; font-size:9pt; margin-top:4em;}
.footer a {color:#999999; text-decoration:none;}
.hint {color:#AAAAAA; text-align:center; font-size:8pt; margin-top:4em; margin-bottom:2em;}
@ -139,7 +162,10 @@ a#owncloud-logo span {
margin:0px;
padding:0px;
border:0px;
//do not use display:none here, it breaks iframes in some browsers
position:absolute;
top:0px;
left:0px;
/*do not use display:none here, it breaks iframes in some browsers*/
}
div.OCNotification{
@ -163,20 +189,10 @@ td img.file_actions{
width:9px;
}
td:hover img.file_actions{
td.nametext:hover img.file_actions{
height:auto;
}
td img.rename, td img.delete{
height:0px;
width:16px;
cursor:pointer;
}
td:hover img.rename, tr:hover img.delete{
height:16px;
}
div.breadcrumb{
background-color: #F0F0F0;
}
@ -194,4 +210,86 @@ div.fileactionlist td{
div.fileactionlist td:hover{
background-color: #CCCCCC;
}
tr.breadcrumb{
background-color: #CCCCCC;
}
#content, div.browser{
height:100%;
}
table.browser{
border: solid 3px #CCC;
height:100%;
border-spacing:0px;
}
table.browser thead, table.browser tfoot{
background-color:#CCC;
width:100%;
}
td.sizetext{
width:110px;
text-align:right;
}
td.fileSelector, td.fileicon{
width:16px;
}
span.upload{
float:right;
text-align:right;
margin:0px;
padding:0px;
}
table.browser>tbody{
height:100%;
vertical-align:top;
}
table.browser>tbody>tr>td, table.browser>tbody>tr{
padding:0px;
height:100%;
}
div.fileList{
width:800px;
overflow:auto;
vertical-align:top;
top:0px;
}
div.fileList table{
width:100%;
vertical-align:top;
}
thead td, tfoot td{
padding-left:6px;
padding-top:2px;
padding-bottom:2px;
}
#imageframe{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background:rgb(20,20,20);
background:rgba(20,20,20,0.9);
text-align:center;
}
#imageframe img{
vertical-align:middle;
max-height:90%;
max-width:90%;
margin:10px;
border: black solid 3px;
}

2
files/get_file.php
View File

@ -20,7 +20,7 @@
*
*/
//not this file is for getting files themselves, get_files.php is for getting a list of files.
//note this file is for getting files themselves, get_files.php is for getting a list of files.
require_once('../inc/lib_base.php');

3
inc/templates/footer.php
View File

@ -1,6 +1,9 @@
</td></tr>
<tr class='foot'><td class='foot'>
<p class="footer">
<?php
echo('<a href="http://ownCloud.org">ownCloud</a> - 1.0 beta 2');
?>
</p>
</td></tr>
</body></html>

3
inc/templates/header.php
View File

@ -22,6 +22,8 @@ foreach(OC_UTIL::$scripts as $script){
</script>
</head>
<body onload='OC_onload.run()'>
<table id='mainlayout' cellpadding='0' cellspacing='0'>
<tr class='head'><td class='head'>
<?php
echo('<h1><a id="owncloud-logo" href="'.$WEBROOT.'"><span>ownCloud</span></a></h1>');
@ -53,6 +55,7 @@ echo('<h1><a id="owncloud-logo" href="'.$WEBROOT.'"><span>ownCloud</span></a></h
echo('<div id="nav" class="center">');
OC_UTIL::shownavigation();
echo('</div>');
echo('</td></tr><tr class="body"><td class="body">');
}
?>

157
js/filebrowser.js
View File

@ -51,31 +51,39 @@ OC_FILES.browser.show_callback=function(content){
//remove current content;
var contentNode=document.getElementById('content');
contentNode.className+=' center';
if(contentNode.hasChildNodes()){
while(contentNode.childNodes.length >=1){
contentNode.removeChild(contentNode.firstChild);
}
}
var browser=document.createElement('div');
browser.className='center';
var table=document.createElement('table');
browser.appendChild(table);
table.className='browser';
var tbody=document.createElement('tbody');
var thead=document.createElement('thead');
var tfoot=document.createElement('tfoot');
table.appendChild(thead);
table.appendChild(tbody);
table.appendChild(tfoot);
// table.setAttribute('cellpadding',6);
// breadcrumb
if(dirs.length>0) {
table.setAttribute('cellpadding',2);
table.setAttribute('cellspacing',0);
var tbody=document.createElement('tbody');//some IE versions need this
table.appendChild(tbody);
tr=document.createElement('tr');
tbody.appendChild(tr);
thead.appendChild(tr);
tr.className='breadcrumb';
td=document.createElement('td');
tr.appendChild(td);
td.className='fileSelector'
input=document.createElement('input');
input.setAttribute('type','checkbox');
input.setAttribute('name','fileSelector');
input.setAttribute('value','select_all');
input.setAttribute('id','select_all');
input.addEvent('onclick',OC_FILES.selectAll);
td.appendChild(input);
td=document.createElement('td');
tr.appendChild(td);
td.setAttribute('colspan','2');
td=document.createElement('td');
tr.appendChild(td);
td.setAttribute('colspan','4');
td.className='breadcrumb';
var a=document.createElement('a');
td.appendChild(a);
@ -100,56 +108,35 @@ OC_FILES.browser.show_callback=function(content){
}
// files and directories
table.setAttribute('cellpadding',6);
table.setAttribute('cellspacing',0);
table.className='browser';
var tbody=document.createElement('tbody');//some IE versions need this
table.appendChild(tbody);
var filesfound=false;
var sizeTd=null;
if(content){
tr=document.createElement('tr');
tbody.appendChild(tr);
tr.className='browserline';
td=document.createElement('td');
tr.appendChild(td);
td.setAttribute('colspan','2');
input=document.createElement('input');
input.setAttribute('type','checkbox');
input.setAttribute('name','fileSelector');
input.setAttribute('value','select_all');
input.setAttribute('id','select_all');
input.addEvent('onclick',OC_FILES.selectAll);
td.appendChild(input);
td=document.createElement('td');
tr.appendChild(td);
td.setAttribute('colspan','4');
dropdown=document.createElement('select');
td.appendChild(dropdown);
dropdown.setAttribute('id','selected_action');
for(index in this.actions_selected){
if(this.actions_selected[index].call){
option=document.createElement('option');
dropdown.appendChild(option);
option.setAttribute('value',index);
option.appendChild(document.createTextNode(index));
}
}
td.appendChild(document.createTextNode(' selected. '));
button=document.createElement('button');
td.appendChild(button);
button.appendChild(document.createTextNode('Go'));
button.addEvent('onclick',OC_FILES.action_selected);
tr=document.createElement('tr');
tbody.appendChild(tr);
td=document.createElement('td');
td.setAttribute('colspan','6');
tr.appendChild(td);
div=document.createElement('div');
td.appendChild(div);
div.className='fileList';
table2=document.createElement('table');
div.appendChild(table2);
tbody2=document.createElement('tbody');
table2.appendChild(tbody2);
table2.setAttribute('cellpadding',6);
table2.setAttribute('cellspacing',0);
for(index in content){
var file=content[index];
if(file.name){
file.name=file.name.replace('\'','');
OC_FILES.files[file['name']]=new OC_FILES.file(dir,file['name'],file['type']);
tr=document.createElement('tr');
tbody.appendChild(tr);
tbody2.appendChild(tr);
tr.className='browserline';
td=document.createElement('td');
tr.appendChild(td);
td.className='fileSelector';
input=document.createElement('input');
input.setAttribute('type','checkbox');
input.setAttribute('name','fileSelector');
@ -170,7 +157,7 @@ OC_FILES.browser.show_callback=function(content){
td.setAttribute('colspan',2);
a.setAttribute('href','#'+dir+'/'+file['name']);
}else{
a.setAttribute('href','#');
a.setAttribute('href','#'+dir);
sizeTd=document.createElement('td');
tr.appendChild(sizeTd);
sizeTd.className='sizetext';
@ -192,21 +179,40 @@ OC_FILES.browser.show_callback=function(content){
}
}
}
td=document.createElement('td');
tr.appendChild(td);
tr=document.createElement('tr');
tbody.appendChild(tr);
tr.className='utilrow';
td=document.createElement('td');
tr.appendChild(td);
td.className='upload';
td.setAttribute('colspan','6');
OC_FILES.browser.showuploader(dir,td,content['max_upload']);
contentNode.appendChild(browser);
tfoot.appendChild(tr);
tr.className='utilityline';
td=document.createElement('td');
tr.appendChild(td);
td.setAttribute('colspan','4');
span=document.createElement('span');
td.appendChild(span);
dropdown=document.createElement('select');
span.appendChild(dropdown);
dropdown.setAttribute('id','selected_action');
for(index in this.actions_selected){
if(this.actions_selected[index].call){
option=document.createElement('option');
dropdown.appendChild(option);
option.setAttribute('value',index);
option.appendChild(document.createTextNode(index));
}
}
span.appendChild(document.createTextNode(' selected. '));
button=document.createElement('button');
span.appendChild(button);
button.appendChild(document.createTextNode('Go'));
button.addEvent('onclick',OC_FILES.action_selected);
span=document.createElement('span');
span.className='upload';
td.appendChild(span);
OC_FILES.browser.showuploader(dir,span,content['max_upload']);
contentNode.appendChild(table);
}
OC_FILES.browser.showicon=function(filetype){
var td=document.createElement('td');
td.className='fileicon';
var img=document.createElement('img');
td.appendChild(img);
img.setAttribute('width',16);
@ -228,7 +234,6 @@ OC_FILES.browser.showuploader=function(dir,parent,max_upload){
OC_FILES.uploadIFrame=document.createElement('iframe');
OC_FILES.uploadIFrame.className='hidden';
OC_FILES.uploadIFrame.name='uploadIFrame';
parent.appendChild(OC_FILES.uploadIFrame);
var input=document.createElement('input');
input.setAttribute('type','hidden');
input.setAttribute('name','MAX_FILE_SIZE');
@ -243,6 +248,7 @@ OC_FILES.browser.showuploader=function(dir,parent,max_upload){
OC_FILES.uploadForm.appendChild(document.createTextNode('Upload file: '));
OC_FILES.uploadForm.appendChild(file);
parent.appendChild(OC_FILES.uploadForm);
parent.appendChild(OC_FILES.uploadIFrame);
}
OC_FILES.browser.show_rename=function(dir,file){
@ -322,9 +328,11 @@ OC_FILES.browser.showactions=function(file,hide){
OC_FILES.browser.hideallactions=function(){
if(OC_FILES.hideallenabled){
for(name in OC_FILES.files){
if(OC_FILES.files[name].hideactions){
OC_FILES.files[name].hideactions.call(OC_FILES.files[name]);
}
if(OC_FILES.files[name]){
if(OC_FILES.files[name].hideactions){
OC_FILES.files[name].hideactions.call(OC_FILES.files[name]);
}
}
}
}
}
@ -343,4 +351,21 @@ sizeFormat=function(size){
size=size.toFixed(2);
}
return ''+size+' '+steps[step];
}
OC_FILES.browser.showImage=function(dir,file){
var path=WEBROOT+'/files/open_file.php?dir='+dir+'&file='+file
var div=document.createElement('div');
div.setAttribute('id','imageframe');
div.addEvent('onclick',OC_FILES.browser.hideImage)
var img=document.createElement('img');
img.setAttribute('src',path);
div.appendChild(img);
body=document.getElementsByTagName('body').item(0);
body.appendChild(div);
}
OC_FILES.browser.hideImage=function(){
var div=document.getElementById('imageframe');
div.parentNode.removeChild(div);
}

37
js/lib_files.js
View File

@ -175,12 +175,6 @@ OC_FILES.file=function(dir,file,type){
this.actions[index]=OC_FILES.fileActions.all[index];
}
}
if(OC_FILES.fileActions[this.extention])
for(index in OC_FILES.fileActions[this.extention]){
if(OC_FILES.fileActions[this.extention][index].call){
this.actions[index]=OC_FILES.fileActions[this.extention][index];
}
}
if(OC_FILES.fileActions[this.type]){
for(index in OC_FILES.fileActions[this.type]){
if(OC_FILES.fileActions[this.type][index].call){
@ -188,6 +182,13 @@ OC_FILES.file=function(dir,file,type){
}
}
}
if(OC_FILES.fileActions[this.extention]){
for(index in OC_FILES.fileActions[this.extention]){
if(OC_FILES.fileActions[this.extention][index].call){
this.actions[index]=OC_FILES.fileActions[this.extention][index];
}
}
}
}
OC_FILES.file.prototype.showactions=function(){
@ -223,10 +224,30 @@ OC_FILES.fileActions.dir['default']=OC_FILES.fileActions.dir.open;
OC_FILES.fileActions.jpg=new Object()
OC_FILES.fileActions.jpg.show=function(){
window.open(WEBROOT+'/files/open_file.php?dir='+this.dir+'&file='+this.file);
// window.open(WEBROOT+'/files/open_file.php?dir='+this.dir+'&file='+this.file);
OC_FILES.browser.showImage(this.dir,this.file);
}
OC_FILES.fileActions.jpg['default']=OC_FILES.fileActions.jpg.show;
OC_FILES.fileActions.jpeg=OC_FILES.fileActions.jpg
OC_FILES.fileActions.png=OC_FILES.fileActions.jpg
OC_FILES.fileActions.gif=OC_FILES.fileActions.jpg
OC_FILES.fileActions.bmp=OC_FILES.fileActions.jpg
OC_FILES.fileActions.bmp=OC_FILES.fileActions.jpg
function getStyle(el,styleProp)
{
// var x = document.getElementById(el);
var x=el;
if (x.currentStyle){
alert(x.currentStyle);
var y = x.currentStyle[styleProp];
}else if (window.getComputedStyle){
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
}
return y;
}
Node.prototype.getStyle=function(styleProp){
return getStyle(this,styleProp)
}