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

Merge pull request #834 from nextcloud/feature/similar-app-colors 

Use darker colors for app icons in app management.
This commit is contained in:
Marius Blüm 2016-08-16 11:07:48 +02:00 committed by GitHub
parent 8c424c7971 7c61fa14ae
commit c994524e98
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
settings/css/settings.css
View File

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

21
settings/js/apps.js
View File

@ -196,13 +196,13 @@ OC.Settings.Apps = OC.Settings.Apps || {
if (app.preview && !OC.Util.isIE()) {
var currentImage = new Image();
currentImage.src = app.preview;
}
currentImage.onload = function() {
page.find('.app-image')
.append(this)
.append(OC.Settings.Apps.imageUrl(app.preview, app.detailpage))
.fadeIn();
};
}
// set group select properly
if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
@ -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){
return app.types && app.types.indexOf(type) !== -1;
},