WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/24/2014 09:54:22 PM (12 years ago)
Author:
wonderboymusic
Message:

Media Grid: UI improvements to Attachment modal.

Props ryelle.
See #28844.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r29288 r29289  
    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>
    316 
    317                                 <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
     313                                <h3><?php _e('Attachment Details'); ?></h3>
     314                                <div class="filename setting">
     315                                        <span class="name"><?php _e( 'File name' ); ?></span> <span class="value">{{ data.filename }}</span>
     316                                </div>
     317                                <div class="filename setting">
     318                                        <span class="name"><?php _e( 'File type' ); ?></span> <span class="value">{{ data.mime }}</span>
     319                                </div>
     320                                <div class="uploaded setting">
     321                                        <span class="name"><?php _e( 'Uploaded on' ); ?></span> <span class="value">{{ data.dateFormatted }}</span>
     322                                </div>
     323                                <div class="file-size setting">
     324                                        <span class="name"><?php _e( 'File size' ); ?></span> <span class="value">{{ data.filesizeHumanReadable }}</span>
     325                                </div>
    318326                                <# if ( 'image' === data.type && ! data.uploading ) { #>
    319327                                        <# if ( data.width && data.height ) { #>
    320                                                 <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
     328                                                <div class="dimensions setting"><span class="name"><?php _e( 'Dimensions' ); ?></span> <span class="value">{{ data.width }} &times; {{ data.height }}</span></div>
    321329                                        <# } #>
    322330                                <# } #>
    323331
    324332                                <# if ( data.fileLength ) { #>
    325                                         <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
     333                                        <div class="file-length setting"><span class="name"><?php _e( 'Length' ); ?></span> <span class="value">{{ data.fileLength }}</span></div>
    326334                                <# } #>
    327335
    328336                                <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
    329                                         <div class="bitrate">
    330                                                 <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
     337                                        <div class="bitrate setting">
     338                                                <span class="name"><?php _e( 'Bitrate' ); ?></span> <span class="value">{{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
    331339                                                <# if ( data.meta.bitrate_mode ) { #>
    332340                                                {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
    333                                                 <# } #>
     341                                                <# } #></span>
    334342                                        </div>
    335343                                <# } #>
     344
     345                                <label class="url setting" data-setting="url">
     346                                        <span class="name"><?php _e( 'URL' ); ?></span>
     347                                        <input type="text" value="{{ data.url }}" readonly />
     348                                </label>
    336349
    337350                                <div class="compat-meta">
    … …  
    342355                        </div>
    343356
    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 }} />
     357                        <div class="settings advanced-section">
     358                                <h3><a class="advanced-toggle" href="#"><?php _e( 'Attachment Meta' ); ?></a></h3>
     359                                <div class="advanced-settings hidden">
     360                                        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     361                                        <label class="setting" data-setting="title">
     362                                                <span class="name"><?php _e( 'Title' ); ?></span>
     363                                                <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    373364                                        </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 ) { #>
     365                                        <# if ( 'audio' === data.type ) { #>
     366                                        <?php foreach ( array(
     367                                                'artist' => __( 'Artist' ),
     368                                                'album' => __( 'Album' ),
     369                                        ) as $key => $label ) : ?>
     370                                        <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
     371                                                <span class="name"><?php echo $label ?></span>
     372                                                <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
     373                                        </label>
     374                                        <?php endforeach; ?>
     375                                        <# } #>
     376                                        <label class="setting" data-setting="caption">
     377                                                <span class="name"><?php _e( 'Caption' ); ?></span>
     378                                                <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     379                                        </label>
     380                                        <# if ( 'image' === data.type ) { #>
     381                                                <label class="setting" data-setting="alt">
     382                                                        <span class="name"><?php _e( 'Alt Text' ); ?></span>
     383                                                        <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     384                                                </label>
     385                                        <# } #>
     386                                        <label class="setting" data-setting="description">
     387                                                <span class="name"><?php _e( 'Description' ); ?></span>
     388                                                <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     389                                        </label>
    384390                                        <label class="setting">
    385                                                 <span class="name"><?php _e( 'Uploaded To' ); ?></span>
    386                                                 <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     391                                                <span class="name"><?php _e( 'Uploaded By' ); ?></span>
     392                                                <span class="value">{{ data.authorName }}</span>
    387393                                        </label>
    388                                 <# } #>
    389                                 <div class="attachment-compat"></div>
     394                                        <# if ( data.uploadedTo ) { #>
     395                                                <label class="setting">
     396                                                        <span class="name"><?php _e( 'Uploaded To' ); ?></span>
     397                                                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     398                                                </label>
     399                                        <# } #>
     400                                        <div class="attachment-compat"></div>
     401                                </div>
    390402                        </div>
    391403
Note: See TracChangeset for help on using the changeset viewer.