WordPress.org
Get WordPress

Make WordPress Core

Ticket #27366: 27366-05.patch

File 27366-05.patch, 15.2 KB (added by gcorne, 12 years ago)

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

    diff --git src/wp-includes/css/media-views.css src/wp-includes/css/media-views.css
index cccf307..4299a29 100644
     
    270270        width: 100%;
    271271}
    272272
    273 .media-sidebar h3 {
     273.media-sidebar h3,
     274.image-details h3 {
    274275        position: relative;
    275276        font-weight: bold;
    276277        text-transform: uppercase;
    … …  
    16031604.image-details .embed-media-settings {
    16041605        top: 0;
    16051606        overflow: visible;
     1607        padding: 0;
    16061608}
    16071609
    16081610.image-details .column-settings {
    1609         width: 44%;
    1610         float: left;
    1611         margin-right: 20px;
     1611        background: #F3F3F3;
     1612        min-height: 100%;
     1613        width: 52%;
     1614        position: absolute;
     1615        top: 0;
     1616        left: 0;
     1617}
     1618
     1619.image-details .column-settings h3 {
     1620        padding: 20px 0 0 20px;
     1621        border-top: 1px solid #ddd;
    16121622}
    16131623
    16141624.image-details .column-image {
    1615         width: 53%;
    1616         float: left;
     1625        width: 48%;
     1626        position: absolute;
     1627        left: 52%;
     1628        top: 0;
    16171629}
    16181630
    1619 .image-details .column-image:after {
    1620     content: '';
    1621         display: table;
    1622     clear: both;
     1631.image-details .image {
     1632        margin: 20px;
    16231633}
    16241634
    16251635.image-details .image img {
    … …  
    16271637        max-height: 500px;
    16281638}
    16291639
     1640.image-details .advanced-toggle {
     1641        font-style: italic;
     1642        color: #666;
     1643        text-decoration: none;
     1644        margin: 20px;
     1645        display: block;
     1646}
     1647
     1648.image-details .advanced-toggle::after {
     1649        font: normal 20px/1 'dashicons';
     1650        speak: none;
     1651        vertical-align: top;
     1652        -webkit-font-smoothing: antialiased;
     1653        -moz-osx-font-smoothing: grayscale;
     1654        content: '\f140';
     1655        display: inline-block;
     1656        margin-top: -2px;
     1657}
     1658
     1659.image-details .advanced-visible .advanced-toggle::after {
     1660        content: '\f142';
     1661        margin-top: 0;
     1662}
    16301663
    16311664.media-embed .thumbnail {
    16321665        max-width: 100%;
    … …  
    16631696
    16641697.image-details .setting {
    16651698        float: none;
     1699        width: auto;
    16661700}
    16671701
    16681702.image-details .actions {
    16691703        margin: 10px 0;
    16701704}
    16711705
     1706.image-details .hidden {
     1707        display: none;
     1708}
     1709
    16721710.media-embed .setting input[type="text"],
    16731711.media-embed .setting textarea {
    16741712        display: block;
    … …  
    16801718.image-details .setting input[type="text"],
    16811719.image-details .setting textarea {
    16821720        max-width: inherit;
     1721        width: 70%;
     1722}
     1723
     1724.image-details .setting input.link-to-custom,
     1725.image-details .link-target {
     1726        margin-left: 27%;
     1727        width: 70%;
     1728}
     1729
     1730.image-details .link-target {
     1731        margin-top: 24px;
    16831732}
    16841733
    16851734.media-embed .setting input.hidden {
    … …  
    16941743        color: #666;
    16951744}
    16961745
     1746.image-details .setting span {
     1747        float: left;
     1748        width: 25%;
     1749        text-align: right;
     1750        margin: 8px 1% 0 1%;
     1751        line-height: 1.1;
     1752}
     1753
    16971754.media-embed .setting .button-group {
    16981755        margin: 2px 0;
    16991756}
    … …  
    17091766        margin-top: 10px;
    17101767}
    17111768
    1712 .advanced .hidden {
    1713         display: none;
    1714 }
    1715 
    17161769/* Drag & drop on the editor upload */
    17171770#wp-fullscreen-body .uploader-editor,
    17181771.wp-editor-wrap .uploader-editor {
    … …  
    19301983                right: 30px;
    19311984        }
    19321985
     1986        .image-details .setting {
     1987                margin: 20px;
     1988        }
     1989
     1990        .image-details .setting span {
     1991                float: none;
     1992                text-align: left;
     1993                width: 100%;
     1994                margin-bottom: 4px;
     1995        }
     1996
     1997        .image-details .setting input.link-to-custom,
     1998        .image-details .setting input[type="text"],
     1999        .image-details .setting textarea {
     2000                width: 100%;
     2001                margin-left: 0;
     2002        }
     2003
     2004        .image-details .link-target {
     2005                width: 100%;
     2006        }
     2007
    19332008        .media-selection {
    19342009                min-width: 120px;
    19352010        }
    … …  
    21372212
    21382213        .image-details .column-settings,
    21392214        .image-details .column-image {
    2140                 float: none;
     2215                position: relative;
     2216                padding: 10px 0 20px 0;
     2217                left: 0;
    21412218                width: 100%;
     2219                min-height: inherit;
    21422220        }
    21432221
     2222
    21442223        /* Gallery */
    21452224        .media-frame.hide-router .media-frame-content {
    21462225                top: 73px;

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

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
index 80db8d2..fef88de 100644
     
    60596059                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    60606060                        'click .edit-attachment': 'editAttachment',
    60616061                        'click .replace-attachment': 'replaceAttachment',
    6062                         'click .show-advanced': 'showAdvanced'
     6062                        'click .advanced-toggle': 'toggleAdvanced'
    60636063                } ),
    60646064                initialize: function() {
    60656065                        // used in AttachmentDisplay.prototype.updateLinkTo
    60666066                        this.options.attachment = this.model.attachment;
    6067                         if ( this.model.attachment ) {
    6068                                 this.listenTo( this.model, 'change:url', this.updateUrl );
    6069                                 this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    6070                         }
     6067                        this.listenTo( this.model, 'change:url', this.updateUrl );
     6068                        this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    60716069                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    60726070                },
    60736071
    … …  
    61136111                },
    61146112
    61156113                updateUrl: function() {
    6116                         this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
    6117                         this.$( '.url' ).val( this.model.get('url' ) );
     6114                        this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
     6115                        this.$( '.url' ).val( this.model.get( 'url' ) );
    61186116                },
    61196117
    61206118                toggleLinkSettings: function() {
    … …  
    61256123                        }
    61266124                },
    61276125
    6128                 showAdvanced: function( event ) {
     6126                toggleAdvanced: function( event ) {
     6127                        var $advanced = $( event.target ).closest( '.advanced' );
    61296128                        event.preventDefault();
    6130                         $( event.target ).closest('.advanced')
    6131                                 .find( '.hidden' ).removeClass( 'hidden' );
    6132                         $( event.target ).remove();
     6129                        if ( $advanced.hasClass('advanced-visible') ) {
     6130                                $advanced.removeClass('advanced-visible');
     6131                                $advanced.find('div').addClass('hidden');
     6132                        } else {
     6133                                $advanced.addClass('advanced-visible');
     6134                                $advanced.find('div').removeClass('hidden');
     6135                        }
    61336136                },
    61346137
    61356138                editAttachment: function( event ) {

  • src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 

    diff --git src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
index 9f76d4c..2802bef 100644
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    114114        }
    115115
    116116        function extractImageData( imageNode ) {
    117                 var classes, metadata, captionBlock, caption, link,
     117                var classes, extraClasses, metadata, captionBlock, caption, link,
    118118                        dom = editor.dom;
    119119
    120120                // default attributes
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    127127                        caption: '',
    128128                        alt: '',
    129129                        align: 'none',
     130                        extraClasses: '',
    130131                        link: false,
    131132                        linkUrl: '',
    132133                        linkClassName: '',
    133134                        linkTargetBlank: false,
    134135                        linkRel: '',
    135                         title: '',
    136                         className: ''
     136                        title: ''
    137137                };
    138138
    139139                metadata.url = dom.getAttrib( imageNode, 'src' );
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    141141                metadata.title = dom.getAttrib( imageNode, 'title' );
    142142                metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
    143143                metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
    144                 metadata.className = imageNode.className;
    145144
    146                 classes = metadata.className.split( ' ' );
     145                classes = tinymce.explode( imageNode.className, ' ' );
     146                extraClasses = [];
     147
    147148                tinymce.each( classes, function( name ) {
    148149
    149150                        if ( /^wp-image/.test( name ) ) {
    150151                                metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
    151                         }
    152 
    153                         if ( /^align/.test( name ) ) {
     152                        } else if ( /^align/.test( name ) ) {
    154153                                metadata.align = name.replace( 'align', '' );
    155                         }
    156 
    157                         if ( /^size/.test( name ) ) {
     154                        } else if ( /^size/.test( name ) ) {
    158155                                metadata.size = name.replace( 'size-', '' );
     156                        } else {
     157                                extraClasses.push( name );
    159158                        }
     159
    160160                } );
    161161
     162                metadata.extraClasses = extraClasses.join( ' ' );
     163
    162164                // Extract caption
    163165                captionBlock = dom.getParents( imageNode, '.wp-caption' );
    164166
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    251253        }
    252254
    253255        function createImageAndLink( imageData, mode ) {
    254                 var classes = [],
     256                var classes = tinymce.explode( imageData.extraClasses, ' ' ),
    255257                        attrs, linkAttrs;
    256258
    257259                mode = mode ? mode : 'node';
    258260
     261                if ( ! classes ) {
     262                        classes = [];
     263                }
     264
    259265                if ( ! imageData.caption ) {
    260266                        classes.push( 'align' + imageData.align );
    261267                }

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

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
index 76e595c..1d75368 100644
    function wp_print_media_templates() { 
    641641        <script type="text/html" id="tmpl-image-details">
    642642                <div class="media-embed">
    643643                        <div class="embed-media-settings">
     644                                <div class="column-image">
     645                                        <div class="image">
     646                                                <img src="{{ data.model.url }}" draggable="false" />
     647
     648                                                <# if ( data.attachment && window.imageEdit ) { #>
     649                                                        <div class="actions">
     650                                                                <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     651                                                                <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     652                                                        </div>
     653                                                <# } #>
     654                                        </div>
     655                                </div>
    644656                                <div class="column-settings">
    645657                                        <?php
    646658                                        /** This filter is documented in wp-admin/includes/media.php */
    … … function wp_print_media_templates() { 
    656668                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    657669                                        </label>
    658670
    659                                         <div class="setting advanced">
    660                                                 <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
    661                                                 <div class="hidden">
    662                                                         <label class="setting title-text">
    663                                                                 <span><?php _e('Title Attribute'); ?></span>
    664                                                                 <input type="text" data-setting="title" value="{{ data.model.title }}" />
    665                                                         </label>
    666                                                 </div>
    667                                         </div>
    668 
     671                                        <h3><?php _e( 'Display Settings' ); ?></h3>
    669672                                        <div class="setting align">
    670673                                                <span><?php _e('Align'); ?></span>
    671674                                                <div class="button-group button-large" data-setting="align">
    … … function wp_print_media_templates() { 
    685688                                        </div>
    686689
    687690                                        <# if ( data.attachment ) { #>
    688                                                 <div class="setting size">
    689                                                         <span><?php _e('Size'); ?></span>
    690                                                         <div class="button-group button-large" data-setting="size">
    691                                                         <?php
    692                                                                 /** This filter is documented in wp-admin/includes/media.php */
    693                                                                 $sizes = apply_filters( 'image_size_names_choose', array(
    694                                                                         'thumbnail' => __('Thumbnail'),
    695                                                                         'medium'    => __('Medium'),
    696                                                                         'large'     => __('Large'),
    697                                                                         'full'      => __('Full Size'),
    698                                                                 ) );
    699 
    700                                                                 foreach ( $sizes as $value => $name ) : ?>
    701                                                                         <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
    702                                                                         if ( size ) { #>
    703                                                                                 <button class="button" value="<?php echo esc_attr( $value ); ?>">
    704                                                                                         <?php echo esc_html( $name ); ?>
    705                                                                                         </button>
    706                                                                         <# } #>
    707                                                                 <?php endforeach; ?>
    708                                                         </div>
    709                                                 </div>
     691                                                <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
     692                                                        <label class="setting">
     693                                                                <span><?php _e('Size'); ?></span>
     694                                                                <select class="size" name="size"
     695                                                                        data-setting="size"
     696                                                                        <# if ( data.userSettings ) { #>
     697                                                                                data-user-setting="imgsize"
     698                                                                        <# } #>>
     699                                                                        <?php
     700                                                                        /** This filter is documented in wp-admin/includes/media.php */
     701                                                                        $sizes = apply_filters( 'image_size_names_choose', array(
     702                                                                                'thumbnail' => __('Thumbnail'),
     703                                                                                'medium'    => __('Medium'),
     704                                                                                'large'     => __('Large'),
     705                                                                                'full'      => __('Full Size'),
     706                                                                        ) );
     707
     708                                                                        foreach ( $sizes as $value => $name ) : ?>
     709                                                                                <#
     710                                                                                var size = data.sizes['<?php echo esc_js( $value ); ?>'];
     711                                                                                if ( size ) { #>
     712                                                                                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
     713                                                                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
     714                                                                                        </option>
     715                                                                                <# } #>
     716                                                                        <?php endforeach; ?>
     717                                                                </select>
     718                                                        </label>
     719                                                <# } #>
    710720                                        <# } #>
    711721
    712722                                        <div class="setting link-to">
    713723                                                <span><?php _e('Link To'); ?></span>
    714                                                 <div class="button-group button-large" data-setting="link">
     724                                                <select data-setting="link">
    715725                                                <# if ( data.attachment ) { #>
    716                                                         <button class="button" value="file">
     726                                                        <option value="file">
    717727                                                                <?php esc_attr_e('Media File'); ?>
    718                                                         </button>
    719                                                         <button class="button" value="post">
     728                                                        </option>
     729                                                        <option value="post">
    720730                                                                <?php esc_attr_e('Attachment Page'); ?>
    721                                                         </button>
     731                                                        </option>
    722732                                                <# } else { #>
    723                                                         <button class="button" value="file">
     733                                                        <option value="file">
    724734                                                                <?php esc_attr_e('Image URL'); ?>
    725                                                         </button>
     735                                                        </option>
    726736                                                <# } #>
    727                                                         <button class="button" value="custom">
     737                                                        <option value="custom">
    728738                                                                <?php esc_attr_e('Custom URL'); ?>
    729                                                         </button>
    730                                                         <button class="button active" value="none">
     739                                                        </option>
     740                                                        <option value="none">
    731741                                                                <?php esc_attr_e('None'); ?>
    732                                                         </button>
    733                                                 </div>
     742                                                        </option>
     743                                                </select>
    734744                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
    735745                                        </div>
    736 
    737 
    738                                         <div class="setting link-settings">
    739                                                 <div class="setting link-target">
    740                                                         <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
    741                                                 </div>
    742                                                 <div class="advanced">
    743                                                         <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
    744                                                         <div class="hidden">
    745                                                                 <label class="setting link-rel">
    746                                                                         <span><?php _e('Link Rel'); ?></span>
    747                                                                         <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
    748                                                                 </label>
    749                                                                 <label class="setting link-class-name">
    750                                                                         <span><?php _e('CSS Class'); ?></span>
    751                                                                         <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
    752                                                                 </label>
     746                                        <div class="advanced">
     747                                                <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
     748                                                <div class="hidden">
     749                                                        <label class="setting title-text">
     750                                                                <span><?php _e('Image Title Attribute'); ?></span>
     751                                                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
     752                                                        </label>
     753                                                        <label class="setting extra-classes">
     754                                                                <span><?php _e('Image CSS Class'); ?></span>
     755                                                                <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
     756                                                        </label>
     757                                                        <div class="setting link-target">
     758                                                                <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
    753759                                                        </div>
     760                                                        <label class="setting link-rel">
     761                                                                <span><?php _e('Link Rel'); ?></span>
     762                                                                <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     763                                                        </label>
     764                                                        <label class="setting link-class-name">
     765                                                                <span><?php _e('Link CSS Class'); ?></span>
     766                                                                <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     767                                                        </label>
    754768                                                </div>
    755769                                        </div>
    756 
    757                                 </div>
    758                                 <div class="column-image">
    759                                         <div class="image">
    760                                                 <img src="{{ data.model.url }}" draggable="false" />
    761                                         </div>
    762                                         <# if ( data.attachment && window.imageEdit ) { #>
    763                                                 <div class="actions">
    764                                                         <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
    765                                                         <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
    766                                                 </div>
    767                                         <# } #>
    768770                                </div>
    769771                        </div>
    770772                </div>