Commit a581dcaa authored by Thomas Müller's avatar Thomas Müller
Browse files

Merge pull request #12924 from owncloud/improve-emptystates

Improve empty states
parents 232d4385 0bda42b8
......@@ -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;
}
......
......@@ -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>
......
......@@ -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">
......
......@@ -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">
......
......@@ -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;
},
......
......@@ -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">
......
......@@ -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');
}
......
......@@ -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 ------------------------------------------------------------ */
......
<?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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment