Skip to content

Commit

Permalink
Merge pull request #3195 from nextcloud/settings-apps-tabular
Browse files Browse the repository at this point in the history 
Make apps settings tabular
  • Loading branch information
@MorrisJobke
MorrisJobke authored Apr 25, 2017
2 parents 82c9eb1 + 88bc431 commit 6f2df5e
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 54 deletions.
0 core/img/default-app-icon.svg → core/img/places/default-app-icon.svg
View file
File renamed without changes
26 changes: 23 additions & 3 deletions settings/Controller/AppSettingsController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -103,7 +104,7 @@ public function __construct($appName,
*/
public function viewApps($category = '') {
if ($category === '') {
$category = 'enabled';
$category = 'installed';
}

$params = [];
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
89 changes: 75 additions & 14 deletions settings/css/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -566,6 +568,7 @@ span.version {
.app-score {
position: relative;
top: 4px;
opacity: .5;
}

#apps-list {
Expand Down Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
63 changes: 42 additions & 21 deletions settings/js/apps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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');
Expand All @@ -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;
Expand Down Expand Up @@ -154,7 +167,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
});
},
complete: function() {
$('#apps-list').removeClass('icon-loading');
$('#app-content').removeClass('icon-loading');
}
});
},
Expand All @@ -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;
}

Expand Down Expand Up @@ -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');
}
};
}

Expand Down Expand Up @@ -257,12 +277,13 @@ OC.Settings.Apps = OC.Settings.Apps || {
*/

imageUrl : function (url, appfromstore) {
var img = '<svg width="72" height="72" viewBox="0 0 72 72">';

var img;
if (appfromstore) {
img = '<svg viewBox="0 0 72 72">';
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '" class="app-icon" /></svg>';
} else {
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
img = '<svg width="32" height="32" viewBox="0 0 32 32">';
img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
}
return img;
},
Expand Down Expand Up @@ -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');
Expand Down
Loading

0 comments on commit 6f2df5e

Please sign in to comment.