WordPress.org
Get WordPress

Make WordPress Core

Ticket #28844: 28844.7.diff

File 28844.7.diff, 10.5 KB (added by ryelle, 10 years ago)

  • src/wp-includes/css/media-views.css

     
    270270}
    271271
    272272.media-sidebar h3,
    273 .image-details h3 {
     273.image-details h3,
     274.attachment-info h3 {
    274275        position: relative;
    275276        font-weight: bold;
    276277        text-transform: uppercase;
    … …  
    15461547        z-index: 10;
    15471548}
    15481549
    1549 .attachment-details .settings-save-status .spinner {
    1550         margin: 0 5px 0;
     1550.attachment-details .settings-save-status .spinner,
     1551.attachment-details .settings-save-status .saved {
     1552        margin: 0 5px -20px;
    15511553}
    15521554
    15531555.attachment-details .settings-save-status .saved {
    … …  
    15701572        padding-bottom: 11px;
    15711573}
    15721574
     1575.attachment-info .details {
     1576        clear: right;
     1577}
     1578
     1579.attachment-info h3:first-child {
     1580        margin-top: 0;
     1581}
     1582
     1583.attachment-info .details .setting .name {
     1584        float: left;
     1585        margin: 8px 1% 0 1% !important;
     1586        padding: 0;
     1587        line-height: 1.1;
     1588}
     1589
     1590.attachment-info .details .url.setting .name {
     1591        padding-top: 3px;
     1592}
     1593
     1594.attachment-info .setting .value {
     1595        font-style: italic;
     1596}
     1597
    15731598.attachment-info .filename {
    15741599        font-weight: bold;
    15751600        color: #464646;
    … …  
    16321657        max-width: 100%;
    16331658}
    16341659
     1660.attachment-info .advanced-toggle {
     1661        color: #666;
     1662        text-decoration: none;
     1663        display: block;
     1664}
     1665.attachment-info .advanced-toggle:hover {
     1666        color: #d54e21;
     1667}
     1668
     1669.attachment-info .advanced-toggle::after {
     1670        font: normal 20px/1 'dashicons';
     1671        speak: none;
     1672        vertical-align: top;
     1673        -webkit-font-smoothing: antialiased;
     1674        -moz-osx-font-smoothing: grayscale;
     1675        content: '\f140';
     1676        display: inline-block;
     1677        margin-top: -2px;
     1678}
     1679.attachment-info .advanced-visible .advanced-toggle::after {
     1680        content: '\f142';
     1681}
     1682
    16351683.attachment-info .edit-attachment,
    16361684.attachment-info .refresh-attachment,
    16371685.attachment-info .delete-attachment,

  • src/wp-includes/js/media-views.js

     
    63326332                        'click .trash-attachment':        'trashAttachment',
    63336333                        'click .edit-attachment':         'editAttachment',
    63346334                        'click .refresh-attachment':      'refreshAttachment',
     6335                        'click .advanced-toggle':         'onToggleAdvanced',
    63356336                        'keydown':                        'toggleSelectionHandler'
    63366337                },
    63376338
    … …  
    63446345                         */
    63456346                        media.view.Attachment.prototype.initialize.apply( this, arguments );
    63466347                },
     6348
    63476349                /**
     6350                 * Render view, then check if the advanced details should be shown.
     6351                 */
     6352                render: function(){
     6353                        media.view.Attachment.prototype.render.apply( this, arguments );
     6354
     6355                        if ( getUserSetting( 'advImgDetails' ) === 'show' ) {
     6356                                this.toggleAdvanced( true );
     6357                        }
     6358                },
     6359                /**
    63486360                 * @param {Object} event
    63496361                 */
    63506362                deleteAttachment: function( event ) {
    … …  
    64006412                                $('.attachments-browser .details').focus();
    64016413                                return false;
    64026414                        }
     6415                },
     6416
     6417                onToggleAdvanced: function( event ) {
     6418                        event.preventDefault();
     6419                        this.toggleAdvanced();
     6420                },
     6421
     6422                toggleAdvanced: function( show ) {
     6423                        var $advanced = this.$el.find( '.advanced-section' ),
     6424                                mode;
     6425
     6426                        if ( $advanced.hasClass('advanced-visible') || show === false ) {
     6427                                $advanced.removeClass('advanced-visible');
     6428                                $advanced.find('.advanced-settings').addClass('hidden');
     6429                                mode = 'hide';
     6430                        } else {
     6431                                $advanced.addClass('advanced-visible');
     6432                                $advanced.find('.advanced-settings').removeClass('hidden');
     6433                                mode = 'show';
     6434                        }
     6435
     6436                        setUserSetting( 'advImgDetails', mode );
    64036437                }
    64046438
    64056439        });

  • src/wp-includes/media-template.php

     
    310310                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
    311311                        </span>
    312312                        <div class="details">
    313                                 <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
    314                                 <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
    315                                 <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
     313                                <h3><?php _e('Attachment Details'); ?></h3>
     314                                <div class="filename setting"><span class="name"><?php _e( 'File name' ); ?></span> <span class="value">{{ data.filename }}</span></div>
     315                                <div class="filename setting"><span class="name"><?php _e( 'File type' ); ?></span> <span class="value">{{ data.mime }}</span></div>
     316                                <div class="uploaded setting"><span class="name"><?php _e( 'Uploaded on' ); ?></span> <span class="value">{{ data.dateFormatted }}</span></div>
     317                                <div class="file-size setting"><span class="name"><?php _e( 'File size' ); ?></span> <span class="value">{{ data.filesizeHumanReadable }}</span></div>
    316318
    317                                 <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
    318319                                <# if ( 'image' === data.type && ! data.uploading ) { #>
    319320                                        <# if ( data.width && data.height ) { #>
    320                                                 <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
     321                                                <div class="dimensions setting"><span class="name"><?php _e( 'Dimensions' ); ?></span> <span class="value">{{ data.width }} &times; {{ data.height }}</span></div>
    321322                                        <# } #>
    322323                                <# } #>
    323324
    324325                                <# if ( data.fileLength ) { #>
    325                                         <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
     326                                        <div class="file-length setting"><span class="name"><?php _e( 'Length' ); ?></span> <span class="value">{{ data.fileLength }}</span></div>
    326327                                <# } #>
    327328
    328329                                <# if ( 'audio' === data.type && data.meta && data.meta.bitrate ) { #>
    329                                         <div class="bitrate">
    330                                                 <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
     330                                        <div class="bitrate setting">
     331                                                <span class="name"><?php _e( 'Bitrate' ); ?></span> <span class="value">{{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
    331332                                                <# if ( data.meta.bitrate_mode ) { #>
    332333                                                {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
    333                                                 <# } #>
     334                                                <# } #></span>
    334335                                        </div>
    335336                                <# } #>
     337                                <label class="url setting" data-setting="url">
     338                                        <span class="name"><?php _e('URL'); ?></span>
     339                                        <input type="text" value="{{ data.url }}" readonly />
     340                                </label>
    336341
    337342                                <div class="compat-meta">
    338343                                        <# if ( data.compat && data.compat.meta ) { #>
    … …  
    341346                                </div>
    342347                        </div>
    343348
    344                         <div class="settings">
    345                                 <label class="setting" data-setting="url">
    346                                         <span class="name"><?php _e('URL'); ?></span>
    347                                         <input type="text" value="{{ data.url }}" readonly />
    348                                 </label>
    349                                 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    350                                 <label class="setting" data-setting="title">
    351                                         <span class="name"><?php _e('Title'); ?></span>
    352                                         <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    353                                 </label>
    354                                 <# if ( 'audio' === data.type ) { #>
    355                                 <?php foreach ( array(
    356                                         'artist' => __( 'Artist' ),
    357                                         'album' => __( 'Album' ),
    358                                 ) as $key => $label ) : ?>
    359                                 <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
    360                                         <span class="name"><?php echo $label ?></span>
    361                                         <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
    362                                 </label>
    363                                 <?php endforeach; ?>
    364                                 <# } #>
    365                                 <label class="setting" data-setting="caption">
    366                                         <span class="name"><?php _e( 'Caption' ); ?></span>
    367                                         <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    368                                 </label>
    369                                 <# if ( 'image' === data.type ) { #>
    370                                         <label class="setting" data-setting="alt">
    371                                                 <span class="name"><?php _e( 'Alt Text' ); ?></span>
    372                                                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     349                        <div class="settings advanced-section">
     350                                <h3><a class="advanced-toggle" href="#"><?php _e('Attachment Meta'); ?></a></h3>
     351                                <div class="advanced-settings hidden">
     352                                        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     353                                        <label class="setting" data-setting="title">
     354                                                <span class="name"><?php _e('Title'); ?></span>
     355                                                <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    373356                                        </label>
    374                                 <# } #>
    375                                 <label class="setting" data-setting="description">
    376                                         <span class="name"><?php _e('Description'); ?></span>
    377                                         <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    378                                 </label>
    379                                 <label class="setting">
    380                                         <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    381                                         <span class="value">{{ data.authorName }}</span>
    382                                 </label>
    383                                 <# if ( data.uploadedTo ) { #>
     357                                        <# if ( 'audio' === data.type ) { #>
     358                                        <?php foreach ( array(
     359                                                'artist' => __( 'Artist' ),
     360                                                'album' => __( 'Album' ),
     361                                        ) as $key => $label ) : ?>
     362                                        <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
     363                                                <span class="name"><?php echo $label ?></span>
     364                                                <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
     365                                        </label>
     366                                        <?php endforeach; ?>
     367                                        <# } #>
     368                                        <label class="setting" data-setting="caption">
     369                                                <span class="name"><?php _e( 'Caption' ); ?></span>
     370                                                <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     371                                        </label>
     372                                        <# if ( 'image' === data.type ) { #>
     373                                                <label class="setting" data-setting="alt">
     374                                                        <span class="name"><?php _e( 'Alt Text' ); ?></span>
     375                                                        <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     376                                                </label>
     377                                        <# } #>
     378                                        <label class="setting" data-setting="description">
     379                                                <span class="name"><?php _e('Description'); ?></span>
     380                                                <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     381                                        </label>
    384382                                        <label class="setting">
    385                                                 <span class="name"><?php _e( 'Uploaded To' ); ?></span>
    386                                                 <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     383                                                <span class="name"><?php _e( 'Uploaded By' ); ?></span>
     384                                                <span class="value">{{ data.authorName }}</span>
    387385                                        </label>
    388                                 <# } #>
    389                                 <div class="attachment-compat"></div>
     386                                        <# if ( data.uploadedTo ) { #>
     387                                                <label class="setting">
     388                                                        <span class="name"><?php _e( 'Uploaded To' ); ?></span>
     389                                                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     390                                                </label>
     391                                        <# } #>
     392                                        <div class="attachment-compat"></div>
     393                                </div>
    390394                        </div>
    391395
    392396                        <a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a> |