Ticket #27423: 27423.20.patch
File 27423.20.patch, 12.4 KB (added by , 11 years ago) |
---|
-
src/wp-includes/css/media-views.css
16 16 .media-frame input, 17 17 .media-frame textarea { 18 18 padding: 6px 8px; 19 line-height: 16px;20 19 } 21 20 22 21 .media-frame select, … … 144 143 top: 0; 145 144 right: 0; 146 145 width: 50px; 147 height: 48px;146 height: 50px; 148 147 z-index: 1000; 149 148 color: #777; 150 149 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; … … 626 625 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); 627 626 } 628 627 628 .media-frame-title .dashicons { 629 display: none; 630 } 631 629 632 .media-frame-title h1 { 630 633 padding: 0 16px; 631 634 font-size: 22px; … … 1832 1835 padding: 0; 1833 1836 } 1834 1837 1838 .image-details .embed-media-settings, 1839 .image-details .embed-media-settings div { 1840 box-sizing: border-box; 1841 } 1842 1835 1843 .image-details .column-settings { 1836 1844 background: #f3f3f3; 1837 1845 border-right: 1px solid #ddd; 1838 1846 min-height: 100%; 1839 width: 5 2%;1847 width: 55%; 1840 1848 position: absolute; 1841 1849 top: 0; 1842 1850 left: 0; … … 1849 1857 } 1850 1858 1851 1859 .image-details .column-image { 1852 width: 4 8%;1860 width: 45%; 1853 1861 position: absolute; 1854 left: 5 2%;1862 left: 55%; 1855 1863 top: 0; 1856 1864 } 1857 1865 … … 2171 2179 * Responsive layout 2172 2180 */ 2173 2181 @media only screen and (max-width: 900px) { 2182 2183 /* Drop-down menu */ 2184 .media-frame-title, 2185 .media-frame-router, 2186 .media-frame-content, 2187 .media-frame-toolbar { 2188 left: 0; 2189 } 2190 2174 2191 .media-frame-menu { 2175 width: 139px; 2192 position: static; 2193 width: 0; 2176 2194 } 2177 2195 2196 .media-menu { 2197 display: none; 2198 } 2199 2200 .media-menu.visible { 2201 z-index: 2000; 2202 display: block; 2203 position: fixed; 2204 top: 30px; 2205 left: 30px; 2206 right: 30px; 2207 bottom: 30px; 2208 width: 250px; 2209 max-width: 100%; 2210 overflow: auto; 2211 } 2212 2178 2213 .media-menu > a { 2179 padding: 4px 5px; 2214 padding: 10px 20px; 2215 font-size: 16px; 2180 2216 } 2181 2217 2182 .media-frame-title, 2183 .media-frame-router, 2184 .media-frame-content, 2185 .media-frame-toolbar { 2186 left: 140px; 2218 .media-frame-title { 2219 left: 0; 2220 color: #21759b; 2187 2221 } 2188 2222 2223 .media-frame-title .dashicons { 2224 display: inline-block; 2225 line-height: 56px; 2226 } 2227 2228 .media-frame-title h1 { 2229 line-height: 3; 2230 font-size: 18px; 2231 float: left; 2232 cursor: pointer; 2233 } 2234 /* End drop-down menu */ 2235 /* 2189 2236 .media-sidebar { 2190 2237 width: 159px; 2191 2238 padding: 0 10px 24px; … … 2196 2243 .attachments-browser .media-toolbar { 2197 2244 right: 180px; 2198 2245 } 2246 */ 2247 2248 .media-sidebar .setting { 2249 margin: 6px 0px; 2250 } 2199 2251 2200 2252 .media-sidebar .setting input, 2201 2253 .media-sidebar .setting textarea, … … 2207 2259 .media-sidebar .setting span, 2208 2260 .compat-item label span { 2209 2261 text-align: inherit; 2210 display: block;2211 2262 min-height: 16px; 2212 2263 margin: 0; 2213 2264 padding: 8px 2px 0; 2214 2265 } 2266 2267 .media-sidebar .setting .value { 2268 float: none; 2269 width: auto; 2270 } 2215 2271 2216 .media-sidebar .setting input, 2272 .media-sidebar .setting input[type="text"], 2273 .media-sidebar .setting input[type="password"], 2274 .media-sidebar .setting input[type="number"], 2275 .media-sidebar .setting input[type="search"], 2276 .media-sidebar .setting input[type="email"], 2277 .media-sidebar .setting input[type="url"], 2217 2278 .media-sidebar .setting textarea, 2218 2279 .media-sidebar .setting select { 2219 2280 width: 98%; 2220 2281 max-width: none; 2282 height: auto; 2221 2283 } 2222 2284 2223 2285 .media-sidebar .setting select.columns { … … 2230 2292 padding: 3px 6px; 2231 2293 } 2232 2294 2295 .image-details .column-image { 2296 width: 30%; 2297 left: 70%; 2298 } 2299 2300 .image-details .column-settings { 2301 width: 70%; 2302 } 2303 2233 2304 .image-details .media-modal { 2234 2305 left: 30px; 2235 2306 right: 30px; … … 2273 2344 margin: 12px 10px; 2274 2345 } 2275 2346 2276 .media-modal-close {2277 right: 10px;2278 }2279 2280 2347 /* Text inputs need to be 16px, or they force zooming on iOS */ 2281 2348 .media-frame input[type="text"], 2282 2349 .media-frame input[type="password"], … … 2292 2359 2293 2360 /* Responsive on portrait and landscape */ 2294 2361 @media only screen and (max-width: 640px), screen and (max-height: 400px) { 2362 /* Full-bleed modal */ 2363 .media-modal, 2364 .image-details .media-modal, 2365 .media-menu.visible { 2366 position: fixed; 2367 top: 0; 2368 left: 0; 2369 right: 0; 2370 bottom: 0; 2371 } 2295 2372 2296 /* Media tabs on the top */ 2297 .media-frame-content .media-toolbar .instructions { 2373 .media-modal-backdrop { 2374 position: fixed; 2375 } 2376 2377 .media-sidebar { 2298 2378 display: none; 2299 2379 } 2300 2380 2301 . media-frame-menu {2302 width: auto;2303 bottom: auto;2381 .attachments-browser .attachments, 2382 .attachments-browser .uploader-inline, 2383 .attachments-browser .media-toolbar { 2304 2384 right: 0; 2305 height: 60px;2306 2385 } 2307 2386 2308 .media-menu {2309 border-right: none;2310 position: relative;2311 border-bottom: 1px solid #dddddd;2312 overflow: hidden;2313 padding: 10px 0 10px 10px;2314 }2315 2387 2316 .media-menu a {2317 float: left;2318 width: 42%;2319 white-space: nowrap;2320 text-overflow: ellipsis;2321 overflow: hidden;2322 }2323 2388 2324 .media-frame-title {2325 display: none;2326 }2327 2328 2389 .image-details .media-frame-title { 2329 2390 display: block; 2330 2391 top: 0; … … 2331 2392 font-size: 14px; 2332 2393 } 2333 2394 2395 /* Media tabs on the top */ 2396 .media-frame-content .media-toolbar .instructions { 2397 display: none; 2398 } 2399 2400 /* 2401 .image-details .media-frame-menu-toggle { 2402 display: none; 2403 } 2404 2334 2405 .media-frame-toolbar { 2335 2406 position: absolute; 2336 2407 bottom: 0px; … … 2348 2419 overflow: hidden; 2349 2420 } 2350 2421 2422 .media-frame .attachments-browser { 2423 overflow: auto; 2424 padding-bottom: 0; 2425 } 2426 2351 2427 .attachments-browser .attachments { 2352 top: 42px;2428 top: 0; 2353 2429 } 2354 2430 2355 2431 .attachment-details h3 { … … 2357 2433 } 2358 2434 2359 2435 /* Shorten right-side links so they don't overlap the close button */ 2360 .media-menu a:nth-child(2),2436 /* .media-menu a:nth-child(2), 2361 2437 .media-menu a:last-child { 2362 2438 width: 40%; 2363 2439 } … … 2366 2442 display: none; 2367 2443 } 2368 2444 2369 . media-frame-title {2445 .image-details .media-frame-title { 2370 2446 top: 72px; 2371 left: auto;2372 height: auto;2373 2447 } 2374 2448 2375 .media-frame-title h1 {2376 line-height: 3;2377 font-size: 18px;2378 }2379 2380 2449 .media-frame-router { 2381 top: 84px;2382 2450 left: 0; 2383 2451 } 2384 2452 2385 2453 .media-frame-content { 2386 2454 left: 0; 2387 top: 118px;2455 overflow: hidden; 2388 2456 } 2389 2457 2390 2458 .image-details .media-frame.hide-router .media-frame-content { 2391 top: 40px; 2459 top: 56px; 2460 overflow: auto; 2392 2461 } 2393 2462 2394 2463 .media-frame .attachments-browser { … … 2395 2464 padding-bottom: 300px; 2396 2465 } 2397 2466 2398 .media-sidebar {2399 border-bottom: 1px solid #dddddd;2400 }2401 2402 2467 .media-modal { 2403 2468 width: auto; 2404 2469 } 2405 2470 2406 .media-toolbar-primary, .media-toolbar-secondary { 2471 .media-toolbar-primary, 2472 .media-toolbar-secondary { 2407 2473 height: auto; 2408 2474 } 2409 2475 … … 2422 2488 .attachments-browser .attachments, 2423 2489 .attachments-browser .uploader-inline { 2424 2490 position: relative; 2425 margin-right: 180px;2491 margin-right: 0; 2426 2492 } 2427 2493 2428 /* Full-bleed modal */2429 .media-modal,2430 .image-details .media-modal {2431 position: fixed;2432 top: 0;2433 left: 0;2434 right: 0;2435 bottom: 0;2436 }2437 2438 .media-modal-backdrop {2439 position: fixed;2440 }2441 2442 2494 .attachments-browser .attachment, 2443 2495 .attachments-browser .attachment-preview { 2444 2496 max-width: 100%; … … 2445 2497 } 2446 2498 2447 2499 .attachments-browser .media-toolbar-primary input.search { 2448 max-width: 150px; 2500 max-width: none; 2501 width: 100%; 2449 2502 } 2450 2503 2451 2504 .uploader-inline-content { … … 2458 2511 } 2459 2512 2460 2513 /* Image From Link */ 2461 .embed-link-settings,2514 /* .embed-link-settings, 2462 2515 .embed-media-settings { 2463 2516 padding-bottom: 52px; 2517 box-sizing: border-box; 2464 2518 } 2465 2519 2466 2520 .image-details .column-settings, … … 2474 2528 2475 2529 2476 2530 /* Gallery */ 2477 .media-frame.hide-router .media-frame-content {2531 /* .media-frame.hide-router .media-frame-content { 2478 2532 top: 73px; 2479 2533 border-top: none; 2480 2534 } … … 2482 2536 .collection-settings h3 { 2483 2537 margin-top: 45px; 2484 2538 } 2485 2539 */ 2486 2540 } 2487 2541 2488 2542 /* Landscape specific header override */ 2489 2543 @media screen and (max-height: 400px) { 2490 .media-menu {2544 /* .media-menu { 2491 2545 padding: 0 0 0 10px; 2492 2546 } 2493 2547 … … 2522 2576 } 2523 2577 2524 2578 /* Prevent unnecessary scrolling on title input */ 2525 .embed-link-settings {2579 /* .embed-link-settings { 2526 2580 overflow: visible; 2527 } 2581 }*/ 2528 2582 } 2529 2583 2530 2584 @media only screen and (max-width: 680px) { 2531 2585 .media-frame-content .media-toolbar .search, 2532 2586 .media-frame-content .media-toolbar .attachment-filters { 2533 max-width: 85px; 2587 max-width: none; 2588 width: 100%; 2534 2589 } 2535 2590 } 2536 2591 -
src/wp-includes/js/media-views.js
1 1 /* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */ 2 (function($, _){ 3 var media = wp.media, l10n; 2 ( function( $, _ ) { 3 var l10n, 4 media = wp.media, 5 isTouchDevice = ( 'ontouchend' in document ); 4 6 5 7 // Link any localized strings. 6 8 l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n; … … 1834 1836 template: media.template('media-frame'), 1835 1837 regions: ['menu','title','content','toolbar','router'], 1836 1838 1839 events: { 1840 'click div.media-frame-title h1': 'toggleMenu' 1841 }, 1842 1837 1843 /** 1838 1844 * @global wp.Uploader 1839 1845 */ … … 1883 1889 this.on( 'title:create:default', this.createTitle, this ); 1884 1890 this.title.mode('default'); 1885 1891 1892 this.on( 'title:render', function( view ) { 1893 view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' ); 1894 }); 1895 1886 1896 // Bind default menu. 1887 1897 this.on( 'menu:create:default', this.createMenu, this ); 1888 1898 }, … … 1918 1928 controller: this 1919 1929 }); 1920 1930 }, 1931 1932 toggleMenu: function() { 1933 this.$el.find( '.media-menu' ).toggleClass( 'visible' ); 1934 }, 1935 1921 1936 /** 1922 1937 * @param {Object} toolbar 1923 1938 * @this wp.media.controller.Region … … 4412 4427 4413 4428 // When selecting a tab along the left side, 4414 4429 // focus should be transferred into the main panel 4415 $('.media-frame-content input').first().focus(); 4430 if ( ! isTouchDevice ) { 4431 $('.media-frame-content input').first().focus(); 4432 } 4416 4433 }, 4417 4434 4418 4435 click: function() { 4419 4436 var state = this.options.state; 4437 4420 4438 if ( state ) { 4421 4439 this.controller.setState( state ); 4440 this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below 4422 4441 } 4423 4442 }, 4424 4443 /** … … 4452 4471 property: 'state', 4453 4472 ItemView: media.view.MenuItem, 4454 4473 region: 'menu', 4474 4475 /* TODO: alternatively hide on any click anywhere 4476 events: { 4477 'click': 'click' 4478 }, 4479 4480 click: function() { 4481 this.$el.removeClass( 'visible' ); 4482 }, 4483 */ 4484 4455 4485 /** 4456 4486 * @param {Object} options 4457 4487 * @param {string} id … … 4615 4645 tagName: 'li', 4616 4646 className: 'attachment', 4617 4647 template: media.template('attachment'), 4648 _isTouch: false, 4618 4649 4619 4650 attributes: { 4620 4651 tabIndex: 0, … … 4623 4654 4624 4655 events: { 4625 4656 'click .js--select-attachment': 'toggleSelectionHandler', 4657 'touchend .attachment-preview': 'setTouch', 4626 4658 'change [data-setting]': 'updateSetting', 4627 4659 'change [data-setting] input': 'updateSetting', 4628 4660 'change [data-setting] select': 'updateSetting', … … 4747 4779 this.$bar.width( this.model.get('percent') + '%' ); 4748 4780 } 4749 4781 }, 4782 4783 setTouch: function() { 4784 this._isTouch = true; 4785 }, 4786 4750 4787 /** 4751 4788 * @param {Object} event 4752 4789 */ … … 4785 4822 method = 'toggle'; 4786 4823 } 4787 4824 4825 if ( this._isTouch ) { 4826 this._isTouch = false; 4827 method = 'add'; 4828 } 4829 4788 4830 this.toggleSelection({ 4789 4831 method: method 4790 4832 }); … … 4894 4936 } 4895 4937 4896 4938 return; 4939 } else if ( 'add' === method ) { 4940 selection.add( model ); 4941 selection.single( model ); 4942 return; 4897 4943 } 4898 4944 4899 4945 // Fixes bug that loses focus when selecting a featured image … … 5215 5261 this.el.id = _.uniqueId('__attachments-view-'); 5216 5262 5217 5263 _.defaults( this.options, { 5218 refreshSensitivity: 200,5264 refreshSensitivity: isTouchDevice ? 300 : 200, 5219 5265 refreshThreshold: 3, 5220 5266 AttachmentView: media.view.Attachment, 5221 5267 sortable: false, 5222 5268 resize: true, 5223 idealColumnWidth: 1505269 idealColumnWidth: $( window ).width() < 640 ? 130 : 150 5224 5270 }); 5225 5271 5226 5272 this._viewsByCid = {}; … … 5241 5287 }, this ); 5242 5288 5243 5289 this.collection.on( 'reset', this.render, this ); 5244 5290 // TODO: fix for mobile? 5245 5291 // Throttle the scroll handler and bind this. 5246 5292 this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); 5247 5293 … … 5284 5330 initSortable: function() { 5285 5331 var collection = this.collection; 5286 5332 5287 if ( ! this.options.sortable || ! $.fn.sortable ) {5333 if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) { 5288 5334 return; 5289 5335 } 5290 5336 … … 5347 5393 }, 5348 5394 5349 5395 refreshSortable: function() { 5350 if ( ! this.options.sortable || ! $.fn.sortable ) {5396 if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) { 5351 5397 return; 5352 5398 } 5353 5399