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>

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index acf4d6446f4834292e89b83da0b18e034b01dac3..2a40edd49d9e6851ef703663af8bf137d938836f 100644 (file)
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -11,6 +11,12 @@
 }
 
 @if (lightness($color-primary) > 50) {
+       #appmenu:not(.inverted) svg {
+               filter: invert(1);
+       }
+       #appmenu.inverted svg {
+               filter: none;
+       }
        .searchbox input[type="search"] {
                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;
                }
        }
+} @else {
+       #appmenu:not(.inverted) svg {
+               filter: none;
+       }
+       #appmenu.inverted svg {
+               filter: invert(1);
+       }
 }
 
 /* Colorized svg images */

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index d54a6fe114ffa9a21b508c74d8af326d1be86ae0..2a413a4d9580ea61ea1e1bdaee695c7cf8c5172f 100644 (file)
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -60,20 +60,18 @@
                                        <div class="icon-caret"></div>
                                </a>
 
-                               <ul id="appmenu">
+                               <ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>>
                                        <?php foreach ($_['navigation'] as $entry): ?>
                                                <li data-id="<?php p($entry['id']); ?>" class="hidden">
                                                        <a href="<?php print_unescaped($entry['href']); ?>"
                                                           tabindex="3"
                                                                <?php if ($entry['active']): ?> class="active"<?php endif; ?>>
-                                                               <?php if ($_['themingInvertMenu']) { ?>
                                                                        <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>
-                                                                       <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>
-                                                               <?php } else { ?>
-                                                                       <img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
-                                                                                class="app-icon" alt="<?php p($entry['name']); ?>" />
-                                                               <?php } ?>
+                                                                               <?php if ($_['themingInvertMenu']) { ?>
+                                                                               <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 } ?>
+                                                                               <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" />
+                                                                       </svg>
                                                                <div class="icon-loading-small-dark"
                                                                         style="display:none;"></div>
                                                        </a>