Fix appmenu svg double invert

This fixes a regression caused by 9b668d0, where the css filters to
preview color inversion of the app menu was applied by default. This
commit makes the css filters sensitive on what the current state of the
app menu is.

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-01-10 09:11:17 +01:00
parent 0ce9a66920
commit 394f1d89d3
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 19 additions and 8 deletions

View File

@ -11,6 +11,12 @@
} }
@if (lightness($color-primary) > 50) { @if (lightness($color-primary) > 50) {
#appmenu:not(.inverted) svg {
filter: invert(1);
}
#appmenu.inverted svg {
filter: none;
}
.searchbox input[type="search"] { .searchbox input[type="search"] {
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center; background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
} }
@ -48,6 +54,13 @@
background-color: nc-darken($color-primary-element, 30%) !important; background-color: nc-darken($color-primary-element, 30%) !important;
} }
} }
} @else {
#appmenu:not(.inverted) svg {
filter: none;
}
#appmenu.inverted svg {
filter: invert(1);
}
} }
/* Colorized svg images */ /* Colorized svg images */

View File

@ -60,20 +60,18 @@
<div class="icon-caret"></div> <div class="icon-caret"></div>
</a> </a>
<ul id="appmenu"> <ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>>
<?php foreach ($_['navigation'] as $entry): ?> <?php foreach ($_['navigation'] as $entry): ?>
<li data-id="<?php p($entry['id']); ?>" class="hidden"> <li data-id="<?php p($entry['id']); ?>" class="hidden">
<a href="<?php print_unescaped($entry['href']); ?>" <a href="<?php print_unescaped($entry['href']); ?>"
tabindex="3" tabindex="3"
<?php if ($entry['active']): ?> class="active"<?php endif; ?>> <?php if ($entry['active']): ?> class="active"<?php endif; ?>>
<?php if ($_['themingInvertMenu']) { ?>
<svg width="20" height="20" viewBox="0 0 20 20"> <svg width="20" height="20" viewBox="0 0 20 20">
<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs> <?php if ($_['themingInvertMenu']) { ?>
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMain-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon" /></svg> <defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
<?php } else { ?> <?php } ?>
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" <image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet"<?php if ($_['themingInvertMenu']) { ?> filter="url(#invertMenuMain-<?php p($entry['id']); ?>)"<?php } ?> xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon" />
class="app-icon" alt="<?php p($entry['name']); ?>" /> </svg>
<?php } ?>
<div class="icon-loading-small-dark" <div class="icon-loading-small-dark"
style="display:none;"></div> style="display:none;"></div>
</a> </a>