WordPress.org

Make WordPress Core

Ticket #27423: 27423.11.patch

File 27423.11.patch, 23.1 KB (added by iseulde, 6 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;
     
    723730                0 0 0 3px #ccc;
    724731}
    725732
    726 .attachment-preview {
     733.thumbnail {
    727734        position: relative;
    728         width: 199px;
    729         height: 199px;
    730735        -webkit-box-shadow:
    731736                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    732737                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     
    740745.attachment .icon {
    741746        margin: 0 auto;
    742747        overflow: hidden;
    743         padding-top: 20%;
    744748}
    745749
    746750.attachment .thumbnail {
     
    762766        max-height: 98%;
    763767}
    764768
    765 .media-frame-content .attachment-preview.type-audio .icon,
    766 .media-frame-content .attachment-preview.type-video .icon {
    767         z-index: 2;
    768         background: #f1f1f1;
    769         position: relative;
    770         padding: 0;
    771         top: 15%;
    772         left: auto;
    773         right: auto;
    774 }
    775 
    776769.attachment-preview.type-audio .filename,
    777770.attachment-preview.type-video .filename {
    778771        z-index: 3;
     
    835828        padding: 5px 10px;
    836829}
    837830
    838 .attachment-preview .thumbnail {
    839         width: 199px;
    840         height: 199px;
    841 }
    842 
    843831.attachment .thumbnail img {
    844832        position: absolute;
    845833}
     
    881869        width: 24px;
    882870        position: absolute;
    883871        z-index: 10;
    884         top: -6px;
    885         right: -6px;
     872        top: 0;
     873        right: 0;
    886874        outline: none;
    887875        background: #eee;
    888876        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
     
    904892        display: block;
    905893}
    906894
    907 .attachment.details,
    908 .media-grid-view .selected.attachment {
     895.attachment.details .thumbnail,
     896.media-grid-view .selected .thumbnail {
    909897        -webkit-box-shadow: 0 0 0 1px #fff,
    910898                                0 0 0 5px #1e8cbe;
    911899        box-shadow: 0 0 0 1px #fff,
     
    14641452.media-selection .attachments {
    14651453        display: inline-block;
    14661454        height: 48px;
    1467         margin-top: 5px;
    14681455        overflow: hidden;
    14691456        vertical-align: top;
    14701457}
     
    14731460        width: 50%;
    14741461}
    14751462
     1463.wp-core-ui .show-image-details {
     1464        display: none;
     1465}
     1466
    14761467.attachment.selection.selected {
    14771468        -webkit-box-shadow: none;
    14781469        box-shadow: none;
     
    15331524        margin-top: 14px;
    15341525}
    15351526
    1536 /**
    1537  * Attachment Details
    1538  */
    1539 .attachment-details {
    1540         position: relative;
    1541         overflow: auto;
    1542 }
    1543 
    1544 .attachment-details .settings-save-status {
     1527.media-sidebar .settings-save-status {
     1528        background: #f5f5f5;
    15451529        float: right;
    15461530        text-transform: none;
    15471531        z-index: 10;
    15481532}
    15491533
    1550 .attachment-details .settings-save-status .spinner {
     1534.media-sidebar .settings-save-status .spinner {
    15511535        margin: 0 5px 0;
    15521536}
    15531537
    1554 .attachment-details .settings-save-status .saved {
     1538.media-sidebar .settings-save-status .saved {
    15551539        float: right;
    15561540        display: none;
    15571541}
    15581542
    1559 .attachment-details.save-waiting .settings-save-status .spinner,
    1560 .attachment-details.save-complete .settings-save-status .saved {
     1543.media-sidebar .save-waiting .settings-save-status .spinner,
     1544.media-sidebar .save-complete .settings-save-status .saved {
    15611545        display: block;
    15621546}
    15631547
     1548/**
     1549 * Attachment Details
     1550 */
     1551.attachment-details {
     1552        position: relative;
     1553        overflow: auto;
     1554}
     1555
    15641556.attachment-info {
    15651557        overflow: hidden;
    15661558        min-height: 60px;
     
    16521644        display: block;
    16531645}
    16541646
    1655 .media-modal .delete-attachment,
    1656 .media-modal .trash-attachment {
     1647.attachment-info .delete-attachment,
     1648.attachment-info .trash-attachment {
    16571649        color: #bc0b0b;
    16581650}
    16591651
    1660 .media-modal .delete-attachment:hover,
    1661 .media-modal .trash-attachment:hover {
     1652.attachment-info .delete-attachment:hover,
     1653.attachment-info .trash-attachment:hover {
    16621654        color: red;
    16631655}
    16641656
     
    22492241                padding: 3px 6px;
    22502242        }
    22512243
    2252         .media-frame-content .attachment .icon {
    2253                 top: 40%;
    2254         }
    2255 
    22562244        .image-details .media-modal {
    22572245                left: 30px;
    22582246                right: 30px;
     
    22842272                min-width: 120px;
    22852273        }
    22862274
    2287         .media-selection:after {
    2288                 background: none;
    2289         }
    2290 
     2275        .media-selection:after,
    22912276        .media-selection .attachments {
    22922277                display: none;
    22932278        }
     
    23132298        }
    23142299}
    23152300
     2301.switch-to-uploader,
     2302.wp-core-ui .back-to-library {
     2303        display: none;
     2304}
     2305
    23162306/* Responsive on portrait and landscape */
    23172307@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    23182308
    23192309        /* Media tabs on the top */
    2320         .media-frame-content .media-toolbar .instructions {
     2310        .media-frame-content .media-toolbar .instructions,
     2311        .media-frame-router,
     2312        .media-selection .selection-info {
    23212313                display: none;
    23222314        }
    23232315
     2316        .wp-core-ui .show-image-details {
     2317                display: inline-block;
     2318                margin-top: 14px;
     2319        }
     2320
    23242321        .media-frame-menu {
    2325                 width: auto;
    2326                 bottom: auto;
    2327                 right: 0;
    2328                 height: 60px;
     2322                top: 30px;
     2323                left: 0;
     2324                z-index: inherit;
    23292325        }
    23302326
    23312327        .media-menu {
    2332                 border-right: none;
     2328                z-index: inherit;
     2329                width: 200px;
    23332330                position: relative;
    2334                 border-bottom: 1px solid #dddddd;
    2335                 overflow: hidden;
    23362331                padding: 10px 0 10px 10px;
     2332                display: none;
     2333                border: 1px solid #ccc;
    23372334        }
    23382335
    2339         .media-menu a {
    2340                 float: left;
    2341                 width: 42%;
    2342                 white-space: nowrap;
    2343                 text-overflow: ellipsis;
    2344                 overflow: hidden;
     2336        .media-menu.visible {
     2337                z-index: 2000;
     2338                display: block;
     2339                position: fixed;
     2340                top: 0;
     2341                bottom: 0;
     2342                left: 0;
     2343                right: 0;
     2344                width: auto;
     2345                border: none;
     2346                padding: 10px 0;
     2347                overflow: auto;
     2348        }
     2349
     2350        .media-menu > a {
     2351                padding: 20px;
     2352                width: auto !important;
     2353                text-align: center;
     2354                font-size: 20px;
    23452355        }
    23462356
    23472357        .media-frame-title {
    2348                 display: none;
     2358                left: 0;
     2359        }
     2360
     2361        .media-frame-title h1 {
     2362                display: inline-block;
     2363                cursor: pointer;
     2364        }
     2365
     2366        .media-frame-title h1:after {
     2367                display: inline-block;
     2368                width: 54px;
     2369                height: 54px;
     2370                font: normal 20px/54px dashicons;
     2371                content: '\f140';
     2372                -webkit-font-smoothing: antialiased;
     2373                -moz-osx-font-smoothing: grayscale;
     2374                vertical-align: bottom;
     2375                z-index: 100;
    23492376        }
    23502377
    23512378        .image-details .media-frame-title {
     
    23592386                bottom: 0px;
    23602387                left: 0;
    23612388                right: 0;
    2362                 background: #FFF;
    2363                 border-top: 1px solid #DEDEDE;
     2389                background: #fff;
    23642390        }
    23652391
    23662392        .media-toolbar {
    23672393                position: relative;
    23682394        }
    23692395
     2396        .media-toolbar .spinner {
     2397                margin-right: 6px;
     2398        }
     2399
    23702400        .media-frame {
    23712401                overflow: hidden;
    23722402        }
    23732403
    23742404        .attachments-browser .attachments {
    2375                 top: 42px;
    2376         }
    2377 
    2378         .attachment-details h3 {
    2379                 margin-top: 45px;
     2405                right: 0;
    23802406        }
    23812407
    23822408        /* Shorten right-side links so they don't overlap the close button */
     
    23892415                display: none;
    23902416        }
    23912417
    2392         .media-frame-title {
     2418        .attachment-details {
     2419                padding: 0 20px;
     2420        }
     2421       
     2422        .attachment-display-settings {
     2423                padding: 0 20px 20px 20px;
     2424                width: -webkit-calc(100% - 40px);
     2425                width: calc(100% - 40px);
     2426        }
     2427
     2428        .attachment-info .thumbnail img {
     2429                max-width: 100%; /* Display the image bigger, since the screen's smaller. */
     2430                max-height: 50%;
     2431        }
     2432
     2433        .image-details .media-frame-title {
    23932434                top: 72px;
    2394                 left: auto;
    2395                 height: auto;
    23962435        }
    23972436
    23982437        .media-frame-title h1 {
     
    24002439                font-size: 18px;
    24012440        }
    24022441
    2403         .media-frame-router {
    2404                 top: 84px;
    2405                 left: 0;
    2406         }
    2407 
    24082442        .media-frame-content {
    24092443                left: 0;
    2410                 top: 118px;
     2444                top: 54px;
    24112445        }
    24122446
    24132447        .image-details .media-frame.hide-router .media-frame-content {
    24142448                top: 40px;
    24152449        }
    24162450
    2417         .media-frame .attachments-browser {
    2418                 padding-bottom: 300px;
     2451        .media-sidebar {
     2452                position: fixed;
     2453                top: 0;
     2454                right: -100%;
     2455                width: 100%;
     2456                padding: 0;
     2457                margin: 0 0 62px 0;
     2458                z-index: 201;
    24192459        }
    24202460
    2421         .media-sidebar {
    2422                 border-bottom: 1px solid #dddddd;
     2461        .media-sidebar.active {
     2462                right: 0;
    24232463        }
    24242464
    24252465        .media-modal {
    24262466                width: auto;
    24272467        }
    24282468
    2429         .media-toolbar-primary, .media-toolbar-secondary {
     2469        .media-toolbar-primary,
     2470        .media-toolbar-secondary {
    24302471                height: auto;
    24312472        }
    24322473
     2474        .attachments-browser .media-toolbar-primary,
     2475        .attachments-browser .media-toolbar-secondary {
     2476                width: 50%;
     2477        }
     2478
     2479        .media-frame .media-frame-content .media-toolbar .search,
     2480        .media-frame .media-frame-content .media-toolbar .attachment-filters {
     2481                max-width: 200px;
     2482                width: -webkit-calc(100% - 16px);
     2483                width: calc(100% - 16px);
     2484                margin: 11px 0 0 0;
     2485                height: 28px;
     2486        }
     2487
     2488        .media-frame .media-frame-content .media-toolbar .search {
     2489                float: right;
     2490        }
     2491
    24332492        .uploader-inline h3 {
    24342493                margin: 0 0 .8em 0;
    24352494        }
     
    24422501                margin: 0;
    24432502        }
    24442503
    2445         .attachments-browser .attachments, .attachments-browser .uploader-inline {
    2446                 position: relative;
    2447                 margin-right: 180px;
    2448         }
    2449 
    24502504        /* Full-bleed modal */
    24512505        .media-modal,
    24522506        .image-details .media-modal {
     
    24662520                max-width: 100%;
    24672521        }
    24682522
    2469         .attachments-browser .media-toolbar-primary input.search {
    2470                 max-width: 150px;
    2471         }
    2472 
    24732523        .uploader-inline-content {
    24742524                position: relative;
    24752525        }
     
    25052555                margin-top: 45px;
    25062556        }
    25072557
    2508 }
     2558        /* Edit-selection mode */
     2559        .close.media-modal-icon {
     2560                display: block;
     2561                height: 100%;
     2562                width: 100%;
     2563                margin: 0;
     2564                padding: 0;
     2565                position: absolute;
     2566                top: 0;
     2567                right: 0;
     2568                border: none;
     2569                -webkit-box-shadow: none;
     2570                box-shadow: none;
     2571                background: transparent;
     2572        }
    25092573
    2510 /* Landscape specific header override */
    2511 @media screen and (max-height: 400px) {
    2512         .media-menu {
    2513                 padding: 0 0 0 10px;
     2574        .close.media-modal-icon:before {
     2575                font: normal 60px/1 dashicons;
     2576                content: "\f335";
     2577                position: absolute;
     2578                top: 50%;
     2579                left: 50%;
     2580                margin: -30px;
     2581                color: #000;
     2582                text-shadow: 0px 0px 5px #fff;
    25142583        }
    25152584
    2516         .media-menu a {
    2517                 float: left;
    2518                 width: 21%;
    2519                 white-space: nowrap;
    2520                 text-overflow: ellipsis;
    2521                 overflow: hidden;
    2522                 padding: 10px inherit;
     2585        .close.media-modal-icon:hover:before {
     2586                color: #1e8cbe;
     2587                text-shadow: 0px 0px 5px #000;
    25232588        }
    25242589
    2525         .media-menu a:nth-child(2),
    2526         .media-menu a:last-child {
    2527                 width: 21%;
     2590        .switch-to-uploader {
     2591                display: list-item;
     2592                float: none;
     2593                top: 0;
     2594        }
     2595
     2596        .switch-to-uploader .thumbnail {
     2597                border: 5px dashed #ddd;
     2598                -webkit-box-shadow: none;
     2599                box-shadow: none;
     2600                background: none;
    25282601        }
    25292602
     2603        .switch-to-uploader .thumbnail:after {
     2604                -webkit-box-shadow: none;
     2605                box-shadow: none;
     2606        }
     2607
     2608        .switch-to-uploader .thumbnail:before {
     2609                display: block;
     2610                height: 40px;
     2611                color: #ccc;
     2612                font: normal 40px/1 dashicons;
     2613                content: '\f132';
     2614                -webkit-font-smoothing: antialiased;
     2615                -moz-osx-font-smoothing: grayscale;
     2616                position: absolute;
     2617                padding-top: 50%;
     2618                top: -20px;
     2619                right: 0;
     2620                left: 0;
     2621        }
     2622
     2623        .wp-core-ui .back-to-library {
     2624                display: inline-block;
     2625        }
     2626}
     2627
     2628/* Landscape specific header override */
     2629@media screen and (max-height: 400px) {
    25302630        .media-modal-close {
    25312631                top: 2px;
    25322632        }
     
    25362636        }
    25372637
    25382638        .media-frame-content {
    2539                 top: 78px;
    2540         }
    2541 
    2542         .attachments-browser .attachments {
    2543                 top: 2px;
     2639                top: 54px;
    25442640        }
    25452641
    25462642        /* Prevent unnecessary scrolling on title input */
     
    25722668
    25732669        .media-frame .spinner {
    25742670                background-image: url(../images/spinner-2x.gif);
    2575         }
     2671        }
    25762672}
    25772673
     2674.attachments-browser .attachment {
     2675        position: relative;
     2676        width: 33.3%;
     2677        margin: 0;
     2678}
     2679
     2680.attachments-browser .attachment .attachment-preview {
     2681        position: relative;
     2682}
     2683
     2684.attachments-browser .attachment .attachment-preview:before {
     2685        content: '';
     2686        display: block;
     2687        padding-top: 100%;
     2688}
     2689
     2690.attachments-browser .attachment .attachment-preview .thumbnail {
     2691        position: absolute;
     2692        top: 8px;
     2693        right: 8px;
     2694        bottom: 8px;
     2695        left: 8px;
     2696}
     2697
     2698.attachments-browser .portrait img {
     2699        max-width: 100%;
     2700}
     2701
     2702.attachments-browser .landscape img {
     2703        max-height: 100%;
     2704}
     2705
     2706.media-selection .attachments {
     2707        padding: 5px;
     2708}
     2709
     2710.media-selection .attachment {
     2711        margin: 5px;
     2712        width: 40px;
     2713}
     2714
     2715.media-selection .attachment-preview,
     2716.media-selection .attachment-preview .thumbnail {
     2717        width: 40px;
     2718        height: 40px;
     2719}
     2720
     2721.media-selection .portrait .thumbnail img {
     2722        max-width: 40px;
     2723        height: auto;
     2724}
     2725
     2726.media-selection .landscape .thumbnail img {
     2727        width: auto;
     2728        max-height: 40px;
     2729}
     2730
     2731@media only screen and ( max-width: 520px ) {
     2732        .attachments-browser .attachment:first-of-type {
     2733                margin-left: 33.3%;
     2734        }
     2735}
     2736
     2737@media only screen and ( min-width: 520px ) and ( max-width: 640px ) {
     2738        .attachments-browser .attachment {
     2739                width: 25%;
     2740        }
     2741       
     2742        .attachments-browser .attachment:first-of-type {
     2743                margin-left: 25%;
     2744        }
     2745}
     2746
     2747.media-grid-view .attachments-browser .attachment:first-of-type {
     2748        margin-left: 0;
     2749}
     2750
     2751@media only screen and ( min-width: 640px ) {
     2752        .attachments-browser .attachment {
     2753                width: 33.3%;
     2754        }
     2755}
     2756
     2757@media only screen and ( min-width: 960px ) {
     2758        .attachments-browser .attachment {
     2759                width: 25%;
     2760        }
     2761}
     2762
     2763@media only screen and ( min-width: 1200px ) {
     2764        .attachments-browser .attachment {
     2765                width: 20%;
     2766        }
     2767}
    25782768
    25792769/**
    25802770 * Media Grid
     
    25872777}
    25882778
    25892779/* Regions we don't use at all */
     2780.media-grid-view .switch-to-uploader,
    25902781.media-grid-view .media-frame-title,
    25912782.media-grid-view .media-frame-toolbar,
    25922783.media-grid-view .media-frame-menu {
  • 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 h1': 'toggleMenu'
     1752                },
     1753
    17501754                /**
    17511755                 * @global wp.Uploader
    17521756                 */
     
    18401844                                controller: this
    18411845                        });
    18421846                },
     1847
     1848                toggleMenu: function( event ) {
     1849                        event.preventDefault();
     1850                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1851
     1852                },
    18431853                /**
    18441854                 * @param {Object} toolbar
    18451855                 * @this wp.media.controller.Region
     
    32213231                                };
    32223232                        }
    32233233
     3234                        $( 'body' ).addClass( 'modal-open' );
     3235
    32243236                        $el.show().focus();
    32253237                        return this.propagate('open');
    32263238                },
     
    32363248                                return this;
    32373249                        }
    32383250
     3251                        $( 'body' ).removeClass( 'modal-open' );
     3252
    32393253                        // Hide modal and remove restricted media modal tab focus once it's closed
    32403254                        this.$el.hide().undelegate( 'keydown' );
    32413255
     
    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        /**
     
    44084426
    44094427                click: function() {
    44104428                        var state = this.options.state;
     4429
    44114430                        if ( state ) {
    44124431                                this.controller.setState( state );
    44134432                        }
     
    44434462                property:  'state',
    44444463                ItemView:  media.view.MenuItem,
    44454464                region:    'menu',
     4465
     4466                events: {
     4467                        'click': '_hide'
     4468                },
     4469
     4470                initialize: function( options ) {
     4471                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4472                        this.controller = options.controller;
     4473                        this.listenTo( this.controller, 'deactivate', function() {
     4474                                this.$el.removeClass( 'visible' );
     4475                        } );
     4476                },
     4477
    44464478                /**
    44474479                 * @param {Object} options
    44484480                 * @param {string} id
     
    45244556                        }
    45254557
    45264558                        view.$el.removeClass('hidden');
     4559                },
     4560
     4561                _hide: function() {
     4562                        this.$el.removeClass( 'visible' );
    45274563                }
    45284564        });
    45294565
     
    46064642                tagName:   'li',
    46074643                className: 'attachment',
    46084644                template:  media.template('attachment'),
     4645                isTouch: false,
    46094646
    46104647                attributes: {
    46114648                        tabIndex: 0,
     
    46144651
    46154652                events: {
    46164653                        'click .js--select-attachment':   'toggleSelectionHandler',
     4654                        'touchend .attachment-preview':   'setTouch',
    46174655                        'change [data-setting]':          'updateSetting',
    46184656                        'change [data-setting] input':    'updateSetting',
    46194657                        'change [data-setting] select':   'updateSetting',
     
    47304768                                this.$bar.width( this.model.get('percent') + '%' );
    47314769                        }
    47324770                },
     4771
     4772                setTouch: function() {
     4773                        this.isTouch = true;
     4774                },
     4775
    47334776                /**
    47344777                 * @param {Object} event
    47354778                 */
     
    47524795                                method = 'toggle';
    47534796                        }
    47544797
     4798                        if ( this.isTouch ) {
     4799                                this.isTouch = false;
     4800                                method = 'add';
     4801                        }
     4802
    47554803                        this.toggleSelection({
    47564804                                method: method
    47574805                        });
     
    48004848                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014849                                selection.single( model );
    48024850                                return;
     4851                        } else if ( 'add' === method ) {
     4852                                selection.add( model );
     4853                                selection.single( model );
     4854                                return;
     4855
    48034856                        }
    48044857
    48054858                        // Fixes bug that loses focus when selecting a featured image
     
    51105163                        tabIndex: -1
    51115164                },
    51125165
    5113                 cssTemplate: media.template('attachments-css'),
    5114 
    51155166                events: {
    5116                         'scroll': 'scroll'
     5167                        'scroll': 'scroll',
     5168                        'click .switch-to-uploader': 'upload'
    51175169                },
    51185170
    51195171                initialize: function() {
     
    51235175                                refreshSensitivity: 200,
    51245176                                refreshThreshold:   3,
    51255177                                AttachmentView:     media.view.Attachment,
    5126                                 sortable:           false,
    5127                                 resize:             true
     5178                                sortable:           false
    51285179                        });
    51295180
    51305181                        this._viewsByCid = {};
     
    51505201                        this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
    51515202
    51525203                        this.initSortable();
    5153 
    5154                         _.bindAll( this, 'css' );
    5155                         this.model.on( 'change:edge change:gutter', this.css, this );
    5156                         this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
    5157                         if ( this.options.resize ) {
    5158                                 $(window).on( 'resize.attachments', this._resizeCss );
    5159                         }
    5160 
    5161                         // Call this.css() after this view has been rendered in the DOM so
    5162                         // attachments get proper width applied.
    5163                         _.defer( this.css, this );
    51645204                },
    51655205
    51665206                dispose: function() {
    51675207                        this.collection.props.off( null, null, this );
    5168                         $(window).off( 'resize.attachments', this._resizeCss );
     5208
    51695209                        /**
    51705210                         * call 'dispose' directly on the parent class
    51715211                         */
    51725212                        media.View.prototype.dispose.apply( this, arguments );
    51735213                },
    51745214
    5175                 css: function() {
    5176                         var $css = $( '#' + this.el.id + '-css' );
    5177 
    5178                         if ( $css.length ) {
    5179                                 $css.remove();
    5180                         }
    5181 
    5182                         media.view.Attachments.$head().append( this.cssTemplate({
    5183                                 id:     this.el.id,
    5184                                 edge:   this.edge(),
    5185                                 gutter: this.model.get('gutter')
    5186                         }) );
    5187                 },
    5188                 /**
    5189                  * @returns {Number}
    5190                  */
    5191                 edge: function() {
    5192                         var edge = this.model.get('edge'),
    5193                                 gutter, width, columns;
    5194 
    5195                         if ( ! this.$el.is(':visible') ) {
    5196                                 return edge;
    5197                         }
    5198 
    5199                         gutter  = this.model.get('gutter') * 2;
    5200                         width   = this.$el.width() - gutter;
    5201                         columns = Math.ceil( width / ( edge + gutter ) );
    5202                         edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
    5203                         return edge;
    5204                 },
    5205 
    52065215                initSortable: function() {
    52075216                        var collection = this.collection;
    52085217
     
    53135322                        // Trigger the scroll event to check if we're within the
    53145323                        // threshold to query for additional attachments.
    53155324                        this.scroll();
     5325
     5326                        if ( ! this.$( '.switch-to-uploader' ).length ) {
     5327                                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>' );
     5328                        }
    53165329                },
    53175330
    53185331                scroll: function() {
     
    53365349                                        toolbar.get('spinner').hide();
    53375350                                });
    53385351                        }
     5352                },
     5353
     5354                upload: function( event ) {
     5355                        event.preventDefault();
     5356                        this.controller.content.mode( 'upload' );
    53395357                }
    5340         }, {
    5341                 $head: (function() {
    5342                         var $head;
    5343                         return function() {
    5344                                 return $head = $head || $('head');
    5345                         };
    5346                 }())
    53475358        });
    53485359
    53495360        /**
     
    57755786                        this.attachmentsNoResults.$el.html( l10n.noMedia );
    57765787
    57775788                        this.views.add( this.attachmentsNoResults );
    5778 
    5779 
    57805789                },
    57815790
    57825791                createSidebar: function() {
     
    58535862
    58545863                events: {
    58555864                        'click .edit-selection':  'edit',
    5856                         'click .clear-selection': 'clear'
     5865                        'click .clear-selection': 'clear',
     5866                        'click .show-image-details': 'show'
    58575867                },
    58585868
    58595869                initialize: function() {
     
    59175927                        new media.view.FocusManager({
    59185928                                el: this.el
    59195929                        }).focus();
     5930                },
     5931
     5932                show: function( event ) {
     5933                        event.preventDefault();
     5934                        this.$el.parents( '.media-frame' ).find( '.media-sidebar' ).add( $( event.target ) ).toggleClass( 'active' );
    59205935                }
    59215936        });
    59225937
  • 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">