Add better icons for compact/hierarchical category view toggle.

Includes new iconfont build.

References #254
This commit is contained in:
Matthias Mees 2015-01-01 15:25:13 +01:00
parent ff3cd29f2a
commit d0af671d2f
7 changed files with 14 additions and 10 deletions

View File

@ -124,7 +124,7 @@
<label for="categoryfilter" class="visuallyhidden">{$CONST.FILTERS}</label>
<input id="categoryfilter" type="text" placeholder="{$CONST.FILTERS}: {$CONST.CATEGORIES}">
<button class="reset_livefilter icon_link" type="button" data-target="categoryfilter" title="{$CONST.RESET_FILTERS}"><span class="icon-cancel"></span><span class="visuallyhidden">{$CONST.RESET_FILTERS}</span></button>
<button id="toggle_cat_view" class="icon_link" type="button" title="Switch category view"><span class="icon-toggle-off"></span><span class="visuallyhidden">Switch category view</span></button> {* i18n *}
<button id="toggle_cat_view" class="icon_link" type="button" title="Switch category view"><span class="icon-th"></span><span class="visuallyhidden">Switch category view</span></button> {* i18n *}
</div>
{foreach from=$entry_vars.category_options item="entry_cat"}

View File

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -28,6 +28,7 @@
<glyph glyph-name="attention-circled" unicode="&#xe813;" d="m429 779q116 0 215-58t156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58z m71-696v106q0 8-5 13t-12 5h-107q-8 0-13-5t-6-13v-106q0-8 6-13t13-6h107q7 0 12 6t5 13z m-1 192l10 346q0 7-6 10-5 5-13 5h-123q-8 0-13-5-6-3-6-10l10-346q0-6 5-10t14-4h103q8 0 13 4t6 10z" horiz-adv-x="857.1" />
<glyph glyph-name="toggle-off" unicode="&#xe814;" d="m643 350q0 58-23 111t-61 91-91 61-111 23-111-23-91-61-61-91-23-111 23-111 61-91 91-61 111-23 111 23 91 61 61 91 23 111z m428 0q0 58-22 111t-61 91-92 61-110 23h-216q67-51 106-125t38-161-38-161-106-125h216q58 0 110 23t92 61 61 91 22 111z m72 0q0-73-29-139t-76-113-114-77-138-28h-429q-72 0-138 28t-114 77-76 113-29 139 29 139 76 114 114 76 138 28h429q72 0 138-28t114-76 76-114 29-139z" horiz-adv-x="1142.9" />
<glyph glyph-name="toggle-on" unicode="&#xe815;" d="m0 350q0 73 29 139t76 114 114 76 138 28h429q72 0 138-28t114-76 76-114 29-139-29-139-76-113-114-77-138-28h-429q-72 0-138 28t-114 77-76 113-29 139z m786-286q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23-111-23-91-61-61-91-23-111 23-111 61-91 91-61 111-23z" horiz-adv-x="1142.9" />
<glyph glyph-name="th" unicode="&#xe816;" d="m286 154v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q22 0 38-15t16-38z m0 285v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q22 0 38-16t16-38z m357-285v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q23 0 38-15t16-38z m-357 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q22 0 38-16t16-38z m357-286v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q23 0 38-16t16-38z m357-285v-108q0-22-16-37t-38-16h-178q-22 0-38 16t-16 37v108q0 22 16 38t38 15h178q23 0 38-15t16-38z m-357 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q23 0 38-16t16-38z m357-286v-107q0-22-16-38t-38-15h-178q-22 0-38 15t-16 38v107q0 23 16 38t38 16h178q23 0 38-16t16-38z m0 286v-107q0-22-16-38t-38-16h-178q-22 0-38 16t-16 38v107q0 22 16 38t38 16h178q23 0 38-16t16-38z" horiz-adv-x="1000" />
<glyph glyph-name="filter" unicode="&#xe817;" d="m783 685q9-23-8-39l-275-275v-414q0-23-22-33-7-3-14-3-15 0-25 11l-143 143q-10 10-10 25v271l-275 275q-18 16-8 39 9 22 33 22h714q23 0 33-22z" horiz-adv-x="785.7" />
<glyph glyph-name="resize-full" unicode="&#xe818;" d="m421 261q0-8-5-13l-185-185 80-81q10-10 10-25t-10-25-25-11h-250q-15 0-25 11t-11 25v250q0 15 11 25t25 11 25-11l80-80 185 185q6 6 13 6t13-6l64-63q5-6 5-13z m436 482v-250q0-15-10-25t-26-11-25 11l-80 80-185-185q-6-6-13-6t-13 6l-64 63q-5 6-5 13t5 13l186 185-81 81q-10 10-10 25t10 25 25 11h250q15 0 26-11t10-25z" horiz-adv-x="857.1" />
<glyph glyph-name="menu" unicode="&#xe819;" d="m857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
@ -46,6 +47,7 @@
<glyph glyph-name="thumbs-down-alt" unicode="&#xe826;" d="m143 529q0-15-11-26t-25-10q-15 0-25 10t-11 26q0 15 11 25t25 10q15 0 25-10t11-25z m89-286v357q0 15-10 25t-26 11h-160q-15 0-25-11t-11-25v-357q0-15 11-25t25-11h160q15 0 26 11t10 25z m630 83q31-34 31-83-1-44-32-75t-75-32h-155q2-8 5-14t6-12 5-10q10-21 15-32t11-32 6-43q0-14-1-22t-2-25-7-28-14-25-22-23-33-14-46-6q-15 0-26 11-11 11-18 27t-11 29-7 35q-5 23-8 33t-10 27-17 27q-18 19-56 67-28 36-57 68t-42 33q-14 1-24 11t-10 24v358q0 15 10 25t26 11q19 0 88 24 43 15 67 22t68 16 80 9h72q74-1 110-43 32-39 27-101 22-21 31-53 9-34 0-65 25-34 24-77 0-18-9-42z" horiz-adv-x="928.6" />
<glyph glyph-name="left-dir" unicode="&#xe827;" d="m357 600v-500q0-14-10-25t-26-11-25 11l-250 250q-10 11-10 25t10 25l250 250q11 11 25 11t26-11 10-25z" horiz-adv-x="357.1" />
<glyph glyph-name="right-dir" unicode="&#xe828;" d="m321 350q0-14-10-25l-250-250q-11-11-25-11t-25 11-11 25v500q0 15 11 25t25 11 25-11l250-250q10-10 10-25z" horiz-adv-x="357.1" />
<glyph glyph-name="th-list" unicode="&#xe829;" d="m286 154v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q22 0 38-15t16-38z m0 285v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q22 0 38-16t16-38z m714-285v-108q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v108q0 22 16 38t38 15h535q23 0 38-15t16-38z m-714 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q22 0 38-16t16-38z m714-286v-107q0-22-16-38t-38-15h-535q-23 0-38 15t-16 38v107q0 23 16 38t38 16h535q23 0 38-16t16-38z m0 286v-107q0-22-16-38t-38-16h-535q-23 0-38 16t-16 38v107q0 22 16 38t38 16h535q23 0 38-16t16-38z" horiz-adv-x="1000" />
</font>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -975,7 +975,7 @@ $(function() {
$('#edit_entry_category .form_check input[type="checkbox"]').attr('aria-hidden', 'true');
if(localStorage.cat_view_state == "compact") {
$('.mfp-content').addClass('compact_categories');
$('#toggle_cat_view').find('.icon-toggle-off').removeClass('icon-toggle-off').addClass('icon-toggle-on');
$('#toggle_cat_view').find('.icon-th').removeClass('icon-th').addClass('icon-th-list');
}
},
afterClose: function() {
@ -1000,11 +1000,11 @@ $(function() {
if($target.hasClass('compact_categories')) {
$target.removeClass('compact_categories');
$el.find('.icon-toggle-on').removeClass('icon-toggle-on').addClass('icon-toggle-off');
$el.find('.icon-th-list').removeClass('icon-th-list').addClass('icon-th');
localStorage.cat_view_state = "hierarchical";
} else {
$target.addClass('compact_categories');
$el.find('.icon-toggle-off').removeClass('icon-toggle-off').addClass('icon-toggle-on');
$el.find('.icon-th').removeClass('icon-th').addClass('icon-th-list');
localStorage.cat_view_state = "compact";
}
});

View File

@ -354,11 +354,11 @@ nav ol {
/* ICON FONT: http://fortawesome.github.com/Font-Awesome/ */
@font-face {
font-family: 'fontello';
src: url('{TEMPLATE_PATH}font/fontello.eot?75326932');
src: url('{TEMPLATE_PATH}font/fontello.eot?75326932#iefix') format('embedded-opentype'),
url('{TEMPLATE_PATH}font/fontello.woff?75326932') format('woff'),
url('{TEMPLATE_PATH}font/fontello.ttf?75326932') format('truetype'),
url('{TEMPLATE_PATH}font/fontello.svg?75326932#fontello') format('svg');
src: url('{TEMPLATE_PATH}font/fontello.eot?15447007');
src: url('{TEMPLATE_PATH}font/fontello.eot?15447007#iefix') format('embedded-opentype'),
url('{TEMPLATE_PATH}font/fontello.woff?15447007') format('woff'),
url('{TEMPLATE_PATH}font/fontello.ttf?15447007') format('truetype'),
url('{TEMPLATE_PATH}font/fontello.svg?15447007#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -402,6 +402,7 @@ nav ol {
.icon-attention-circled:before { content: '\e813'; }
.icon-toggle-off:before { content: '\e814'; }
.icon-toggle-on:before { content: '\e815'; }
.icon-th:before { content: '\e816'; }
.icon-filter:before { content: '\e817'; }
.icon-resize-full:before { content: '\e818'; }
.icon-menu:before { content: '\e819'; }
@ -420,6 +421,7 @@ nav ol {
.icon-thumbs-down-alt:before { content: '\e826'; }
.icon-left-dir:before { content: '\e827'; }
.icon-right-dir:before { content: '\e828'; }
.icon-th-list:before { content: '\e829'; }
/* BACKEND HELPER CLASSES */