WordPress.org
Get WordPress

Make WordPress Core

Changeset 29204


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.

Location:
trunk/src/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r29136 r29204  
    15261526}
    15271527
    1528 .media-sidebar .settings-save-status {
    1529     background: #f5f5f5;
    1530     float: right;
    1531     text-transform: none;
    1532     z-index: 10;
    1533 }
    1534 
    1535 .media-sidebar .settings-save-status .spinner {
    1536     margin: 0 5px 0;
    1537 }
    1538 
    1539 .media-sidebar .settings-save-status .saved {
    1540     float: right;
    1541     display: none;
    1542 }
    1543 
    1544 .media-sidebar .save-waiting .settings-save-status .spinner,
    1545 .media-sidebar .save-complete .settings-save-status .saved {
    1546     display: block;
    1547 }
    1548 
    15491528/**
    15501529 * Attachment Details
    … …  
    15531532    position: relative;
    15541533    overflow: auto;
     1534}
     1535
     1536.attachment-details .settings-save-status {
     1537    float: right;
     1538    text-transform: none;
     1539    z-index: 10;
     1540}
     1541
     1542.attachment-details .settings-save-status .spinner {
     1543    margin: 0 5px 0;
     1544}
     1545
     1546.attachment-details .settings-save-status .saved {
     1547    float: right;
     1548    display: none;
     1549}
     1550
     1551.attachment-details.save-waiting .settings-save-status .spinner,
     1552.attachment-details.save-complete .settings-save-status .saved {
     1553    display: block;
    15551554}
    15561555
    … …  
    16461645}
    16471646
    1648 .attachment-info .delete-attachment,
    1649 .attachment-info .trash-attachment {
     1647.media-modal .delete-attachment,
     1648.media-modal .trash-attachment {
    16501649    color: #bc0b0b;
    16511650}
    16521651
    1653 .attachment-info .delete-attachment:hover,
    1654 .attachment-info .trash-attachment:hover {
     1652.media-modal .delete-attachment:hover,
     1653.media-modal .trash-attachment:hover {
    16551654    color: red;
    16561655}
    … …  
    26712670 * This should be OOCSS'd so both use a shared selector.
    26722671 */
     2672.edit-attachment-frame .edit-media-header {
     2673    overflow: hidden;
     2674}
     2675
     2676.upload-php .media-modal-close .media-modal-icon:before {
     2677    content: '\f335';
     2678    font-size: 30px;
     2679}
     2680
     2681.upload-php .media-modal-close:hover .media-modal-icon:before,
     2682.upload-php .media-modal-close:focus .media-modal-icon:before {
     2683    color: #fff;
     2684}
     2685
     2686.upload-php .media-modal-close .media-modal-icon {
     2687    margin-top: 13px;
     2688    width: 30px;
     2689    height: 30px;
     2690}
     2691
     2692.upload-php .media-modal-close,
    26732693.edit-attachment-frame .edit-media-header .left,
    26742694.edit-attachment-frame .edit-media-header .right {
    … …  
    26762696    color: #777;
    26772697    background-color: transparent;
    2678     height: 48px;
    2679     width: 54px;
    2680     float: left;
     2698    height: 56px;
     2699    width: 56px;
     2700    padding: 0;
     2701    position: absolute;
    26812702    text-align: center;
    26822703    border: 0;
    2683     border-right: 1px solid #ddd;
     2704    border-left: 1px solid #ddd;
     2705}
     2706
     2707.upload-php .media-modal-close {
     2708    top: 0;
     2709    right: 0;
     2710}
     2711
     2712.edit-attachment-frame .edit-media-header .left {
     2713    right: 112px;
     2714}
     2715
     2716.edit-attachment-frame .edit-media-header .right {
     2717    right: 56px;
     2718}
     2719
     2720.edit-attachment-frame .media-frame-title {
     2721    left: 0;
     2722    right: 170px; /* leave space for prev/next/close */
    26842723}
    26852724
    … …  
    27122751}
    27132752
    2714 .edit-attachment-frame .edit-media-header .close:hover,
     2753.upload-php .media-modal-close:hover,
    27152754.edit-attachment-frame .edit-media-header .right:hover,
    27162755.edit-attachment-frame .edit-media-header .left:hover,
    2717 .edit-attachment-frame .edit-media-header .close:focus,
     2756.upload-php .media-modal-close:focus,
    27182757.edit-attachment-frame .edit-media-header .right:focus,
    27192758.edit-attachment-frame .edit-media-header .left:focus {
    … …  
    27302769    border-bottom: none;
    27312770    bottom: 0;
     2771    top: 56px;
    27322772}
    27332773
    … …  
    27442784    right: 0;
    27452785    left: 0;
    2746 }
    2747 
    2748 .edit-attachment-frame .attachment-info {
    2749     border-bottom: 0;
    2750     border-right: 1px solid #ddd;
    2751     bottom: 0;
    2752     position: absolute;
    2753     top: 0;
    2754     left: 0;
    2755     right: 50%;
    2756     margin-bottom: 0;
    2757     padding: 2% 4% 0;
    2758     height: 98%; /* 100% - padding percentage above */
    2759 }
    2760 
    2761 .edit-attachment-frame .attachment-info .thumbnail {
    2762     float: none;
    2763     max-width: none;
    2764     max-height: 70%;
    2765     margin-right: 0;
    2766 }
    2767 
    2768 .edit-attachment-frame .attachment-info .thumbnail-image img {
    2769     margin: 0;
    2770 }
    2771 
    2772 .edit-attachment-frame .attachment-info .thumbnail-image:after {
    2773     -webkit-box-shadow: none;
    2774             box-shadow: none;
    2775 }
    2776 
    2777 .edit-attachment-frame .attachment-info .thumbnail img {
     2786    -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     2787    box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     2788}
     2789.edit-attachment-frame .attachment-media-view {
     2790    float: left;
     2791    width: 65%;
     2792    height: 100%;
     2793}
     2794
     2795.edit-attachment-frame .attachment-media-view .thumbnail {
     2796    -webkit-box-sizing: border-box;
     2797    -moz-box-sizing: border-box;
     2798    box-sizing: border-box;
     2799    padding: 16px;
     2800    height: 100%;
     2801}
     2802
     2803.edit-attachment-frame .attachment-media-view img {
     2804    display: block;
     2805    margin-bottom: 16px;
    27782806    max-width: 100%;
    2779     max-height: 100%;
    2780 }
    2781 
    2782 .edit-attachment-frame .attachment-info .details {
    2783     float: none;
     2807    max-height: -webkit-calc( 100% - 42px );
     2808    max-height: calc( 100% - 42px ); /* leave space for actions underneath */
     2809}
     2810
     2811.edit-attachment-frame .delete-attachment {
     2812    float: right;
     2813    margin-top: 7px;
    27842814}
    27852815
    … …  
    27882818}
    27892819
    2790 .edit-attachment-frame .attachment-fields {
    2791     bottom: 0;
    2792     padding: 2% 4%;
    2793     position: absolute;
    2794     top: 0;
    2795     left: 50%;
    2796     right: 0;
    2797 }
    2798 
    2799 .edit-attachment-frame .attachment-fields .setting {
     2820.edit-attachment-frame .attachment-info {
     2821    overflow: auto;
     2822    -webkit-box-sizing: border-box;
     2823    -moz-box-sizing: border-box;
     2824    box-sizing: border-box;
     2825    margin-bottom: 0;
     2826    padding: 12px 16px 0;
     2827    width: 35%;
     2828    height: 100%;
     2829    -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     2830    box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     2831    border-bottom: 0;
     2832    border-left: 1px solid #ddd;
     2833    background: #f3f3f3;
     2834}
     2835
     2836.edit-attachment-frame .attachment-info .details,
     2837.edit-attachment-frame .attachment-info .settings {
     2838    overflow: hidden;
     2839    float: none;
     2840    margin-bottom: 15px;
     2841    padding-bottom: 15px;
     2842    border-bottom: 1px solid #ddd;
     2843}
     2844
     2845.edit-attachment-frame .attachment-info .setting {
    28002846    display: block;
    28012847    float: left;
    … …  
    28042850}
    28052851
    2806 .edit-attachment-frame .attachment-fields .setting label {
    2807     display: block;
    2808 }
    2809 
    2810 .edit-attachment-frame .attachment-fields .setting .link-to-custom {
     2852.edit-attachment-frame .attachment-info .setting label {
     2853    display: block;
     2854}
     2855
     2856.edit-attachment-frame .attachment-info .setting .link-to-custom {
    28112857    margin: 3px 0;
    28122858}
    28132859
    2814 .edit-attachment-frame .attachment-fields .setting .name {
     2860.edit-attachment-frame .attachment-info .setting .name {
    28152861    min-width: 30%;
    28162862    margin-right: 4%;
    … …  
    28192865}
    28202866
    2821 .edit-attachment-frame .attachment-fields .setting select {
     2867.edit-attachment-frame .attachment-info .setting select {
    28222868    max-width: 65%;
    28232869}
    28242870
    2825 .edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
    2826 .edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
     2871.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
     2872.edit-attachment-frame .attachment-info .field input[type="checkbox"] {
    28272873    width: 16px;
    28282874    float: none;
    … …  
    28312877}
    28322878
    2833 .edit-attachment-frame .attachment-fields .setting span {
     2879.edit-attachment-frame .attachment-info .setting span {
    28342880    float: left;
    28352881    min-height: 22px;
    … …  
    28402886}
    28412887
    2842 .edit-attachment-frame .attachment-fields .setting input[type="text"],
    2843 .edit-attachment-frame .attachment-fields .setting input[type="password"],
    2844 .edit-attachment-frame .attachment-fields .setting input[type="number"],
    2845 .edit-attachment-frame .attachment-fields .setting input[type="search"],
    2846 .edit-attachment-frame .attachment-fields .setting input[type="email"],
    2847 .edit-attachment-frame .attachment-fields .setting input[type="url"],
    2848 .edit-attachment-frame .attachment-fields .setting textarea,
    2849 .edit-attachment-frame .attachment-fields .setting .value {
     2888.edit-attachment-frame .attachment-info .setting input[type="text"],
     2889.edit-attachment-frame .attachment-info .setting input[type="password"],
     2890.edit-attachment-frame .attachment-info .setting input[type="number"],
     2891.edit-attachment-frame .attachment-info .setting input[type="search"],
     2892.edit-attachment-frame .attachment-info .setting input[type="email"],
     2893.edit-attachment-frame .attachment-info .setting input[type="url"],
     2894.edit-attachment-frame .attachment-info .setting textarea,
     2895.edit-attachment-frame .attachment-info .setting .value {
    28502896    margin: 1px;
    28512897    width: 65%;
    … …  
    28572903}
    28582904
    2859 .edit-attachment-frame .attachment-fields .setting textarea {
     2905.edit-attachment-frame .attachment-info .setting textarea {
    28602906    height: 62px;
    28612907    resize: vertical;
    28622908}
    28632909
    2864 .edit-attachment-frame .attachment-fields select {
     2910.edit-attachment-frame .attachment-info select {
    28652911    margin-top: 3px;
    28662912}

  • trunk/src/wp-includes/js/media-grid.js

    r29172 r29204  
    1212
    1313    /**
    14      * A state for editing (cropping, etc.) an image.
     14     * A state for editing an attachment's metadata.
    1515     *
    1616     * @constructor
    … …  
    1818     * @augments Backbone.Model
    1919     */
    20     media.controller.EditImageNoFrame = media.controller.State.extend({
     20    media.controller.EditAttachmentMetadata = media.controller.State.extend({
    2121        defaults: {
    2222            id:      'edit-attachment',
    23             title:   l10n.editImage,
     23            title:   l10n.attachmentDetails,
    2424            // Region mode defaults.
    2525            menu:    false,
    26             router:  'edit-metadata',
    2726            content: 'edit-metadata',
    2827
    … …  
    3736         */
    3837        _postActivate: function() {
     38            this.frame.on( 'title:render:default', this._renderTitle, this );
     39
     40            this._title();
    3941            this._content();
    40             this._router();
    4142        },
    4243
    … …  
    4445         * @access private
    4546         */
    46         _router: function() {
    47             var router = this.frame.router,
    48                 mode = this.get('router'),
    49                 view;
    50 
    51             this.frame.$el.toggleClass( 'hide-router', ! mode );
    52             if ( ! mode ) {
    53                 return;
    54             }
    55 
    56             this.frame.router.render( mode );
    57 
    58             view = router.get();
    59             if ( view && view.select ) {
    60                 view.select( this.frame.content.mode() );
    61             }
     47        _title: function() {
     48            this.frame.title.render( this.get('titleMode') || 'default' );
     49        },
     50        /**
     51         * @access private
     52         */
     53        _renderTitle: function( view ) {
     54            view.$el.text( this.get('title') || '' );
    6255        },
    6356
    … …  
    287280        template: wp.template( 'attachment-details-two-column' ),
    288281
     282        events: {
     283            'change [data-setting]':          'updateSetting',
     284            'change [data-setting] input':    'updateSetting',
     285            'change [data-setting] select':   'updateSetting',
     286            'change [data-setting] textarea': 'updateSetting',
     287            'click .delete-attachment':       'deleteAttachment',
     288            'click .trash-attachment':        'trashAttachment',
     289            'click .edit-attachment':         'editAttachment',
     290            'click .refresh-attachment':      'refreshAttachment',
     291            'click .edit-image':              'handleEditImageClick'
     292        },
     293
    289294        initialize: function() {
    290295            if ( ! this.model ) {
    … …  
    321326            this.preDestroy( event );
    322327            media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
     328        },
     329
     330        handleEditImageClick: function() {
     331            this.controller.setState( 'edit-image' );
    323332        },
    324333
    … …  
    406415     * Requires an attachment model to be passed in the options hash under `model`.
    407416     */
    408     media.view.MediaFrame.EditAttachments = media.view.Frame.extend({
     417    media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
    409418
    410419        className: 'edit-attachment-frame',
    411420        template: media.template( 'edit-attachment-frame' ),
    412         regions:   [ 'router', 'content' ],
     421        regions:   [ 'title', 'content' ],
    413422
    414423        events: {
    … …  
    441450            this.on( 'content:render:edit-image', this.editImageContentUgh, this );
    442451            this.on( 'close', this.detach );
    443             this.on( 'router:create', this.createRouter, this );
    444             this.on( 'router:render', this.browseRouter, this );
     452
     453            // Bind default title creation.
     454            this.on( 'title:create:default', this.createTitle, this );
     455            this.title.mode('default');
    445456
    446457            this.options.hasPrevious = this.hasPrevious();
    … …  
    475486         */
    476487        createStates: function() {
     488            var editImageState = new media.controller.EditImage( { model: this.model } );
     489            // Noop some methods.
     490            editImageState._toolbar = function() {};
     491            editImageState._router = function() {};
     492            editImageState._menu = function() {};
    477493            this.states.add([
    478                 new media.controller.EditImageNoFrame( { model: this.model } )
     494                new media.controller.EditAttachmentMetadata( { model: this.model } ),
     495                editImageState
     496
    479497            ]);
    480         },
    481 
    482         /**
    483          * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
    484          */
    485         render: function() {
    486             // Activate the default state if no active state exists.
    487             if ( ! this.state() && this.options.state ) {
    488                 this.setState( this.options.state );
    489             }
    490             /**
    491              * call 'render' directly on the parent class
    492              */
    493             return media.view.Frame.prototype.render.apply( this, arguments );
    494498        },
    495499
    … …  
    531535        },
    532536
    533         /**
    534          * Create the router view.
    535          *
    536          * @param {Object} router
    537          * @this wp.media.controller.Region
    538          */
    539         createRouter: function( router ) {
    540             router.view = new media.view.Router({
    541                 controller: this
    542             });
    543         },
    544 
    545         /**
    546          * Router rendering callback.
    547          *
    548          * @param  media.view.Router view Instantiated in this.createRouter()
    549          */
    550         browseRouter: function( view ) {
    551             view.set({
    552                 'edit-metadata': {
    553                     text:     l10n.editMetadata,
    554                     priority: 20
    555                 }
    556             });
    557 
    558             // Only need a tab to Edit Image for images.
    559             if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
    560                 view.set({
    561                     'edit-image': {
    562                         text:     l10n.editImage,
    563                         priority: 40
    564                     }
    565                 });
    566             }
    567         },
    568 
    569537        resetContent: function() {
    570538            this.modal.close();

  • 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>

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

    r29176 r29204  
    29102910        'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
    29112911
     2912        // Library Details
     2913        'attachmentDetails'  => __( 'Attachment Details' ),
     2914
    29122915        // From URL
    29132916        'insertFromUrlTitle' => __( 'Insert from URL' ),
Note: See TracChangeset for help on using the changeset viewer.