WordPress.org

Make WordPress Core

Ticket #28844: 28844.3.diff

File 28844.3.diff, 13.9 KB (added by ericlewis, 8 years ago)
  • src/wp-includes/css/media-views.css

    diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
    index 0f57613..6096990 100644
    a b video#inline-media-node { 
    15251525        margin-top: 14px;
    15261526}
    15271527
    1528 .media-sidebar .settings-save-status {
    1529         background: #f5f5f5;
     1528/**
     1529 * Attachment Details
     1530 */
     1531.attachment-details {
     1532        position: relative;
     1533        overflow: auto;
     1534}
     1535
     1536.attachment-details .settings-save-status {
    15301537        float: right;
    15311538        text-transform: none;
    15321539        z-index: 10;
    15331540}
    15341541
    1535 .media-sidebar .settings-save-status .spinner {
     1542.attachment-details .settings-save-status .spinner {
    15361543        margin: 0 5px 0;
    15371544}
    15381545
    1539 .media-sidebar .settings-save-status .saved {
     1546.attachment-details .settings-save-status .saved {
    15401547        float: right;
    15411548        display: none;
    15421549}
    15431550
    1544 .media-sidebar .save-waiting .settings-save-status .spinner,
    1545 .media-sidebar .save-complete .settings-save-status .saved {
     1551.attachment-details.save-waiting .settings-save-status .spinner,
     1552.attachment-details.save-complete .settings-save-status .saved {
    15461553        display: block;
    15471554}
    15481555
    1549 /**
    1550  * Attachment Details
    1551  */
    1552 .attachment-details {
    1553         position: relative;
    1554         overflow: auto;
    1555 }
    1556 
    15571556.attachment-info {
    15581557        overflow: hidden;
    15591558        min-height: 60px;
    video#inline-media-node { 
    26772676        background-color: transparent;
    26782677        height: 48px;
    26792678        width: 54px;
    2680         float: left;
     2679        position: absolute;
    26812680        text-align: center;
    26822681        border: 0;
     2682        border-bottom: 1px solid #ddd;
    26832683        border-right: 1px solid #ddd;
    26842684}
    26852685
     2686.edit-attachment-frame .edit-media-header .left {
     2687        right: 107px;
     2688}
     2689
     2690.edit-attachment-frame .edit-media-header .right {
     2691        right: 40px;
     2692}
     2693
     2694.edit-attachment-frame .media-frame-title {
     2695        left: 0;
     2696}
     2697
    26862698.edit-attachment-frame .edit-media-header .right:before,
    26872699.edit-attachment-frame .edit-media-header .left:before {
    26882700        font: normal 20px/50px 'dashicons' !important;
    video#inline-media-node { 
    27292741.edit-attachment-frame .media-frame-content {
    27302742        border-bottom: none;
    27312743        bottom: 0;
     2744        top: 56px;
    27322745}
    27332746
    27342747/* Hiding this for the moment instead of removing it from the template. */
    video#inline-media-node { 
    27442757        right: 0;
    27452758        left: 0;
    27462759}
    2747 
    2748 .edit-attachment-frame .attachment-info {
    2749         border-bottom: 0;
    2750         border-right: 1px solid #ddd;
    2751         bottom: 0;
     2760.edit-attachment-frame .attachment-media-view {
    27522761        position: absolute;
    27532762        top: 0;
     2763        bottom: 0;
    27542764        left: 0;
    2755         right: 50%;
    2756         margin-bottom: 0;
    2757         padding: 2% 4% 0;
    2758         height: 98%; /* 100% - padding percentage above */
     2765        right: 35%;
    27592766}
    27602767
    27612768.edit-attachment-frame .attachment-info .thumbnail {
    video#inline-media-node { 
    27742781                box-shadow: none;
    27752782}
    27762783
     2784.edit-attachment-frame .attachment-media-view .thumbnail {
     2785        text-align: center;
     2786}
     2787
     2788.edit-attachment-frame .attachment-media-view img {
     2789        max-width: 100%;
     2790}
     2791
    27772792.edit-attachment-frame .attachment-info .thumbnail img {
    27782793        max-width: 100%;
    27792794        max-height: 100%;
    video#inline-media-node { 
    27872802        margin-bottom: 12px;
    27882803}
    27892804
    2790 .edit-attachment-frame .attachment-fields {
    2791         bottom: 0;
    2792         padding: 2% 4%;
     2805.edit-attachment-frame .attachment-info {
     2806        border-bottom: 0;
     2807        border-left: 1px solid #ddd;
    27932808        position: absolute;
     2809        margin-bottom: 0;
     2810        height: 98%; /* 100% - padding percentage above */
     2811        padding: 2% 4% 0;
    27942812        top: 0;
    2795         left: 50%;
     2813        bottom: 0;
     2814        left: 65%;
    27962815        right: 0;
    27972816}
    27982817
    2799 .edit-attachment-frame .attachment-fields .setting {
     2818.edit-attachment-frame .attachment-info .setting {
    28002819        display: block;
    28012820        float: left;
    28022821        width: 100%;
    28032822        margin: 1px 0;
    28042823}
    28052824
    2806 .edit-attachment-frame .attachment-fields .setting label {
     2825.edit-attachment-frame .attachment-info .setting label {
    28072826        display: block;
    28082827}
    28092828
    2810 .edit-attachment-frame .attachment-fields .setting .link-to-custom {
     2829.edit-attachment-frame .attachment-info .setting .link-to-custom {
    28112830        margin: 3px 0;
    28122831}
    28132832
    2814 .edit-attachment-frame .attachment-fields .setting .name {
     2833.edit-attachment-frame .attachment-info .setting .name {
    28152834        min-width: 30%;
    28162835        margin-right: 4%;
    28172836        font-size: 12px;
    28182837        text-align: right;
    28192838}
    28202839
    2821 .edit-attachment-frame .attachment-fields .setting select {
     2840.edit-attachment-frame .attachment-info .setting select {
    28222841        max-width: 65%;
    28232842}
    28242843
    2825 .edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
    2826 .edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
     2844.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
     2845.edit-attachment-frame .attachment-info .field input[type="checkbox"] {
    28272846        width: 16px;
    28282847        float: none;
    28292848        margin: 8px 3px 0;
    28302849        padding: 0;
    28312850}
    28322851
    2833 .edit-attachment-frame .attachment-fields .setting span {
     2852.edit-attachment-frame .attachment-info .setting span {
    28342853        float: left;
    28352854        min-height: 22px;
    28362855        padding-top: 8px;
    video#inline-media-node { 
    28392858        color: #666;
    28402859}
    28412860
    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 {
     2861.edit-attachment-frame .attachment-info .setting input[type="text"],
     2862.edit-attachment-frame .attachment-info .setting input[type="password"],
     2863.edit-attachment-frame .attachment-info .setting input[type="number"],
     2864.edit-attachment-frame .attachment-info .setting input[type="search"],
     2865.edit-attachment-frame .attachment-info .setting input[type="email"],
     2866.edit-attachment-frame .attachment-info .setting input[type="url"],
     2867.edit-attachment-frame .attachment-info .setting textarea,
     2868.edit-attachment-frame .attachment-info .setting .value {
    28502869        margin: 1px;
    28512870        width: 65%;
    28522871        float: right;
    video#inline-media-node { 
    28562875        box-sizing: border-box;
    28572876}
    28582877
    2859 .edit-attachment-frame .attachment-fields .setting textarea {
     2878.edit-attachment-frame .attachment-info .setting textarea {
    28602879        height: 62px;
    28612880        resize: vertical;
    28622881}
    28632882
    2864 .edit-attachment-frame .attachment-fields select {
     2883.edit-attachment-frame .attachment-info select {
    28652884        margin-top: 3px;
    28662885}
    28672886
  • src/wp-includes/js/media-grid.js

    diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
    index 3521bbc..325d9ed 100644
    a b  
    1111        }
    1212
    1313        /**
    14          * A state for editing (cropping, etc.) an image.
     14         * A state for editing an attachment's metadata.
    1515         *
    1616         * @constructor
    1717         * @augments wp.media.controller.State
    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',
    2323                        title:   l10n.editImage,
    2424                        // Region mode defaults.
    2525                        menu:    false,
    26                         router:  'edit-metadata',
    2726                        content: 'edit-metadata',
    2827
    2928                        url:     ''
     
    3635                 * include the regions expected there.
    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
    4344                /**
    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
    6457                _content: function() {
     
    286279        media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
    287280                template: wp.template( 'attachment-details-two-column' ),
    288281
     282                events: {
     283                        'click .edit-image': 'handleEditImageClick'
     284                },
     285
    289286                initialize: function() {
    290287                        if ( ! this.model ) {
    291288                                return;
     
    322319                        media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
    323320                },
    324321
     322                handleEditImageClick: function( event ) {
     323                        this.controller.setState( 'edit-image' );
     324                },
     325
    325326                afterDelete: function( model ) {
    326327                        if ( ! model.destroyed ) {
    327328                                return;
     
    405406         *
    406407         * Requires an attachment model to be passed in the options hash under `model`.
    407408         */
    408         media.view.MediaFrame.EditAttachments = media.view.Frame.extend({
     409        media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
    409410
    410411                className: 'edit-attachment-frame',
    411412                template: media.template( 'edit-attachment-frame' ),
    412                 regions:   [ 'router', 'content' ],
     413                regions:   [ 'title', 'content' ],
    413414
    414415                events: {
    415416                        'click':                    'collapse',
     
    440441                        this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
    441442                        this.on( 'content:render:edit-image', this.editImageContentUgh, this );
    442443                        this.on( 'close', this.detach );
    443                         this.on( 'router:create', this.createRouter, this );
    444                         this.on( 'router:render', this.browseRouter, this );
     444
     445                        // Bind default title creation.
     446                        this.on( 'title:create:default', this.createTitle, this );
     447                        this.title.mode('default');
    445448
    446449                        this.options.hasPrevious = this.hasPrevious();
    447450                        this.options.hasNext = this.hasNext();
     
    474477                 * Add the default states to the frame.
    475478                 */
    476479                createStates: function() {
     480                        var editImageState = new media.controller.EditImage( { model: this.model } );
     481                        // Noop some methods.
     482                        editImageState._toolbar = function() {};
     483                        editImageState._router = function() {};
     484                        editImageState._menu = function() {};
    477485                        this.states.add([
    478                                 new media.controller.EditImageNoFrame( { model: this.model } )
    479                         ]);
    480                 },
     486                                new media.controller.EditAttachmentMetadata( { model: this.model } ),
     487                                editImageState
    481488
    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 );
     489                        ]);
    494490                },
    495491
    496492                /**
     
    530526                        view.loadEditor();
    531527                },
    532528
    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 
    569529                resetContent: function() {
    570530                        this.modal.close();
    571531                        wp.media( {
  • src/wp-includes/media-template.php

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
    index 8764219..a4a3526 100644
    a b function wp_print_media_templates() { 
    258258                        <button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
    259259                        <button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
    260260                </div>
    261                 <div class="media-frame-router"></div>
     261                <div class="media-frame-title"></div>
    262262                <div class="media-frame-content"></div>
    263263        </script>
    264264
    265265        <script type="text/html" id="tmpl-attachment-details-two-column">
    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 ) { #>
    277272                                        <div class="media-progress-bar"><div></div></div>
    function wp_print_media_templates() { 
    296291                                </video>
    297292                        </div>
    298293                        <# } #>
     294                </div>
     295                <div class="attachment-info">
     296                        <span class="settings-save-status">
     297                                <span class="spinner"></span>
     298                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
     299                        </span>
    299300                        <div class="details">
    300301                                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
    301302                                <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
    function wp_print_media_templates() { 
    321322                                        </div>
    322323                                <# } #>
    323324
     325                                <a href="post.php?post={{ data.id }}&action=edit">Actually edit</a>
     326
     327                                <# if ( 'image' === data.type && ! data.uploading ) { #>
     328                                        <button class="edit-image" href="#"><?php _e( 'Edit Original' ); ?></button>
     329                                <# } #>
     330
    324331                                <# if ( ! data.uploading && data.can.remove ) { #>
    325332                                        <?php if ( MEDIA_TRASH ): ?>
    326333                                                <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
    327334                                        <?php else: ?>
    328                                                 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
     335                                                <button class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></button>
    329336                                        <?php endif; ?>
    330337                                <# } #>
    331338
    function wp_print_media_templates() { 
    335342                                        <# } #>
    336343                                </div>
    337344                        </div>
    338                 </div>
    339                 <div class="attachment-fields">
    340345                        <label class="setting" data-setting="url">
    341346                                <span class="name"><?php _e('URL'); ?></span>
    342347                                <input type="text" value="{{ data.url }}" readonly />