Ticket #27423: 27423.14.patch
File 27423.14.patch, 23.0 KB (added by , 11 years ago) |
---|
-
src/wp-includes/css/media-views.css
89 89 display: none; 90 90 } 91 91 92 body.modal-open { 93 overflow: hidden; 94 } 95 92 96 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ 93 97 .ui-sortable, 94 98 .ui-draggable { … … 145 149 right: 10px; 146 150 width: 30px; 147 151 height: 30px; 148 z-index: 1000;152 z-index: 200; 149 153 } 150 154 151 155 .media-modal-close span.media-modal-icon { … … 535 539 left: 200px; 536 540 right: 0; 537 541 height: 56px; 538 z-index: 200;542 z-index: 199; 539 543 } 540 544 541 545 .media-frame-router { … … 683 687 */ 684 688 .attachments { 685 689 margin: 0; 686 padding -right: 16px;690 padding: 8px; 687 691 -webkit-overflow-scrolling: touch; 688 692 } 689 693 … … 705 709 } 706 710 707 711 .attachment:focus { 712 outline: none; 713 } 714 715 .attachment:focus .thumbnail { 708 716 -webkit-box-shadow: 709 717 0 0 0 1px #5b9dd9, 710 718 0 0 2px 2px #5b9dd9; 711 719 box-shadow: 712 720 0 0 0 1px #5b9dd9, 713 721 0 0 2px 2px #5b9dd9; 714 outline: none;715 722 } 716 723 717 .selected.attachment {724 .selected.attachment .thumbnail { 718 725 -webkit-box-shadow: 719 726 0 0 0 1px #fff, 720 727 0 0 0 3px #ccc; … … 730 737 0 0 0 5px #1e8cbe; 731 738 } 732 739 733 . attachment-preview{740 .thumbnail { 734 741 position: relative; 735 width: 199px;736 height: 199px;737 742 -webkit-box-shadow: 738 743 inset 0 0 15px rgba( 0, 0, 0, 0.1 ), 739 744 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); … … 747 752 .attachment .icon { 748 753 margin: 0 auto; 749 754 overflow: hidden; 750 padding-top: 20%;751 755 } 752 756 753 757 .attachment .thumbnail { … … 769 773 max-height: 98%; 770 774 } 771 775 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 783 776 .attachment-preview.type-audio .filename, 784 777 .attachment-preview.type-video .filename { 785 778 z-index: 3; … … 842 835 padding: 5px 10px; 843 836 } 844 837 845 .attachment-preview .thumbnail {846 width: 199px;847 height: 199px;848 }849 850 838 .attachment .thumbnail img { 851 839 position: absolute; 852 840 } … … 888 876 width: 24px; 889 877 position: absolute; 890 878 z-index: 10; 891 top: -6px;892 right: -6px;879 top: 0; 880 right: 0; 893 881 outline: none; 894 882 background: #eee; 895 883 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 ); … … 911 899 display: block; 912 900 } 913 901 914 .attachment.details ,915 .media-grid-view .selected .attachment{902 .attachment.details .thumbnail, 903 .media-grid-view .selected .thumbnail { 916 904 -webkit-box-shadow: 0 0 0 1px #fff, 917 905 0 0 0 5px #1e8cbe; 918 906 box-shadow: 0 0 0 1px #fff, … … 1473 1461 .media-selection .attachments { 1474 1462 display: inline-block; 1475 1463 height: 48px; 1476 margin-top: 5px;1477 1464 overflow: hidden; 1478 1465 vertical-align: top; 1479 1466 } … … 1482 1469 width: 50%; 1483 1470 } 1484 1471 1472 .wp-core-ui .show-image-details { 1473 display: none; 1474 } 1475 1485 1476 .attachment.selection.selected { 1486 1477 -webkit-box-shadow: none; 1487 1478 box-shadow: none; … … 1550 1541 margin-top: 14px; 1551 1542 } 1552 1543 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; 1562 1546 float: right; 1563 1547 text-transform: none; 1564 1548 z-index: 10; 1565 1549 } 1566 1550 1567 . attachment-details.settings-save-status .spinner {1551 .media-sidebar .settings-save-status .spinner { 1568 1552 margin: 0 5px 0; 1569 1553 } 1570 1554 1571 . attachment-details.settings-save-status .saved {1555 .media-sidebar .settings-save-status .saved { 1572 1556 float: right; 1573 1557 display: none; 1574 1558 } 1575 1559 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 { 1578 1562 display: block; 1579 1563 } 1580 1564 1565 /** 1566 * Attachment Details 1567 */ 1568 .attachment-details { 1569 position: relative; 1570 overflow: auto; 1571 } 1572 1581 1573 .attachment-info { 1582 1574 overflow: hidden; 1583 1575 min-height: 60px; … … 1669 1661 display: block; 1670 1662 } 1671 1663 1672 . media-modal.delete-attachment,1673 . media-modal.trash-attachment {1664 .attachment-info .delete-attachment, 1665 .attachment-info .trash-attachment { 1674 1666 color: #bc0b0b; 1675 1667 } 1676 1668 1677 . media-modal.delete-attachment:hover,1678 . media-modal.trash-attachment:hover {1669 .attachment-info .delete-attachment:hover, 1670 .attachment-info .trash-attachment:hover { 1679 1671 color: red; 1680 1672 } 1681 1673 … … 2266 2258 padding: 3px 6px; 2267 2259 } 2268 2260 2269 .media-frame-content .attachment .icon {2270 top: 40%;2271 }2272 2273 2261 .image-details .media-modal { 2274 2262 left: 30px; 2275 2263 right: 30px; … … 2301 2289 min-width: 120px; 2302 2290 } 2303 2291 2304 .media-selection:after { 2305 background: none; 2306 } 2307 2292 .media-selection:after, 2308 2293 .media-selection .attachments { 2309 2294 display: none; 2310 2295 } … … 2330 2315 } 2331 2316 } 2332 2317 2318 .switch-to-uploader, 2319 .wp-core-ui .back-to-library { 2320 display: none; 2321 } 2322 2333 2323 /* Responsive on portrait and landscape */ 2334 2324 @media only screen and (max-width: 640px), screen and (max-height: 400px) { 2335 2325 2336 2326 /* 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 { 2338 2330 display: none; 2339 2331 } 2340 2332 2333 .wp-core-ui .show-image-details { 2334 display: inline-block; 2335 margin-top: 14px; 2336 } 2337 2341 2338 .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; 2346 2342 } 2347 2343 2348 2344 .media-menu { 2349 border-right: none; 2345 z-index: inherit; 2346 width: 200px; 2350 2347 position: relative; 2351 border-bottom: 1px solid #dddddd;2352 overflow: hidden;2353 2348 padding: 10px 0 10px 10px; 2349 display: none; 2350 border: 1px solid #ccc; 2354 2351 } 2355 2352 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; 2362 2372 } 2363 2373 2364 2374 .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; 2366 2393 } 2367 2394 2368 2395 .image-details .media-frame-title { … … 2376 2403 bottom: 0px; 2377 2404 left: 0; 2378 2405 right: 0; 2379 background: #FFF; 2380 border-top: 1px solid #DEDEDE; 2406 background: #fff; 2381 2407 } 2382 2408 2383 2409 .media-toolbar { 2384 2410 position: relative; 2385 2411 } 2386 2412 2413 .media-toolbar .spinner { 2414 margin-right: 6px; 2415 } 2416 2387 2417 .media-frame { 2388 2418 overflow: hidden; 2389 2419 } 2390 2420 2391 2421 .attachments-browser .attachments { 2392 top: 42px; 2393 } 2394 2395 .attachment-details h3 { 2396 margin-top: 45px; 2422 right: 0; 2397 2423 } 2398 2424 2399 2425 /* Shorten right-side links so they don't overlap the close button */ … … 2406 2432 display: none; 2407 2433 } 2408 2434 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 { 2410 2451 top: 72px; 2411 left: auto;2412 height: auto;2413 2452 } 2414 2453 2415 2454 .media-frame-title h1 { … … 2417 2456 font-size: 18px; 2418 2457 } 2419 2458 2420 .media-frame-router {2421 top: 84px;2422 left: 0;2423 }2424 2425 2459 .media-frame-content { 2426 2460 left: 0; 2427 top: 118px;2461 top: 54px; 2428 2462 } 2429 2463 2430 2464 .image-details .media-frame.hide-router .media-frame-content { 2431 2465 top: 40px; 2432 2466 } 2433 2467 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; 2436 2476 } 2437 2477 2438 .media-sidebar {2439 border-bottom: 1px solid #dddddd;2478 .media-sidebar.active { 2479 right: 0; 2440 2480 } 2441 2481 2442 2482 .media-modal { 2443 2483 width: auto; 2444 2484 } 2445 2485 2446 .media-toolbar-primary, .media-toolbar-secondary { 2486 .media-toolbar-primary, 2487 .media-toolbar-secondary { 2447 2488 height: auto; 2448 2489 } 2449 2490 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 2450 2509 .uploader-inline h3 { 2451 2510 margin: 0 0 .8em 0; 2452 2511 } … … 2459 2518 margin: 0; 2460 2519 } 2461 2520 2462 .attachments-browser .attachments, .attachments-browser .uploader-inline {2463 position: relative;2464 margin-right: 180px;2465 }2466 2467 2521 /* Full-bleed modal */ 2468 2522 .media-modal, 2469 2523 .image-details .media-modal { … … 2483 2537 max-width: 100%; 2484 2538 } 2485 2539 2486 .attachments-browser .media-toolbar-primary input.search {2487 max-width: 150px;2488 }2489 2490 2540 .uploader-inline-content { 2491 2541 position: relative; 2492 2542 } … … 2522 2572 margin-top: 45px; 2523 2573 } 2524 2574 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 } 2526 2590 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; 2531 2600 } 2532 2601 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; 2540 2605 } 2541 2606 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; 2545 2618 } 2546 2619 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) { 2547 2647 .media-modal-close { 2548 2648 top: 2px; 2549 2649 } … … 2553 2653 } 2554 2654 2555 2655 .media-frame-content { 2556 top: 78px; 2557 } 2558 2559 .attachments-browser .attachments { 2560 top: 2px; 2656 top: 54px; 2561 2657 } 2562 2658 2563 2659 /* Prevent unnecessary scrolling on title input */ … … 2589 2685 2590 2686 .media-frame .spinner { 2591 2687 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; 2593 2746 } 2594 2747 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 } 2595 2785 2596 2786 /** 2597 2787 * Media Grid … … 2604 2794 } 2605 2795 2606 2796 /* Regions we don't use at all */ 2797 .media-grid-view .switch-to-uploader, 2607 2798 .media-grid-view .media-frame-title, 2608 2799 .media-grid-view .media-frame-toolbar, 2609 2800 .media-grid-view .media-frame-menu { -
src/wp-includes/js/media-views.js
1750 1750 template: media.template('media-frame'), 1751 1751 regions: ['menu','title','content','toolbar','router'], 1752 1752 1753 events: { 1754 'click h1': 'toggleMenu' 1755 }, 1756 1753 1757 /** 1754 1758 * @global wp.Uploader 1755 1759 */ … … 1843 1847 controller: this 1844 1848 }); 1845 1849 }, 1850 1851 toggleMenu: function( event ) { 1852 event.preventDefault(); 1853 this.$el.find( '.media-menu' ).toggleClass( 'visible' ); 1854 1855 }, 1846 1856 /** 1847 1857 * @param {Object} toolbar 1848 1858 * @this wp.media.controller.Region … … 3224 3234 }; 3225 3235 } 3226 3236 3237 $( 'body' ).addClass( 'modal-open' ); 3238 3227 3239 $el.show().find( '.media-modal-close' ).focus(); 3228 3240 return this.propagate('open'); 3229 3241 }, … … 3239 3251 return this; 3240 3252 } 3241 3253 3254 $( 'body' ).removeClass( 'modal-open' ); 3255 3242 3256 // Hide modal and remove restricted media modal tab focus once it's closed 3243 3257 this.$el.hide().undelegate( 'keydown' ); 3244 3258 … … 3655 3669 template: media.template('uploader-inline'), 3656 3670 3657 3671 events: { 3658 'click .close': 'hide' 3672 'click .close': 'hide', 3673 'click .back-to-library': 'back' 3659 3674 }, 3660 3675 3661 3676 initialize: function() { … … 3758 3773 }, 3759 3774 hide: function() { 3760 3775 this.$el.addClass( 'hidden' ); 3776 }, 3777 back: function( event ) { 3778 event.preventDefault(); 3779 this.controller.content.mode( 'browse' ); 3761 3780 } 3762 3763 3781 }); 3764 3782 3765 3783 /** … … 4412 4430 4413 4431 click: function() { 4414 4432 var state = this.options.state; 4433 4415 4434 if ( state ) { 4416 4435 this.controller.setState( state ); 4417 4436 } … … 4447 4466 property: 'state', 4448 4467 ItemView: media.view.MenuItem, 4449 4468 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 4450 4482 /** 4451 4483 * @param {Object} options 4452 4484 * @param {string} id … … 4528 4560 } 4529 4561 4530 4562 view.$el.removeClass('hidden'); 4563 }, 4564 4565 _hide: function() { 4566 this.$el.removeClass( 'visible' ); 4531 4567 } 4532 4568 }); 4533 4569 … … 4610 4646 tagName: 'li', 4611 4647 className: 'attachment', 4612 4648 template: media.template('attachment'), 4649 isTouch: false, 4613 4650 4614 4651 attributes: { 4615 4652 tabIndex: 0, … … 4618 4655 4619 4656 events: { 4620 4657 'click .js--select-attachment': 'toggleSelectionHandler', 4658 'touchend .attachment-preview': 'setTouch', 4621 4659 'change [data-setting]': 'updateSetting', 4622 4660 'change [data-setting] input': 'updateSetting', 4623 4661 'change [data-setting] select': 'updateSetting', … … 4734 4772 this.$bar.width( this.model.get('percent') + '%' ); 4735 4773 } 4736 4774 }, 4775 4776 setTouch: function() { 4777 this.isTouch = true; 4778 }, 4779 4737 4780 /** 4738 4781 * @param {Object} event 4739 4782 */ … … 4763 4806 method = 'toggle'; 4764 4807 } 4765 4808 4809 if ( this.isTouch ) { 4810 this.isTouch = false; 4811 method = 'add'; 4812 } 4813 4766 4814 this.toggleSelection({ 4767 4815 method: method 4768 4816 }); … … 4827 4875 4828 4876 if ( ! selection ) { 4829 4877 return; 4878 } else if ( 'add' === method ) { 4879 selection.add( model ); 4880 selection.single( model ); 4881 return; 4882 4830 4883 } 4831 4884 4832 4885 single = selection.single(); … … 5186 5239 tabIndex: -1 5187 5240 }, 5188 5241 5189 cssTemplate: media.template('attachments-css'),5190 5191 5242 events: { 5192 'scroll': 'scroll' 5243 'scroll': 'scroll', 5244 'click .switch-to-uploader': 'upload' 5193 5245 }, 5194 5246 5195 5247 initialize: function() { … … 5199 5251 refreshSensitivity: 200, 5200 5252 refreshThreshold: 3, 5201 5253 AttachmentView: media.view.Attachment, 5202 sortable: false, 5203 resize: true 5254 sortable: false 5204 5255 }); 5205 5256 5206 5257 this._viewsByCid = {}; … … 5226 5277 this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); 5227 5278 5228 5279 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 so5238 // attachments get proper width applied.5239 _.defer( this.css, this );5240 5280 }, 5241 5281 5242 5282 dispose: function() { 5243 5283 this.collection.props.off( null, null, this ); 5244 $(window).off( 'resize.attachments', this._resizeCss ); 5284 5245 5285 /** 5246 5286 * call 'dispose' directly on the parent class 5247 5287 */ 5248 5288 media.View.prototype.dispose.apply( this, arguments ); 5249 5289 }, 5250 5290 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 5282 5291 initSortable: function() { 5283 5292 var collection = this.collection; 5284 5293 … … 5389 5398 // Trigger the scroll event to check if we're within the 5390 5399 // threshold to query for additional attachments. 5391 5400 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 } 5392 5405 }, 5393 5406 5394 5407 scroll: function() { … … 5412 5425 toolbar.get('spinner').hide(); 5413 5426 }); 5414 5427 } 5428 }, 5429 5430 upload: function( event ) { 5431 event.preventDefault(); 5432 this.controller.content.mode( 'upload' ); 5415 5433 } 5416 }, {5417 $head: (function() {5418 var $head;5419 return function() {5420 return $head = $head || $('head');5421 };5422 }())5423 5434 }); 5424 5435 5425 5436 /** … … 5851 5862 this.attachmentsNoResults.$el.html( l10n.noMedia ); 5852 5863 5853 5864 this.views.add( this.attachmentsNoResults ); 5854 5855 5856 5865 }, 5857 5866 5858 5867 createSidebar: function() { … … 5929 5938 5930 5939 events: { 5931 5940 'click .edit-selection': 'edit', 5932 'click .clear-selection': 'clear' 5941 'click .clear-selection': 'clear', 5942 'click .show-image-details': 'show' 5933 5943 }, 5934 5944 5935 5945 initialize: function() { … … 5993 6003 new media.view.FocusManager({ 5994 6004 el: this.el 5995 6005 }).focus(); 6006 }, 6007 6008 show: function( event ) { 6009 event.preventDefault(); 6010 this.$el.parents( '.media-frame' ).find( '.media-sidebar' ).add( $( event.target ) ).toggleClass( 'active' ); 5996 6011 } 5997 6012 }); 5998 6013 -
src/wp-includes/media-template.php
219 219 /** This action is documented in wp-admin/includes/media.php */ 220 220 do_action( 'post-upload-ui' ); ?> 221 221 </div> 222 <a href="#" class="button back-to-library"><?php _e( 'Back' ); ?></a> 222 223 <?php endif; ?> 223 224 </div> 224 225 </script> … … 398 399 399 400 <script type="text/html" id="tmpl-attachment"> 400 401 <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 ) { #> 405 406 <div class="centered"> 406 407 <img src="{{ data.size.url }}" draggable="false" alt="" /> 407 408 </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> 419 422 <# if ( data.buttons.close ) { #> 420 423 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a> 421 424 <# } #> … … 589 592 <# } #> 590 593 </div> 591 594 <div class="selection-view"></div> 595 <a href="#" class="button show-image-details">Edit</a> 592 596 </script> 593 597 594 598 <script type="text/html" id="tmpl-attachment-display-settings"> … … 837 841 </div> 838 842 </script> 839 843 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 869 844 <script type="text/html" id="tmpl-image-details"> 870 845 <div class="media-embed"> 871 846 <div class="embed-media-settings">