WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/17/2014 03:54:44 AM (10 years ago)
Author:
helen
Message:

Media Grid Attachment Details modal UI improvements:

  • Align better visually with the existing media modal and the post image edit modal.
  • Add back a link to the full attachment edit screen (post.php).
  • Add a title to the modal and move prev/next buttons next to the more-consistent close button.
  • Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button.

Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup.

props ericlewis, helen, melchoyce. see #28844. fixes #28915.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r29179 r29204  
    256256    <script type="text/html" id="tmpl-edit-attachment-frame">
    257257        <div class="edit-media-header">
    258             <button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
    259             <button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
    260         </div>
    261         <div class="media-frame-router"></div>
     258            <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
     259            <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
     260        </div>
     261        <div class="media-frame-title"></div>
    262262        <div class="media-frame-content"></div>
    263263    </script>
    … …  
    266266        <h3>
    267267            <?php _e('Attachment Details'); ?>
    268 
    269             <span class="settings-save-status">
    270                 <span class="spinner"></span>
    271                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
    272             </span>
    273268        </h3>
    274         <div class="attachment-info">
     269        <div class="attachment-media-view">
    275270            <div class="thumbnail thumbnail-{{ data.type }}">
    276271                <# if ( data.uploading ) { #>
    … …  
    281276                    <img src="{{ data.icon }}" class="icon" draggable="false" />
    282277                <# } #>
    283             </div>
    284             <# if ( 'audio' === data.type ) { #>
    285             <div class="wp-media-wrapper">
    286                 <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    287                     <source type="{{ data.mime }}" src="{{ data.url }}"/>
    288                 </audio>
    289             </div>
    290             <# } else if ( 'video' === data.type ) { #>
    291             <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
    292                 <video controls class="wp-video-shortcode" preload="metadata"
    293                     width="{{ data.width }}" height="{{ data.height }}"
    294                     <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
    295                     <source type="{{ data.mime }}" src="{{ data.url }}"/>
    296                 </video>
    297             </div>
    298             <# } #>
     278
     279                <# if ( 'audio' === data.type ) { #>
     280                <div class="wp-media-wrapper">
     281                    <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     282                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
     283                    </audio>
     284                </div>
     285                <# } else if ( 'video' === data.type ) { #>
     286                <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
     287                    <video controls class="wp-video-shortcode" preload="metadata"
     288                        width="{{ data.width }}" height="{{ data.height }}"
     289                        <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
     290                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
     291                    </video>
     292                </div>
     293                <# } #>
     294
     295                <div class="attachment-actions">
     296                    <# if ( 'image' === data.type && ! data.uploading ) { #>
     297                        <a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
     298                    <# } #>
     299
     300                    <# if ( ! data.uploading && data.can.remove ) { #>
     301                        <?php if ( MEDIA_TRASH ): ?>
     302                            <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
     303                        <?php else: ?>
     304                            <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
     305                        <?php endif; ?>
     306                    <# } #>
     307                </div>
     308            </div>
     309        </div>
     310        <div class="attachment-info">
     311            <span class="settings-save-status">
     312                <span class="spinner"></span>
     313                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
     314            </span>
    299315            <div class="details">
    300316                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
    … …  
    322338                <# } #>
    323339
    324                 <# if ( ! data.uploading && data.can.remove ) { #>
    325                     <?php if ( MEDIA_TRASH ): ?>
    326                         <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
    327                     <?php else: ?>
    328                         <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
    329                     <?php endif; ?>
    330                 <# } #>
    331 
    332340                <div class="compat-meta">
    333341                    <# if ( data.compat && data.compat.meta ) { #>
    … …  
    336344                </div>
    337345            </div>
    338         </div>
    339         <div class="attachment-fields">
    340             <label class="setting" data-setting="url">
    341                 <span class="name"><?php _e('URL'); ?></span>
    342                 <input type="text" value="{{ data.url }}" readonly />
    343             </label>
    344             <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    345             <label class="setting" data-setting="title">
    346                 <span class="name"><?php _e('Title'); ?></span>
    347                 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    348             </label>
    349             <# if ( 'audio' === data.type ) { #>
    350             <?php foreach ( array(
    351                 'artist' => __( 'Artist' ),
    352                 'album' => __( 'Album' ),
    353             ) as $key => $label ) : ?>
    354             <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
    355                 <span class="name"><?php echo $label ?></span>
    356                 <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
    357             </label>
    358             <?php endforeach; ?>
    359             <# } #>
    360             <label class="setting" data-setting="caption">
    361                 <span class="name"><?php _e('Caption'); ?></span>
    362                 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    363             </label>
    364             <# if ( 'image' === data.type ) { #>
    365                 <label class="setting" data-setting="alt">
    366                     <span class="name"><?php _e('Alt Text'); ?></span>
    367                     <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    368                 </label>
    369             <# } #>
    370             <label class="setting" data-setting="description">
    371                 <span class="name"><?php _e('Description'); ?></span>
    372                 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    373             </label>
    374             <label class="setting">
    375                 <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    376                 <span class="value">{{ data.authorName }}</span>
    377             </label>
    378             <# if ( data.uploadedTo ) { #>
     346
     347            <div class="settings">
     348                <label class="setting" data-setting="url">
     349                    <span class="name"><?php _e('URL'); ?></span>
     350                    <input type="text" value="{{ data.url }}" readonly />
     351                </label>
     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 }} />
     356                </label>
     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>
    379382                <label class="setting">
    380                     <span class="name"><?php _e('Uploaded To'); ?></span>
    381                     <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
    382                 </label>
    383             <# } #>
     383                    <span class="name"><?php _e( 'Uploaded By' ); ?></span>
     384                    <span class="value">{{ data.authorName }}</span>
     385                </label>
     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>
     393
     394            <a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
    384395
    385396        </div>
Note: See TracChangeset for help on using the changeset viewer.