From 97dc035bccdb7e6958c395614768737f7377f802 Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Thu, 6 Jun 2013 15:49:37 +0200
Subject: [PATCH] Use iconfont button for category selector; add styling.

---
 templates/2k11/admin/entries.tpl               |  1 -
 templates/2k11/admin/serendipity_editor.js.tpl | 16 +++++++++-------
 templates/2k11/admin/style.css                 | 18 +++++++++++++++++-
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/templates/2k11/admin/entries.tpl b/templates/2k11/admin/entries.tpl
index ad629dda..c408c8f7 100644
--- a/templates/2k11/admin/entries.tpl
+++ b/templates/2k11/admin/entries.tpl
@@ -22,7 +22,6 @@
         </div>
     {/if}
         <div id="edit_entry_category" class="form_select">
-            {* TODO: this needs JS to be collapsible *}
             <label for="categoryselector">{$CONST.CATEGORY}</label>
             <select id="categoryselector" name="serendipity[categories][]" multiple>
                 <option value="0">{$CONST.NO_CATEGORY}</option>
diff --git a/templates/2k11/admin/serendipity_editor.js.tpl b/templates/2k11/admin/serendipity_editor.js.tpl
index faef9e1f..c9ff8b91 100644
--- a/templates/2k11/admin/serendipity_editor.js.tpl
+++ b/templates/2k11/admin/serendipity_editor.js.tpl
@@ -426,18 +426,20 @@ function showConfigAll(count) {
 function toggle_category_selector(id) {
     if ($('#toggle_' + id).length == 0) {
         // this function got called on load of the editor
-        var toggleButton = document.createElement('img');
-        toggleButton.id = ('toggle_' + id);
-        $(toggleButton).click(function() {
+        var toggleButton = '#toggle_' + id;
+
+        $('#'+id).before('<a id="toggle_' + id + '" class="button_link" href="#' + id + '"><span class="icon-plus-circle"></span><span class="visuallyhidden"> {$CONST.TOGGLE_ALL}</span></a>');
+
+        $(toggleButton).click(function(e) {
+            e.preventDefault();
             toggle_category_selector(id);
         });
-        $('#'+id).before(toggleButton);
         
         if ($('#'+id).children('*[selected="selected"]').length > 1) {
             // when loading the page new for the preview and more than one category was
             // selected, collapsing the category-selector would lose those categories
             $('#'+id).attr("size", $('#'+id).children().size);
-            $('#toggle_' + id).attr("src", img_minus);
+            $('#toggle_' + id).find('> span').removeClass('icon-plus-circle').addClass('icon-minus-circle');
             return
         }
         
@@ -445,12 +447,12 @@ function toggle_category_selector(id) {
     if ($('#'+id).attr("multiple")) {
         $('#'+id).removeAttr("multiple");
         $('#'+id).removeAttr("size");
-        $('#toggle_' + id).attr("src", img_plus);
+        $('#toggle_' + id).find('> span').removeClass('icon-minus-circle').addClass('icon-plus-circle');
         
     } else {
         $('#'+id).attr("multiple", "");
         $('#'+id).attr("size", $('#'+id).children().size);
-        $('#toggle_' + id).attr("src", img_minus);
+        $('#toggle_' + id).find('> span').removeClass('icon-plus-circle').addClass('icon-minus-circle');
     }
 }
 
diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css
index 648e7836..8250626a 100644
--- a/templates/2k11/admin/style.css
+++ b/templates/2k11/admin/style.css
@@ -1255,12 +1255,19 @@ main {
 } /* Temporary */
 
 #edit_entry_timestamp,
+#edit_entry_category,
 #media_pane_filter,
 .comments_pane .pagination {
     position: relative;
 }
 
 #reset_timestamp,
+#toggle_categoryselector {
+    position: absolute;
+    top: 1.55em;
+    right: 0;
+}
+
 #media_pane_filter #toggle_filters {
     position: absolute;
     top: 0;
@@ -1892,6 +1899,15 @@ input[name="serendipity[filter][fileCategory]"] {
         position: static;
     }
 
+    #toggle_categoryselector {
+        left: 0;
+        right: auto;
+    }
+
+    #categoryselector {
+        margin-left: 2.5em;
+    }
+
     #edit_entry_metadata label,
     #edit_entry_status label,
     #sort_entries .form_select label,
@@ -1974,7 +1990,7 @@ input[name="serendipity[filter][fileCategory]"] {
         width: 85%;
     }
 
-    #edit_entry_metadata select {
+    .no-js #edit_entry_metadata select {
         width: 100%;
     }