WordPress.org

Make WordPress Core

Changeset 21014


Ignore:
Timestamp:
06/06/2012 09:45:17 PM (8 years ago)
Author:
koopersmith
Message:

Theme Customizer: Fix scrolling on iOS and Kindle Fire. props azaozz, helenyhou. fixes #20805.

Also fixes uploader UIs on iOS and Kindle Fire by improving wp.Uploader.
Adds mobile viewport specifications.
Moves scrollbar back to fixed positioning.

Location:
trunk
Files:
12 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/customize-controls.dev.css

    r21006 r21014  
    403403}
    404404
    405 .customize-section .customize-control-image .actions a {
    406     display: block;
    407 }
    408 
    409405.customize-section .customize-control-image .library ul {
    410406    border-bottom: 1px solid #dfdfdf;
     
    457453.customize-section .customize-control-image .library .thumbnail img {
    458454    display: block;
    459     max-width: 220px;
     455    max-width: 90%;
    460456    max-height: 80px;
    461457
     
    480476    color: #777;
    481477    position: relative;
     478    cursor: default;
    482479}
    483480
     
    492489}
    493490
     491.customize-section .customize-control-upload .library ul li,
     492.customize-section .customize-control-image .library ul li {
     493    cursor: pointer;
     494}
     495
    494496.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
    495497.customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
    496498    border-color: #83b4d8;
    497499}
     500
     501/**
     502 * iOS can't scroll iframes,
     503 * instead it expands the iframe size to match the size of the content
     504 */
     505.ios .wp-full-overlay {
     506    position: relative;
     507}
     508
     509.ios #customize-preview {
     510    position: relative;
     511}
     512
     513.ios #customize-controls .wp-full-overlay-sidebar-content {
     514    -webkit-overflow-scrolling: touch;
     515}
     516
  • trunk/wp-admin/css/wp-admin-rtl.dev.css

    r21006 r21014  
    15671567  26.0 - Full Overlay w/ Sidebar
    15681568------------------------------------------------------------------------------*/
    1569 .wp-full-overlay {
    1570     left: 0;
    1571     right: 300px;
    1572 }
    1573 
    1574 .wp-full-overlay.collapsed {
    1575     right: 0 !important;
    1576 }
    1577 
    15781569.wp-full-overlay .wp-full-overlay-sidebar {
    15791570    margin: 0;
    1580     left: 100%;
    1581     right: auto;
     1571    left: auto;
     1572    right: 0;
    15821573    border-right: 0;
    15831574    border-left: 1px solid rgba( 0, 0, 0, 0.2 );
     
    15881579    left: 0;
    15891580    box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.1);
     1581}
     1582
     1583.wp-full-overlay.collapsed,
     1584.wp-full-overlay.expanded .wp-full-overlay-sidebar {
     1585    margin-right: 0 !important;
     1586}
     1587
     1588.wp-full-overlay.expanded {
     1589    margin-right: 300px;
     1590    margin-left: 0;
     1591}
     1592
     1593.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
     1594    margin-right: -300px;
     1595    margin-left: 0;
    15901596}
    15911597
  • trunk/wp-admin/css/wp-admin.dev.css

    r21006 r21014  
    52565256    top: 0;
    52575257    bottom: 0;
    5258     left: 300px;
     5258    left: 0;
    52595259    right: 0;
    52605260    height: 100%;
    52615261    min-width: 0;
    5262 }
    5263 
    5264 .wp-full-overlay.collapsed {
    5265     left: 0 !important;
    52665262}
    52675263
     
    52715267    box-sizing:         border-box;
    52725268
    5273     position: absolute;
     5269    position: fixed;
    52745270    width: 300px;
    52755271    height: 100%;
    52765272    top: 0;
    52775273    bottom: 0;
    5278     right: 100%;
     5274    left: 0;
    52795275    padding: 0;
    52805276    margin: 0;
     
    52875283.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
    52885284    overflow: visible;
     5285}
     5286
     5287.wp-full-overlay.collapsed,
     5288.wp-full-overlay.expanded .wp-full-overlay-sidebar {
     5289    margin-left: 0 !important;
     5290}
     5291
     5292.wp-full-overlay.expanded {
     5293    margin-left: 300px;
     5294}
     5295
     5296.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
     5297    margin-left: -300px;
    52895298}
    52905299
     
    54055414.wp-full-overlay .collapse-sidebar,
    54065415.wp-full-overlay-main {
    5407     -webkit-transition-property: left, right, top, bottom, width;
    5408     -moz-transition-property:    left, right, top, bottom, width;
    5409     -ms-transition-property:     left, right, top, bottom, width;
    5410     -o-transition-property:      left, right, top, bottom, width;
    5411     transition-property:         left, right, top, bottom, width;
     5416    -webkit-transition-property: left, right, top, bottom, width, margin;
     5417    -moz-transition-property:    left, right, top, bottom, width, margin;
     5418    -ms-transition-property:     left, right, top, bottom, width, margin;
     5419    -o-transition-property:      left, right, top, bottom, width, margin;
     5420    transition-property:         left, right, top, bottom, width, margin;
    54125421
    54135422    -webkit-transition-duration: 0.2s;
  • trunk/wp-admin/customize.php

    r21010 r21014  
    3535_wp_admin_html_begin();
    3636
     37$body_class = '';
     38
     39if ( wp_is_mobile() ) :
     40    $body_class .= ' mobile';
     41
     42    ?><meta name="viewport" id="viewport-meta" content="width=device-width, initial-scale=0.8, minimum-scale=0.5, maximum-scale=1.2"><?php
     43endif;
     44
     45$is_ios = wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] );
     46
     47if ( $is_ios )
     48    $body_class .= ' ios';
     49
    3750$admin_title = sprintf( __( '%1$s &#8212; WordPress' ), strip_tags( sprintf( __( 'Customize %s' ), $wp_customize->theme()->display('Name') ) ) );
    3851?><title><?php echo $admin_title; ?></title><?php
     
    4255?>
    4356</head>
    44 <body class="wp-full-overlay">
     57<body class="<?php echo esc_attr( $body_class ); ?>">
     58<div class="wp-full-overlay expanded">
    4559    <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
    4660        <?php wp_nonce_field( 'customize_controls-' . $wp_customize->get_stylesheet() ); ?>
     
    141155            'fallback'      => $fallback_url,
    142156        ),
     157        'browser'  => array(
     158            'mobile' => wp_is_mobile(),
     159            'ios'    => $is_ios,
     160        ),
    143161        'settings' => array(),
    144162        'controls' => array(),
     
    161179        var _wpCustomizeSettings = <?php echo json_encode( $settings ); ?>;
    162180    </script>
     181</div>
    163182</body>
    164183</html>
  • trunk/wp-admin/includes/class-wp-theme-install-list-table.php

    r20968 r21014  
    251251    function theme_installer() {
    252252        ?>
    253         <div id="theme-installer" class="wp-full-overlay">
     253        <div id="theme-installer" class="wp-full-overlay expanded">
    254254            <div class="wp-full-overlay-sidebar">
    255255                <div class="wp-full-overlay-header">
  • trunk/wp-admin/js/customize-controls.dev.js

    r20988 r21014  
    149149            }, this.uploader || {} );
    150150
     151            if ( this.uploader.supported ) {
     152                if ( control.params.context )
     153                    control.uploader.param( 'post_data[context]', this.params.context );
     154
     155                control.uploader.param( 'post_data[theme]', api.settings.theme.stylesheet );
     156            }
     157
    151158            this.uploader = new wp.Uploader( this.uploader );
    152159
     
    160167            this.setting.bind( this.removerVisibility );
    161168            this.removerVisibility( this.setting.get() );
    162 
    163             if ( this.params.context )
    164                 control.uploader.param( 'post_data[context]', this.params.context );
    165 
    166             control.uploader.param( 'post_data[theme]', api.settings.theme.stylesheet );
    167169        },
    168170        success: function( attachment ) {
     
    183185                    var fallback, button;
    184186
    185                     if ( up.features.dragdrop )
     187                    if ( this.supports.dragdrop )
    186188                        return;
    187189
     
    567569
    568570        var body = $( document.body ),
     571            overlay = body.children('.wp-full-overlay'),
    569572            query, previewer, parent;
    570573
     
    703706
    704707        $('.collapse-sidebar').click( function( event ) {
    705             body.toggleClass( 'collapsed' );
     708            overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
    706709            event.preventDefault();
    707710        });
  • trunk/wp-admin/js/theme.dev.js

    r20899 r21014  
    4242
    4343    preview.on( 'click', '.collapse-sidebar', function( event ) {
    44         preview.toggleClass('collapsed');
     44        preview.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
    4545        event.preventDefault();
    4646    });
  • trunk/wp-includes/class-wp-customize-control.php

    r20936 r21014  
    332332
    333333        ?>
    334         <label class="customize-image-picker">
     334        <div class="customize-image-picker">
    335335            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    336336
     
    367367                <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
    368368            </div>
    369         </label>
     369        </div>
    370370        <?php
    371371    }
     
    383383
    384384    public function tab_upload_new() {
    385         ?>
    386         <div class="upload-dropzone">
    387             <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
    388         </div>
    389         <div class="upload-fallback">
    390             <span class="button-secondary"><?php _e('Select File'); ?></span>
    391         </div>
    392         <?php
     385        if ( ! _device_can_upload() ) {
     386            ?>
     387            <p><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></p>
     388            <?php
     389        } else {
     390            ?>
     391            <div class="upload-dropzone">
     392                <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
     393            </div>
     394            <div class="upload-fallback">
     395                <span class="button-secondary"><?php _e('Select File'); ?></span>
     396            </div>
     397            <?php
     398        }
    393399    }
    394400
  • trunk/wp-includes/js/customize-loader.dev.js

    r21010 r21014  
    6767            if ( this.active )
    6868                return;
     69
     70            // Load the full page on mobile devices.
     71            if ( Loader.settings.browser.mobile )
     72                return window.location = src;
    6973
    7074            this.active = true;
  • trunk/wp-includes/js/plupload/wp-plupload.dev.js

    r20928 r21014  
    44(function( exports, $ ) {
    55    var Uploader;
     6
     7    if ( typeof _wpPluploadSettings === 'undefined' )
     8        return;
    69
    710    /*
     
    2831            key;
    2932
     33        this.supports = {
     34            upload: Uploader.browser.supported
     35        };
     36
     37        this.supported = this.supports.upload;
     38
     39        if ( ! this.supported )
     40            return;
     41
    3042        // Use deep extend to ensure that multipart_params and other objects are cloned.
    31         this.plupload = $.extend( true, { multipart_params: {} }, wpPluploadDefaults );
     43        this.plupload = $.extend( true, { multipart_params: {} }, Uploader.defaults );
    3244        this.container = document.body; // Set default container.
    3345
     
    6981        delete this.params;
    7082
    71         this.uploader.bind( 'Init', this.init );
    72 
    7383        this.uploader.init();
     84
     85        this.supports.dragdrop = this.uploader.features.dragdrop && ! Uploader.browser.mobile;
    7486
    7587        // Generate drag/drop helper classes.
     
    100112                dropzone.removeClass('drag-over');
    101113            });
    102         }( this.dropzone, this.uploader.features.dragdrop ));
     114        }( this.dropzone, this.supports.dragdrop ));
    103115
    104116        this.browser.on( 'mouseenter', this.refresh );
     
    148160            up.start();
    149161        });
     162
     163        this.init();
    150164    };
     165
     166    // Adds the 'defaults' and 'browser' properties.
     167    $.extend( Uploader, _wpPluploadSettings );
    151168
    152169    Uploader.uuid = 0;
  • trunk/wp-includes/media.php

    r20701 r21014  
    14681468    $max_upload_size = wp_max_upload_size();
    14691469
    1470     $settings = array(
     1470    $defaults = array(
    14711471        'runtimes'            => 'html5,silverlight,flash,html4',
    14721472        'file_data_name'      => 'async-upload', // key passed to $_FILE.
     
    14811481    );
    14821482
    1483     $settings = apply_filters( 'plupload_default_settings', $settings );
     1483    $defaults = apply_filters( 'plupload_default_settings', $defaults );
    14841484
    14851485    $params = array(
     
    14891489    $params = apply_filters( 'plupload_default_params', $params );
    14901490    $params['_wpnonce'] = wp_create_nonce( 'media-form' );
    1491     $settings['multipart_params'] = $params;
    1492 
    1493     $script = 'var wpPluploadDefaults = ' . json_encode( $settings ) . ';';
     1491    $defaults['multipart_params'] = $params;
     1492
     1493    $settings = array(
     1494        'defaults' => $defaults,
     1495        'browser'  => array(
     1496            'mobile'    => wp_is_mobile(),
     1497            'supported' => _device_can_upload(),
     1498        ),
     1499    );
     1500
     1501    $script = 'var _wpPluploadSettings = ' . json_encode( $settings ) . ';';
    14941502
    14951503    $data = $wp_scripts->get_data( 'wp-plupload', 'data' );
  • trunk/wp-includes/theme.php

    r21002 r21014  
    16061606    $cross_domain = ( strtolower( $admin_origin[ 'host' ] ) != strtolower( $home_origin[ 'host' ] ) );
    16071607
     1608    $browser = array(
     1609        'mobile' => wp_is_mobile(),
     1610        'ios'    => wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] ),
     1611    );
     1612
    16081613    $settings = array(
    16091614        'url'           => esc_url( admin_url( 'customize.php' ) ),
    16101615        'isCrossDomain' => $cross_domain,
     1616        'browser'       => $browser,
    16111617    );
    16121618
Note: See TracChangeset for help on using the changeset viewer.