Gallery preview: add a "No items found" state which is displayed when rendering the gallery wpview and no attachments are found. Props gcorne, fixes #27558

git-svn-id: https://develop.svn.wordpress.org/trunk@27899 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2014-04-02 02:17:39 +00:00
parent d4f99c2142
commit c5f7f95979
3 changed files with 62 additions and 29 deletions

View File

@ -26,7 +26,7 @@ window.wp = window.wp || {};
_.extend( wp.mce.View.prototype, { _.extend( wp.mce.View.prototype, {
initialize: function() {}, initialize: function() {},
html: function() {}, getHtml: function() {},
render: function() { render: function() {
var html = this.getHtml(); var html = this.getHtml();
// Search all tinymce editor instances and update the placeholders // Search all tinymce editor instances and update the placeholders
@ -267,27 +267,30 @@ window.wp = window.wp || {};
fetch: function() { fetch: function() {
this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID ); this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID );
this.attachments.more().done( _.bind( this.render, this ) ); this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
}, },
getHtml: function() { getHtml: function() {
var attrs = this.shortcode.attrs.named, var attrs = this.shortcode.attrs.named,
options, attachments = false,
attachments; options;
if ( ! this.attachments.length ) { // Don't render errors while still fetching attachments
if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
return; return;
} }
attachments = this.attachments.toJSON(); if ( this.attachments.length ) {
attachments = this.attachments.toJSON();
_.each( attachments, function( attachment ) { _.each( attachments, function( attachment ) {
if ( attachment.sizes.thumbnail ) { if ( attachment.sizes.thumbnail ) {
attachment.thumbnail = attachment.sizes.thumbnail; attachment.thumbnail = attachment.sizes.thumbnail;
} else { } else {
attachment.thumbnail = attachment.sizes.full; attachment.thumbnail = attachment.sizes.full;
} }
} ); } );
}
options = { options = {
attachments: attachments, attachments: attachments,

View File

@ -328,6 +328,30 @@ audio {
overflow-x: hidden; overflow-x: hidden;
} }
.gallery-error {
border: 1px solid #dedede;
padding: 20px 0;
margin: 0;
}
.selected .gallery-error {
border-color: transparent;
}
.gallery-error .dashicons {
display: block;
margin: 0 auto;
width: 32px;
height: 32px;
font-size: 32px;
}
.gallery-error p {
margin: 0;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.gallery .gallery-item { .gallery .gallery-item {
float: left; float: left;
margin: 0; margin: 0;

View File

@ -970,26 +970,32 @@ function wp_print_media_templates() {
</div> </div>
</div> </div>
</script> </script>
<script type="text/html" id="tmpl-editor-gallery"> <script type="text/html" id="tmpl-editor-gallery">
<div class="toolbar"> <div class="toolbar">
<div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div> <div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
</div> </div>
<div class="gallery gallery-columns-{{ data.columns }}"> <# if ( data.attachments ) { #>
<# _.each( data.attachments, function( attachment, index ) { #> <div class="gallery gallery-columns-{{{ data.columns }}}">
<dl class="gallery-item"> <# _.each( data.attachments, function( attachment, index ) { #>
<dt class="gallery-icon"> <dl class="gallery-item">
<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" /> <dt class="gallery-icon">
</dt> <img src="{{{ attachment.thumbnail.url }}}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
<dd class="wp-caption-text gallery-caption"> </dt>
{{ attachment.caption }} <dd class="wp-caption-text gallery-caption">
</dd> {{ attachment.caption }}
</dl> </dd>
<# if ( index % data.columns === data.columns - 1 ) { #> </dl>
<br style="clear: both;"> <# if ( index % data.columns === data.columns - 1 ) { #>
<# } #> <br style="clear: both;">
<# } #>
<# } ); #> <# } ); #>
</div> </div>
<# } else { #>
<div class="gallery-error">
<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
</div>
<# } #>
</script> </script>
<script type="text/html" id="tmpl-editor-audio"> <script type="text/html" id="tmpl-editor-audio">