WordPress.org

Make WordPress Core

Ticket #27423: 27423.8.patch

File 27423.8.patch, 11.7 KB (added by celloexpressions, 6 years ago)

Add improved styling of search/filter, fix alignment of title/menu-toggle.

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

     
    529529        z-index: 150;
    530530}
    531531
     532.media-frame .media-frame-menu-toggle {
     533        position: absolute;
     534        top: 0;
     535        left: 0;
     536        z-index: 200;
     537        display: none;
     538        text-decoration: none;
     539        font-size: 16px;
     540        padding: 16px;
     541}
     542
     543.media-frame .media-frame-menu-toggle:hover {
     544        position: absolute;
     545}
     546
    532547.media-frame-title {
    533548        position: absolute;
    534549        top: 0;
     
    683698 */
    684699.attachments {
    685700        margin: 0;
    686         padding-right: 16px;
     701        padding: 8px;
    687702        -webkit-overflow-scrolling: touch;
    688703}
    689704
     
    705720}
    706721
    707722.attachment:focus {
     723        outline: none;
     724}
     725
     726.attachment:focus .attachment-preview {
    708727        -webkit-box-shadow:
    709728                0 0 0 1px #5b9dd9,
    710729                0 0 2px 2px #5b9dd9;
     
    711730        box-shadow:
    712731                0 0 0 1px #5b9dd9,
    713732                0 0 2px 2px #5b9dd9;
    714         outline: none;
    715733}
    716734
    717 .selected.attachment {
     735.selected.attachment .attachment-preview {
    718736        -webkit-box-shadow:
    719737                0 0 0 1px #fff,
    720738                0 0 0 3px #ccc;
     
    725743
    726744.attachment-preview {
    727745        position: relative;
    728         width: 199px;
    729         height: 199px;
    730746        -webkit-box-shadow:
    731747                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    732748                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     
    904920        display: block;
    905921}
    906922
    907 .attachment.details,
     923.attachment.details .attachment-preview,
    908924.media-grid-view .selected.attachment {
    909925        -webkit-box-shadow: 0 0 0 1px #fff,
    910926                                0 0 0 5px #1e8cbe;
     
    14561472.media-selection .attachments {
    14571473        display: inline-block;
    14581474        height: 48px;
    1459         margin-top: 5px;
    14601475        overflow: hidden;
    14611476        vertical-align: top;
    14621477}
     
    23092324@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    23102325
    23112326        /* Media tabs on the top */
    2312         .media-frame-content .media-toolbar .instructions {
     2327        .media-frame-content .media-toolbar .instructions,
     2328        .media-frame-router {
    23132329                display: none;
    23142330        }
    23152331
    23162332        .media-frame-menu {
    2317                 width: auto;
    2318                 bottom: auto;
    2319                 right: 0;
    2320                 height: 60px;
     2333                top: 30px;
     2334                left: 0;
     2335                z-index: inherit;
    23212336        }
    23222337
     2338        .media-frame .media-frame-menu-toggle {
     2339                display: block;
     2340                font-size: 22px;
     2341                font-weight: 600;
     2342                color: #444;
     2343                padding: 12px 16px;
     2344                transition: color .1s ease-in;
     2345        }
     2346
     2347        .media-frame .media-frame-menu-toggle:after {
     2348                display: inline-block;
     2349                width: 20px;
     2350                height: 20px;
     2351                font: normal 20px/1 dashicons;
     2352                content: "\f140";
     2353                -webkit-font-smoothing: antialiased;
     2354                -moz-osx-font-smoothing: grayscale;
     2355        }
     2356
     2357        .media-frame .media-frame-menu-toggle:hover,
     2358        .media-frame .media-frame-menu-toggle:focus {
     2359                color: #2ea2cc;
     2360        }
     2361
    23232362        .media-menu {
    2324                 border-right: none;
     2363                z-index: inherit;
     2364                width: 200px;
    23252365                position: relative;
    2326                 border-bottom: 1px solid #dddddd;
    2327                 overflow: hidden;
    23282366                padding: 10px 0 10px 10px;
     2367                display: none;
     2368                border: 1px solid #ccc;
    23292369        }
    23302370
    2331         .media-menu a {
    2332                 float: left;
    2333                 width: 42%;
    2334                 white-space: nowrap;
    2335                 text-overflow: ellipsis;
    2336                 overflow: hidden;
     2371        .media-menu.visible {
     2372                z-index: 2000;
     2373                display: block;
     2374                position: fixed;
     2375                top: 0;
     2376                bottom: 0;
     2377                left: 0;
     2378                right: 0;
     2379                width: auto;
     2380                border: none;
     2381                padding: 10px 0;
    23372382        }
    23382383
     2384        .media-menu > a {
     2385                padding: 20px;
     2386                width: auto !important;
     2387                text-align: center;
     2388                font-size: 20px;
     2389        }
     2390
    23392391        .media-frame-title {
    23402392                display: none;
    23412393        }
     
    23462398                font-size: 14px;
    23472399        }
    23482400
     2401        .image-details .media-frame-menu-toggle {
     2402                display: none;
     2403        }
     2404
    23492405        .media-frame-toolbar {
    23502406                position: absolute;
    23512407                bottom: 0px;
    23522408                left: 0;
    23532409                right: 0;
    2354                 background: #FFF;
    2355                 border-top: 1px solid #DEDEDE;
     2410                background: #fff;
    23562411        }
    23572412
    23582413        .media-toolbar {
     
    23592414                position: relative;
    23602415        }
    23612416
     2417        .media-toolbar .spinner {
     2418                margin-right: 6px;
     2419        }
     2420
    23622421        .media-frame {
    23632422                overflow: hidden;
    23642423        }
    23652424
    2366         .attachments-browser .attachments {
    2367                 top: 42px;
     2425        .media-frame .attachments-browser {
     2426                overflow: auto;
    23682427        }
    23692428
    2370         .attachment-details h3 {
    2371                 margin-top: 45px;
     2429        .attachments-browser .attachments {
     2430                top: 0;
     2431                right: 0;
    23722432        }
    23732433
    23742434        /* Shorten right-side links so they don't overlap the close button */
     
    23812441                display: none;
    23822442        }
    23832443
    2384         .media-frame-title {
     2444        .attachment-details {
     2445                padding: 0 20px;
     2446        }
     2447       
     2448        .attachment-display-settings {
     2449                padding: 0 20px 20px 20px;
     2450                width: -webkit-calc(100% - 40px);
     2451                width: calc(100% - 40px);
     2452        }
     2453
     2454        .attachment-info .thumbnail img {
     2455                max-width: 100%; /* Display the image bigger, since the screen's smaller. */
     2456                max-height: 50%;
     2457        }
     2458
     2459        .image-details .media-frame-title {
    23852460                top: 72px;
    2386                 left: auto;
    2387                 height: auto;
    23882461        }
    23892462
    23902463        .media-frame-title h1 {
     
    23932466        }
    23942467
    23952468        .media-frame-router {
    2396                 top: 84px;
    23972469                left: 0;
    23982470        }
    23992471
    24002472        .media-frame-content {
    24012473                left: 0;
    2402                 top: 118px;
     2474                top: 48px;
    24032475        }
    24042476
    24052477        .image-details .media-frame.hide-router .media-frame-content {
     
    24062478                top: 40px;
    24072479        }
    24082480
    2409         .media-frame .attachments-browser {
    2410                 padding-bottom: 300px;
     2481        .media-sidebar {
     2482                position: fixed;
     2483                top: 0;
     2484                right: -100%;
     2485                width: 100%;
     2486                padding: 0;
     2487                margin: 0 0 62px 0;
     2488                z-index: 201;
     2489                transition: .18s right ease-in-out;
    24112490        }
    24122491
    2413         .media-sidebar {
    2414                 border-bottom: 1px solid #dddddd;
     2492        .media-sidebar.active {
     2493                right: 0;
    24152494        }
    24162495
    24172496        .media-modal {
     
    24182497                width: auto;
    24192498        }
    24202499
    2421         .media-toolbar-primary, .media-toolbar-secondary {
     2500        .media-toolbar-primary,
     2501        .media-toolbar-secondary {
    24222502                height: auto;
     2503                width: 50%;
    24232504        }
    24242505
     2506        .media-frame .media-frame-content .media-toolbar .search,
     2507        .media-frame .media-frame-content .media-toolbar .attachment-filters {
     2508                max-width: 200px;
     2509                width: -webkit-calc(100% - 32px);
     2510                width: calc(100% - 32px);
     2511                margin: 11px 0 0 0;
     2512                height: 28px;
     2513        }
     2514
    24252515        .uploader-inline h3 {
    24262516                margin: 0 0 .8em 0;
    24272517        }
     
    24342524                margin: 0;
    24352525        }
    24362526
    2437         .attachments-browser .attachments, .attachments-browser .uploader-inline {
     2527        .attachments-browser .attachments,
     2528        .attachments-browser .uploader-inline {
    24382529                position: relative;
    2439                 margin-right: 180px;
     2530                margin-right: 0;
    24402531        }
    24412532
    24422533        /* Full-bleed modal */
     
    24582549                max-width: 100%;
    24592550        }
    24602551
    2461         .attachments-browser .media-toolbar-primary input.search {
    2462                 max-width: 150px;
    2463         }
    2464 
    24652552        .uploader-inline-content {
    24662553                position: relative;
    24672554        }
     
    25642651
    25652652        .media-frame .spinner {
    25662653                background-image: url(../images/spinner-2x.gif);
    2567         }
     2654        }
    25682655}
    25692656
     2657.attachments-browser .attachment {
     2658        position: relative;
     2659        width: 20%;
     2660        margin: 0;
     2661}
    25702662
     2663.attachments-browser .attachment:before {
     2664        content: '';
     2665        display: block;
     2666        padding-top: 100%;
     2667}
     2668
     2669.attachments-browser .attachment .attachment-preview {
     2670        position: absolute;
     2671        top: 8px;
     2672        right: 8px;
     2673        bottom: 8px;
     2674        left: 8px;
     2675}
     2676
     2677.attachments-browser .portrait img {
     2678        max-width: 100%;
     2679}
     2680
     2681.attachments-browser .landscape img {
     2682        max-height: 100%;
     2683}
     2684
     2685/**/
     2686
     2687.media-selection .attachments {
     2688        padding: 5px;
     2689}
     2690
     2691.media-selection .attachment {
     2692        margin: 5px;
     2693        width: 40px;
     2694}
     2695
     2696.media-selection .attachment-preview,
     2697.media-selection .attachment-preview .thumbnail {
     2698        width: 40px;
     2699        height: 40px;
     2700}
     2701
     2702.media-selection .portrait .thumbnail img {
     2703        max-width: 40px;
     2704        height: auto;
     2705}
     2706
     2707.media-selection .landscape .thumbnail img {
     2708        width: auto;
     2709        max-height: 40px;
     2710}
     2711
     2712@media only screen and ( max-width: 400px ) {
     2713        .attachments-browser .attachment {
     2714                width: 50%;
     2715        }
     2716}
     2717
     2718@media only screen and ( min-width: 400px ) {
     2719        .attachments-browser .attachment {
     2720                width: 33.3%;
     2721        }
     2722}
     2723
     2724@media only screen and ( min-width: 520px ) {
     2725        .attachments-browser .attachment {
     2726                width: 25%;
     2727        }
     2728}
     2729
     2730@media only screen and ( min-width: 640px ) {
     2731        .attachments-browser .attachment {
     2732                width: 33.3%;
     2733        }
     2734}
     2735
     2736@media only screen and ( min-width: 960px ) {
     2737        .attachments-browser .attachment {
     2738                width: 25%;
     2739        }
     2740}
     2741
     2742@media only screen and ( min-width: 1200px ) {
     2743        .attachments-browser .attachment {
     2744                width: 20%;
     2745        }
     2746}
     2747
    25712748/**
    25722749 * Media Grid
    25732750 */
  • src/wp-includes/js/media-views.js

     
    17471747                template:  media.template('media-frame'),
    17481748                regions:   ['menu','title','content','toolbar','router'],
    17491749
     1750                events: {
     1751                        'click a.media-frame-menu-toggle': 'toggleMenu'
     1752                },
     1753
    17501754                /**
    17511755                 * @global wp.Uploader
    17521756                 */
     
    18401844                                controller: this
    18411845                        });
    18421846                },
     1847
     1848                toggleMenu: function( event ) {
     1849                        console.log( 'clicked' );
     1850                        event.preventDefault();
     1851                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1852
     1853                },
    18431854                /**
    18441855                 * @param {Object} toolbar
    18451856                 * @this wp.media.controller.Region
     
    44294440        });
    44304441
    44314442        /**
    4432          * wp.media.view.Menu
    4433          *
    4434          * @constructor
    4435          * @augments wp.media.view.PriorityList
    4436          * @augments wp.media.View
    4437          * @augments wp.Backbone.View
    4438          * @augments Backbone.View
    4439          */
     4443        * wp.media.view.Menu
     4444        *
     4445        * @constructor
     4446        * @augments wp.media.view.PriorityList
     4447        * @augments wp.media.View
     4448        * @augments wp.Backbone.View
     4449        * @augments Backbone.View
     4450        */
    44404451        media.view.Menu = media.view.PriorityList.extend({
    44414452                tagName:   'div',
    44424453                className: 'media-menu',
     
    44434454                property:  'state',
    44444455                ItemView:  media.view.MenuItem,
    44454456                region:    'menu',
     4457
     4458                initialize: function( options ) {
     4459                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4460                        this.controller = options.controller;
     4461                        this.listenTo( this.controller, 'deactivate', function() {
     4462                                this.$el.removeClass( 'visible' );
     4463                        } );
     4464                },
     4465
    44464466                /**
    44474467                 * @param {Object} options
    44484468                 * @param {string} id
     
    46064626                tagName:   'li',
    46074627                className: 'attachment',
    46084628                template:  media.template('attachment'),
     4629                isTouch: false,
    46094630
    46104631                attributes: {
    46114632                        tabIndex: 0,
     
    46144635
    46154636                events: {
    46164637                        'click .js--select-attachment':   'toggleSelectionHandler',
     4638                        'touchend .attachment-preview':   'setTouch',
    46174639                        'change [data-setting]':          'updateSetting',
    46184640                        'change [data-setting] input':    'updateSetting',
    46194641                        'change [data-setting] select':   'updateSetting',
     
    47304752                                this.$bar.width( this.model.get('percent') + '%' );
    47314753                        }
    47324754                },
     4755
     4756                setTouch: function() {
     4757                        this.isTouch = true;
     4758                },
     4759
    47334760                /**
    47344761                 * @param {Object} event
    47354762                 */
     
    47524779                                method = 'toggle';
    47534780                        }
    47544781
     4782                        if ( this.isTouch ) {
     4783                                this.isTouch = false;
     4784                                method = 'add';
     4785                        }
     4786
    47554787                        this.toggleSelection({
    47564788                                method: method
    47574789                        });
     
    48004832                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014833                                selection.single( model );
    48024834                                return;
     4835                        } else if ( 'add' === method ) {
     4836                                selection.add( model );
     4837                                selection.single( model );
     4838                                return;
     4839
    48034840                        }
    48044841
    48054842                        // Fixes bug that loses focus when selecting a featured image
     
    51495186
    51505187                        this.initSortable();
    51515188
    5152                         _.bindAll( this, 'css' );
     5189                        /*_.bindAll( this, 'css' );
    51535190                        this.model.on( 'change:edge change:gutter', this.css, this );
    51545191                        this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
    51555192                        if ( this.options.resize ) {
     
    51585195
    51595196                        // Call this.css() after this view has been rendered in the DOM so
    51605197                        // attachments get proper width applied.
    5161                         _.defer( this.css, this );
     5198                        _.defer( this.css, this );*/
    51625199                },
    51635200
    51645201                dispose: function() {
  • src/wp-includes/media-template.php

     
    130130        </style>
    131131        <![endif]-->
    132132        <script type="text/html" id="tmpl-media-frame">
     133                <a class="media-frame-menu-toggle" href="#">Insert Media<!-- Change this dynamically. --></a>
    133134                <div class="media-frame-menu"></div>
    134135                <div class="media-frame-title"></div>
    135136                <div class="media-frame-router"></div>