WordPress.org

Make WordPress Core

Ticket #24716: 24716.10.diff

File 24716.10.diff, 16.9 KB (added by ericlewis, 4 years ago)
  • src/wp-admin/upload.php

    diff --git a/src/wp-admin/upload.php b/src/wp-admin/upload.php
    index 11175f9..de099c7 100644
    a b if ( 'grid' === $mode ) { 
    2424        wp_enqueue_media();
    2525        wp_enqueue_script( 'media' );
    2626        require_once( ABSPATH . 'wp-admin/admin-header.php' );
    27         ?><div class="view-switch media-grid-view-switch">
    28                 <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
    29                         <img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
    30                 </a>
    31                 <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
    32                         <img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
    33                 </a>
    34         </div><?php
    3527        include( ABSPATH . 'wp-admin/admin-footer.php' );
    3628        exit;
    3729}
  • 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 c768479..59e1113 100644
    a b  
    909909        border-radius: 0;
    910910}
    911911
     912.attachment .data-field {
     913        white-space: nowrap;
     914        text-overflow: ellipsis;
     915        overflow: hidden;
     916        display: block;
     917        line-height: 19px;
     918        height: 19px;
     919        text-align: left;
     920}
     921
    912922/**
    913923 * Attachments Browser
    914924 */
     
    924934        height: 50px;
    925935}
    926936
     937.attachments-browser.hide-sidebar .media-toolbar {
     938        right: 0;
     939}
     940
    927941.attachments-browser .media-toolbar-primary > .media-button,
    928942.attachments-browser .media-toolbar-primary > .media-button-group,
    929943.attachments-browser .media-toolbar-secondary > .media-button,
     
    942956        outline: none;
    943957}
    944958
     959/**
     960 * Copied styles from the theme browser view.
     961 *
     962 * This should be OOCSS'd so both use a shared selector.
     963 */
     964.attachment .edit-media {
     965        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     966        opacity: 0;
     967        position: absolute;
     968        top: 25%;
     969        right: 25%;
     970        left: 25%;
     971        background: #222;
     972        background: rgba(0,0,0,0.7);
     973        color: #fff;
     974        font-size: 15px;
     975        text-shadow: 0 1px 0 rgba(0,0,0,0.6);
     976        -webkit-font-smoothing: antialiased;
     977        font-weight: 600;
     978        padding: 10px 0;
     979        text-align: center;
     980        -webkit-border-radius: 3px;
     981        border-radius: 3px;
     982        -webkit-transition: opacity 0.1s ease-in-out;
     983        transition: opacity 0.1s ease-in-out;
     984}
     985
     986.attachment:hover .edit-media {
     987        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     988        opacity: 1;
     989}
     990
     991.attachments-browser.hide-sidebar .attachments {
     992        right: 0;
     993}
     994
    945995.attachments-browser .instructions {
    946996        display: inline-block;
    947997        margin-top: 16px;
     
    23882438        line-height: 29px;
    23892439}
    23902440
    2391 .media-grid-view-switch {
    2392         position: fixed;
    2393         right: 10px;
    2394         top: 44px;
    2395         z-index: 300;
     2441.media-grid-view .view-switch {
     2442        display: inline-block;
     2443        float: none;
     2444        margin-top: 13px;
     2445        vertical-align: middle;
    23962446}
    23972447
    23982448/**
     
    24272477        display: none;
    24282478}
    24292479
     2480/**
     2481 * Copied styles from the Add theme toolbar.
     2482 *
     2483 * This should be OOCSS'd so both use a shared selector.
     2484 */
     2485.media-grid-view .media-toolbar {
     2486        background: #fff;
     2487        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     2488        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     2489        -webkit-box-sizing: border-box;
     2490        -moz-box-sizing: border-box;
     2491        box-sizing: border-box;
     2492        color: #555;
     2493        display: inline-block;
     2494        font-size: 13px;
     2495        padding: 0 20px;
     2496        position: relative;
     2497        width: 100%;
     2498}
     2499
     2500.media-grid-view.hide-router .media-frame-title {
     2501        box-shadow: none;
     2502}
     2503
    24302504.media-grid-view .media-frame-content {
     2505        background-color: transparent;
    24312506        bottom: 40px;
    24322507}
    24332508@media screen and (max-width: 782px) {
  • src/wp-includes/js/media-views.js

    diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
    index c1407d3..c8b32a8 100644
    a b  
    337337        });
    338338
    339339        /**
     340         * A more abstracted state, because media.controller.State expects
     341         * specific regions (menu, title, etc.) to exist on the frame, which do not
     342         * exist in media.view.Frame.EditMediaDetails.
     343         */
     344        media.controller._State = Backbone.Model.extend({
     345                constructor: function() {
     346                        this.on( 'activate', this._preActivate, this );
     347                        this.on( 'activate', this.activate, this );
     348                        this.on( 'activate', this._postActivate, this );
     349                        this.on( 'deactivate', this._deactivate, this );
     350                        this.on( 'deactivate', this.deactivate, this );
     351                        this.on( 'reset', this.reset, this );
     352                        this.on( 'ready', this.ready, this );
     353                        /**
     354                         * Call parent constructor with passed arguments
     355                         */
     356                        Backbone.Model.apply( this, arguments );
     357                },
     358
     359                /**
     360                 * @abstract
     361                 */
     362                ready: function() {},
     363                /**
     364                 * @abstract
     365                 */
     366                activate: function() {},
     367                /**
     368                 * @abstract
     369                 */
     370                deactivate: function() {},
     371                /**
     372                 * @abstract
     373                 */
     374                reset: function() {},
     375                /**
     376                 * @access private
     377                 */
     378                _preActivate: function() {
     379                        this.active = true;
     380                },
     381                /**
     382                 * @access private
     383                 */
     384                _postActivate: function() {},
     385                /**
     386                 * @access private
     387                 */
     388                _deactivate: function() {
     389                        this.active = false;
     390                }
     391        });
     392
     393        /**
    340394         * wp.media.controller.State
    341395         *
    342396         * A state is a step in a workflow that when set will trigger the controllers
     
    13501404        });
    13511405
    13521406        /**
     1407         * A state for editing (cropping, etc.) an image.
     1408         *
     1409         * @constructor
     1410         * @augments wp.media.controller.State
     1411         * @augments Backbone.Model
     1412         */
     1413        media.controller.EditImageNoFrame = media.controller._State.extend({
     1414                defaults: {
     1415                        id:      'edit-image',
     1416                        title:   l10n.editImage,
     1417                        // Region mode defaults.
     1418                        menu:    false,
     1419                        toolbar: 'edit-image',
     1420                        content: 'edit-image',
     1421
     1422                        url:     ''
     1423                },
     1424
     1425                initialize: function() {
     1426                        media.controller._State.prototype.initialize.apply( this, arguments );
     1427                },
     1428
     1429                activate: function() {
     1430                        this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar );
     1431                },
     1432
     1433                _postActivate: function() {
     1434                        this._content();
     1435                },
     1436
     1437                deactivate: function() {
     1438                        this.stopListening( this.frame );
     1439                },
     1440
     1441                toolbar: function() {
     1442                        var frame = this.frame,
     1443                                lastState = frame.lastState(),
     1444                                previous = lastState && lastState.id;
     1445
     1446                        frame.toolbar.set( new media.view.Toolbar({
     1447                                controller: frame,
     1448                                items: {
     1449                                        back: {
     1450                                                style: 'primary',
     1451                                                text:     l10n.back,
     1452                                                priority: 20,
     1453                                                click:    function() {
     1454                                                        if ( previous ) {
     1455                                                                frame.setState( previous );
     1456                                                        } else {
     1457                                                                frame.close();
     1458                                                        }
     1459                                                }
     1460                                        }
     1461                                }
     1462                        }) );
     1463                },
     1464
     1465                _content: function() {
     1466                        var mode = this.get( 'content' );
     1467                        if ( mode ) {
     1468                                this.frame[ 'content' ].render( mode );
     1469                        }
     1470                }
     1471        });
     1472
     1473        /**
    13531474         * wp.media.controller.MediaLibrary
    13541475         *
    13551476         * @constructor
     
    17581879                        _.defaults( this.options, {
    17591880                                title:    '',
    17601881                                modal:    true,
    1761                                 uploader: true
     1882                                uploader: true,
     1883                                mode:     ['select']
    17621884                        });
    17631885
    17641886                        // Ensure core UI is enabled.
     
    19812103                                library:   {},
    19822104                                multiple:  false,
    19832105                                state:     'library',
    1984                                 uploader:  true
     2106                                uploader:  true,
     2107                                mode:      [ 'grid', 'edit' ]
    19852108                        });
    19862109
    19872110                        // Ensure core and media grid view UI is enabled.
     
    20562179                                        router:     false,
    20572180                                        content:    'browse',
    20582181                                        filterable: 'mime-types'
    2059                                 }),
    2060 
    2061                                 new media.controller.EditImage( { model: options.editImage } )
     2182                                })
    20622183                        ]);
    20632184                },
    20642185
    20652186                bindHandlers: function() {
    20662187                        this.on( 'content:create:browse', this.browseContent, this );
    20672188                        this.on( 'content:render:edit-image', this.editImageContent, this );
     2189
     2190                        // Handle a frame-level event for editing an attachment.
     2191                        this.on( 'edit:attachment', this.editAttachment, this );
     2192                },
     2193
     2194                /**
     2195                 * Open the Edit Attachment modal.
     2196                 */
     2197                editAttachment: function( model ) {
     2198                        new media.view.Frame.EditMediaDetails({ model: model });
    20682199                },
    20692200
    20702201                /**
     
    20882219                                display:    state.get('displaySettings'),
    20892220                                dragInfo:   state.get('dragInfo'),
    20902221                                bulkEdit:   true,
     2222                                sidebar:    false,
    20912223
    20922224                                suggestedWidth:  state.get('suggestedWidth'),
    20932225                                suggestedHeight: state.get('suggestedHeight'),
     
    47184850                                        compat:        false,
    47194851                                        alt:           '',
    47204852                                        description:   ''
    4721                                 });
     4853                                }, this.options );
    47224854
    47234855                        options.buttons  = this.buttons;
    47244856                        options.describe = this.controller.state().get('describe');
     
    47684900                 */
    47694901                toggleSelectionHandler: function( event ) {
    47704902                        var method;
    4771 
    47724903                        // Catch enter and space events
    47734904                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
    47744905                                return;
    47754906                        }
     4907
     4908                        // In the grid view, bubble up an edit:attachment event to the controller.
     4909                        if ( _.contains( this.controller.options.mode, 'grid' ) ) {
     4910                                this.controller.trigger( 'edit:attachment', this.model );
     4911                                return;
     4912                        }
     4913
    47764914                        if ( event.shiftKey ) {
    47774915                                method = 'between';
    47784916                        } else if ( event.ctrlKey || event.metaKey ) {
     
    53035441                 */
    53045442                createAttachmentView: function( attachment ) {
    53055443                        var view = new this.options.AttachmentView({
    5306                                 controller: this.controller,
    5307                                 model:      attachment,
    5308                                 collection: this.collection,
    5309                                 selection:  this.options.selection
     5444                                controller:           this.controller,
     5445                                model:                attachment,
     5446                                collection:           this.collection,
     5447                                selection:            this.options.selection,
     5448                                showAttachmentFields: this.options.showAttachmentFields
    53105449                        });
    53115450
    53125451                        return this._viewsByCid[ attachment.cid ] = view;
     
    56035742                }
    56045743        });
    56055744
    5606 
    56075745        /**
    56085746         * wp.media.view.AttachmentsBrowser
    56095747         *
     
    56215759                                filters: false,
    56225760                                search:  true,
    56235761                                display: false,
    5624 
     5762                                sidebar: true,
     5763                                showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'mime' ] ),
    56255764                                AttachmentView: media.view.Attachment.Library
    56265765                        });
    56275766
    56285767                        this.createToolbar();
    56295768                        this.updateContent();
    5630                         this.createSidebar();
     5769                        if ( this.options.sidebar ) {
     5770                                this.createSidebar();
     5771                        } else {
     5772                                this.$el.addClass( 'hide-sidebar' );
     5773                        }
    56315774
    56325775                        this.collection.on( 'add remove reset', this.updateContent, this );
    56335776                },
     
    56525795
    56535796                        this.views.add( this.toolbar );
    56545797
     5798                        // Feels odd to bring the global media library switcher into the Attachment
     5799                        // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
     5800                        // which the controller can tap into and add this view?
     5801                        if ( _.contains( this.controller.options.mode, 'grid' ) ) {
     5802                                var libraryViewSwitcherConstructor = media.View.extend({
     5803                                        className: 'view-switch media-grid-view-switch',
     5804                                        template: media.template( 'media-library-view-switcher')
     5805                                });
     5806                                this.toolbar.set( 'libraryViewSwitcher', new libraryViewSwitcherConstructor({
     5807                                        controller: this.controller,
     5808                                        priority: -90
     5809                                }).render() );
     5810                        }
     5811
    56555812                        filters = this.options.filters;
    56565813                        if ( 'uploaded' === filters ) {
    56575814                                FiltersConstructor = media.view.AttachmentFilters.Uploaded;
     
    57465903                        this.removeContent();
    57475904
    57485905                        this.attachments = new media.view.Attachments({
    5749                                 controller: this.controller,
    5750                                 collection: this.collection,
    5751                                 selection:  this.options.selection,
    5752                                 model:      this.model,
    5753                                 sortable:   this.options.sortable,
     5906                                controller:           this.controller,
     5907                                collection:           this.collection,
     5908                                selection:            this.options.selection,
     5909                                model:                this.model,
     5910                                sortable:             this.options.sortable,
     5911                                showAttachmentFields: this.options.showAttachmentFields,
    57545912
    57555913                                // The single `Attachment` view to be used in the `Attachments` view.
    57565914                                AttachmentView: this.options.AttachmentView
     
    68146972                }
    68156973        });
    68166974
     6975        /**
     6976         * A frame for editing the details of a specific media item.
     6977         *
     6978         * Pops open in a modal by default.
     6979         */
     6980        media.view.Frame.EditMediaDetails = media.view.Frame.extend({
     6981
     6982                className: 'edit-media-overlay',
     6983                template: media.template( 'edit-media-details' ),
     6984                regions:   [ 'content' ],
     6985
     6986                events: {
     6987                        'click':                    'collapse',
     6988                        'click .delete-media-item': 'deleteMediaItem',
     6989                        'click .left':              'previousMediaItem',
     6990                        'click .right':             'nextMediaItem'
     6991                },
     6992
     6993                initialize: function( options ) {
     6994                        var self = this;
     6995                        media.view.Frame.prototype.initialize.apply( this, arguments );
     6996
     6997                        _.defaults( this.options, {
     6998                                modal:    true,
     6999                                state: 'edit-image'
     7000                        });
     7001
     7002                        this.createStates();
     7003
     7004                        this.on( 'content:render:edit-image', this.editImageContentUgh, this );
     7005                        // Initialize modal container view.
     7006                        if ( this.options.modal ) {
     7007                                this.modal = new media.view.Modal({
     7008                                        controller: this,
     7009                                        title:      this.options.title
     7010                                });
     7011
     7012                                // Completely destroy the modal DOM element when closing it.
     7013                                this.modal.close = function() {
     7014                                        self.modal.remove();
     7015                                };
     7016
     7017                                this.modal.content( this );
     7018                                this.modal.open();
     7019                        }
     7020                },
     7021
     7022                // Add the default states to the frame.
     7023                createStates: function() {
     7024                        this.states.add([
     7025                                new media.controller.EditImageNoFrame( { model: this.model } )
     7026                        ]);
     7027                },
     7028
     7029                /**
     7030                 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
     7031                 */
     7032                render: function() {
     7033                        // Activate the default state if no active state exists.
     7034                        if ( ! this.state() && this.options.state ) {
     7035                                this.setState( this.options.state );
     7036                        }
     7037                        /**
     7038                         * call 'render' directly on the parent class
     7039                         */
     7040                        return media.view.Frame.prototype.render.apply( this, arguments );
     7041                },
     7042
     7043                /**
     7044                 * For some reason the view doesn't exist in the DOM yet, don't have the
     7045                 * patience to track this down right now.
     7046                 */
     7047                editImageContentUgh: function() {
     7048                        _.defer( _.bind( this.editImageContent, this ) );
     7049                },
     7050
     7051                /**
     7052                 * Render the EditImage view into the frame's content region.
     7053                 */
     7054                editImageContent: function() {
     7055                        var view = new media.view.EditImage( { model: this.model, controller: this } ).render();
     7056
     7057                        this.content.set( view );
     7058
     7059                        // after creating the wrapper view, load the actual editor via an ajax call
     7060                        view.loadEditor();
     7061                }
     7062
     7063        });
     7064
    68177065        media.view.EditImage = media.View.extend({
    68187066
    68197067                className: 'image-editor',
  • src/wp-includes/media-template.php

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
    index 2c0ff80..3964199 100644
    a b function wp_print_media_templates() { 
    220220                </div>
    221221        </script>
    222222
     223        <script type="text/html" id="tmpl-media-library-view-switcher">
     224                <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
     225                        <img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
     226                </a>
     227                <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
     228                        <img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
     229                </a>
     230        </script>
     231
    223232        <script type="text/html" id="tmpl-uploader-status">
    224233                <h3><?php _e( 'Uploading' ); ?></h3>
    225234                <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
    function wp_print_media_templates() { 
    241250                <span class="upload-error-message">{{ data.message }}</span>
    242251        </script>
    243252
     253        <script type="text/html" id="tmpl-edit-media-details">
     254                <div class="edit-media-header">
     255                        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
     256                        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
     257                </div>
     258                <div class="media-frame-content"></div>
     259        </script>
    244260        <script type="text/html" id="tmpl-attachment">
    245261                <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    246262                        <# if ( data.uploading ) { #>
    function wp_print_media_templates() { 
    257273                                        <div>{{ data.filename }}</div>
    258274                                </div>
    259275                        <# } #>
    260 
     276                        <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     277                                <span class="edit-media">Edit Media</span>
     278                        <# } #>
    261279                        <# if ( data.buttons.close ) { #>
    262280                                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    263281                        <# } #>
    function wp_print_media_templates() { 
    283301                                        <# } #> {{ maybeReadOnly }} />
    284302                        <# } #>
    285303                <# } #>
     304                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     305                        <# _.each( data.showAttachmentFields, function( field ) { #>
     306                                <div class="data-field data-{{ field }}">
     307                                        <# if ( 'uploadedTo' === field ) { #>
     308
     309                                                <# if ( data[field] ) { #>
     310                                                <?php _e( 'Uploaded To:' ) ?>
     311                                                <# } else { #>
     312                                                <?php _e( 'Unattached' ) ?>
     313                                                <# } #>
     314
     315                                        <# } #>
     316                                <# if ( data[field] ) { #>
     317                                        &nbsp;{{ data[field] }}
     318                                <# } #>
     319                                </div>
     320                        <# }); #>
     321                <# } #>
     322
    286323        </script>
    287324
    288325        <script type="text/html" id="tmpl-attachment-details">