Merge pull request #14737 from owncloud/app-descriptions-collapsible

collapse app descriptions by default, make expandable, fix #13112

3 files changed, 48 insertions, 16 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 0ed0e60ee64..0716cd24938 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -217,6 +217,21 @@ span.version { margin-left:1em; margin-right:1em; color:#555; }
 .recommendedapp {
 	display: inline-block;
 }
+
+.app-description-toggle-show,
+.app-description-toggle-hide {
+	clear: both;
+	padding: 7px 0;
+	cursor: pointer;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+.app-description-container {
+	clear: both;
+	position: relative;
+	top: 7px;
+}
+
 .app-description {
 	clear: both;
 }
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 7330f426af7..bb52aa3a155 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -369,6 +369,17 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			OC.Settings.Apps.loadCategory(categoryId);
 		});
 
+		$(document).on('click', '.app-description-toggle-show', function () {
+			$(this).addClass('hidden');
+			$(this).siblings('.app-description-toggle-hide').removeClass('hidden');
+			$(this).siblings('.app-description-container').slideDown();
+		});
+		$(document).on('click', '.app-description-toggle-hide', function () {
+			$(this).addClass('hidden');
+			$(this).siblings('.app-description-toggle-show').removeClass('hidden');
+			$(this).siblings('.app-description-container').slideUp();
+		});
+
 		$(document).on('click', '#apps-list input.enable', function () {
 			var appId = $(this).data('appid');
 			var element = $(this);
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index e749b33027a..7465992b3b4 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -33,24 +33,30 @@
 	<div class="{{internalclass}} icon-checkmark">{{internallabel}}</div>
 	{{/if}}
 	<div class="app-detailpage"></div>
-	<div class="app-description"><pre>{{description}}</pre></div>
-	<!--<div class="app-changed">{{changed}}</div>-->
-	{{#if documentation}}
-	<p class="documentation">
-		<?php p($l->t("Documentation:"));?>
-		{{#if documentation.user}}
-		<span class="userDocumentation appslink">
-		<a id='userDocumentation' href='{{documentation.user}}' target="_blank"><?php p($l->t("User Documentation"));?></a>
-		</span>
-		{{/if}}
 
-		{{#if documentation.admin}}
-		<span class="adminDocumentation appslink">
-		<a id='adminDocumentation' href='{{documentation.admin}}' target="_blank"><?php p($l->t("Admin Documentation"));?></a>
-		</span>
+	<div class="app-description-container hidden">
+		<div class="app-description"><pre>{{description}}</pre></div>
+		<!--<div class="app-changed">{{changed}}</div>-->
+		{{#if documentation}}
+		<p class="documentation">
+			<?php p($l->t("Documentation:"));?>
+			{{#if documentation.user}}
+			<span class="userDocumentation appslink">
+			<a id='userDocumentation' href='{{documentation.user}}' target="_blank"><?php p($l->t("User Documentation"));?></a>
+			</span>
+			{{/if}}
+
+			{{#if documentation.admin}}
+			<span class="adminDocumentation appslink">
+			<a id='adminDocumentation' href='{{documentation.admin}}' target="_blank"><?php p($l->t("Admin Documentation"));?></a>
+			</span>
+			{{/if}}
+		</p>
 		{{/if}}
-	</p>
-	{{/if}}
+	</div><!-- end app-description-container -->
+	<div class="app-description-toggle-show"><?php p($l->t("Show description …"));?></div>
+	<div class="app-description-toggle-hide hidden"><?php p($l->t("Hide description …"));?></div>
+
 	{{#unless canInstall}}
 	<div class="app-dependencies">
 	<p><?php p($l->t('This app cannot be installed because the following dependencies are not fulfilled:')); ?></p>