From ceb711dff4ceb02efd1c96b867df050f15ba4a93 Mon Sep 17 00:00:00 2001 From: Robin Appelman <icewind1991@gmail.com> Date: Fri, 22 Jul 2011 16:52:35 +0200 Subject: [PATCH] some work on the breadcrumb navigation for files --- core/css/styles.css | 4 ++-- core/img/breadcrumb-divider-start.png | Bin 0 -> 495 bytes files/css/files.css | 16 ++++++++++++++-- files/js/files.js | 22 ++++++++++++++++++++++ 4 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 core/img/breadcrumb-divider-start.png diff --git a/core/css/styles.css b/core/css/styles.css index b48092a9c0..7a26c2f670 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -206,7 +206,7 @@ div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1 form.searchbox { display:inline; position:fixed; top:1em; right:10em; margin:0; padding:0; } /* NAVIGATION ------------------------------------------------------------- */ -#plugins { position:fixed; top:3.5em; float:left; width:15.7em; padding:0; } +#plugins { position:fixed; top:3.5em; float:left; width:15.7em; padding:0; z-index:100; } #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; } @@ -219,7 +219,7 @@ form.searchbox { display:inline; position:fixed; top:1em; right:10em; margin:0; /* NAVIGATION BAR */ -span.nav { padding:1em 0 0 2em; } +span.nav { display:block; float:left; /*margin-right:55em;*/ } 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; } diff --git a/core/img/breadcrumb-divider-start.png b/core/img/breadcrumb-divider-start.png new file mode 100644 index 0000000000000000000000000000000000000000..24d1eb40857a576564a5145f5272290b7fd3eb73 GIT binary patch literal 495 zcmeAS@N?(olHy`uVBq!ia0y~yVBlt8U{K*;V_;y24?A#_fq{Xg*vT`5gM)*kh9jke zfq{Xuz$3Dlfr0582s8c<&cDOJz#v)T8c`CQpH@<ySd_|8US6)3nU`IhoLG>mmtT}V z`<;yx0|R4@r;B5VMQ`ub^I5@;BF8_zf4|NAE=Q}=L2-dyAJ~ipm6qlm>FsukUpU)o z_e!UuPUd+miV8Pewe`NTavfC{@KpRhp;fiyahyho0MCsCKXXA7!;_K{GwkOZ7pEB- z&$!86t{!AuULP^-sWOu)bDd|EVb1v@4ByYbsT4WSID2hawq_IKyAZ9Zhc%Afm7jex zio-jq===1Bv`2{tvLdJXJ4wu#z9luSTaagi(#ukj$M0Ux^?M%2!F>ANKdr99@9b&Y zgbz6!y}Nz)-FIs_+%DaXTYsJBVd8<dnWBn3ci3hH`dIKjkp7_4<^SsIujw3i=Reoz zPda8=5VAI`p6QJL<Vki*r}X{*qP|Y&rO=P(LjK;5O_rtz)?9r5eSRNbUt;-x-aWY{ zQuc1okMYe&z4?5~rP=>;&3Ap8y5ukC%3fPm`RuJx+D-ePRqnIq{MXAq>7J<T$6B>% zCDVek{F)hNE@?fOP{8m*$7lE5I{Ck9c?<^{mi&rXdfbA6fq}u()z4*}Q$iB}VC2px literal 0 HcmV?d00001 diff --git a/files/css/files.css b/files/css/files.css index d45d93441d..590c7bac36 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -115,10 +115,13 @@ span.extention{ div.crumb{ float:left; + display:block; background-repeat:no-repeat; background-position:right 0px; font-size:20px; - padding:8px; + padding-top:8px; + padding-left:8px; + height:28px; /*36-8*/ } table tr.mouseOver td { background-color:#eee; } @@ -158,4 +161,13 @@ table td.delete { background-image:url('../img/delete.png'); } float:right; display:none; } -#uploadsize-message{display:none} \ No newline at end of file +#uploadsize-message{display:none} + +/* add breadcrumb divider to the File item in navigation panel */ +#plugins li:first-child{ + background-position: 15.7em 0px; + background-repeat:no-repeat; + background-image: url("/owncloud/core/img/breadcrumb-divider-start.png"); + width:15.7em; + padding-right:11px; +} diff --git a/files/js/files.js b/files/js/files.js index dc59dda57e..49e2f412d4 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -208,6 +208,28 @@ $(document).ready(function() { if(navigator.userAgent.search(/konqueror/i)==-1){ $('.file_upload_start').attr('multiple','multiple') } + + //if the breadcrumb is to long, start by replacing foldernames with '...' except for the current folder + var crumb=$('div.crumb').first(); + while($('div.controls').height()>40 && crumb.next('div.crumb').length>0){ + crumb.children('a').text('...'); + crumb=crumb.next('div.crumb'); + } + //if that isn't enough, start removing items from the breacrumb except for the current folder and it's parent + var crumb=$('div.crumb').first(); + var next=crumb.next('div.crumb'); + while($('div.controls').height()>40 && next.next('div.crumb').length>0){ + crumb.remove(); + crumb=next; + next=crumb.next('div.crumb'); + } + //still not enough, start shorting down the current folder name + var crumb=$('div.crumb>a').last(); + while($('div.controls').height()>40 && crumb.text().length>6){ + var text=crumb.text() + text=text.substr(0,text.length-6)+'...'; + crumb.text(text); + } }); var adjustNewFolderSize = function() { -- GitLab