Use iconfont button for category selector; add styling.

This commit is contained in:
Matthias Mees 2013-06-06 15:49:37 +02:00
parent 2d51cdae66
commit 97dc035bcc
3 changed files with 26 additions and 9 deletions

View File

@ -22,7 +22,6 @@
</div> </div>
{/if} {/if}
<div id="edit_entry_category" class="form_select"> <div id="edit_entry_category" class="form_select">
{* TODO: this needs JS to be collapsible *}
<label for="categoryselector">{$CONST.CATEGORY}</label> <label for="categoryselector">{$CONST.CATEGORY}</label>
<select id="categoryselector" name="serendipity[categories][]" multiple> <select id="categoryselector" name="serendipity[categories][]" multiple>
<option value="0">{$CONST.NO_CATEGORY}</option> <option value="0">{$CONST.NO_CATEGORY}</option>

View File

@ -426,18 +426,20 @@ function showConfigAll(count) {
function toggle_category_selector(id) { function toggle_category_selector(id) {
if ($('#toggle_' + id).length == 0) { if ($('#toggle_' + id).length == 0) {
// this function got called on load of the editor // this function got called on load of the editor
var toggleButton = document.createElement('img'); var toggleButton = '#toggle_' + id;
toggleButton.id = ('toggle_' + id);
$(toggleButton).click(function() { $('#'+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); toggle_category_selector(id);
}); });
$('#'+id).before(toggleButton);
if ($('#'+id).children('*[selected="selected"]').length > 1) { if ($('#'+id).children('*[selected="selected"]').length > 1) {
// when loading the page new for the preview and more than one category was // when loading the page new for the preview and more than one category was
// selected, collapsing the category-selector would lose those categories // selected, collapsing the category-selector would lose those categories
$('#'+id).attr("size", $('#'+id).children().size); $('#'+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 return
} }
@ -445,12 +447,12 @@ function toggle_category_selector(id) {
if ($('#'+id).attr("multiple")) { if ($('#'+id).attr("multiple")) {
$('#'+id).removeAttr("multiple"); $('#'+id).removeAttr("multiple");
$('#'+id).removeAttr("size"); $('#'+id).removeAttr("size");
$('#toggle_' + id).attr("src", img_plus); $('#toggle_' + id).find('> span').removeClass('icon-minus-circle').addClass('icon-plus-circle');
} else { } else {
$('#'+id).attr("multiple", ""); $('#'+id).attr("multiple", "");
$('#'+id).attr("size", $('#'+id).children().size); $('#'+id).attr("size", $('#'+id).children().size);
$('#toggle_' + id).attr("src", img_minus); $('#toggle_' + id).find('> span').removeClass('icon-plus-circle').addClass('icon-minus-circle');
} }
} }

View File

@ -1255,12 +1255,19 @@ main {
} /* Temporary */ } /* Temporary */
#edit_entry_timestamp, #edit_entry_timestamp,
#edit_entry_category,
#media_pane_filter, #media_pane_filter,
.comments_pane .pagination { .comments_pane .pagination {
position: relative; position: relative;
} }
#reset_timestamp, #reset_timestamp,
#toggle_categoryselector {
position: absolute;
top: 1.55em;
right: 0;
}
#media_pane_filter #toggle_filters { #media_pane_filter #toggle_filters {
position: absolute; position: absolute;
top: 0; top: 0;
@ -1892,6 +1899,15 @@ input[name="serendipity[filter][fileCategory]"] {
position: static; position: static;
} }
#toggle_categoryselector {
left: 0;
right: auto;
}
#categoryselector {
margin-left: 2.5em;
}
#edit_entry_metadata label, #edit_entry_metadata label,
#edit_entry_status label, #edit_entry_status label,
#sort_entries .form_select label, #sort_entries .form_select label,
@ -1974,7 +1990,7 @@ input[name="serendipity[filter][fileCategory]"] {
width: 85%; width: 85%;
} }
#edit_entry_metadata select { .no-js #edit_entry_metadata select {
width: 100%; width: 100%;
} }