Media Grid: UI improvements to Attachment modal.
Props ryelle. See #28844. git-svn-id: https://develop.svn.wordpress.org/trunk@29289 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor
parent
dd76aeea5b
commit
cdf2c8132c
|
|
@ -277,7 +277,8 @@
|
|||
}
|
||||
|
||||
.media-sidebar h3,
|
||||
.image-details h3 {
|
||||
.image-details h3,
|
||||
.attachment-info h3 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -1467,8 +1468,9 @@
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
.attachment-details .settings-save-status .spinner {
|
||||
margin: 0 5px 0;
|
||||
.attachment-details .settings-save-status .spinner,
|
||||
.attachment-details .settings-save-status .saved {
|
||||
margin: 0 5px -20px;
|
||||
}
|
||||
|
||||
.attachment-details .settings-save-status .saved {
|
||||
|
|
@ -1491,6 +1493,29 @@
|
|||
padding-bottom: 11px;
|
||||
}
|
||||
|
||||
.attachment-info .details {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.attachment-info h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.attachment-info .details .setting .name {
|
||||
float: left;
|
||||
margin: 8px 1% 0 1% !important;
|
||||
padding: 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.attachment-info .details .url.setting .name {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.attachment-info .setting .value {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.attachment-info .filename {
|
||||
font-weight: bold;
|
||||
color: #464646;
|
||||
|
|
@ -1553,6 +1578,29 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.attachment-info .advanced-toggle {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.attachment-info .advanced-toggle:hover {
|
||||
color: #d54e21;
|
||||
}
|
||||
|
||||
.attachment-info .advanced-toggle::after {
|
||||
font: normal 20px/1 'dashicons';
|
||||
speak: none;
|
||||
vertical-align: top;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: '\f140';
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.attachment-info .advanced-visible .advanced-toggle::after {
|
||||
content: '\f142';
|
||||
}
|
||||
|
||||
.attachment-info .edit-attachment,
|
||||
.attachment-info .refresh-attachment,
|
||||
.attachment-info .delete-attachment,
|
||||
|
|
|
|||
|
|
@ -6334,6 +6334,7 @@
|
|||
'click .trash-attachment': 'trashAttachment',
|
||||
'click .edit-attachment': 'editAttachment',
|
||||
'click .refresh-attachment': 'refreshAttachment',
|
||||
'click .advanced-toggle': 'onToggleAdvanced',
|
||||
'keydown': 'toggleSelectionHandler'
|
||||
},
|
||||
|
||||
|
|
@ -6346,6 +6347,17 @@
|
|||
*/
|
||||
media.view.Attachment.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
|
||||
/**
|
||||
* Render view, then check if the advanced details should be shown.
|
||||
*/
|
||||
render: function(){
|
||||
media.view.Attachment.prototype.render.apply( this, arguments );
|
||||
|
||||
if ( 'show' === getUserSetting( 'advImgDetails' ) ) {
|
||||
this.toggleAdvanced( true );
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @param {Object} event
|
||||
*/
|
||||
|
|
@ -6402,8 +6414,27 @@
|
|||
$('.attachments-browser .details').focus();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onToggleAdvanced: function( event ) {
|
||||
event.preventDefault();
|
||||
this.toggleAdvanced();
|
||||
},
|
||||
|
||||
toggleAdvanced: function( show ) {
|
||||
var $advanced = this.$( '.advanced-section' ), mode = 'show';
|
||||
|
||||
if ( $advanced.hasClass('advanced-visible') || false === show ) {
|
||||
$advanced.removeClass('advanced-visible');
|
||||
$advanced.find('.advanced-settings').addClass('hidden');
|
||||
mode = 'hide';
|
||||
} else {
|
||||
$advanced.addClass('advanced-visible');
|
||||
$advanced.find('.advanced-settings').removeClass('hidden');
|
||||
}
|
||||
|
||||
setUserSetting( 'advImgDetails', mode );
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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> |
|
||||
|
|
|
|||
Loading…
Reference in New Issue