WordPress.org
Get WordPress

Make WordPress Core

Changeset 29289


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

Media Grid: UI improvements to Attachment modal.

Props ryelle.
See #28844.

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

Legend:

Unmodified
Added
Removed

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

    r29288 r29289  
    278278
    279279.media-sidebar h3,
    280 .image-details h3 {
     280.image-details h3,
     281.attachment-info h3 {
    281282    position: relative;
    282283    font-weight: bold;
    … …  
    14681469}
    14691470
    1470 .attachment-details .settings-save-status .spinner {
    1471     margin: 0 5px 0;
     1471.attachment-details .settings-save-status .spinner,
     1472.attachment-details .settings-save-status .saved {
     1473    margin: 0 5px -20px;
    14721474}
    14731475
    … …  
    14921494}
    14931495
     1496.attachment-info .details {
     1497    clear: right;
     1498}
     1499
     1500.attachment-info h3:first-child {
     1501    margin-top: 0;
     1502}
     1503
     1504.attachment-info .details .setting .name {
     1505    float: left;
     1506    margin: 8px 1% 0 1% !important;
     1507    padding: 0;
     1508    line-height: 1.1;
     1509}
     1510
     1511.attachment-info .details .url.setting .name {
     1512    padding-top: 3px;
     1513}
     1514
     1515.attachment-info .setting .value {
     1516    font-style: italic;
     1517}
     1518
    14941519.attachment-info .filename {
    14951520    font-weight: bold;
    … …  
    15521577    font-size: 12px;
    15531578    max-width: 100%;
     1579}
     1580
     1581.attachment-info .advanced-toggle {
     1582    color: #666;
     1583    text-decoration: none;
     1584    display: block;
     1585}
     1586.attachment-info .advanced-toggle:hover {
     1587    color: #d54e21;
     1588}
     1589
     1590.attachment-info .advanced-toggle::after {
     1591    font: normal 20px/1 'dashicons';
     1592    speak: none;
     1593    vertical-align: top;
     1594    -webkit-font-smoothing: antialiased;
     1595    -moz-osx-font-smoothing: grayscale;
     1596    content: '\f140';
     1597    display: inline-block;
     1598    margin-top: -2px;
     1599}
     1600.attachment-info .advanced-visible .advanced-toggle::after {
     1601    content: '\f142';
    15541602}
    15551603

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

    r29285 r29289  
    63356335            'click .edit-attachment':         'editAttachment',
    63366336            'click .refresh-attachment':      'refreshAttachment',
     6337            'click .advanced-toggle':         'onToggleAdvanced',
    63376338            'keydown':                        'toggleSelectionHandler'
    63386339        },
    … …  
    63476348            media.view.Attachment.prototype.initialize.apply( this, arguments );
    63486349        },
     6350
     6351        /**
     6352         * Render view, then check if the advanced details should be shown.
     6353         */
     6354        render: function(){
     6355            media.view.Attachment.prototype.render.apply( this, arguments );
     6356
     6357            if ( 'show' === getUserSetting( 'advImgDetails' ) ) {
     6358                this.toggleAdvanced( true );
     6359            }
     6360        },
    63496361        /**
    63506362         * @param {Object} event
    … …  
    64036415                return false;
    64046416            }
     6417        },
     6418
     6419        onToggleAdvanced: function( event ) {
     6420            event.preventDefault();
     6421            this.toggleAdvanced();
     6422        },
     6423
     6424        toggleAdvanced: function( show ) {
     6425            var $advanced = this.$( '.advanced-section' ), mode = 'show';
     6426
     6427            if ( $advanced.hasClass('advanced-visible') || false === show ) {
     6428                $advanced.removeClass('advanced-visible');
     6429                $advanced.find('.advanced-settings').addClass('hidden');
     6430                mode = 'hide';
     6431            } else {
     6432                $advanced.addClass('advanced-visible');
     6433                $advanced.find('.advanced-settings').removeClass('hidden');
     6434            }
     6435
     6436            setUserSetting( 'advImgDetails', mode );
    64056437        }
    6406 
    64076438    });
    64086439

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