replaced TOC toggle images by CSS magic

Instead of relying on images to show the toggle button for hiding the table
of contents, now some CSS is used to simulate an arrow.

darcs-hash:20070514180903-7ad00-4aeef03580dfb92a5c939d3cdd569850ea31df5b.gz

4 files changed, 36 insertions, 29 deletions

diff --git a/lib/scripts/script.js b/lib/scripts/script.js
index 1ba303e8e..df6a13b11 100644
--- a/lib/scripts/script.js
+++ b/lib/scripts/script.js
@@ -243,21 +243,13 @@ function addTocToggle() {
     var header = $('toc__header');
     if(!header) return;
 
-    var showimg     = document.createElement('img');
-    showimg.id      = 'toc__show';
-    showimg.src     = DOKU_TPL+'images/toc_show.gif';
-    showimg.alt     = '+';
-    showimg.onclick = toggleToc;
-    showimg.style.display = 'none';
-
-    var hideimg     = document.createElement('img');
-    hideimg.id      = 'toc__hide';
-    hideimg.src     = DOKU_TPL+'images/toc_hide.gif';
-    hideimg.alt     = '-';
-    hideimg.onclick = toggleToc;
-
-    prependChild(header,showimg);
-    prependChild(header,hideimg);
+    var obj       = document.createElement('span');
+    obj.id        = 'toc__toggle';
+    obj.innerHTML = '<span>-</span>';
+    obj.className = 'toc_close';
+    obj.onclick   = toggleToc;
+
+    prependChild(header,obj);
 }
 
 /**
@@ -265,16 +257,15 @@ function addTocToggle() {
  */
 function toggleToc() {
   var toc = $('toc__inside');
-  var showimg = $('toc__show');
-  var hideimg = $('toc__hide');
+  var obj = $('toc__toggle');
   if(toc.style.display == 'none') {
-    toc.style.display      = '';
-    hideimg.style.display = '';
-    showimg.style.display = 'none';
+    toc.style.display   = '';
+    obj.style.innerHTML = '-';
+    obj.className       = 'toc_close';
   } else {
-    toc.style.display      = 'none';
-    hideimg.style.display = 'none';
-    showimg.style.display = '';
+    toc.style.display   = 'none';
+    obj.style.innerHTML = '<span>+</span>';
+    obj.className       = 'toc_open';
   }
 }
 
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index e950dc03e..fbeacefed 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -509,12 +509,28 @@ div.dokuwiki div.tocheader {
   margin-bottom: 2px;
 }
 
-div.dokuwiki div.tocheader img {
-  width: 0.8em;
-  height: 0.8em;
-  float: right;
-  margin: 0.3em 3px 0 0;
-  cursor: pointer;
+div.dokuwiki span.toc_open,
+div.dokuwiki span.toc_close {
+    border: 0.4em solid __background_alt__;
+    float: right;
+    display: block;
+    margin: 0.4em 3px 0 0;
+    cursor: pointer;
+}
+
+div.dokuwiki span.toc_open span,
+div.dokuwiki span.toc_close span {
+    display: none;
+}
+
+div.dokuwiki span.toc_open {
+    margin-top: 0.4em;
+    border-top: 0.4em solid __text__;
+}
+
+div.dokuwiki span.toc_close {
+    margin-top: 0;
+    border-bottom: 0.4em solid __text__;
 }
 
 div.dokuwiki #toc__inside {
diff --git a/lib/tpl/default/images/toc_hide.gif b/lib/tpl/default/images/toc_hide.gif
deleted file mode 100644
index d491c18db..000000000
--- a/lib/tpl/default/images/toc_hide.gif
+++ /dev/null
diff --git a/lib/tpl/default/images/toc_show.gif b/lib/tpl/default/images/toc_show.gif
deleted file mode 100644
index ff13b9585..000000000
--- a/lib/tpl/default/images/toc_show.gif
+++ /dev/null