Move to svg filter on app menu to support IE9+

This commit is contained in:
Julius Haertl 2016-07-28 22:33:17 +02:00
parent 319449434e
commit f55ba62a00
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 12 additions and 11 deletions

View File

@ -210,27 +210,22 @@
text-overflow:ellipsis; text-overflow:ellipsis;
} }
/* icon opacity and hover effect */ /* icon opacity and hover effect */
#navigation a img, #navigation a svg,
#navigation a span { #navigation a span {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5; opacity: .5;
} }
#navigation a:hover img, #navigation a:hover svg,
#navigation a:focus img, #navigation a:focus svg,
#navigation a:hover span, #navigation a:hover span,
#navigation a:focus span, #navigation a:focus span,
#navigation a.active img, #navigation a.active svg,
#navigation a.active span { #navigation a.active span {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
opacity: .75; opacity: .75;
} }
#navigation .app-icon { #navigation .app-icon {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Invert(100%)";
filter: invert(100%);
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
max-height: 32px; max-height: 32px;

View File

@ -113,7 +113,10 @@
<li data-id="<?php p($entry['id']); ?>"> <li data-id="<?php p($entry['id']); ?>">
<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3" <a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>> <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
<img class="app-icon" alt="" src="<?php print_unescaped($entry['icon']); ?>"> <svg width="32" height="32" viewBox="0 0 32 32">
<defs><filter id="invert"><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="32" height="32" preserveAspectRatio="true" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon']); ?>" class="app-icon"/>
</svg>
<div class="icon-loading-dark" style="display:none;"></div> <div class="icon-loading-dark" style="display:none;"></div>
<span> <span>
<?php p($entry['name']); ?> <?php p($entry['name']); ?>
@ -128,7 +131,10 @@
<li id="apps-management"> <li id="apps-management">
<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4" <a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>> <?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
<img class="app-icon" alt="" src="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>"> <svg width="32" height="32" viewBox="0 0 32 32" class="app-icon">
<defs><filter id="invert"><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="32" height="32" preserveAspectRatio="true" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>"/>
</svg>
<div class="icon-loading-dark" style="display:none;"></div> <div class="icon-loading-dark" style="display:none;"></div>
<span> <span>
<?php p($l->t('Apps')); ?> <?php p($l->t('Apps')); ?>