From 2e39fba305bccff05b715f8ee2aaee9d1525185d Mon Sep 17 00:00:00 2001 From: Robin Date: Sun, 11 Apr 2010 22:49:24 +0200 Subject: [PATCH] visual changes WIP --- css/default.php | 126 +++++++++++++++++++++++++++---- files/get_file.php | 2 +- inc/templates/footer.php | 3 + inc/templates/header.php | 3 + js/filebrowser.js | 157 +++++++++++++++++++++++---------------- js/lib_files.js | 37 +++++++-- 6 files changed, 239 insertions(+), 89 deletions(-) diff --git a/css/default.php b/css/default.php index dd69cd703da..93089b9d616 100755 --- a/css/default.php +++ b/css/default.php @@ -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; } \ No newline at end of file diff --git a/files/get_file.php b/files/get_file.php index 72fc8938063..9ec539ee7e0 100644 --- a/files/get_file.php +++ b/files/get_file.php @@ -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'); diff --git a/inc/templates/footer.php b/inc/templates/footer.php index 5ce34a95791..a63014ed518 100755 --- a/inc/templates/footer.php +++ b/inc/templates/footer.php @@ -1,6 +1,9 @@ + +

ownCloud - 1.0 beta 2'); ?>

+ diff --git a/inc/templates/header.php b/inc/templates/header.php index 1f194da797f..755eba26e44 100755 --- a/inc/templates/header.php +++ b/inc/templates/header.php @@ -22,6 +22,8 @@ foreach(OC_UTIL::$scripts as $script){ + +
'); @@ -53,6 +55,7 @@ echo('

'); OC_UTIL::shownavigation(); echo(''); + echo('

'); } ?> diff --git a/js/filebrowser.js b/js/filebrowser.js index 7bd656987a1..2f587fa4188 100644 --- a/js/filebrowser.js +++ b/js/filebrowser.js @@ -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); } \ No newline at end of file diff --git a/js/lib_files.js b/js/lib_files.js index 4851272593d..443d440380e 100644 --- a/js/lib_files.js +++ b/js/lib_files.js @@ -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 \ No newline at end of file +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) +} \ No newline at end of file