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 2014-07-24 21:55:17 +00:00
parent c83f891d54
commit 27866228af
7 changed files with 202 additions and 63 deletions

View File

@ -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: left;
}
.attachment-info h3:first-child {
margin-top: 0;
}
.attachment-info .details .setting .name {
float: right;
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,

File diff suppressed because one or more lines are too long

View File

@ -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,

File diff suppressed because one or more lines are too long

View File

@ -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 );
}
});
/**

File diff suppressed because one or more lines are too long

View File

@ -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 }} &times; {{ data.height }}</div>
<div class="dimensions setting"><span class="name"><?php _e( 'Dimensions' ); ?></span> <span class="value">{{ data.width }} &times; {{ 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> |