diff options
| author | Marius Blüm <marius@lineone.io> | 2016-08-16 11:07:48 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2016-08-16 11:07:48 +0200 |
| commit | c994524e98a0e16c739e66384651642ee85716c2 (patch) | |
| tree | ab2dc355723b3b95a81f47b33b99a166eb679f0c /settings | |
| parent | 8c424c7971e3692c702914721fa1d83bdff6b144 (diff) | |
| parent | 7c61fa14ae4866b7e90a3bf5d8c9f2f664f20833 (diff) | |
| download | nextcloud-server-c994524e98a0e16c739e66384651642ee85716c2.tar.gz nextcloud-server-c994524e98a0e16c739e66384651642ee85716c2.zip | |
Merge pull request #834 from nextcloud/feature/similar-app-colors
Use darker colors for app icons in app management.
Diffstat (limited to 'settings')
| -rw-r--r-- | settings/css/settings.css | 11 | ||||
| -rw-r--r-- | settings/js/apps.js | 29 |
2 files changed, 24 insertions, 16 deletions
diff --git a/settings/css/settings.css b/settings/css/settings.css index 26b2cd20e1f..a054ff18d2f 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -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, diff --git a/settings/js/apps.js b/settings/js/apps.js index 66c097e1257..f8ad9c7918c 100644 --- a/settings/js/apps.js +++ b/settings/js/apps.js @@ -196,14 +196,14 @@ 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) - .fadeIn(); - }; } + currentImage.onload = function() { + page.find('.app-image') + .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') || 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){ return app.types && app.types.indexOf(type) !== -1; }, |