WordPress.org
Get WordPress

Make WordPress Core

Ticket #27366: 27366-06.patch

File 27366-06.patch, 15.7 KB (added by gcorne, 11 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..7ee5d1e 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        border-right: 1px solid #ddd;
     1613        min-height: 100%;
     1614        width: 52%;
     1615        position: absolute;
     1616        top: 0;
     1617        left: 0;
     1618}
     1619
     1620.image-details .column-settings h3 {
     1621        margin: 20px;
     1622        padding-top: 20px;
     1623        border-top: 1px solid #ddd;
    16121624}
    16131625
    16141626.image-details .column-image {
    1615         width: 53%;
    1616         float: left;
     1627        width: 48%;
     1628        position: absolute;
     1629        left: 52%;
     1630        top: 0;
    16171631}
    16181632
    1619 .image-details .column-image:after {
    1620     content: '';
    1621         display: table;
    1622     clear: both;
     1633.image-details .image {
     1634        margin: 20px;
    16231635}
    16241636
    16251637.image-details .image img {
    … …  
    16271639        max-height: 500px;
    16281640}
    16291641
     1642.image-details .advanced-toggle {
     1643        font-style: italic;
     1644        color: #666;
     1645        text-decoration: none;
     1646        margin: 20px;
     1647        display: block;
     1648}
     1649
     1650.image-details .advanced-toggle::after {
     1651        font: normal 20px/1 'dashicons';
     1652        speak: none;
     1653        vertical-align: top;
     1654        -webkit-font-smoothing: antialiased;
     1655        -moz-osx-font-smoothing: grayscale;
     1656        content: '\f140';
     1657        display: inline-block;
     1658        margin-top: -2px;
     1659}
     1660
     1661.image-details .advanced-visible .advanced-toggle::after {
     1662        content: '\f142';
     1663        margin-top: 0;
     1664}
    16301665
    16311666.media-embed .thumbnail {
    16321667        max-width: 100%;
    … …  
    16611696        clear: both;
    16621697}
    16631698
    1664 .image-details .setting {
     1699.image-details .embed-media-settings .setting {
    16651700        float: none;
     1701        width: auto;
    16661702}
    16671703
    16681704.image-details .actions {
    16691705        margin: 10px 0;
    16701706}
    16711707
     1708.image-details .hidden {
     1709        display: none;
     1710}
     1711
    16721712.media-embed .setting input[type="text"],
    16731713.media-embed .setting textarea {
    16741714        display: block;
    … …  
    16771717        margin: 1px 0;
    16781718}
    16791719
    1680 .image-details .setting input[type="text"],
    1681 .image-details .setting textarea {
     1720.image-details .embed-media-settings .setting input[type="text"],
     1721.image-details .embed-media-settings .setting textarea {
    16821722        max-width: inherit;
     1723        width: 70%;
     1724}
     1725
     1726.image-details .embed-media-settings .setting input.link-to-custom,
     1727.image-details .embed-media-settings .link-target {
     1728        margin-left: 27%;
     1729        width: 70%;
     1730}
     1731
     1732.image-details .embed-media-settings .link-target {
     1733        margin-top: 24px;
    16831734}
    16841735
    16851736.media-embed .setting input.hidden {
    … …  
    16941745        color: #666;
    16951746}
    16961747
     1748.image-details .embed-media-settings .setting span {
     1749        float: left;
     1750        width: 25%;
     1751        text-align: right;
     1752        margin: 8px 1% 0 1%;
     1753        line-height: 1.1;
     1754}
     1755
    16971756.media-embed .setting .button-group {
    16981757        margin: 2px 0;
    16991758}
    … …  
    17091768        margin-top: 10px;
    17101769}
    17111770
    1712 .advanced .hidden {
    1713         display: none;
    1714 }
    1715 
    17161771/* Drag & drop on the editor upload */
    17171772#wp-fullscreen-body .uploader-editor,
    17181773.wp-editor-wrap .uploader-editor {
    … …  
    19301985                right: 30px;
    19311986        }
    19321987
     1988        .image-details .embed-media-settings .setting {
     1989                margin: 20px;
     1990        }
     1991
     1992        .image-details .embed-media-settings .setting span {
     1993                float: none;
     1994                text-align: left;
     1995                width: 100%;
     1996                margin-bottom: 4px;
     1997        }
     1998
     1999        .image-details .embed-media-settings .setting input.link-to-custom,
     2000        .image-details .embed-media-settings .setting input[type="text"],
     2001        .image-details .embed-media-settings .setting textarea {
     2002                width: 100%;
     2003                margin-left: 0;
     2004        }
     2005
     2006        .image-details .link-target {
     2007                width: 100%;
     2008        }
     2009
    19332010        .media-selection {
    19342011                min-width: 120px;
    19352012        }
    … …  
    21372214
    21382215        .image-details .column-settings,
    21392216        .image-details .column-image {
    2140                 float: none;
     2217                position: relative;
     2218                padding: 10px 0 20px 0;
     2219                left: 0;
    21412220                width: 100%;
     2221                min-height: inherit;
    21422222        }
    21432223
     2224
    21442225        /* Gallery */
    21452226        .media-frame.hide-router .media-frame-content {
    21462227                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>