From 29c7c12c9d6a1e49ef4bd1925171442fad834d45 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Wed, 27 Jul 2016 20:52:42 +0200 Subject: [PATCH 1/6] Change app menu to white --- core/css/header.css | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 6078008f91f81..93a873ef864c5 100644 --- 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,7 +204,7 @@ padding-left: 0; width: 80px; text-align: center; - color: #fff; + color: #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; @@ -212,8 +212,8 @@ /* icon opacity and hover effect */ #navigation a img, #navigation a span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - opacity: .7; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + opacity: .6; } #navigation a:hover img, #navigation a:focus img, @@ -221,11 +221,16 @@ #navigation a:focus span, #navigation a.active img, #navigation a.active span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + opacity: 0.8; } #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; padding: 0; max-height: 32px; @@ -252,8 +257,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 { From d8c4140ed21b14b48947ea59db7277b5876bdeb1 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 28 Jul 2016 19:07:00 +0200 Subject: [PATCH 2/6] adjust opacity of icons in apps and user menu --- core/css/header.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 93a873ef864c5..9c3a60281acbb 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -212,8 +212,8 @@ /* icon opacity and hover effect */ #navigation a img, #navigation a span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + opacity: .5; } #navigation a:hover img, #navigation a:focus img, @@ -221,8 +221,8 @@ #navigation a:focus span, #navigation a.active img, #navigation a.active span { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; + opacity: .75; } #navigation .app-icon { @@ -356,8 +356,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 { @@ -368,8 +368,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 */ From 64b3f7dcc06cd2a5b55f1cd95a38ed291921f57b Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Thu, 28 Jul 2016 22:33:17 +0200 Subject: [PATCH 3/6] Move to svg filter on app menu to support IE9+ --- core/css/header.css | 13 ++++--------- core/templates/layout.user.php | 10 ++++++++-- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 9c3a60281acbb..673e657f00bf2 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -210,27 +210,22 @@ text-overflow:ellipsis; } /* icon opacity and hover effect */ - #navigation a img, + #navigation a svg, #navigation a span { -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 svg, #navigation a.active span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; opacity: .75; } #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; padding: 0; max-height: 32px; diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index b3b492ecac4ff..37e03b692c589 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -113,7 +113,10 @@
  • class="active"> - + + + + @@ -128,7 +131,10 @@
  • class="active"> - + + + + t('Apps')); ?> From 1261dd1ff325767a766f4d2dbe185fdffd60d54b Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 29 Jul 2016 15:48:05 +0200 Subject: [PATCH 4/6] fix shading of apps icon in app menu --- core/css/header.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 673e657f00bf2..5a2b8009b150e 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -220,7 +220,13 @@ #navigation a:hover span, #navigation a:focus span, #navigation a.active svg, - #navigation a.active span { + #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; } @@ -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 */ From 49fafcc796f5cfcfe826c444bef6883b4b1c65e9 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Fri, 29 Jul 2016 23:06:26 +0200 Subject: [PATCH 5/6] Fix wrong preserveAspectRatio at app menu icons --- core/templates/layout.user.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 37e03b692c589..be5c769ab768a 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -115,7 +115,7 @@ class="active"> - + @@ -133,7 +133,7 @@ class="active"> - + From 807982df87d60ec08792909ef1d2c860035bdc90 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Mon, 1 Aug 2016 21:48:06 +0200 Subject: [PATCH 6/6] Apply inverted app icon style to newly installed icons --- settings/js/apps.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/settings/js/apps.js b/settings/js/apps.js index 5584716235036..66c097e125791 100644 --- 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.attr('data-id', entry.id); - var img= $('').attr({ src: entry.icon}); + var img = ''; + img += ''; + img += ''; var a=$('').attr('href', entry.href); var filename=$(''); var loading = $('
    ').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(); - } } }