[stable10] Change app menu to white background with dark icons (#665)

* Change app menu to white

* adjust opacity of icons in apps and user menu

* Move to svg filter on app menu to support IE9+

* fix shading of apps icon in app menu

* Fix wrong preserveAspectRatio at app menu icons

* Apply inverted app icon style to newly installed icons

diff --git a/core/css/header.css b/core/css/header.css
index 6078008f91f814ce52c1091c5f4b5e5499fe06a7..5a2b8009b150ead1ab9617e71585e0c4c7c15761 100644 (file)
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -151,7 +151,7 @@
        max-height: 85%;
        margin-top: 0;
        padding-bottom: 10px;
-       background-color: rgba(0, 0, 0, .97);
+       background-color: rgba(255, 255, 255, .97);
        box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
        border-radius: 3px;
        border-top-left-radius: 0;
@@ -171,7 +171,7 @@
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0);
-       border-bottom-color: rgba(0, 0, 0, .97);
+       border-bottom-color: rgba(255, 255, 255, .97);
        border-width: 10px;
        margin-left: -10px;
 }
@@ -204,25 +204,31 @@
        padding-left: 0;
        width: 80px;
        text-align: center;
-       color: #fff;
+       color: #000;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
 }
        /* icon opacity and hover effect */
-       #navigation a img,
+       #navigation a svg,
        #navigation a span {
-               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-               opacity: .7;
+               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+               opacity: .5;
        }
-       #navigation a:hover img,
-       #navigation a:focus img,
+       #navigation a:hover svg,
+       #navigation a:focus svg,
        #navigation a:hover span,
        #navigation a:focus span,
-       #navigation a.active img,
-       #navigation a.active span {
-               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-               opacity: 1;
+       #navigation a.active svg,
+       #navigation a.active span,
+       #apps-management a:hover svg,
+       #apps-management a:focus svg,
+       #apps-management a.active svg,
+       #apps-management a:hover span,
+       #apps-management a:focus span,
+       #apps-management a.active span {
+               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+               opacity: .75;
        }
 
 #navigation .app-icon {
@@ -234,12 +240,15 @@
 
 /* Apps management */
 #apps-management {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-       opacity: .6;
        min-height: initial;
        height: initial;
        margin: 0;
 }
+#apps-management a svg,
+#apps-management a span {
+       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+       opacity: .3;
+}
 
 
 /* loading feedback for apps */
@@ -252,8 +261,8 @@
        height: 32px;
 }
 #navigation .app-loading .app-icon {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-       opacity: .1;
+       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+       opacity: 0;
 }
 
 #apps {
@@ -351,8 +360,8 @@
                height: 40px;
                color: #000;
                padding: 4px 12px 0;
-               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-               opacity: .7;
+               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+               opacity: .5;
                box-sizing: border-box;
        }
        #expanddiv a img {
@@ -363,8 +372,8 @@
        #expanddiv a:focus,
        #expanddiv a:active,
        #expanddiv a.active {
-               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-               opacity: 1;
+               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+               opacity: .75;
        }
 
 /* do not show display name when profile picture is present */

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index b3b492ecac4ff6dc96893fedb7ea30816ca1adc5..be5c769ab768a3d6e9d46fb9f58bb46b02d06d5c 100644 (file)
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -113,7 +113,10 @@
                                        <li data-id="<?php p($entry['id']); ?>">
                                                <a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
                                                        <?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="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon']); ?>"  class="app-icon"/>
+                                                       </svg>
                                                        <div class="icon-loading-dark" style="display:none;"></div>
                                                        <span>
                                                                <?php p($entry['name']); ?>
@@ -128,7 +131,10 @@
                                        <li id="apps-management">
                                                <a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
                                                        <?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="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>"/>
+                                                       </svg>
                                                        <div class="icon-loading-dark" style="display:none;"></div>
                                                        <span>
                                                                <?php p($l->t('Apps')); ?>

diff --git a/settings/js/apps.js b/settings/js/apps.js
index 5584716235036c4b7f07df569108aaab81c01848..66c097e1257913f556ae68fc16863721e16363bd 100644 (file)
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -396,7 +396,9 @@ OC.Settings.Apps = OC.Settings.Apps || {
                                        if(container.children('li[data-id="'+entry.id+'"]').length === 0){
                                                var li=$('<li></li>');
                                                li.attr('data-id', entry.id);
-                                               var img= $('<img class="app-icon"/>').attr({ src: entry.icon});
+                                               var img = '<svg width="32" height="32" viewBox="0 0 32 32">';
+                                               img += '<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>';
+                                               img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + entry.icon + '"  class="app-icon" /></svg>';
                                                var a=$('<a></a>').attr('href', entry.href);
                                                var filename=$('<span></span>');
                                                var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
@@ -425,11 +427,6 @@ OC.Settings.Apps = OC.Settings.Apps || {
                                                        .animate({opacity: 0.5})
                                                        .animate({opacity: 1})
                                                        .animate({opacity: 0.75});
-
-                                               if (!OC.Util.hasSVGSupport() && entry.icon.match(/\.svg$/i)) {
-                                                       $(img).addClass('svg');
-                                                       OC.Util.replaceSVG();
-                                               }
                                        }
                                }