Media Grid: UI improvements to Attachment modal.
Props ryelle. See #28844. Built from https://develop.svn.wordpress.org/trunk@29289 git-svn-id: http://core.svn.wordpress.org/trunk@29071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor
@@ -310,30 +310,43 @@ function wp_print_media_templates() {
|
||||
<span class="saved"><?php esc_html_e('Saved.'); ?></span>
|
||||
</span>
|
||||
<div class="details">
|
||||
<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
|
||||
<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
|
||||
<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
|
||||
|
||||
<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
|
||||
<h3><?php _e('Attachment Details'); ?></h3>
|
||||
<div class="filename setting">
|
||||
<span class="name"><?php _e( 'File name' ); ?></span> <span class="value">{{ data.filename }}</span>
|
||||
</div>
|
||||
<div class="filename setting">
|
||||
<span class="name"><?php _e( 'File type' ); ?></span> <span class="value">{{ data.mime }}</span>
|
||||
</div>
|
||||
<div class="uploaded setting">
|
||||
<span class="name"><?php _e( 'Uploaded on' ); ?></span> <span class="value">{{ data.dateFormatted }}</span>
|
||||
</div>
|
||||
<div class="file-size setting">
|
||||
<span class="name"><?php _e( 'File size' ); ?></span> <span class="value">{{ data.filesizeHumanReadable }}</span>
|
||||
</div>
|
||||
<# if ( 'image' === data.type && ! data.uploading ) { #>
|
||||
<# if ( data.width && data.height ) { #>
|
||||
<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} × {{ data.height }}</div>
|
||||
<div class="dimensions setting"><span class="name"><?php _e( 'Dimensions' ); ?></span> <span class="value">{{ data.width }} × {{ data.height }}</span></div>
|
||||
<# } #>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.fileLength ) { #>
|
||||
<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
|
||||
<div class="file-length setting"><span class="name"><?php _e( 'Length' ); ?></span> <span class="value">{{ data.fileLength }}</span></div>
|
||||
<# } #>
|
||||
|
||||
<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
|
||||
<div class="bitrate">
|
||||
<strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
|
||||
<div class="bitrate setting">
|
||||
<span class="name"><?php _e( 'Bitrate' ); ?></span> <span class="value">{{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
|
||||
<# if ( data.meta.bitrate_mode ) { #>
|
||||
{{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
|
||||
<# } #>
|
||||
<# } #></span>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<label class="url setting" data-setting="url">
|
||||
<span class="name"><?php _e( 'URL' ); ?></span>
|
||||
<input type="text" value="{{ data.url }}" readonly />
|
||||
</label>
|
||||
|
||||
<div class="compat-meta">
|
||||
<# if ( data.compat && data.compat.meta ) { #>
|
||||
{{{ data.compat.meta }}}
|
||||
@@ -341,52 +354,51 @@ function wp_print_media_templates() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings">
|
||||
<label class="setting" data-setting="url">
|
||||
<span class="name"><?php _e('URL'); ?></span>
|
||||
<input type="text" value="{{ data.url }}" readonly />
|
||||
</label>
|
||||
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
|
||||
<label class="setting" data-setting="title">
|
||||
<span class="name"><?php _e('Title'); ?></span>
|
||||
<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<# if ( 'audio' === data.type ) { #>
|
||||
<?php foreach ( array(
|
||||
'artist' => __( 'Artist' ),
|
||||
'album' => __( 'Album' ),
|
||||
) as $key => $label ) : ?>
|
||||
<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
|
||||
<span class="name"><?php echo $label ?></span>
|
||||
<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="caption">
|
||||
<span class="name"><?php _e( 'Caption' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
|
||||
</label>
|
||||
<# if ( 'image' === data.type ) { #>
|
||||
<label class="setting" data-setting="alt">
|
||||
<span class="name"><?php _e( 'Alt Text' ); ?></span>
|
||||
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
|
||||
<div class="settings advanced-section">
|
||||
<h3><a class="advanced-toggle" href="#"><?php _e( 'Attachment Meta' ); ?></a></h3>
|
||||
<div class="advanced-settings hidden">
|
||||
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
|
||||
<label class="setting" data-setting="title">
|
||||
<span class="name"><?php _e( 'Title' ); ?></span>
|
||||
<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<# if ( 'audio' === data.type ) { #>
|
||||
<?php foreach ( array(
|
||||
'artist' => __( 'Artist' ),
|
||||
'album' => __( 'Album' ),
|
||||
) as $key => $label ) : ?>
|
||||
<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
|
||||
<span class="name"><?php echo $label ?></span>
|
||||
<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="caption">
|
||||
<span class="name"><?php _e( 'Caption' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
|
||||
</label>
|
||||
<# if ( 'image' === data.type ) { #>
|
||||
<label class="setting" data-setting="alt">
|
||||
<span class="name"><?php _e( 'Alt Text' ); ?></span>
|
||||
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="description">
|
||||
<span class="name"><?php _e( 'Description' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
|
||||
</label>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="description">
|
||||
<span class="name"><?php _e('Description'); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
|
||||
</label>
|
||||
<label class="setting">
|
||||
<span class="name"><?php _e( 'Uploaded By' ); ?></span>
|
||||
<span class="value">{{ data.authorName }}</span>
|
||||
</label>
|
||||
<# if ( data.uploadedTo ) { #>
|
||||
<label class="setting">
|
||||
<span class="name"><?php _e( 'Uploaded To' ); ?></span>
|
||||
<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
|
||||
<span class="name"><?php _e( 'Uploaded By' ); ?></span>
|
||||
<span class="value">{{ data.authorName }}</span>
|
||||
</label>
|
||||
<# } #>
|
||||
<div class="attachment-compat"></div>
|
||||
<# if ( data.uploadedTo ) { #>
|
||||
<label class="setting">
|
||||
<span class="name"><?php _e( 'Uploaded To' ); ?></span>
|
||||
<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
|
||||
</label>
|
||||
<# } #>
|
||||
<div class="attachment-compat"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a> |
|
||||
|
||||
Reference in New Issue
Block a user