From ceb711dff4ceb02efd1c96b867df050f15ba4a93 Mon Sep 17 00:00:00 2001 From: Robin Appelman 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 b48092a9c07..7a26c2f6703 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 zcmV3$r%`!Kc6#m zW-&9E*#~zgQZsjdSeE4@0wn`}NqRAC&%^-t&Fpy;&jFjQR%*>2(z2?(3aS=UxZ{%kKUvigEV`X0{W; zK*im+yWQ@s2u9M~Ua!{-;bFjrnH3=n+y literal 0 HcmV?d00001 diff --git a/files/css/files.css b/files/css/files.css index d45d93441de..590c7bac364 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 dc59dda57e0..49e2f412d49 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() { -- 2.39.5