WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/24/2014 09:54:22 PM (11 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.