WordPress.org

Make WordPress Core

Ticket #31195: 31195.diff

File 31195.diff, 4.4 KB (added by celloexpressions, 4 years ago)

Conceptual patch, could use refinement.

  • src/wp-admin/css/customize-controls.css

     
    829829        float: right;
    830830}
    831831
     832/* Device/preview size toggles */
     833#customize-footer-actions {
     834        position: fixed;
     835        bottom: 0;
     836        left: 0;
     837        width: 300px;
     838        height: 45px;
     839}
    832840
     841#customize-footer-actions .devices {
     842        width: 100%;
     843        padding: 7px 0;
     844        text-align: center;
     845}
     846
     847#customize-footer-actions .devices button {
     848        cursor: pointer;
     849        color: #555;
     850        background: transparent;
     851        border: none;
     852        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     853        transition: color .1s ease-in-out, background .1s ease-in-out;
     854}
     855
     856#customize-footer-actions .devices button:hover,
     857#customize-footer-actions .devices button:focus,
     858#customize-footer-actions .devices button.active {
     859        color: #222;
     860}
     861
     862#customize-footer-actions .devices button:before {
     863        display: inline-block;
     864        -webkit-font-smoothing: antialiased;
     865        font: normal 30px/1 "dashicons";
     866        vertical-align: top;
     867}
     868
     869#customize-footer-actions .devices .preview-full:before {
     870        content: "\f211";
     871}
     872
     873#customize-footer-actions .devices .preview-desktop:before {
     874        content: "\f472";
     875}
     876
     877#customize-footer-actions .devices .preview-tablet:before {
     878        content: "\f471";
     879}
     880
     881#customize-footer-actions .devices .preview-mobile:before {
     882        content: "\f470";
     883}
     884
     885@media screen and (max-width:1024px) {
     886        #customize-footer-actions {
     887                display: none;
     888        }
     889}
     890
     891.collapsed #customize-footer-actions .devices button:before {
     892        display: none;
     893}
     894
     895.collapsed #customize-footer-actions .devices .preview-full {
     896        left: 0;
     897}
     898
     899.collapsed #customize-footer-actions .devices .preview-full:before {
     900        display: inline-block;
     901        content: "\f506";
     902}
     903
     904.preview-mobile #customize-preview {
     905        margin: auto 0 auto -160px;
     906        width: 320px;
     907        height: 480px;
     908        max-height: calc(100% - 48px);
     909        max-width: calc(100% - 48px);
     910        left: 50%;
     911        border: 24px solid #000;
     912        border-radius: 12px;
     913}
     914
     915.preview-tablet #customize-preview {
     916        margin: auto 0 auto -3in;
     917        width: 6in;
     918        height: 9in;
     919        max-height: calc(100% - 48px);
     920        max-width: calc(100% - 48px);
     921        left: 50%;
     922        border: 24px solid #000;
     923        border-radius: 12px;
     924}
     925
    833926/** Handle cheaters. */
    834927body.cheatin {
    835928        font-size: medium;
  • src/wp-admin/customize.php

     
    175175                </div>
    176176
    177177                <div id="customize-footer-actions" class="wp-full-overlay-footer">
    178                         <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
    179                                 <span class="collapse-sidebar-arrow"></span>
    180                                 <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
    181                         </a>
     178                        <div class="devices">
     179                                <button class="preview-full collapse-sidebar"><span class="screen-reader-text"><?php _e( 'Enter fullscreen mode' ); ?></span></button>
     180                                <button class="preview-desktop active"><span class="screen-reader-text"><?php _e( 'Return to desktop mode' ); ?></span></button>
     181                                <button class="preview-tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet mode' ); ?></span></button>
     182                                <button class="preview-mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile mode' ); ?></span></button>
     183                        </div>
    182184                </div>
    183185        </form>
    184186        <div id="customize-preview" class="wp-full-overlay-main"></div>
  • src/wp-admin/js/customize-controls.js

     
    22392239                        event.preventDefault();
    22402240                });
    22412241
     2242                // Preview size toggles.
     2243                $( '#customize-footer-actions .devices button' ).on( 'click keydown', function( event ) {
     2244                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     2245                                return;
     2246                        }
     2247
     2248                        $( '#customize-footer-actions .devices button' ).removeClass( 'active' );
     2249                        overlay.removeClass( 'preview-full preview-desktop preview-tablet preview-mobile' )
     2250                               .toggleClass( event.currentTarget.className );
     2251                        $( event.currentTarget ).addClass( 'active' );
     2252                        event.preventDefault();
     2253                });
     2254               
    22422255                // Bind site title display to the corresponding field.
    22432256                if ( title.length ) {
    22442257                        $( '#customize-control-blogname input' ).on( 'input', function() {