Ticket #27423: 27423.8.patch
File 27423.8.patch, 11.7 KB (added by , 11 years ago) |
---|
-
src/wp-includes/css/media-views.css
529 529 z-index: 150; 530 530 } 531 531 532 .media-frame .media-frame-menu-toggle { 533 position: absolute; 534 top: 0; 535 left: 0; 536 z-index: 200; 537 display: none; 538 text-decoration: none; 539 font-size: 16px; 540 padding: 16px; 541 } 542 543 .media-frame .media-frame-menu-toggle:hover { 544 position: absolute; 545 } 546 532 547 .media-frame-title { 533 548 position: absolute; 534 549 top: 0; … … 683 698 */ 684 699 .attachments { 685 700 margin: 0; 686 padding -right: 16px;701 padding: 8px; 687 702 -webkit-overflow-scrolling: touch; 688 703 } 689 704 … … 705 720 } 706 721 707 722 .attachment:focus { 723 outline: none; 724 } 725 726 .attachment:focus .attachment-preview { 708 727 -webkit-box-shadow: 709 728 0 0 0 1px #5b9dd9, 710 729 0 0 2px 2px #5b9dd9; … … 711 730 box-shadow: 712 731 0 0 0 1px #5b9dd9, 713 732 0 0 2px 2px #5b9dd9; 714 outline: none;715 733 } 716 734 717 .selected.attachment {735 .selected.attachment .attachment-preview { 718 736 -webkit-box-shadow: 719 737 0 0 0 1px #fff, 720 738 0 0 0 3px #ccc; … … 725 743 726 744 .attachment-preview { 727 745 position: relative; 728 width: 199px;729 height: 199px;730 746 -webkit-box-shadow: 731 747 inset 0 0 15px rgba( 0, 0, 0, 0.1 ), 732 748 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); … … 904 920 display: block; 905 921 } 906 922 907 .attachment.details ,923 .attachment.details .attachment-preview, 908 924 .media-grid-view .selected.attachment { 909 925 -webkit-box-shadow: 0 0 0 1px #fff, 910 926 0 0 0 5px #1e8cbe; … … 1456 1472 .media-selection .attachments { 1457 1473 display: inline-block; 1458 1474 height: 48px; 1459 margin-top: 5px;1460 1475 overflow: hidden; 1461 1476 vertical-align: top; 1462 1477 } … … 2309 2324 @media only screen and (max-width: 640px), screen and (max-height: 400px) { 2310 2325 2311 2326 /* Media tabs on the top */ 2312 .media-frame-content .media-toolbar .instructions { 2327 .media-frame-content .media-toolbar .instructions, 2328 .media-frame-router { 2313 2329 display: none; 2314 2330 } 2315 2331 2316 2332 .media-frame-menu { 2317 width: auto; 2318 bottom: auto; 2319 right: 0; 2320 height: 60px; 2333 top: 30px; 2334 left: 0; 2335 z-index: inherit; 2321 2336 } 2322 2337 2338 .media-frame .media-frame-menu-toggle { 2339 display: block; 2340 font-size: 22px; 2341 font-weight: 600; 2342 color: #444; 2343 padding: 12px 16px; 2344 transition: color .1s ease-in; 2345 } 2346 2347 .media-frame .media-frame-menu-toggle:after { 2348 display: inline-block; 2349 width: 20px; 2350 height: 20px; 2351 font: normal 20px/1 dashicons; 2352 content: "\f140"; 2353 -webkit-font-smoothing: antialiased; 2354 -moz-osx-font-smoothing: grayscale; 2355 } 2356 2357 .media-frame .media-frame-menu-toggle:hover, 2358 .media-frame .media-frame-menu-toggle:focus { 2359 color: #2ea2cc; 2360 } 2361 2323 2362 .media-menu { 2324 border-right: none; 2363 z-index: inherit; 2364 width: 200px; 2325 2365 position: relative; 2326 border-bottom: 1px solid #dddddd;2327 overflow: hidden;2328 2366 padding: 10px 0 10px 10px; 2367 display: none; 2368 border: 1px solid #ccc; 2329 2369 } 2330 2370 2331 .media-menu a { 2332 float: left; 2333 width: 42%; 2334 white-space: nowrap; 2335 text-overflow: ellipsis; 2336 overflow: hidden; 2371 .media-menu.visible { 2372 z-index: 2000; 2373 display: block; 2374 position: fixed; 2375 top: 0; 2376 bottom: 0; 2377 left: 0; 2378 right: 0; 2379 width: auto; 2380 border: none; 2381 padding: 10px 0; 2337 2382 } 2338 2383 2384 .media-menu > a { 2385 padding: 20px; 2386 width: auto !important; 2387 text-align: center; 2388 font-size: 20px; 2389 } 2390 2339 2391 .media-frame-title { 2340 2392 display: none; 2341 2393 } … … 2346 2398 font-size: 14px; 2347 2399 } 2348 2400 2401 .image-details .media-frame-menu-toggle { 2402 display: none; 2403 } 2404 2349 2405 .media-frame-toolbar { 2350 2406 position: absolute; 2351 2407 bottom: 0px; 2352 2408 left: 0; 2353 2409 right: 0; 2354 background: #FFF; 2355 border-top: 1px solid #DEDEDE; 2410 background: #fff; 2356 2411 } 2357 2412 2358 2413 .media-toolbar { … … 2359 2414 position: relative; 2360 2415 } 2361 2416 2417 .media-toolbar .spinner { 2418 margin-right: 6px; 2419 } 2420 2362 2421 .media-frame { 2363 2422 overflow: hidden; 2364 2423 } 2365 2424 2366 . attachments-browser .attachments{2367 top: 42px;2425 .media-frame .attachments-browser { 2426 overflow: auto; 2368 2427 } 2369 2428 2370 .attachment-details h3 { 2371 margin-top: 45px; 2429 .attachments-browser .attachments { 2430 top: 0; 2431 right: 0; 2372 2432 } 2373 2433 2374 2434 /* Shorten right-side links so they don't overlap the close button */ … … 2381 2441 display: none; 2382 2442 } 2383 2443 2384 .media-frame-title { 2444 .attachment-details { 2445 padding: 0 20px; 2446 } 2447 2448 .attachment-display-settings { 2449 padding: 0 20px 20px 20px; 2450 width: -webkit-calc(100% - 40px); 2451 width: calc(100% - 40px); 2452 } 2453 2454 .attachment-info .thumbnail img { 2455 max-width: 100%; /* Display the image bigger, since the screen's smaller. */ 2456 max-height: 50%; 2457 } 2458 2459 .image-details .media-frame-title { 2385 2460 top: 72px; 2386 left: auto;2387 height: auto;2388 2461 } 2389 2462 2390 2463 .media-frame-title h1 { … … 2393 2466 } 2394 2467 2395 2468 .media-frame-router { 2396 top: 84px;2397 2469 left: 0; 2398 2470 } 2399 2471 2400 2472 .media-frame-content { 2401 2473 left: 0; 2402 top: 118px;2474 top: 48px; 2403 2475 } 2404 2476 2405 2477 .image-details .media-frame.hide-router .media-frame-content { … … 2406 2478 top: 40px; 2407 2479 } 2408 2480 2409 .media-frame .attachments-browser { 2410 padding-bottom: 300px; 2481 .media-sidebar { 2482 position: fixed; 2483 top: 0; 2484 right: -100%; 2485 width: 100%; 2486 padding: 0; 2487 margin: 0 0 62px 0; 2488 z-index: 201; 2489 transition: .18s right ease-in-out; 2411 2490 } 2412 2491 2413 .media-sidebar {2414 border-bottom: 1px solid #dddddd;2492 .media-sidebar.active { 2493 right: 0; 2415 2494 } 2416 2495 2417 2496 .media-modal { … … 2418 2497 width: auto; 2419 2498 } 2420 2499 2421 .media-toolbar-primary, .media-toolbar-secondary { 2500 .media-toolbar-primary, 2501 .media-toolbar-secondary { 2422 2502 height: auto; 2503 width: 50%; 2423 2504 } 2424 2505 2506 .media-frame .media-frame-content .media-toolbar .search, 2507 .media-frame .media-frame-content .media-toolbar .attachment-filters { 2508 max-width: 200px; 2509 width: -webkit-calc(100% - 32px); 2510 width: calc(100% - 32px); 2511 margin: 11px 0 0 0; 2512 height: 28px; 2513 } 2514 2425 2515 .uploader-inline h3 { 2426 2516 margin: 0 0 .8em 0; 2427 2517 } … … 2434 2524 margin: 0; 2435 2525 } 2436 2526 2437 .attachments-browser .attachments, .attachments-browser .uploader-inline { 2527 .attachments-browser .attachments, 2528 .attachments-browser .uploader-inline { 2438 2529 position: relative; 2439 margin-right: 180px;2530 margin-right: 0; 2440 2531 } 2441 2532 2442 2533 /* Full-bleed modal */ … … 2458 2549 max-width: 100%; 2459 2550 } 2460 2551 2461 .attachments-browser .media-toolbar-primary input.search {2462 max-width: 150px;2463 }2464 2465 2552 .uploader-inline-content { 2466 2553 position: relative; 2467 2554 } … … 2564 2651 2565 2652 .media-frame .spinner { 2566 2653 background-image: url(../images/spinner-2x.gif); 2567 2654 } 2568 2655 } 2569 2656 2657 .attachments-browser .attachment { 2658 position: relative; 2659 width: 20%; 2660 margin: 0; 2661 } 2570 2662 2663 .attachments-browser .attachment:before { 2664 content: ''; 2665 display: block; 2666 padding-top: 100%; 2667 } 2668 2669 .attachments-browser .attachment .attachment-preview { 2670 position: absolute; 2671 top: 8px; 2672 right: 8px; 2673 bottom: 8px; 2674 left: 8px; 2675 } 2676 2677 .attachments-browser .portrait img { 2678 max-width: 100%; 2679 } 2680 2681 .attachments-browser .landscape img { 2682 max-height: 100%; 2683 } 2684 2685 /**/ 2686 2687 .media-selection .attachments { 2688 padding: 5px; 2689 } 2690 2691 .media-selection .attachment { 2692 margin: 5px; 2693 width: 40px; 2694 } 2695 2696 .media-selection .attachment-preview, 2697 .media-selection .attachment-preview .thumbnail { 2698 width: 40px; 2699 height: 40px; 2700 } 2701 2702 .media-selection .portrait .thumbnail img { 2703 max-width: 40px; 2704 height: auto; 2705 } 2706 2707 .media-selection .landscape .thumbnail img { 2708 width: auto; 2709 max-height: 40px; 2710 } 2711 2712 @media only screen and ( max-width: 400px ) { 2713 .attachments-browser .attachment { 2714 width: 50%; 2715 } 2716 } 2717 2718 @media only screen and ( min-width: 400px ) { 2719 .attachments-browser .attachment { 2720 width: 33.3%; 2721 } 2722 } 2723 2724 @media only screen and ( min-width: 520px ) { 2725 .attachments-browser .attachment { 2726 width: 25%; 2727 } 2728 } 2729 2730 @media only screen and ( min-width: 640px ) { 2731 .attachments-browser .attachment { 2732 width: 33.3%; 2733 } 2734 } 2735 2736 @media only screen and ( min-width: 960px ) { 2737 .attachments-browser .attachment { 2738 width: 25%; 2739 } 2740 } 2741 2742 @media only screen and ( min-width: 1200px ) { 2743 .attachments-browser .attachment { 2744 width: 20%; 2745 } 2746 } 2747 2571 2748 /** 2572 2749 * Media Grid 2573 2750 */ -
src/wp-includes/js/media-views.js
1747 1747 template: media.template('media-frame'), 1748 1748 regions: ['menu','title','content','toolbar','router'], 1749 1749 1750 events: { 1751 'click a.media-frame-menu-toggle': 'toggleMenu' 1752 }, 1753 1750 1754 /** 1751 1755 * @global wp.Uploader 1752 1756 */ … … 1840 1844 controller: this 1841 1845 }); 1842 1846 }, 1847 1848 toggleMenu: function( event ) { 1849 console.log( 'clicked' ); 1850 event.preventDefault(); 1851 this.$el.find( '.media-menu' ).toggleClass( 'visible' ); 1852 1853 }, 1843 1854 /** 1844 1855 * @param {Object} toolbar 1845 1856 * @this wp.media.controller.Region … … 4429 4440 }); 4430 4441 4431 4442 /** 4432 4433 4434 4435 4436 4437 4438 4439 4443 * wp.media.view.Menu 4444 * 4445 * @constructor 4446 * @augments wp.media.view.PriorityList 4447 * @augments wp.media.View 4448 * @augments wp.Backbone.View 4449 * @augments Backbone.View 4450 */ 4440 4451 media.view.Menu = media.view.PriorityList.extend({ 4441 4452 tagName: 'div', 4442 4453 className: 'media-menu', … … 4443 4454 property: 'state', 4444 4455 ItemView: media.view.MenuItem, 4445 4456 region: 'menu', 4457 4458 initialize: function( options ) { 4459 media.view.PriorityList.prototype.initialize.apply( this, arguments ); 4460 this.controller = options.controller; 4461 this.listenTo( this.controller, 'deactivate', function() { 4462 this.$el.removeClass( 'visible' ); 4463 } ); 4464 }, 4465 4446 4466 /** 4447 4467 * @param {Object} options 4448 4468 * @param {string} id … … 4606 4626 tagName: 'li', 4607 4627 className: 'attachment', 4608 4628 template: media.template('attachment'), 4629 isTouch: false, 4609 4630 4610 4631 attributes: { 4611 4632 tabIndex: 0, … … 4614 4635 4615 4636 events: { 4616 4637 'click .js--select-attachment': 'toggleSelectionHandler', 4638 'touchend .attachment-preview': 'setTouch', 4617 4639 'change [data-setting]': 'updateSetting', 4618 4640 'change [data-setting] input': 'updateSetting', 4619 4641 'change [data-setting] select': 'updateSetting', … … 4730 4752 this.$bar.width( this.model.get('percent') + '%' ); 4731 4753 } 4732 4754 }, 4755 4756 setTouch: function() { 4757 this.isTouch = true; 4758 }, 4759 4733 4760 /** 4734 4761 * @param {Object} event 4735 4762 */ … … 4752 4779 method = 'toggle'; 4753 4780 } 4754 4781 4782 if ( this.isTouch ) { 4783 this.isTouch = false; 4784 method = 'add'; 4785 } 4786 4755 4787 this.toggleSelection({ 4756 4788 method: method 4757 4789 }); … … 4800 4832 selection[ this.selected() ? 'remove' : 'add' ]( model ); 4801 4833 selection.single( model ); 4802 4834 return; 4835 } else if ( 'add' === method ) { 4836 selection.add( model ); 4837 selection.single( model ); 4838 return; 4839 4803 4840 } 4804 4841 4805 4842 // Fixes bug that loses focus when selecting a featured image … … 5149 5186 5150 5187 this.initSortable(); 5151 5188 5152 _.bindAll( this, 'css' );5189 /*_.bindAll( this, 'css' ); 5153 5190 this.model.on( 'change:edge change:gutter', this.css, this ); 5154 5191 this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity ); 5155 5192 if ( this.options.resize ) { … … 5158 5195 5159 5196 // Call this.css() after this view has been rendered in the DOM so 5160 5197 // attachments get proper width applied. 5161 _.defer( this.css, this ); 5198 _.defer( this.css, this );*/ 5162 5199 }, 5163 5200 5164 5201 dispose: function() { -
src/wp-includes/media-template.php
130 130 </style> 131 131 <![endif]--> 132 132 <script type="text/html" id="tmpl-media-frame"> 133 <a class="media-frame-menu-toggle" href="#">Insert Media<!-- Change this dynamically. --></a> 133 134 <div class="media-frame-menu"></div> 134 135 <div class="media-frame-title"></div> 135 136 <div class="media-frame-router"></div>