Merge pull request #897 from nextcloud/stable10-backport-834

[stable10] Use darker colors for app icons in app management
This commit is contained in:
Julius Härtl 2016-08-17 11:12:01 +02:00 committed by GitHub
commit 29e45dd5ba
2 changed files with 24 additions and 16 deletions

View File

@ -385,16 +385,7 @@ span.version {
padding-right: 10px; padding-right: 10px;
width: 80px; width: 80px;
height: 80px; height: 80px;
} opacity: 0.8;
.app-image img {
max-width: 80px;
max-height: 80px;
}
.app-image-icon img {
background-color: #ccc;
width: 60px;
padding: 10px;
border-radius: 3px;
} }
.app-name, .app-name,
.app-version, .app-version,

View File

@ -196,14 +196,14 @@ OC.Settings.Apps = OC.Settings.Apps || {
if (app.preview && !OC.Util.isIE()) { if (app.preview && !OC.Util.isIE()) {
var currentImage = new Image(); var currentImage = new Image();
currentImage.src = app.preview; currentImage.src = app.preview;
currentImage.onload = function() {
page.find('.app-image')
.append(this)
.fadeIn();
};
} }
currentImage.onload = function() {
page.find('.app-image')
.append(OC.Settings.Apps.imageUrl(app.preview, app.detailpage))
.fadeIn();
};
// set group select properly // set group select properly
if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') || if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging') || OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging') ||
@ -226,6 +226,23 @@ OC.Settings.Apps = OC.Settings.Apps || {
} }
}, },
/**
* Returns the image for apps listing
* url : the url of the image
* appfromstore: bool to check whether the app is fetched from store or not.
*/
imageUrl : function (url, appfromstore) {
var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
if (appfromstore) {
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '" class="app-icon" /></svg>';
} else {
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="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + url + '" class="app-icon" /></svg>';
}
return img;
},
isType: function(app, type){ isType: function(app, type){
return app.types && app.types.indexOf(type) !== -1; return app.types && app.types.indexOf(type) !== -1;
}, },