Ticket #31195: 31195.6.diff
File 31195.6.diff, 7.8 KB (added by , 9 years ago) |
---|
-
src/wp-admin/css/customize-controls.css
1311 1311 color: #00a0d2; 1312 1312 } 1313 1313 1314 /* Device/preview size toggles */ 1315 1316 .wp-full-overlay { 1317 background: #191e23; 1318 } 1319 1320 #customize-preview.wp-full-overlay-main { 1321 background-color: #f1f1f1; 1322 } 1323 1324 .expanded #customize-footer-actions { 1325 position: fixed; 1326 bottom: 0; 1327 left: 0; 1328 width: 300px; 1329 height: 45px; 1330 border-top: 1px solid #ddd; 1331 } 1332 1333 #customize-footer-actions .devices { 1334 float: right; 1335 } 1336 1337 #customize-footer-actions .devices button { 1338 cursor: pointer; 1339 background: transparent; 1340 border: none; 1341 height: 45px; 1342 padding: 0 3px; 1343 margin: 0 0 0 -4px; 1344 box-shadow: none; 1345 border-top: 1px solid transparent; 1346 border-bottom: 4px solid transparent; 1347 -webkit-transition: all .1s ease-in-out; 1348 transition: all .1s ease-in-out; 1349 } 1350 1351 #customize-footer-actions .devices button:focus { 1352 box-shadow: none; 1353 outline: none; 1354 } 1355 1356 #customize-footer-actions .devices button:before { 1357 display: inline-block; 1358 -webkit-font-smoothing: antialiased; 1359 font: normal 20px/30px "dashicons"; 1360 vertical-align: top; 1361 margin: 3px 0; 1362 padding: 4px 8px; 1363 color: #656a6f; 1364 } 1365 1366 #customize-footer-actions .devices button.active { 1367 border-bottom-color: #191e23; 1368 } 1369 1370 #customize-footer-actions .devices button:hover, 1371 #customize-footer-actions .devices button:focus { 1372 background-color: #fff; 1373 border-bottom-color: #0073aa; 1374 } 1375 1376 #customize-footer-actions .devices button.active:before, 1377 #customize-footer-actions .devices button:hover:before, 1378 #customize-footer-actions .devices button:focus:before { 1379 color: #191e23; 1380 } 1381 1382 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover, 1383 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus { 1384 color: #191e23; 1385 } 1386 1387 #customize-footer-actions .devices .preview-desktop:before { 1388 content: "\f472"; 1389 } 1390 1391 #customize-footer-actions .devices .preview-tablet:before { 1392 content: "\f471"; 1393 } 1394 1395 #customize-footer-actions .devices .preview-mobile:before { 1396 content: "\f470"; 1397 } 1398 1399 @media screen and (max-width:1024px) { 1400 #customize-footer-actions .devices { 1401 display: none; 1402 } 1403 } 1404 1405 .collapsed #customize-footer-actions .devices button:before { 1406 display: none; 1407 } 1408 1409 .collapsed #customize-footer-actions .devices .preview-full { 1410 left: 0; 1411 } 1412 1413 .preview-mobile #customize-preview { 1414 margin: auto 0 auto -160px; 1415 width: 320px; 1416 height: 480px; 1417 max-height: 100%; 1418 max-width: 100%; 1419 left: 50%; 1420 } 1421 1422 .preview-tablet #customize-preview { 1423 margin: auto 0 auto -3in; 1424 width: 6in; 1425 height: 9in; 1426 max-height: 100%; 1427 max-width: 100%; 1428 left: 50%; 1429 } 1430 1314 1431 .widget-reorder-nav span, 1315 1432 .menu-item-reorder-nav button { 1316 1433 position: relative; -
src/wp-admin/customize.php
137 137 <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button> 138 138 </div> 139 139 <div class="customize-panel-description"><?php 140 _e( 'The Customizer allows you to preview changes to your site before publishing them. You can alsonavigate to different pages on your site to preview them.' );140 _e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site to preview them.' ); 141 141 ?></div> 142 142 </div> 143 143 … … 148 148 </div> 149 149 150 150 <div id="customize-footer-actions" class="wp-full-overlay-footer"> 151 <?php $previewable_devices = $wp_customize->get_previewable_devices(); ?> 152 <?php if ( ! empty( $previewable_devices ) ) : ?> 153 <div class="devices"> 154 <?php foreach ( $previewable_devices as $device => $settings ) : ?> 155 <?php 156 $active = ! empty( $settings['default'] ); 157 $class = "preview-$device"; 158 if ( $active ) { 159 $class .= ' active'; 160 } 161 $aria_pressed = $active ? 'true' : 'false'; 162 ?> 163 <button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $aria_pressed ) ?>" data-device="<?php echo esc_attr( $device ); ?>"> 164 <span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span> 165 </button> 166 <?php endforeach; ?> 167 </div> 168 <?php endif; ?> 151 169 <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>"> 152 170 <span class="collapse-sidebar-arrow"></span> 153 171 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span> -
src/wp-admin/js/customize-controls.js
3229 3229 overlay = body.children( '.wp-full-overlay' ), 3230 3230 title = $( '#customize-info .panel-title.site-title' ), 3231 3231 closeBtn = $( '.customize-controls-close' ), 3232 saveBtn = $( '#save' ); 3232 saveBtn = $( '#save' ), 3233 footerActions = $( '#customize-footer-actions' ); 3233 3234 3234 3235 // Prevent the form from saving when enter is pressed on an input or select element. 3235 3236 $('#customize-controls').on( 'keydown', function( e ) { … … 3605 3606 event.preventDefault(); 3606 3607 }); 3607 3608 3609 // Preview size toggles. 3610 api.previewedDevice = new api.Value(); 3611 footerActions.find( '.devices button' ).on( 'click', function( event ) { 3612 api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) ); 3613 }); 3614 3615 api.previewedDevice.bind( function( newDevice ) { 3616 var overlay = $( '.wp-full-overlay' ), devices = ''; 3617 footerActions.find( '.devices button' ) 3618 .removeClass( 'active' ) 3619 .attr( 'aria-pressed', false ); 3620 $.each( api.settings.previewableDevices, function( device ) { 3621 devices = devices + ' preview-' + device; 3622 } ); 3623 overlay 3624 .removeClass( devices ) 3625 .addClass( 'preview-' + newDevice ); 3626 footerActions.find( '.devices .preview-' + newDevice ) 3627 .addClass( 'active' ) 3628 .attr( 'aria-pressed', true ); 3629 } ); 3630 3608 3631 // Bind site title display to the corresponding field. 3609 3632 if ( title.length ) { 3610 3633 api( 'blogname', function( setting ) { -
src/wp-includes/class-wp-customize-manager.php
1710 1710 'nonce' => $this->get_nonces(), 1711 1711 'autofocus' => array(), 1712 1712 'documentTitleTmpl' => $this->get_document_title_template(), 1713 'previewableDevices' => $this->get_previewable_devices(), 1713 1714 ); 1714 1715 1715 1716 // Prepare Customize Section objects to pass to JavaScript. … … 1787 1788 } 1788 1789 1789 1790 /** 1791 * Returns a list of devices to allow previewing. 1792 * 1793 * @access public 1794 * @since 4.5.0 1795 * @return array List of devices with labels and default setting. 1796 */ 1797 public function get_previewable_devices() { 1798 $devices = array( 1799 'desktop' => array( 1800 'label' => __( 'Enter desktop preview mode' ), 1801 'default' => true, 1802 ), 1803 'tablet' => array( 1804 'label' => __( 'Enter tablet preview mode' ), 1805 ), 1806 'mobile' => array( 1807 'label' => __( 'Enter mobile preview mode' ), 1808 ), 1809 ); 1810 1811 /** 1812 * Filter the available devices to allow previewing in the Customizer. 1813 * 1814 * @since 4.5.0 1815 * 1816 * @see WP_Customize_Manager::get_previewable_devices() 1817 * 1818 * @param array $devices List of devices with labels and default setting. 1819 */ 1820 $devices = apply_filters( 'customize_previewable_devices', $devices ); 1821 return $devices; 1822 } 1823 1824 /** 1790 1825 * Register some default controls. 1791 1826 * 1792 1827 * @since 3.4.0