Merge pull request #15142 from owncloud/issue/15138-feedback-for-empty-apps-list

Issue/15138 feedback for empty apps list

apps/files/css/files.css

@@ -625,26 +625,3 @@ table.dragshadow td.size {
 .mask.transparent{
 	opacity: 0;
 }
-
-.nofilterresults {
-	font-size: 16px;
-	color: #888;
-	position: absolute;
-	text-align: center;
-	top: 30%;
-	width: 100%;
-}
-.nofilterresults h2 {
-	font-size: 22px;
-	margin-bottom: 10px;
-}
-.nofilterresults [class^="icon-"],
-.nofilterresults [class*=" icon-"] {
-	background-size: 64px;
-	height: 64px;
-	width: 64px;
-	margin: 0 auto 15px;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
-}

apps/files/templates/list.php

@@ -57,7 +57,7 @@
 	<p><?php p($l->t('Upload some content or sync with your devices!')); ?></p>
 </div>
 
-<div class="nofilterresults hidden">
+<div class="nofilterresults emptycontent hidden">
 	<div class="icon-search"></div>
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 	<p></p>

core/css/styles.css

@@ -326,7 +326,8 @@ input[type="submit"].enabled {
 	overflow-x: auto;
 }
 
-#emptycontent {
+#emptycontent,
+.emptycontent {
 	font-size: 16px;
 	color: #888;
 	position: absolute;
@@ -334,12 +335,15 @@ input[type="submit"].enabled {
 	top: 30%;
 	width: 100%;
 }
-#emptycontent h2 {
+#emptycontent h2,
+.emptycontent h2 {
 	font-size: 22px;
 	margin-bottom: 10px;
 }
 #emptycontent [class^="icon-"],
-#emptycontent [class*=" icon-"] {
+.emptycontent [class^="icon-"],
+#emptycontent [class*=" icon-"],
+.emptycontent [class*=" icon-"] {
 	background-size: 64px;
 	height: 64px;
 	width: 64px;

core/search/css/results.css

@@ -18,23 +18,23 @@
 	box-sizing: content-box;
 }
 
-#searchresults #status {
+#searchresults .status {
 	background-color: rgba(255, 255, 255, .85);
 	height: 12px;
 	padding: 28px 0 28px 56px;
 	font-size: 18px;
 }
-.has-favorites:not(.hidden) ~ #searchresults #status {
+.has-favorites:not(.hidden) ~ #searchresults .status {
 	padding-left: 102px;
 }
-#searchresults #status.fixed {
+#searchresults .status.fixed {
 	position: fixed;
 	bottom: 0;
 	width: 100%;
 	z-index: 10;
 }
 
-#searchresults #status .spinner {
+#searchresults .status .spinner {
 	height: 16px;
 	width: 16px;
 	vertical-align: middle;

core/search/js/search.js

@@ -125,6 +125,7 @@
 
 						//show spinner
 						$searchResults.removeClass('hidden');
+						$status.addClass('status');
 						$status.html(t('core', 'Searching other places')+'<img class="spinner" alt="search in progress" src="'+OC.webroot+'/core/img/loading.gif" />');
 
 						// do the actual search query
@@ -209,8 +210,12 @@
 				var count = $searchResults.find('tr.result').length;
 				$status.data('count', count);
 				if (count === 0) {
-					$status.text(t('core', 'No search result in other places'));
+					$status.addClass('emptycontent').removeClass('status');
+					$status.html('');
+					$status.append('<div class="icon-search"></div>');
+					$status.append('<h2>' + t('core', 'No search result in other places') + '</h2>');
 				} else {
+					$status.removeClass('emptycontent').addClass('status');
 					$status.text(n('core', '{count} search result in other places', '{count} search results in other places', count, {count:count}));
 				}
 			}
@@ -383,4 +388,4 @@ OC.search.customResults = {};
 /**
  * @deprecated use get/setRenderer() instead
  */
-OC.search.resultTypes = {};
+OC.search.resultTypes = {};

settings/js/apps.js

@@ -63,7 +63,9 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		}
 		$('#apps-list')
 			.addClass('icon-loading')
+			.removeClass('hidden')
 			.html('');
+		$('#apps-list-empty').addClass('hidden');
 		$('#app-category-' + OC.Settings.Apps.State.currentCategory).removeClass('active');
 		$('#app-category-' + categoryId).addClass('active');
 		OC.Settings.Apps.State.currentCategory = categoryId;
@@ -73,14 +75,19 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		}), {
 			data:{},
 			type:'GET',
-			success:function (apps) {
+			success: function (apps) {
 				OC.Settings.Apps.State.apps = _.indexBy(apps.apps, 'id');
 				var source   = $("#app-template").html();
 				var template = Handlebars.compile(source);
 
-				_.each(apps.apps, function(app) {
-					OC.Settings.Apps.renderApp(app, template, null);
-				});
+				if (apps.apps.length) {
+					_.each(apps.apps, function(app) {
+						OC.Settings.Apps.renderApp(app, template, null);
+					});
+				} else {
+					$('#apps-list').addClass('hidden');
+					$('#apps-list-empty').removeClass('hidden');
+				}
 			},
 			complete: function() {
 				$('#apps-list').removeClass('icon-loading');

settings/templates/apps.php

@@ -96,4 +96,8 @@
 </div>
 <div id="app-content">
 	<div id="apps-list" class="icon-loading"></div>
+	<div id="apps-list-empty" class="hidden emptycontent">
+		<div class="icon-search"></div>
+		<h2><?php p($l->t('No apps found for your version')) ?></h2>
+	</div>
 </div>