Make WordPress Core

Ticket #27423: 27423.14.patch

File 27423.14.patch, 23.0 KB (added by iseulde, 11 years ago)
  • src/wp-includes/css/media-views.css

     
    8989        display: none;
    9090}
    9191
     92body.modal-open {
     93        overflow: hidden;
     94}
     95
    9296/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
    9397.ui-sortable,
    9498.ui-draggable {
     
    145149        right: 10px;
    146150        width: 30px;
    147151        height: 30px;
    148         z-index: 1000;
     152        z-index: 200;
    149153}
    150154
    151155.media-modal-close span.media-modal-icon {
     
    535539        left: 200px;
    536540        right: 0;
    537541        height: 56px;
    538         z-index: 200;
     542        z-index: 199;
    539543}
    540544
    541545.media-frame-router {
     
    683687 */
    684688.attachments {
    685689        margin: 0;
    686         padding-right: 16px;
     690        padding: 8px;
    687691        -webkit-overflow-scrolling: touch;
    688692}
    689693
     
    705709}
    706710
    707711.attachment:focus {
     712        outline: none;
     713}
     714
     715.attachment:focus .thumbnail {
    708716        -webkit-box-shadow:
    709717                0 0 0 1px #5b9dd9,
    710718                0 0 2px 2px #5b9dd9;
    711719        box-shadow:
    712720                0 0 0 1px #5b9dd9,
    713721                0 0 2px 2px #5b9dd9;
    714         outline: none;
    715722}
    716723
    717 .selected.attachment {
     724.selected.attachment .thumbnail {
    718725        -webkit-box-shadow:
    719726                0 0 0 1px #fff,
    720727                0 0 0 3px #ccc;
     
    730737         0 0 0 5px #1e8cbe;
    731738}
    732739
    733 .attachment-preview {
     740.thumbnail {
    734741        position: relative;
    735         width: 199px;
    736         height: 199px;
    737742        -webkit-box-shadow:
    738743                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    739744                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     
    747752.attachment .icon {
    748753        margin: 0 auto;
    749754        overflow: hidden;
    750         padding-top: 20%;
    751755}
    752756
    753757.attachment .thumbnail {
     
    769773        max-height: 98%;
    770774}
    771775
    772 .media-frame-content .attachment-preview.type-audio .icon,
    773 .media-frame-content .attachment-preview.type-video .icon {
    774         z-index: 2;
    775         background: #f1f1f1;
    776         position: relative;
    777         padding: 0;
    778         top: 15%;
    779         left: auto;
    780         right: auto;
    781 }
    782 
    783776.attachment-preview.type-audio .filename,
    784777.attachment-preview.type-video .filename {
    785778        z-index: 3;
     
    842835        padding: 5px 10px;
    843836}
    844837
    845 .attachment-preview .thumbnail {
    846         width: 199px;
    847         height: 199px;
    848 }
    849 
    850838.attachment .thumbnail img {
    851839        position: absolute;
    852840}
     
    888876        width: 24px;
    889877        position: absolute;
    890878        z-index: 10;
    891         top: -6px;
    892         right: -6px;
     879        top: 0;
     880        right: 0;
    893881        outline: none;
    894882        background: #eee;
    895883        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
     
    911899        display: block;
    912900}
    913901
    914 .attachment.details,
    915 .media-grid-view .selected.attachment {
     902.attachment.details .thumbnail,
     903.media-grid-view .selected .thumbnail {
    916904        -webkit-box-shadow: 0 0 0 1px #fff,
    917905                                0 0 0 5px #1e8cbe;
    918906        box-shadow: 0 0 0 1px #fff,
     
    14731461.media-selection .attachments {
    14741462        display: inline-block;
    14751463        height: 48px;
    1476         margin-top: 5px;
    14771464        overflow: hidden;
    14781465        vertical-align: top;
    14791466}
     
    14821469        width: 50%;
    14831470}
    14841471
     1472.wp-core-ui .show-image-details {
     1473        display: none;
     1474}
     1475
    14851476.attachment.selection.selected {
    14861477        -webkit-box-shadow: none;
    14871478        box-shadow: none;
     
    15501541        margin-top: 14px;
    15511542}
    15521543
    1553 /**
    1554  * Attachment Details
    1555  */
    1556 .attachment-details {
    1557         position: relative;
    1558         overflow: auto;
    1559 }
    1560 
    1561 .attachment-details .settings-save-status {
     1544.media-sidebar .settings-save-status {
     1545        background: #f5f5f5;
    15621546        float: right;
    15631547        text-transform: none;
    15641548        z-index: 10;
    15651549}
    15661550
    1567 .attachment-details .settings-save-status .spinner {
     1551.media-sidebar .settings-save-status .spinner {
    15681552        margin: 0 5px 0;
    15691553}
    15701554
    1571 .attachment-details .settings-save-status .saved {
     1555.media-sidebar .settings-save-status .saved {
    15721556        float: right;
    15731557        display: none;
    15741558}
    15751559
    1576 .attachment-details.save-waiting .settings-save-status .spinner,
    1577 .attachment-details.save-complete .settings-save-status .saved {
     1560.media-sidebar .save-waiting .settings-save-status .spinner,
     1561.media-sidebar .save-complete .settings-save-status .saved {
    15781562        display: block;
    15791563}
    15801564
     1565/**
     1566 * Attachment Details
     1567 */
     1568.attachment-details {
     1569        position: relative;
     1570        overflow: auto;
     1571}
     1572
    15811573.attachment-info {
    15821574        overflow: hidden;
    15831575        min-height: 60px;
     
    16691661        display: block;
    16701662}
    16711663
    1672 .media-modal .delete-attachment,
    1673 .media-modal .trash-attachment {
     1664.attachment-info .delete-attachment,
     1665.attachment-info .trash-attachment {
    16741666        color: #bc0b0b;
    16751667}
    16761668
    1677 .media-modal .delete-attachment:hover,
    1678 .media-modal .trash-attachment:hover {
     1669.attachment-info .delete-attachment:hover,
     1670.attachment-info .trash-attachment:hover {
    16791671        color: red;
    16801672}
    16811673
     
    22662258                padding: 3px 6px;
    22672259        }
    22682260
    2269         .media-frame-content .attachment .icon {
    2270                 top: 40%;
    2271         }
    2272 
    22732261        .image-details .media-modal {
    22742262                left: 30px;
    22752263                right: 30px;
     
    23012289                min-width: 120px;
    23022290        }
    23032291
    2304         .media-selection:after {
    2305                 background: none;
    2306         }
    2307 
     2292        .media-selection:after,
    23082293        .media-selection .attachments {
    23092294                display: none;
    23102295        }
     
    23302315        }
    23312316}
    23322317
     2318.switch-to-uploader,
     2319.wp-core-ui .back-to-library {
     2320        display: none;
     2321}
     2322
    23332323/* Responsive on portrait and landscape */
    23342324@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    23352325
    23362326        /* Media tabs on the top */
    2337         .media-frame-content .media-toolbar .instructions {
     2327        .media-frame-content .media-toolbar .instructions,
     2328        .media-frame-router,
     2329        .media-selection .selection-info {
    23382330                display: none;
    23392331        }
    23402332
     2333        .wp-core-ui .show-image-details {
     2334                display: inline-block;
     2335                margin-top: 14px;
     2336        }
     2337
    23412338        .media-frame-menu {
    2342                 width: auto;
    2343                 bottom: auto;
    2344                 right: 0;
    2345                 height: 60px;
     2339                top: 30px;
     2340                left: 0;
     2341                z-index: inherit;
    23462342        }
    23472343
    23482344        .media-menu {
    2349                 border-right: none;
     2345                z-index: inherit;
     2346                width: 200px;
    23502347                position: relative;
    2351                 border-bottom: 1px solid #dddddd;
    2352                 overflow: hidden;
    23532348                padding: 10px 0 10px 10px;
     2349                display: none;
     2350                border: 1px solid #ccc;
    23542351        }
    23552352
    2356         .media-menu a {
    2357                 float: left;
    2358                 width: 42%;
    2359                 white-space: nowrap;
    2360                 text-overflow: ellipsis;
    2361                 overflow: hidden;
     2353        .media-menu.visible {
     2354                z-index: 2000;
     2355                display: block;
     2356                position: fixed;
     2357                top: 0;
     2358                bottom: 0;
     2359                left: 0;
     2360                right: 0;
     2361                width: auto;
     2362                border: none;
     2363                padding: 10px 0;
     2364                overflow: auto;
     2365        }
     2366
     2367        .media-menu > a {
     2368                padding: 20px;
     2369                width: auto !important;
     2370                text-align: center;
     2371                font-size: 20px;
    23622372        }
    23632373
    23642374        .media-frame-title {
    2365                 display: none;
     2375                left: 0;
     2376        }
     2377
     2378        .media-frame-title h1 {
     2379                display: inline-block;
     2380                cursor: pointer;
     2381        }
     2382
     2383        .media-frame-title h1:after {
     2384                display: inline-block;
     2385                width: 54px;
     2386                height: 54px;
     2387                font: normal 20px/54px dashicons;
     2388                content: '\f140';
     2389                -webkit-font-smoothing: antialiased;
     2390                -moz-osx-font-smoothing: grayscale;
     2391                vertical-align: bottom;
     2392                z-index: 100;
    23662393        }
    23672394
    23682395        .image-details .media-frame-title {
     
    23762403                bottom: 0px;
    23772404                left: 0;
    23782405                right: 0;
    2379                 background: #FFF;
    2380                 border-top: 1px solid #DEDEDE;
     2406                background: #fff;
    23812407        }
    23822408
    23832409        .media-toolbar {
    23842410                position: relative;
    23852411        }
    23862412
     2413        .media-toolbar .spinner {
     2414                margin-right: 6px;
     2415        }
     2416
    23872417        .media-frame {
    23882418                overflow: hidden;
    23892419        }
    23902420
    23912421        .attachments-browser .attachments {
    2392                 top: 42px;
    2393         }
    2394 
    2395         .attachment-details h3 {
    2396                 margin-top: 45px;
     2422                right: 0;
    23972423        }
    23982424
    23992425        /* Shorten right-side links so they don't overlap the close button */
     
    24062432                display: none;
    24072433        }
    24082434
    2409         .media-frame-title {
     2435        .attachment-details {
     2436                padding: 0 20px;
     2437        }
     2438
     2439        .attachment-display-settings {
     2440                padding: 0 20px 20px 20px;
     2441                width: -webkit-calc(100% - 40px);
     2442                width: calc(100% - 40px);
     2443        }
     2444
     2445        .attachment-info .thumbnail img {
     2446                max-width: 100%; /* Display the image bigger, since the screen's smaller. */
     2447                max-height: 50%;
     2448        }
     2449
     2450        .image-details .media-frame-title {
    24102451                top: 72px;
    2411                 left: auto;
    2412                 height: auto;
    24132452        }
    24142453
    24152454        .media-frame-title h1 {
     
    24172456                font-size: 18px;
    24182457        }
    24192458
    2420         .media-frame-router {
    2421                 top: 84px;
    2422                 left: 0;
    2423         }
    2424 
    24252459        .media-frame-content {
    24262460                left: 0;
    2427                 top: 118px;
     2461                top: 54px;
    24282462        }
    24292463
    24302464        .image-details .media-frame.hide-router .media-frame-content {
    24312465                top: 40px;
    24322466        }
    24332467
    2434         .media-frame .attachments-browser {
    2435                 padding-bottom: 300px;
     2468        .media-sidebar {
     2469                position: fixed;
     2470                top: 0;
     2471                right: -100%;
     2472                width: 100%;
     2473                padding: 0;
     2474                margin: 0 0 62px 0;
     2475                z-index: 201;
    24362476        }
    24372477
    2438         .media-sidebar {
    2439                 border-bottom: 1px solid #dddddd;
     2478        .media-sidebar.active {
     2479                right: 0;
    24402480        }
    24412481
    24422482        .media-modal {
    24432483                width: auto;
    24442484        }
    24452485
    2446         .media-toolbar-primary, .media-toolbar-secondary {
     2486        .media-toolbar-primary,
     2487        .media-toolbar-secondary {
    24472488                height: auto;
    24482489        }
    24492490
     2491        .attachments-browser .media-toolbar-primary,
     2492        .attachments-browser .media-toolbar-secondary {
     2493                width: 50%;
     2494        }
     2495
     2496        .media-frame .media-frame-content .media-toolbar .search,
     2497        .media-frame .media-frame-content .media-toolbar .attachment-filters {
     2498                max-width: 200px;
     2499                width: -webkit-calc(100% - 16px);
     2500                width: calc(100% - 16px);
     2501                margin: 11px 0 0 0;
     2502                height: 28px;
     2503        }
     2504
     2505        .media-frame .media-frame-content .media-toolbar .search {
     2506                float: right;
     2507        }
     2508
    24502509        .uploader-inline h3 {
    24512510                margin: 0 0 .8em 0;
    24522511        }
     
    24592518                margin: 0;
    24602519        }
    24612520
    2462         .attachments-browser .attachments, .attachments-browser .uploader-inline {
    2463                 position: relative;
    2464                 margin-right: 180px;
    2465         }
    2466 
    24672521        /* Full-bleed modal */
    24682522        .media-modal,
    24692523        .image-details .media-modal {
     
    24832537                max-width: 100%;
    24842538        }
    24852539
    2486         .attachments-browser .media-toolbar-primary input.search {
    2487                 max-width: 150px;
    2488         }
    2489 
    24902540        .uploader-inline-content {
    24912541                position: relative;
    24922542        }
     
    25222572                margin-top: 45px;
    25232573        }
    25242574
    2525 }
     2575        /* Edit-selection mode */
     2576        .close.media-modal-icon {
     2577                display: block;
     2578                height: 100%;
     2579                width: 100%;
     2580                margin: 0;
     2581                padding: 0;
     2582                position: absolute;
     2583                top: 0;
     2584                right: 0;
     2585                border: none;
     2586                -webkit-box-shadow: none;
     2587                box-shadow: none;
     2588                background: transparent;
     2589        }
    25262590
    2527 /* Landscape specific header override */
    2528 @media screen and (max-height: 400px) {
    2529         .media-menu {
    2530                 padding: 0 0 0 10px;
     2591        .close.media-modal-icon:before {
     2592                font: normal 60px/1 dashicons;
     2593                content: "\f335";
     2594                position: absolute;
     2595                top: 50%;
     2596                left: 50%;
     2597                margin: -30px;
     2598                color: #000;
     2599                text-shadow: 0px 0px 5px #fff;
    25312600        }
    25322601
    2533         .media-menu a {
    2534                 float: left;
    2535                 width: 21%;
    2536                 white-space: nowrap;
    2537                 text-overflow: ellipsis;
    2538                 overflow: hidden;
    2539                 padding: 10px inherit;
     2602        .close.media-modal-icon:hover:before {
     2603                color: #1e8cbe;
     2604                text-shadow: 0px 0px 5px #000;
    25402605        }
    25412606
    2542         .media-menu a:nth-child(2),
    2543         .media-menu a:last-child {
    2544                 width: 21%;
     2607        .switch-to-uploader {
     2608                display: list-item;
     2609                float: none;
     2610                top: 0;
     2611        }
     2612
     2613        .switch-to-uploader .thumbnail {
     2614                border: 5px dashed #ddd;
     2615                -webkit-box-shadow: none;
     2616                box-shadow: none;
     2617                background: none;
    25452618        }
    25462619
     2620        .switch-to-uploader .thumbnail:after {
     2621                -webkit-box-shadow: none;
     2622                box-shadow: none;
     2623        }
     2624
     2625        .switch-to-uploader .thumbnail:before {
     2626                display: block;
     2627                height: 40px;
     2628                color: #ccc;
     2629                font: normal 40px/1 dashicons;
     2630                content: '\f132';
     2631                -webkit-font-smoothing: antialiased;
     2632                -moz-osx-font-smoothing: grayscale;
     2633                position: absolute;
     2634                padding-top: 50%;
     2635                top: -20px;
     2636                right: 0;
     2637                left: 0;
     2638        }
     2639
     2640        .wp-core-ui .back-to-library {
     2641                display: inline-block;
     2642        }
     2643}
     2644
     2645/* Landscape specific header override */
     2646@media screen and (max-height: 400px) {
    25472647        .media-modal-close {
    25482648                top: 2px;
    25492649        }
     
    25532653        }
    25542654
    25552655        .media-frame-content {
    2556                 top: 78px;
    2557         }
    2558 
    2559         .attachments-browser .attachments {
    2560                 top: 2px;
     2656                top: 54px;
    25612657        }
    25622658
    25632659        /* Prevent unnecessary scrolling on title input */
     
    25892685
    25902686        .media-frame .spinner {
    25912687                background-image: url(../images/spinner-2x.gif);
    2592         }
     2688        }
     2689}
     2690
     2691.attachments-browser .attachment {
     2692        position: relative;
     2693        width: 33.3%;
     2694        margin: 0;
     2695}
     2696
     2697.attachments-browser .attachment .attachment-preview {
     2698        position: relative;
     2699}
     2700
     2701.attachments-browser .attachment .attachment-preview:before {
     2702        content: '';
     2703        display: block;
     2704        padding-top: 100%;
     2705}
     2706
     2707.attachments-browser .attachment .attachment-preview .thumbnail {
     2708        position: absolute;
     2709        top: 8px;
     2710        right: 8px;
     2711        bottom: 8px;
     2712        left: 8px;
     2713}
     2714
     2715.attachments-browser .portrait img {
     2716        max-width: 100%;
     2717}
     2718
     2719.attachments-browser .landscape img {
     2720        max-height: 100%;
     2721}
     2722
     2723.media-selection .attachments {
     2724        padding: 5px;
     2725}
     2726
     2727.media-selection .attachment {
     2728        margin: 5px;
     2729        width: 40px;
     2730}
     2731
     2732.media-selection .attachment-preview,
     2733.media-selection .attachment-preview .thumbnail {
     2734        width: 40px;
     2735        height: 40px;
     2736}
     2737
     2738.media-selection .portrait .thumbnail img {
     2739        max-width: 40px;
     2740        height: auto;
     2741}
     2742
     2743.media-selection .landscape .thumbnail img {
     2744        width: auto;
     2745        max-height: 40px;
    25932746}
    25942747
     2748@media only screen and ( max-width: 520px ) {
     2749        .attachments-browser .attachment:first-of-type {
     2750                margin-left: 33.3%;
     2751        }
     2752}
     2753
     2754@media only screen and ( min-width: 520px ) and ( max-width: 640px ) {
     2755        .attachments-browser .attachment {
     2756                width: 25%;
     2757        }
     2758
     2759        .attachments-browser .attachment:first-of-type {
     2760                margin-left: 25%;
     2761        }
     2762}
     2763
     2764.media-grid-view .attachments-browser .attachment:first-of-type {
     2765        margin-left: 0;
     2766}
     2767
     2768@media only screen and ( min-width: 640px ) {
     2769        .attachments-browser .attachment {
     2770                width: 33.3%;
     2771        }
     2772}
     2773
     2774@media only screen and ( min-width: 960px ) {
     2775        .attachments-browser .attachment {
     2776                width: 25%;
     2777        }
     2778}
     2779
     2780@media only screen and ( min-width: 1200px ) {
     2781        .attachments-browser .attachment {
     2782                width: 20%;
     2783        }
     2784}
    25952785
    25962786/**
    25972787 * Media Grid
     
    26042794}
    26052795
    26062796/* Regions we don't use at all */
     2797.media-grid-view .switch-to-uploader,
    26072798.media-grid-view .media-frame-title,
    26082799.media-grid-view .media-frame-toolbar,
    26092800.media-grid-view .media-frame-menu {
  • src/wp-includes/js/media-views.js

     
    17501750                template:  media.template('media-frame'),
    17511751                regions:   ['menu','title','content','toolbar','router'],
    17521752
     1753                events: {
     1754                        'click h1': 'toggleMenu'
     1755                },
     1756
    17531757                /**
    17541758                 * @global wp.Uploader
    17551759                 */
     
    18431847                                controller: this
    18441848                        });
    18451849                },
     1850
     1851                toggleMenu: function( event ) {
     1852                        event.preventDefault();
     1853                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1854
     1855                },
    18461856                /**
    18471857                 * @param {Object} toolbar
    18481858                 * @this wp.media.controller.Region
     
    32243234                                };
    32253235                        }
    32263236
     3237                        $( 'body' ).addClass( 'modal-open' );
     3238
    32273239                        $el.show().find( '.media-modal-close' ).focus();
    32283240                        return this.propagate('open');
    32293241                },
     
    32393251                                return this;
    32403252                        }
    32413253
     3254                        $( 'body' ).removeClass( 'modal-open' );
     3255
    32423256                        // Hide modal and remove restricted media modal tab focus once it's closed
    32433257                        this.$el.hide().undelegate( 'keydown' );
    32443258
     
    36553669                template:  media.template('uploader-inline'),
    36563670
    36573671                events: {
    3658                         'click .close': 'hide'
     3672                        'click .close': 'hide',
     3673                        'click .back-to-library': 'back'
    36593674                },
    36603675
    36613676                initialize: function() {
     
    37583773                },
    37593774                hide: function() {
    37603775                        this.$el.addClass( 'hidden' );
     3776                },
     3777                back: function( event ) {
     3778                        event.preventDefault();
     3779                        this.controller.content.mode( 'browse' );
    37613780                }
    3762 
    37633781        });
    37643782
    37653783        /**
     
    44124430
    44134431                click: function() {
    44144432                        var state = this.options.state;
     4433
    44154434                        if ( state ) {
    44164435                                this.controller.setState( state );
    44174436                        }
     
    44474466                property:  'state',
    44484467                ItemView:  media.view.MenuItem,
    44494468                region:    'menu',
     4469
     4470                events: {
     4471                        'click': '_hide'
     4472                },
     4473
     4474                initialize: function( options ) {
     4475                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4476                        this.controller = options.controller;
     4477                        this.listenTo( this.controller, 'deactivate', function() {
     4478                                this.$el.removeClass( 'visible' );
     4479                        } );
     4480                },
     4481
    44504482                /**
    44514483                 * @param {Object} options
    44524484                 * @param {string} id
     
    45284560                        }
    45294561
    45304562                        view.$el.removeClass('hidden');
     4563                },
     4564
     4565                _hide: function() {
     4566                        this.$el.removeClass( 'visible' );
    45314567                }
    45324568        });
    45334569
     
    46104646                tagName:   'li',
    46114647                className: 'attachment',
    46124648                template:  media.template('attachment'),
     4649                isTouch: false,
    46134650
    46144651                attributes: {
    46154652                        tabIndex: 0,
     
    46184655
    46194656                events: {
    46204657                        'click .js--select-attachment':   'toggleSelectionHandler',
     4658                        'touchend .attachment-preview':   'setTouch',
    46214659                        'change [data-setting]':          'updateSetting',
    46224660                        'change [data-setting] input':    'updateSetting',
    46234661                        'change [data-setting] select':   'updateSetting',
     
    47344772                                this.$bar.width( this.model.get('percent') + '%' );
    47354773                        }
    47364774                },
     4775
     4776                setTouch: function() {
     4777                        this.isTouch = true;
     4778                },
     4779
    47374780                /**
    47384781                 * @param {Object} event
    47394782                 */
     
    47634806                                method = 'toggle';
    47644807                        }
    47654808
     4809                        if ( this.isTouch ) {
     4810                                this.isTouch = false;
     4811                                method = 'add';
     4812                        }
     4813
    47664814                        this.toggleSelection({
    47674815                                method: method
    47684816                        });
     
    48274875
    48284876                        if ( ! selection ) {
    48294877                                return;
     4878                        } else if ( 'add' === method ) {
     4879                                selection.add( model );
     4880                                selection.single( model );
     4881                                return;
     4882
    48304883                        }
    48314884
    48324885                        single = selection.single();
     
    51865239                        tabIndex: -1
    51875240                },
    51885241
    5189                 cssTemplate: media.template('attachments-css'),
    5190 
    51915242                events: {
    5192                         'scroll': 'scroll'
     5243                        'scroll': 'scroll',
     5244                        'click .switch-to-uploader': 'upload'
    51935245                },
    51945246
    51955247                initialize: function() {
     
    51995251                                refreshSensitivity: 200,
    52005252                                refreshThreshold:   3,
    52015253                                AttachmentView:     media.view.Attachment,
    5202                                 sortable:           false,
    5203                                 resize:             true
     5254                                sortable:           false
    52045255                        });
    52055256
    52065257                        this._viewsByCid = {};
     
    52265277                        this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
    52275278
    52285279                        this.initSortable();
    5229 
    5230                         _.bindAll( this, 'css' );
    5231                         this.model.on( 'change:edge change:gutter', this.css, this );
    5232                         this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
    5233                         if ( this.options.resize ) {
    5234                                 $(window).on( 'resize.attachments', this._resizeCss );
    5235                         }
    5236 
    5237                         // Call this.css() after this view has been rendered in the DOM so
    5238                         // attachments get proper width applied.
    5239                         _.defer( this.css, this );
    52405280                },
    52415281
    52425282                dispose: function() {
    52435283                        this.collection.props.off( null, null, this );
    5244                         $(window).off( 'resize.attachments', this._resizeCss );
     5284
    52455285                        /**
    52465286                         * call 'dispose' directly on the parent class
    52475287                         */
    52485288                        media.View.prototype.dispose.apply( this, arguments );
    52495289                },
    52505290
    5251                 css: function() {
    5252                         var $css = $( '#' + this.el.id + '-css' );
    5253 
    5254                         if ( $css.length ) {
    5255                                 $css.remove();
    5256                         }
    5257 
    5258                         media.view.Attachments.$head().append( this.cssTemplate({
    5259                                 id:     this.el.id,
    5260                                 edge:   this.edge(),
    5261                                 gutter: this.model.get('gutter')
    5262                         }) );
    5263                 },
    5264                 /**
    5265                  * @returns {Number}
    5266                  */
    5267                 edge: function() {
    5268                         var edge = this.model.get('edge'),
    5269                                 gutter, width, columns;
    5270 
    5271                         if ( ! this.$el.is(':visible') ) {
    5272                                 return edge;
    5273                         }
    5274 
    5275                         gutter  = this.model.get('gutter') * 2;
    5276                         width   = this.$el.width() - gutter;
    5277                         columns = Math.ceil( width / ( edge + gutter ) );
    5278                         edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
    5279                         return edge;
    5280                 },
    5281 
    52825291                initSortable: function() {
    52835292                        var collection = this.collection;
    52845293
     
    53895398                        // Trigger the scroll event to check if we're within the
    53905399                        // threshold to query for additional attachments.
    53915400                        this.scroll();
     5401
     5402                        if ( ! this.$( '.switch-to-uploader' ).length ) {
     5403                                this.$el.append( '<li tabindex="0" role="checkbox" class="attachment save-ready switch-to-uploader"><div class="attachment-preview"><div class="thumbnail"></div></div></li>' );
     5404                        }
    53925405                },
    53935406
    53945407                scroll: function() {
     
    54125425                                        toolbar.get('spinner').hide();
    54135426                                });
    54145427                        }
     5428                },
     5429
     5430                upload: function( event ) {
     5431                        event.preventDefault();
     5432                        this.controller.content.mode( 'upload' );
    54155433                }
    5416         }, {
    5417                 $head: (function() {
    5418                         var $head;
    5419                         return function() {
    5420                                 return $head = $head || $('head');
    5421                         };
    5422                 }())
    54235434        });
    54245435
    54255436        /**
     
    58515862                        this.attachmentsNoResults.$el.html( l10n.noMedia );
    58525863
    58535864                        this.views.add( this.attachmentsNoResults );
    5854 
    5855 
    58565865                },
    58575866
    58585867                createSidebar: function() {
     
    59295938
    59305939                events: {
    59315940                        'click .edit-selection':  'edit',
    5932                         'click .clear-selection': 'clear'
     5941                        'click .clear-selection': 'clear',
     5942                        'click .show-image-details': 'show'
    59335943                },
    59345944
    59355945                initialize: function() {
     
    59936003                        new media.view.FocusManager({
    59946004                                el: this.el
    59956005                        }).focus();
     6006                },
     6007
     6008                show: function( event ) {
     6009                        event.preventDefault();
     6010                        this.$el.parents( '.media-frame' ).find( '.media-sidebar' ).add( $( event.target ) ).toggleClass( 'active' );
    59966011                }
    59976012        });
    59986013
  • src/wp-includes/media-template.php

     
    219219                                /** This action is documented in wp-admin/includes/media.php */
    220220                                do_action( 'post-upload-ui' ); ?>
    221221                        </div>
     222                        <a href="#" class="button back-to-library"><?php _e( 'Back' ); ?></a>
    222223                <?php endif; ?>
    223224                </div>
    224225        </script>
     
    398399
    399400        <script type="text/html" id="tmpl-attachment">
    400401                <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    401                         <# if ( data.uploading ) { #>
    402                                 <div class="media-progress-bar"><div></div></div>
    403                         <# } else if ( 'image' === data.type ) { #>
    404                                 <div class="thumbnail">
     402                        <div class="thumbnail">
     403                                <# if ( data.uploading ) { #>
     404                                        <div class="media-progress-bar"><div>
     405                                <# } else if ( 'image' === data.type ) { #>
    405406                                        <div class="centered">
    406407                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
    407408                                        </div>
    408                                 </div>
    409                         <# } else {
    410                                 if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) {
    411                                 #><img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" /><#
    412                                 } else {
    413                                 #><img src="{{ data.icon }}" class="icon" draggable="false" /><#
    414                                 } #>
    415                                 <div class="filename">
    416                                         <div>{{ data.filename }}</div>
    417                                 </div>
    418                         <# } #>
     409                                <# } else { #>
     410                                        <div class="centered">
     411                                                <# if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) { #>
     412                                                        <img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" />
     413                                                <# } else { #>
     414                                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
     415                                                <# } #>
     416                                        </div>
     417                                        <div class="filename">
     418                                                <div>{{ data.filename }}</div>
     419                                        </div>
     420-                               <# } #>
     421                        </div>
    419422                        <# if ( data.buttons.close ) { #>
    420423                                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    421424                        <# } #>
     
    589592                        <# } #>
    590593                </div>
    591594                <div class="selection-view"></div>
     595                <a href="#" class="button show-image-details">Edit</a>
    592596        </script>
    593597
    594598        <script type="text/html" id="tmpl-attachment-display-settings">
     
    837841                </div>
    838842        </script>
    839843
    840         <script type="text/html" id="tmpl-attachments-css">
    841                 <style type="text/css" id="{{ data.id }}-css">
    842                         #{{ data.id }} {
    843                                 padding: 0 {{ data.gutter }}px;
    844                         }
    845 
    846                         #{{ data.id }} .attachment {
    847                                 margin: {{ data.gutter }}px;
    848                                 width: {{ data.edge }}px;
    849                         }
    850 
    851                         #{{ data.id }} .attachment-preview,
    852                         #{{ data.id }} .attachment-preview .thumbnail {
    853                                 width: {{ data.edge }}px;
    854                                 height: {{ data.edge }}px;
    855                         }
    856 
    857                         #{{ data.id }} .portrait .thumbnail img {
    858                                 max-width: {{ data.edge }}px;
    859                                 height: auto;
    860                         }
    861 
    862                         #{{ data.id }} .landscape .thumbnail img {
    863                                 width: auto;
    864                                 max-height: {{ data.edge }}px;
    865                         }
    866                 </style>
    867         </script>
    868 
    869844        <script type="text/html" id="tmpl-image-details">
    870845                <div class="media-embed">
    871846                        <div class="embed-media-settings">