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>
{/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>

View File

@ -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');
}
}

View File

@ -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%;
}