mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
This commit is contained in:
Julius Härtl 2016-08-02 19:18:00 +02:00 committed by Marius Blüm
parent 16358381cc
commit 482a725a8b
3 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
core/css/header.css
View File

@ -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 */

10
core/templates/layout.user.php
View File

@ -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')); ?>

9
settings/js/apps.js
View File

@ -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();
}
}
}