diff --git a/core/img/default-app-icon.svg b/core/img/places/default-app-icon.svg similarity index 100% rename from core/img/default-app-icon.svg rename to core/img/places/default-app-icon.svg diff --git a/settings/Controller/AppSettingsController.php b/settings/Controller/AppSettingsController.php index 6a5b5210c0fc3..7be6c2bf56217 100644 --- a/settings/Controller/AppSettingsController.php +++ b/settings/Controller/AppSettingsController.php @@ -49,6 +49,7 @@ class AppSettingsController extends Controller { const CAT_ENABLED = 0; const CAT_DISABLED = 1; + const CAT_ALL_INSTALLED = 2; /** @var \OCP\IL10N */ private $l10n; @@ -103,7 +104,7 @@ public function __construct($appName, */ public function viewApps($category = '') { if ($category === '') { - $category = 'enabled'; + $category = 'installed'; } $params = []; @@ -128,8 +129,9 @@ public function listCategories() { $currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2); $formattedCategories = [ - ['id' => self::CAT_ENABLED, 'ident' => 'enabled', 'displayName' => (string)$this->l10n->t('Enabled')], - ['id' => self::CAT_DISABLED, 'ident' => 'disabled', 'displayName' => (string)$this->l10n->t('Not enabled')], + ['id' => self::CAT_ALL_INSTALLED, 'ident' => 'installed', 'displayName' => (string)$this->l10n->t('Your apps')], + ['id' => self::CAT_ENABLED, 'ident' => 'enabled', 'displayName' => (string)$this->l10n->t('Enabled apps')], + ['id' => self::CAT_DISABLED, 'ident' => 'disabled', 'displayName' => (string)$this->l10n->t('Disabled apps')], ]; $categories = $this->categoryFetcher->get(); foreach($categories as $category) { @@ -270,6 +272,24 @@ public function listApps($category = '') { switch ($category) { // installed apps + case 'installed': + $apps = $appClass->listAllApps(); + + foreach($apps as $key => $app) { + $newVersion = \OC\Installer::isUpdateAvailable($app['id'], $this->appFetcher); + $apps[$key]['update'] = $newVersion; + } + + usort($apps, function ($a, $b) { + $a = (string)$a['name']; + $b = (string)$b['name']; + if ($a === $b) { + return 0; + } + return ($a < $b) ? -1 : 1; + }); + break; + // enabled apps case 'enabled': $apps = $appClass->listAllApps(); $apps = array_filter($apps, function ($app) { diff --git a/settings/css/settings.css b/settings/css/settings.css index 5ca62248c091d..a046148dcc404 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -525,6 +525,10 @@ input.userFilter {width: 200px;} width: 0; } +#app-category-disabled { + margin-bottom: 20px; +} + .appinfo { margin: 1em 40px; } #app-navigation .appwarning { background: #fcc; @@ -541,9 +545,7 @@ span.version { #app-navigation .app-external, .app-version { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; + color: rgba(85,85,85,.5); } .app-level { @@ -566,6 +568,7 @@ span.version { .app-score { position: relative; top: 4px; + opacity: .5; } #apps-list { @@ -638,16 +641,22 @@ span.version { } } -@media (max-width: 600px), (min-width: 771px) and (max-width: 900px) { - #apps-list .section { - width: 100%; - box-sizing: border-box; +/* hide app version and level on narrower screens */ +@media only screen and (max-width: 768px) { + #apps-list.installed .app-version, + #apps-list.installed .app-level { + display: none !important; + } +} +@media only screen and (max-width: 700px) { + #apps-list.installed .app-groups { + display: none !important; } } .section h2.app-name { - margin-bottom: 8px; - display: inline; + display: block; + margin: 8px 0; } form.section { position: relative; @@ -661,11 +670,10 @@ form.section { position: relative; } .app-image { - float: left; - padding-right: 10px; - width: 80px; - height: 80px; - opacity: 0.8; + position: relative; + height: 150px; + opacity: 1; + overflow: hidden; } .app-name, .app-version, @@ -725,6 +733,59 @@ form.section { margin-bottom: 1em; } +#apps-list.installed { + display: table; + width: 100%; + height: auto; +} + +#apps-list.installed .section { + display: table-row; + padding: 0; + margin: 0; +} + +#apps-list.installed .section > *{ + display: table-cell; + height: initial; + vertical-align: middle; + float: none; + border-bottom: 1px solid #eee; + padding: 6px; + box-sizing: border-box; +} + +#apps-list.installed .app-image { + width: 44px; + text-align: right; +} + +#apps-list.installed .app-image-icon svg { + margin-top: 5px; + width: 20px; + height: 20px; + opacity: .5; +} + +#apps-list:not(.installed) .app-image-icon svg { + position: absolute; + bottom: 43px; /* position halfway vertically */ + width: 64px; + height: 64px; + opacity: .1; +} + +.installed .actions { + text-align: right; +} + +#apps-list.installed .groups-enable { + margin-top: 0; +} + +#apps-list.installed .groups-enable label { + margin-right: 3px; +} /* LOG */ #log { diff --git a/settings/js/apps.js b/settings/js/apps.js index 9a3ff09337df3..6da8c395ecbdf 100644 --- a/settings/js/apps.js +++ b/settings/js/apps.js @@ -40,8 +40,9 @@ OC.Settings.Apps = OC.Settings.Apps || { } var categories = [ - {displayName: t('settings', 'Enabled'), ident: 'enabled', id: '0'}, - {displayName: t('settings', 'Not enabled'), ident: 'disabled', id: '1'} + {displayName: t('settings', 'Enabled apps'), ident: 'enabled', id: '0'}, + {displayName: t('settings', 'Disabled apps'), ident: 'disabled', id: '1'}, + {displayName: t('settings', 'Your apps'), ident: 'installed', id: '2'} ]; var source = $("#categories-template").html(); @@ -73,8 +74,9 @@ OC.Settings.Apps = OC.Settings.Apps || { if (this._loadCategoryCall) { this._loadCategoryCall.abort(); } + + $('#app-content').addClass('icon-loading'); $('#apps-list') - .addClass('icon-loading') .removeClass('hidden') .html(''); $('#apps-list-empty').addClass('hidden'); @@ -94,16 +96,27 @@ OC.Settings.Apps = OC.Settings.Apps || { // default values for missing fields return _.extend({level: 0}, app); }); - var source = $("#app-template").html(); + var source + if (categoryId === 'enabled' || categoryId === 'disabled' || categoryId === 'installed') { + source = $("#app-template-installed").html(); + $('#apps-list').addClass('installed'); + } else { + source = $("#app-template").html(); + $('#apps-list').removeClass('installed'); + } var template = Handlebars.compile(source); if (appList.length) { appList.sort(function(a,b) { - var levelDiff = b.level - a.level; - if (levelDiff === 0) { - return OC.Util.naturalSortCompare(a.name, b.name); + if (a.active !== b.active) { + return (a.active ? -1 : 1) + } else { + var levelDiff = b.level - a.level; + if (levelDiff === 0) { + return OC.Util.naturalSortCompare(a.name, b.name); + } + return levelDiff; } - return levelDiff; }); var firstExperimental = false; @@ -154,7 +167,7 @@ OC.Settings.Apps = OC.Settings.Apps || { }); }, complete: function() { - $('#apps-list').removeClass('icon-loading'); + $('#app-content').removeClass('icon-loading'); } }); }, @@ -170,7 +183,7 @@ OC.Settings.Apps = OC.Settings.Apps || { app.firstExperimental = firstExperimental; if (!app.preview) { - app.preview = OC.imagePath('core', 'default-app-icon'); + app.preview = OC.imagePath('core', 'places/default-app-icon'); app.previewAsIcon = true; } @@ -222,9 +235,16 @@ OC.Settings.Apps = OC.Settings.Apps || { currentImage.src = app.preview; currentImage.onload = function() { - page.find('.app-image') - .append(OC.Settings.Apps.imageUrl(app.preview, app.fromAppStore)) - .fadeIn(); + /* Trigger color inversion for placeholder image too */ + if(app.previewAsIcon) { + page.find('.app-image') + .append(OC.Settings.Apps.imageUrl(app.preview, false)) + .removeClass('icon-loading'); + } else { + page.find('.app-image') + .append(OC.Settings.Apps.imageUrl(app.preview, app.fromAppStore)) + .removeClass('icon-loading'); + } }; } @@ -257,12 +277,13 @@ OC.Settings.Apps = OC.Settings.Apps || { */ imageUrl : function (url, appfromstore) { - var img = ''; - + var img; if (appfromstore) { + img = ''; img += ''; } else { - img += ''; + img = ''; + img += ''; } return img; }, @@ -435,15 +456,15 @@ OC.Settings.Apps = OC.Settings.Apps || { } OC.Settings.Apps.hideErrorMessage(appId); - element.val(t('settings','Uninstalling …')); + element.val(t('settings','Removing …')); $.post(OC.filePath('settings','ajax','uninstallapp.php'),{appid:appId},function(result) { if(!result || result.status !== 'success') { - OC.Settings.Apps.showErrorMessage(appId, t('settings','Error while uninstalling app')); - element.val(t('settings','Uninstall')); + OC.Settings.Apps.showErrorMessage(appId, t('settings','Error while removing app')); + element.val(t('settings','Remove')); } else { OC.Settings.Apps.rebuildNavigation(); - element.parent().fadeOut(function() { - element.remove(); + element.parents('#apps-list > .section').fadeOut(function() { + this.remove(); }); } },'json'); diff --git a/settings/templates/apps.php b/settings/templates/apps.php index 0adf5dfcc6f44..310513722cfb1 100644 --- a/settings/templates/apps.php +++ b/settings/templates/apps.php @@ -29,10 +29,54 @@ + + +