From 8eac4ca1339e86112e269d884abd393b1a028b3b Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Thu, 7 Jul 2011 02:26:07 +0200 Subject: [PATCH] Removed shadows. Reworked tree side bar. --- README.md | 9 +- build.properties | 2 +- build.xml | 1 + src/h5ai/css/inc/extended.less | 26 ++-- src/h5ai/css/inc/tree.less | 54 ++++++-- src/h5ai/css/main.less | 17 ++- src/h5ai/icons/48x48/blank.png | Bin 227 -> 236 bytes src/h5ai/images/blank.png | Bin 0 -> 227 bytes src/h5ai/images/tree.png | Bin 0 -> 458 bytes src/h5ai/js/inc/file.js | 120 +++++++++++------ src/h5ai/js/inc/h5ai.js | 98 ++++++-------- src/h5ai/js/inc/tree.js | 206 +++++++++++++----------------- src/h5ai/options.js | 6 +- target/dot.htaccess | 4 +- target/h5ai/css/main.css | 2 +- target/h5ai/footer.html | 2 +- target/h5ai/header.html | 2 +- target/h5ai/icons/48x48/blank.png | Bin 227 -> 236 bytes target/h5ai/images/blank.png | Bin 0 -> 227 bytes target/h5ai/images/tree.png | Bin 0 -> 458 bytes target/h5ai/js/main.js | 2 +- target/h5ai/options.js | 6 +- 22 files changed, 302 insertions(+), 255 deletions(-) create mode 100644 src/h5ai/images/blank.png create mode 100644 src/h5ai/images/tree.png create mode 100644 target/h5ai/images/blank.png create mode 100644 target/h5ai/images/tree.png diff --git a/README.md b/README.md index ded35c52..f81ab524 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# h5ai v0.6   ·   a beautified Apache index +# h5ai v0.7   ·   a beautified Apache index ## Screenshots @@ -47,6 +47,13 @@ please respect their rights. ## Changelog +### v0.7 +*2011-07-07* + +* removed shadows +* smarter tree side bar + + ### v0.6 *2011-07-05* diff --git a/build.properties b/build.properties index a4f6a241..77cc8ce9 100644 --- a/build.properties +++ b/build.properties @@ -3,7 +3,7 @@ custom = true # project project.name = h5ai -project.version = 0.6 +project.version = 0.7 # src diff --git a/build.xml b/build.xml index a214d5c0..147dc69e 100644 --- a/build.xml +++ b/build.xml @@ -2,6 +2,7 @@ diff --git a/src/h5ai/css/inc/extended.less b/src/h5ai/css/inc/extended.less index 8a0fee0e..4ba42860 100644 --- a/src/h5ai/css/inc/extended.less +++ b/src/h5ai/css/inc/extended.less @@ -44,10 +44,16 @@ color: #e80; } } - &.notListable { + &.error { > a, > a:visited { opacity: 0.7; color: #999; + + .hint { + font-size: 0.9em; + font-style: italic; + color: #c55; + } } } } @@ -75,11 +81,6 @@ overflow: hidden; white-space: nowrap; text-align: left; - .error { - font-size: 0.9em; - font-style: italic; - color: #c55; - } } .date { position: absolute; @@ -161,20 +162,21 @@ .label { display: block; word-wrap: break-word; - .error { - font-size: 0.9em; - font-style: italic; - color: #c55; - } } .date, .size { display: none; } } - &.notListable { + &.error { > a, > a:visited { opacity: 0.7; color: #999; + + .hint { + font-size: 0.9em; + font-style: italic; + color: #c55; + } } } } diff --git a/src/h5ai/css/inc/tree.less b/src/h5ai/css/inc/tree.less index c310d01e..5b31d8b6 100644 --- a/src/h5ai/css/inc/tree.less +++ b/src/h5ai/css/inc/tree.less @@ -1,19 +1,50 @@ #tree { - display: none; position: fixed; - left: 0; + left: -200px; top: 80px; font-size: 0.85em; padding: 16px 32px 16px 16px; - background-color: rgb(240,240,240); - border: 1px solid rgb(225,225,225); + background-color: rgb(241,241,241); + border: 2px solid rgb(210,210,210); border-left: none; .border-radius ( 0 15px 15px 0 ); - .box-shadow( 0 0 30px #999 ); - + .entry { + .blank, .indicator { + display: inline-block; + width: 16px; + height: 25px; + float: left; + } + .indicator { + opacity: 0.7; + .transition( all 0.2s ease-in-out ); + cursor: pointer; + + &:hover { + opacity: 1; + } + img { + position: relative; + left: 0; + top: 3px; + width: 12px; + height: 12px; + vertical-align: bottom; + .transition( all 0.2s ease-in-out ); + } + &.open { + img { + .transform( rotate(90deg) ); + } + } + &.unknown { + opacity: 0.3; + } + } > a, > a.visited { + margin-left: 16px; padding: 4px 6px; border: 1px solid rgba(0,0,0,0); .border-radius( 5px ); @@ -40,6 +71,7 @@ display: inline-block; margin-left: 12px; font-style: italic; + font-size: 0.9em; color: #ccc; img { width: 10px; @@ -47,9 +79,6 @@ vertical-align: baseline; } } - .error { - color: #c55; - } } &.file { display: none; @@ -61,12 +90,15 @@ opacity: 1; } } - &.notListable { + &.error { > a, > a:visited { color: #999; } + .hint { + color: #c55; + } } - ul { + .content { list-style: none; margin-left: 20px; } diff --git a/src/h5ai/css/main.less b/src/h5ai/css/main.less index a03f57a5..0e305b2f 100644 --- a/src/h5ai/css/main.less +++ b/src/h5ai/css/main.less @@ -39,10 +39,9 @@ body > nav { left: 0; top: 0; font-size: 0.85em; - background-color: rgb(240,240,240); - border-bottom: 1px solid rgb(225,225,225); - .box-shadow( 0 0 30px #555 ); - + background-color: rgb(241,241,241); + border-bottom: 2px solid rgb(210,210,210); + span.jsDisabledFallback { display: block; height: 30px; @@ -57,7 +56,7 @@ body > nav { &.crumb { float: left; - border-right: 1px dotted rgb(225,225,225); + border-right: 1px solid rgb(231,231,231); .hint { margin-left: 8px; font-style: italic; @@ -76,7 +75,7 @@ body > nav { } &.view { float: right; - border-left: 1px dotted rgb(225,225,225); + border-left: 1px solid rgb(230,230,230); } &:hover, &:hover a { background-color: rgba(255,255,255,0.5); @@ -130,12 +129,12 @@ body > footer { left: 0; bottom: 0; padding: 10px 0; - border-top: 1px solid rgb(225,225,225); - background-color: rgb(240,240,240); + background-color: rgb(241,241,241); + border-top: 2px solid rgb(210,210,210); + color: #999; font-size: 0.85em; text-align: center; - .box-shadow( 0 0 30px #555 ); a, a:visited { color: #555; diff --git a/src/h5ai/icons/48x48/blank.png b/src/h5ai/icons/48x48/blank.png index bef1f600664da97d487c7dc4abece6ed50b9e362..78363b0fa9bdf9c2cee469b23446f8fab17af6ba 100644 GIT binary patch delta 129 zcmaFN_=eG}Gr-TCmrII^fq{Y7)59eQNE?7K2Q!dNxWl;>NHG=%xjQkeJ16rJ$gvOb z32~ihY0naT*mD2G8cQp7R(^e^V{=P{fRd7)E{-7{$KM`o1acS-FZdaJ{{c%VBf|$C XP6GzUOKXL1fy6ys{an^LB{Ts5|Dq!^ delta 120 zcmaFE_?XeMGr-TCmrII^fq{Y7)59eQNDF{42Q!e=(B%&XQjEnx?oJHr&dIz4a-0Hu zLR>$5csJ3^o@Mqj8?K3!mU?XL0^H^guZBDX%JX`) zzkYrD_WkqcFJHcV{rvgk|NsAIFS7yJ$ygHP7tG-B>_!@hljQC0!qCAg>jC6&7I;J! zGca%qgD@k*tT_@uLG}_)Usv|qZ0rKu<`1uiJOm2ydb&7*s9SJ}Q+;>ws?-+v`6h+6L z=RN-n8T$jhS|aig$MI$m1be{3z&t6SYuk3aSS+3-Npc3X2WC@DUHu`K%RSa=wN?-W zH^2?hn+T9jr$4LJYMjsKpXjIap_`2W%d&cfLLsSCD({ZtTmg3mUtjtiWV6|wMx(JU zA{!!N|8+znG7{qw5CWIL+t{f?(g9P;6ysF-2K5Nm02pki2mk;807*qoM6N<$g3sKy A-~a#s literal 0 HcmV?d00001 diff --git a/src/h5ai/js/inc/file.js b/src/h5ai/js/inc/file.js index c8ba0f3e..5058df01 100644 --- a/src/h5ai/js/inc/file.js +++ b/src/h5ai/js/inc/file.js @@ -1,22 +1,26 @@ var File = function ( utils, folder, tableRow ) { + var THIS = this; + + + if ( ! /\/$/.test( folder ) ) { folder += "/"; }; if ( tableRow !== undefined ) { var $tds = $( tableRow ).find( "td" ); - var $img = $( $tds.get( 0 ) ).find( "img" ); - var $a= $( $tds.get( 1 ) ).find( "a" ); + var $img = $tds.eq( 0 ).find( "img" ); + var $a= $tds.eq( 1 ).find( "a" ); this.parentFolder = folder; this.icon16 = $img.attr( "src" ); this.alt = $img.attr( "alt" ); this.label = $a.text(); - this.href = $a.attr("href"); - this.date = $( $tds.get(2) ).text(); - this.size = $( $tds.get(3) ).text(); + this.href = decodeURI( $a.attr("href") ); + this.date = $tds.eq( 2 ).text(); + this.size = $tds.eq( 3 ).text(); } else { var splits = utils.splitPathname( folder ); @@ -35,65 +39,105 @@ var File = function ( utils, folder, tableRow ) { this.icon48 = this.icon16.replace( "16x16", "48x48" ); this.isFolder = ( this.alt === "[DIR]" ); this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" ); - this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href; + this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href; + this.status = undefined; // undefined, "h5ai" or HTTP response code this.content = undefined; + this.$treeHtml = undefined; - this.isComplete = function () { + this.isEmpty = function() { - if ( this.isFolder ) { - if ( this.content === undefined ) { + if ( this.content === undefined ) { + return true; + }; + for ( var prop in this.content ) { + if( this.content.hasOwnProperty( prop ) ) { return false; - } else if ( this.content instanceof Array ) { - for ( idx in this.content ) { - if ( !this.content[idx].isComplete() ) { - return false; - }; - }; }; }; return true; }; - this.toHtml = function () { + this.updateTreeHtml = function () { - var $entry = $( "
" ); + var $html = $( "
" ).data( "file", this ); + var $blank = $( "" ).appendTo( $html ); try { var $a = $( "" ) - .appendTo( $entry ) + .appendTo( $html ) .append( $( "" ) ) .append( $( "" + this.label + "" ) ); if ( this.isFolder ) { - $entry.addClass( "folder" ); - if ( this.absHref === document.location.pathname ) { - $a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-open.png" ); - $entry.addClass( "current" ); - }; - if ( this.content instanceof Array ) { - var $ul = $( "