Merge pull request #12924 from owncloud/improve-emptystates

Improve empty states

apps/files/css/files.css

@@ -556,12 +556,6 @@ table tr.summary td {
 
 #scanning-message{ top:40%; left:40%; position:absolute; display:none; }
 
-#emptycontent .icon-starred {
-	height: 30px;
-	width: 30px;
-	margin: 0 auto 10px;
-}
-
 table.dragshadow {
 	width:auto;
 }

apps/files/templates/list.php

@@ -49,7 +49,11 @@
 	<input type="hidden" name="permissions" value="" id="permissions">
 </div>
 
-<div id="emptycontent" class="hidden"><?php p($l->t('Nothing in here. Upload something!'))?></div>
+<div id="emptycontent" class="hidden">
+	<div class="icon-folder"></div>
+	<h2><?php p($l->t('No files yet')); ?></h2>
+	<p><?php p($l->t('Upload some content or sync with your devices!')); ?></p>
+</div>
 
 <table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="36" data-preview-y="36">
 	<thead>

apps/files/templates/simplelist.php

@@ -5,7 +5,8 @@
 
 <div id="emptycontent" class="hidden">
 	<div class="icon-starred"></div>
-	<?php p($l->t('Files and folders you mark as favorites will show up here')); ?>
+	<h2><?php p($l->t('No favorites')); ?></h2>
+	<p><?php p($l->t('Files and folders you mark as favorite will show up here')); ?></p>
 </div>
 
 <input type="hidden" name="dir" value="" id="dir">

apps/files_external/templates/list.php

@@ -4,7 +4,11 @@
 </div>
 <div id='notification'></div>
 
-<div id="emptycontent" class="hidden"><?php p($l->t( 'You don\'t have any external storages' )); ?></div>
+<div id="emptycontent" class="hidden">
+	<div class="icon-external"></div>
+	<h2><?php p($l->t('No external storages')); ?></h2>
+	<p><?php p($l->t('You can configure external storages in the personal settings')); ?></p>
+</div>
 
 <input type="hidden" name="dir" value="" id="dir">
 

apps/files_sharing/js/app.js

@@ -39,7 +39,9 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._inFileList);
 		this._inFileList.appName = t('files_sharing', 'Shared with you');
-		this._inFileList.$el.find('#emptycontent').text(t('files_sharing', 'No files have been shared with you yet.'));
+		this._inFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>' +
+			'<h2>' + t('files_sharing', 'Nothing shared with you yet') + '</h2>' +
+			'<p>' + t('files_sharing', 'Files and folders others share with you will show up here') + '</p>');
 		return this._inFileList;
 	},
 
@@ -59,7 +61,9 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._outFileList);
 		this._outFileList.appName = t('files_sharing', 'Shared with others');
-		this._outFileList.$el.find('#emptycontent').text(t('files_sharing', 'You haven\'t shared any files yet.'));
+		this._outFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>' +
+			'<h2>' + t('files_sharing', 'Nothing shared yet') + '</h2>' +
+			'<p>' + t('files_sharing', 'Files and folders you share will show up here') + '</p>');
 		return this._outFileList;
 	},
 
@@ -79,7 +83,9 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._linkFileList);
 		this._linkFileList.appName = t('files_sharing', 'Shared by link');
-		this._linkFileList.$el.find('#emptycontent').text(t('files_sharing', 'You haven\'t shared any files by link yet.'));
+		this._linkFileList.$el.find('#emptycontent').html('<div class="icon-public"></div>' +
+			'<h2>' + t('files_sharing', 'No shared links') + '</h2>' +
+			'<p>' + t('files_sharing', 'Files and folders you share by link will show up here') + '</p>');
 		return this._linkFileList;
 	},
 

apps/files_trashbin/templates/index.php

@@ -4,7 +4,11 @@
 </div>
 <div id='notification'></div>
 
-<div id="emptycontent" class="hidden"><?php p($l->t('Nothing in here. Your trash bin is empty!'))?></div>
+<div id="emptycontent" class="hidden">
+	<div class="icon-delete"></div>
+	<h2><?php p($l->t('No deleted files')); ?></h2>
+	<p><?php p($l->t('You will be able to recover deleted files from here')); ?></p>
+</div>
 
 <input type="hidden" name="dir" value="" id="dir">
 

core/css/icons.css

@@ -68,6 +68,10 @@
 	background-image: url('../img/actions/download.svg');
 }
 
+.icon-external {
+	background-image: url('../img/actions/external.svg');
+}
+
 .icon-history {
 	background-image: url('../img/actions/history.svg');
 }

core/css/styles.css

@@ -328,6 +328,20 @@ input[type="submit"].enabled {
 	top: 30%;
 	width: 100%;
 }
+#emptycontent h2 {
+	font-size: 22px;
+	margin-bottom: 10px;
+}
+#emptycontent [class^="icon-"],
+#emptycontent [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;
+}
 
 
 /* LOG IN & INSTALLATION ------------------------------------------------------------ */

core/img/actions/external.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m7.4515 1.6186 2.3806 2.2573-3.5709 3.386 2.3806 2.2573 3.5709-3.386 2.3806 2.2573v-6.7725h-7.1422zm-4.7612 1.1286c-0.65945 0-1.1903 0.5034-1.1903 1.1286v9.029c0 0.6253 0.53085 1.1286 1.1903 1.1286h9.522c0.6594 0 1.1903-0.5034 1.1903-1.1286v-3.386l-1.19-1.1287v4.5146h-9.5217v-9.029h4.761l-1.1905-1.1287h-3.5707z"/>
+</svg>