Ticket #31195: 31195.4.diff
File 31195.4.diff, 7.3 KB (added by , 9 years ago) |
---|
-
src/wp-admin/css/customize-controls.css
1490 1490 } 1491 1491 1492 1492 1493 /* Device/preview size toggles */ 1494 1495 .wp-full-overlay { 1496 background: #191e23; 1497 } 1498 1499 #customize-preview.wp-full-overlay-main { 1500 background-color: #f1f1f1; 1501 } 1502 1503 .expanded #customize-footer-actions { 1504 position: fixed; 1505 bottom: 0; 1506 left: 0; 1507 width: 300px; 1508 height: 45px; 1509 border-top: 1px solid #ddd; 1510 } 1511 1512 #customize-footer-actions .devices { 1513 float: right; 1514 } 1515 1516 #customize-footer-actions .devices button { 1517 cursor: pointer; 1518 background: transparent; 1519 border: none; 1520 height: 45px; 1521 padding: 0 3px; 1522 margin: 0 0 0 -4px; 1523 box-shadow: none; 1524 border-top: 1px solid transparent; 1525 border-bottom: 4px solid transparent; 1526 -webkit-transition: all .1s ease-in-out; 1527 transition: all .1s ease-in-out; 1528 } 1529 1530 #customize-footer-actions .devices button:focus { 1531 box-shadow: none; 1532 outline: none; 1533 } 1534 1535 #customize-footer-actions .devices button:before { 1536 display: inline-block; 1537 -webkit-font-smoothing: antialiased; 1538 font: normal 20px/30px "dashicons"; 1539 vertical-align: top; 1540 margin: 3px 0; 1541 padding: 4px 8px; 1542 color: #656a6f; 1543 } 1544 1545 #customize-footer-actions .devices button.active { 1546 border-bottom-color: #191e23; 1547 } 1548 1549 #customize-footer-actions .devices button:hover, 1550 #customize-footer-actions .devices button:focus { 1551 background-color: #fff; 1552 border-bottom-color: #0073aa; 1553 } 1554 1555 #customize-footer-actions .devices button.active:before, 1556 #customize-footer-actions .devices button:hover:before, 1557 #customize-footer-actions .devices button:focus:before { 1558 color: #191e23; 1559 } 1560 1561 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover, 1562 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus { 1563 color: #191e23; 1564 } 1565 1566 #customize-footer-actions .devices .preview-desktop:before { 1567 content: "\f472"; 1568 } 1569 1570 #customize-footer-actions .devices .preview-tablet:before { 1571 content: "\f471"; 1572 } 1573 1574 #customize-footer-actions .devices .preview-mobile:before { 1575 content: "\f470"; 1576 } 1577 1578 @media screen and (max-width:1024px) { 1579 #customize-footer-actions .devices { 1580 display: none; 1581 } 1582 } 1583 1584 .collapsed #customize-footer-actions .devices button:before { 1585 display: none; 1586 } 1587 1588 .collapsed #customize-footer-actions .devices .preview-full { 1589 left: 0; 1590 } 1591 1592 .preview-mobile #customize-preview { 1593 margin: auto 0 auto -160px; 1594 width: 320px; 1595 height: 480px; 1596 max-height: 100%; 1597 max-width: 100%; 1598 left: 50%; 1599 } 1600 1601 .preview-tablet #customize-preview { 1602 margin: auto 0 auto -3in; 1603 width: 6in; 1604 height: 9in; 1605 max-height: 100%; 1606 max-width: 100%; 1607 left: 50%; 1608 } 1609 1610 1493 1611 /* Responsive */ 1494 1612 .customize-controls-preview-toggle { 1495 1613 display: none; -
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 if ( $wp_customize->get_previewable_devices() ) : ?> 152 <div class="devices"> 153 <?php foreach ( $wp_customize->get_previewable_devices() as $device => $settings ) : ?> 154 <button type="button" class="preview-<?php echo $device; if ( isset( $settings['default'] ) && $settings['default'] ) { echo ' active" aria-pressed="true"'; } else { echo '" aria-pressed="false"'; } ?> data-device="<?php esc_attr_e( $device ); ?>"> 155 <span class="screen-reader-text"><?php echo $settings['label']; ?></span> 156 </button> 157 <?php endforeach; ?> 158 </div> 159 <?php endif; ?> 151 160 <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>"> 152 161 <span class="collapse-sidebar-arrow"></span> 153 162 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span> -
src/wp-admin/js/customize-controls.js
3605 3605 event.preventDefault(); 3606 3606 }); 3607 3607 3608 // Preview size toggles. 3609 api.previewedDevice = new api.Value(); 3610 $( '#customize-footer-actions .devices button' ).on( 'click', function( event ) { 3611 api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) ); 3612 }); 3613 3614 api.previewedDevice.bind( function( newDevice ) { 3615 var overlay = $( '.wp-full-overlay' ), devices = ''; 3616 $( '#customize-footer-actions .devices button' ).removeClass( 'active' ) 3617 .attr( 'aria-pressed', false ); 3618 $.each( api.settings.previewableDevices, function( device, settings ) { 3619 devices = devices + ' preview-' + device; 3620 } ); 3621 overlay.removeClass( devices ) 3622 .addClass( 'preview-' + newDevice ); 3623 $( '#customize-footer-actions .devices' ).find( '.preview-' + newDevice ).addClass( 'active' ) 3624 .attr( 'aria-pressed', true ); 3625 } ); 3626 3608 3627 // Bind site title display to the corresponding field. 3609 3628 if ( title.length ) { 3610 3629 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 * Filter the available devices to allow previewing in the Customizer. 1812 * 1813 * @since 4.5.0 1814 * 1815 * @see WP_Customize_Manager::get_previewable_devices() 1816 * 1817 * @param array $devices List of devices with labels and default setting. 1818 */ 1819 $devices = apply_filters( 'customize_previewable_devices', $devices ); 1820 return $devices; 1821 } 1822 1823 /** 1790 1824 * Register some default controls. 1791 1825 * 1792 1826 * @since 3.4.0