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

Built from https://develop.svn.wordpress.org/trunk@27899


git-svn-id: http://core.svn.wordpress.org/trunk@27730 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-04-02 02:18:15 +00:00
parent 56ede0bad7
commit c7eb5e7f1f
4 changed files with 63 additions and 30 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

@ -328,6 +328,30 @@ audio {
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 {
float: left;
margin: 0;

View File

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