WordPress.org

Make WordPress Core

Ticket #24716: 24716.2.diff

File 24716.2.diff, 16.0 KB (added by wonderboymusic, 4 years ago)
  • src/wp-admin/css/list-tables.css

     
    634634
    635635.view-switch > a:before {
    636636        color: #bbb;
    637         content: '\f163';
    638637        display: inline-block;
    639638        float: left;
    640639        font: normal 20px/1 'dashicons';
     
    645644        -moz-osx-font-smoothing: grayscale;
    646645}
    647646
     647.view-switch > .view-list:before {
     648        content: '\f163';
     649}
     650
    648651.view-switch a:hover:before {
    649652        color: #727272;
    650653}
     
    653656        color: #0074a2;
    654657}
    655658
    656 .view-switch > a + a:before {
     659.view-switch > a + a {
    657660        margin-left: 5px;
     661}
     662
     663.view-switch > .view-excerpt:before {
    658664        content: '\f164';
    659665}
    660666
     667.view-switch > .view-grid:before {
     668        content: '\f180';
     669}
     670
    661671.filter {
    662672        float: left;
    663673        margin: -5px 0 0 10px;
  • src/wp-admin/includes/class-wp-list-table.php

     
    493493                <div class="view-switch">
    494494<?php
    495495                        foreach ( $modes as $mode => $title ) {
    496                                 $class = ( $current_mode == $mode ) ? 'class="current"' : '';
    497                                 echo "<a href='" . esc_url( add_query_arg( 'mode', $mode, $_SERVER['REQUEST_URI'] ) ) . "' $class><img id='view-switch-$mode' src='" . esc_url( includes_url( 'images/blank.gif' ) ) . "' width='20' height='20' title='$title' alt='$title' /></a>\n";
     496                                $classes = array( 'view-' . $mode );
     497                                if ( $current_mode == $mode )
     498                                        $classes[] = 'current';
     499                                printf(
     500                                        "<a href='%s' class='%s'><img id='view-switch-$mode' src='%s' width='20' height='20' title='%s' alt='%s' /></a>\n",
     501                                        esc_url( add_query_arg( 'mode', $mode ) ),
     502                                        implode( ' ', $classes ),
     503                                        esc_url( includes_url( 'images/blank.gif' ) ),
     504                                        $title,
     505                                        $title
     506                                );
    498507                        }
    499508                ?>
    500509                </div>
  • src/wp-admin/includes/class-wp-media-list-table.php

     
    2323        }
    2424
    2525        public function prepare_items() {
    26                 global $lost, $wp_query, $post_mime_types, $avail_post_mime_types;
     26                global $lost, $wp_query, $post_mime_types, $avail_post_mime_types, $mode;
    2727
    2828                $q = $_REQUEST;
    2929
     
    3434
    3535                $this->is_trash = isset( $_REQUEST['status'] ) && 'trash' == $_REQUEST['status'];
    3636
     37                $mode = empty( $_REQUEST['mode'] ) ? 'list' : $_REQUEST['mode'];
     38
    3739                $this->set_pagination_args( array(
    3840                        'total_items' => $wp_query->found_posts,
    3941                        'total_pages' => $wp_query->max_num_pages,
     
    125127                _e( 'No media attachments found.' );
    126128        }
    127129
     130        protected function pagination( $which ) {
     131                global $mode;
     132
     133                parent::pagination( $which );
     134
     135                $this->view_switcher( $mode );
     136        }
     137
     138        /**
     139         * Display a view switcher
     140         *
     141         * @since 3.1.0
     142         * @access protected
     143         */
     144        protected function view_switcher( $current_mode ) {
     145                $modes = array(
     146                        'list'    => __( 'List View' ),
     147                        'grid' => __( 'Grid View' )
     148                );
     149
     150?>
     151                <input type="hidden" name="mode" value="<?php echo esc_attr( $current_mode ); ?>" />
     152                <div class="view-switch">
     153<?php
     154                        foreach ( $modes as $mode => $title ) {
     155                                $classes = array( 'view-' . $mode );
     156                                if ( $current_mode == $mode )
     157                                        $classes[] = 'current';
     158                                printf(
     159                                        "<a href='%s' class='%s'><img id='view-switch-$mode' src='%s' width='20' height='20' title='%s' alt='%s' /></a>\n",
     160                                        esc_url( add_query_arg( 'mode', $mode ) ),
     161                                        implode( ' ', $classes ),
     162                                        esc_url( includes_url( 'images/blank.gif' ) ),
     163                                        $title,
     164                                        $title
     165
     166                                );
     167                        }
     168                ?>
     169                </div>
     170<?php
     171        }
     172
    128173        protected function get_columns() {
    129174                $posts_columns = array();
    130175                $posts_columns['cb'] = '<input type="checkbox" />';
  • src/wp-admin/js/media.js

     
    7272        };
    7373
    7474        $( document ).ready( function() {
     75                // Open up a manage media frame into the grid.
     76                wp.media && wp.media({
     77                        frame: 'manage',
     78                        container: $('#wpbody-content')
     79                }).open();
     80
    7581                $( '#find-posts-submit' ).click( function( event ) {
    7682                        if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
    7783                                event.preventDefault();
  • src/wp-admin/upload.php

     
    1212if ( !current_user_can('upload_files') )
    1313        wp_die( __( 'You do not have permission to upload files.' ) );
    1414
     15// By default open the grid view.
     16if ( ! isset( $_GET['mode'] ) || ( isset( $_GET['mode'] ) && 'grid' === $_GET['mode'] ) ) {
     17        wp_enqueue_media();
     18        wp_enqueue_script( 'media' );
     19        require_once( ABSPATH . 'wp-admin/admin-header.php' );
     20        ?><div class="view-switch media-grid-view-switch">
     21                <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
     22                        <img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
     23                </a>
     24                <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
     25                        <img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
     26                </a>
     27        </div><?php
     28        include( ABSPATH . 'wp-admin/admin-footer.php' );
     29        exit;
     30}
     31
    1532$wp_list_table = _get_list_table('WP_Media_List_Table');
    1633$pagenum = $wp_list_table->get_pagenum();
    1734
     
    237254<?php $wp_list_table->display(); ?>
    238255
    239256<div id="ajax-response"></div>
    240 <?php find_posts_div(); ?> 
     257<?php find_posts_div(); ?>
    241258</form>
    242259</div>
    243260
  • src/wp-includes/css/media-views.css

     
    23682368                background-image: url(../images/spinner-2x.gif);
    23692369        }
    23702370}
     2371
     2372
     2373/**
     2374 * Media Grid
     2375 */
     2376
     2377.media-grid-view h1 {
     2378        color: #222;
     2379        font-size: 23px;
     2380        font-weight: 400;
     2381        margin: 10px 0 0;
     2382        padding: 9px 15px 4px 22px;
     2383        line-height: 29px;
     2384}
     2385
     2386.media-grid-view-switch {
     2387        position: fixed;
     2388        right: 10px;
     2389        top: 44px;
     2390        z-index: 1;
     2391
     2392}
     2393/**
     2394 * Position both the frame and the uploader window into the content
     2395 * area of the screen.
     2396 */
     2397.media-grid-view {
     2398        position: fixed;
     2399        bottom: 0;
     2400        left: 160px;
     2401        right: 0;
     2402        top: 32px;
     2403}
     2404@media screen and (max-width: 900px) {
     2405        .auto-fold .media-grid-view {
     2406                left: 36px;
     2407        }
     2408}
     2409@media screen and (max-width: 782px) {
     2410        .media-grid-view {
     2411                top: 46px;
     2412        }
     2413        .auto-fold .media-grid-view {
     2414                left: 0px;
     2415                bottom: 0px;
     2416        }
     2417}
     2418
     2419/* Regions we don't use at all */
     2420.media-grid-view .media-frame-toolbar,
     2421.media-grid-view .media-frame-menu {
     2422        display: none;
     2423}
     2424
     2425.media-grid-view .media-frame-content {
     2426        bottom: 40px;
     2427}
     2428@media screen and (max-width: 782px) {
     2429        .media-grid-view .media-frame-content {
     2430                border-bottom: none;
     2431                bottom: 0;
     2432        }
     2433}
     2434
     2435@media only screen and (max-width: 640px), screen and (max-height: 400px) {
     2436        .media-grid-view .media-frame-title {
     2437                display: block;
     2438                width: auto;
     2439                bottom: auto;
     2440                right: 0;
     2441                top: 0;
     2442                height: 60px;
     2443        }
     2444}
     2445 No newline at end of file
  • src/wp-includes/js/media-models.js

     
    3030                        frame = new MediaFrame.Select( attributes );
    3131                } else if ( 'post' === attributes.frame && MediaFrame.Post ) {
    3232                        frame = new MediaFrame.Post( attributes );
     33                } else if ( 'manage' === attributes.frame && MediaFrame.Manage ) {
     34                        frame = new MediaFrame.Manage( attributes );
    3335                } else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
    3436                        frame = new MediaFrame.ImageDetails( attributes );
    3537                } else if ( 'audio' === attributes.frame && MediaFrame.AudioDetails ) {
  • src/wp-includes/js/media-views.js

     
    614614
    615615                        this.get('selection').on( 'add remove reset', this.refreshContent, this );
    616616
    617                         if ( this.get('contentUserSetting') ) {
     617                        if ( this.get( 'router' ) && this.get('contentUserSetting') ) {
    618618                                this.frame.on( 'content:activate', this.saveContentMode, this );
    619619                                this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
    620620                        }
     
    18901890        });
    18911891
    18921892        /**
     1893         * wp.media.view.MediaFrame.Manage
     1894         *
     1895         * A generic management frame workflow.
     1896         *
     1897         * Used in the media grid view.
     1898         *
     1899         * @constructor
     1900         * @augments wp.media.view.MediaFrame
     1901         * @augments wp.media.view.Frame
     1902         * @augments wp.media.View
     1903         * @augments wp.Backbone.View
     1904         * @augments Backbone.View
     1905         * @mixes wp.media.controller.StateMachine
     1906         */
     1907        media.view.MediaFrame.Manage = media.view.MediaFrame.extend({
     1908                /**
     1909                 * @global wp.Uploader
     1910                 */
     1911                initialize: function() {
     1912                        _.defaults( this.options, {
     1913                                title:     l10n.mediaLibraryTitle,
     1914                                modal:     false,
     1915                                selection: [],
     1916                                library:   {},
     1917                                multiple:  false,
     1918                                state:     'library',
     1919                                uploader:  true
     1920                        });
     1921
     1922                        // Ensure core and media grid view UI is enabled.
     1923                        this.$el.addClass('wp-core-ui media-grid-view');
     1924
     1925                        // Force the uploader off if the upload limit has been exceeded or
     1926                        // if the browser isn't supported.
     1927                        if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
     1928                                this.options.uploader = false;
     1929                        }
     1930
     1931                        // Initialize a window-wide uploader.
     1932                        if ( this.options.uploader ) {
     1933                                var uploader = new media.view.UploaderWindow({
     1934                                        controller: this,
     1935                                        uploader: {
     1936                                                dropzone:  $('body'),
     1937                                                container: $('body')
     1938                                        }
     1939                                }).render();
     1940                                uploader.ready();
     1941                                $('body').append( uploader.el );
     1942
     1943                                this.options.uploader = false;
     1944                        }
     1945
     1946                        /**
     1947                         * call 'initialize' directly on the parent class
     1948                         */
     1949                        media.view.MediaFrame.prototype.initialize.apply( this, arguments );
     1950
     1951                        // Since we're not using the default modal built into
     1952                        // a media frame, append our $element to the supplied container.
     1953                        this.$el.appendTo( this.options.container );
     1954
     1955                        this.createSelection();
     1956                        this.createStates();
     1957                        this.bindHandlers();
     1958                        this.render();
     1959                },
     1960
     1961                createSelection: function() {
     1962                        var selection = this.options.selection;
     1963
     1964                        if ( ! (selection instanceof media.model.Selection) ) {
     1965                                this.options.selection = new media.model.Selection( selection, {
     1966                                        multiple: this.options.multiple
     1967                                });
     1968                        }
     1969
     1970                        this._selection = {
     1971                                attachments: new media.model.Attachments(),
     1972                                difference: []
     1973                        };
     1974                },
     1975
     1976                createStates: function() {
     1977                        var options = this.options;
     1978
     1979                        if ( this.options.states ) {
     1980                                return;
     1981                        }
     1982                        var libraryState = new media.controller.Library({
     1983                                library:   media.query( options.library ),
     1984                                multiple:  options.multiple,
     1985                                title:     options.title,
     1986                                priority:  20,
     1987                                toolbar:   false,
     1988                                router:    false,
     1989                                content:   'browse'
     1990                        });
     1991
     1992                        // Add the default states.
     1993                        this.states.add([
     1994                                // Main states.
     1995                                libraryState,
     1996
     1997                                new media.controller.EditImage( { model: options.editImage } )
     1998                        ]);
     1999                },
     2000
     2001                bindHandlers: function() {
     2002                        this.on( 'router:create:browse', this.createRouter, this );
     2003                        this.on( 'router:render:browse', this.browseRouter, this );
     2004                        this.on( 'content:create:browse', this.browseContent, this );
     2005                        this.on( 'content:render:upload', this.uploadContent, this );
     2006                        this.on( 'content:render:edit-image', this.editImageContent, this );
     2007                },
     2008
     2009                // Routers
     2010                browseRouter: function( view ) {
     2011                        view.set({
     2012                                upload: {
     2013                                        text:     l10n.uploadFilesTitle,
     2014                                        priority: 20
     2015                                },
     2016                                browse: {
     2017                                        text:     l10n.mediaLibraryTitle,
     2018                                        priority: 40
     2019                                }
     2020                        });
     2021                },
     2022
     2023                // Routers
     2024                browseRouter: function( view ) {
     2025                        view.set({
     2026                                upload: {
     2027                                        text:     l10n.uploadFilesTitle,
     2028                                        priority: 20
     2029                                },
     2030                                browse: {
     2031                                        text:     l10n.mediaLibraryTitle,
     2032                                        priority: 40
     2033                                }
     2034                        });
     2035                },
     2036
     2037                /**
     2038                 * Content
     2039                 *
     2040                 * @param {Object} content
     2041                 * @this wp.media.controller.Region
     2042                 */
     2043                browseContent: function( content ) {
     2044                        var state = this.state();
     2045
     2046                        // Browse our library of attachments.
     2047                        content.view = new media.view.AttachmentsBrowser({
     2048                                controller: this,
     2049                                collection: state.get('library'),
     2050                                selection:  state.get('selection'),
     2051                                model:      state,
     2052                                sortable:   state.get('sortable'),
     2053                                search:     state.get('searchable'),
     2054                                filters:    state.get('filterable'),
     2055                                display:    state.get('displaySettings'),
     2056                                dragInfo:   state.get('dragInfo'),
     2057                                bulkEdit:   true,
     2058
     2059                                suggestedWidth:  state.get('suggestedWidth'),
     2060                                suggestedHeight: state.get('suggestedHeight'),
     2061
     2062                                AttachmentView: state.get('AttachmentView')
     2063                        });
     2064                },
     2065
     2066                editImageContent: function() {
     2067                        var image = this.state().get('image'),
     2068                                view = new media.view.EditImage( { model: image, controller: this } ).render();
     2069
     2070                        this.content.set( view );
     2071
     2072                        // after creating the wrapper view, load the actual editor via an ajax call
     2073                        view.loadEditor();
     2074
     2075                },
     2076
     2077                /**
     2078                 *
     2079                 * @this wp.media.controller.Region
     2080                 */
     2081                uploadContent: function() {
     2082                        this.$el.removeClass('hide-toolbar');
     2083                        this.content.set( new media.view.UploaderInline({
     2084                                controller: this
     2085                        }) );
     2086                }
     2087        });
     2088
     2089        /**
    18932090         * wp.media.view.MediaFrame.Select
    18942091         *
    18952092         * Type of media frame that is used to select an item or items from the media library
  • src/wp-includes/media-template.php

     
    308308                                <div class="filename">{{ data.filename }}</div>
    309309                                <div class="uploaded">{{ data.dateFormatted }}</div>
    310310
     311                                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
    311312                                <# if ( 'image' === data.type && ! data.uploading ) { #>
    312313                                        <# if ( data.width && data.height ) { #>
    313314                                                <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     
    339340                        </div>
    340341                </div>
    341342
     343                <label class="setting" data-setting="url">
     344                        <span><?php _e('URL'); ?></span>
     345                        <input type="text" value="{{ data.url }}" readonly />
     346                </label>
    342347                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    343                         <label class="setting" data-setting="title">
    344                                 <span><?php _e('Title'); ?></span>
    345                                 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    346                         </label>
    347                         <label class="setting" data-setting="caption">
    348                                 <span><?php _e('Caption'); ?></span>
    349                                 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    350                         </label>
     348                <label class="setting" data-setting="title">
     349                        <span><?php _e('Title'); ?></span>
     350                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
     351                </label>
     352                <label class="setting" data-setting="caption">
     353                        <span><?php _e('Caption'); ?></span>
     354                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     355                </label>
    351356                <# if ( 'image' === data.type ) { #>
    352357                        <label class="setting" data-setting="alt">
    353358                                <span><?php _e('Alt Text'); ?></span>
  • src/wp-includes/media.php

     
    25632563                'editLink'   => false,
    25642564        );
    25652565
     2566        $bytes = filesize( get_attached_file( $attachment->ID ) );
     2567        $response['filesizeInBytes'] = $bytes;
     2568        $response['filesizeHumanReadable'] = size_format( $bytes );
     2569
    25662570        if ( current_user_can( 'edit_post', $attachment->ID ) ) {
    25672571                $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
    25682572                $response['nonces']['edit'] = wp_create_nonce( 'image_editor-' . $attachment->ID );