Make enabled and disabled apps a tabular list

Signed-off-by: Felix A. Epp <work@felixepp.de>

settings/css/settings.css

@@ -541,9 +541,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 {
@@ -725,6 +723,40 @@ 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;
+	width: auto;
+	height: 3em;
+	vertical-align: middle;
+	float: none;
+	border-bottom: 1px solid #eee;
+	padding: .5em 1em;
+	box-sizing: border-box;
+}
+
+#apps-list.installed .app-image {
+	text-align: center;
+}
+
+.installed .actions {
+	text-align: right;
+}
+
+#apps-list.installed .groups-enable {
+	margin-top: 0
+}
 
 /* LOG */
 #log {

settings/js/apps.js

@@ -94,7 +94,14 @@ 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') {
+					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) {
@@ -257,12 +264,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 width="72" height="72" 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;
 	},

settings/templates/apps.php

@@ -29,6 +29,50 @@ script(
 <?php endif; ?>
 </script>
 
+
+<script id="app-template-installed" type="text/x-handlebars">
+<div class="section" id="app-{{id}}">
+	<div class="app-image app-image-icon hidden"></div>
+	<h2 class="app-name">
+		{{#if detailpage}}
+			<a href="{{detailpage}}" target="_blank" rel="noreferrer">{{name}}</a>
+		{{else}}
+			{{name}}
+		{{/if}}
+	</h2>
+	<div class="app-version"> {{version}}</div>
+	<div class="app-level">
+		{{{level}}}
+	</div>
+
+	<div>
+		{{#if active}}
+		<div class="groups-enable">
+			<input type="checkbox" class="groups-enable__checkbox checkbox" id="groups_enable-{{id}}"/>
+			<label for="groups_enable-{{id}}"><?php p($l->t('Limit to groups')); ?></label>
+			<input type="hidden" id="group_select" title="<?php p($l->t('All')); ?>">
+		</div>
+		{{/if}}
+	</div>
+
+	<div class="actions">
+		<div class="app-dependencies update hidden">
+			<p><?php p($l->t('This app has an update available.')); ?></p>
+		</div>
+		<div class="warning hidden"></div>
+		{{#if active}}
+		<input class="enable" type="submit" data-appid="{{id}}" data-active="true" value="<?php p($l->t("Disable"));?>"/>
+		{{else}}
+		<input class="enable{{#if needsDownload}} needs-download{{/if}}" type="submit" data-appid="{{id}}" data-active="false" {{#unless canInstall}}disabled="disabled"{{/unless}} value="<?php p($l->t("Enable"));?>"/>
+		{{/if}}
+		<input class="update hidden" type="submit" value="<?php p($l->t('Update to %s', array('{{update}}'))); ?>" data-appid="{{id}}" />
+		{{#if canUnInstall}}
+		<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall app')); ?>" data-appid="{{id}}" />
+		{{/if}}
+	</div>
+</div>
+</script>
+
 <script id="app-template" type="text/x-handlebars">
 	<div class="section" id="app-{{id}}">
 	{{#if preview}}