WordPress.org

Make WordPress Core

Changeset 14684


Ignore:
Timestamp:
05/16/2010 05:17:57 AM (11 years ago)
Author:
nacin
Message:

Custom background UI updates. props ocean90 for initial patch, see #12186.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/custom-background.php

    r14670 r14684  
    9292            return;
    9393        }
     94
    9495        if ( isset($_POST['remove-background']) ) {
    9596            // @TODO: Uploaded files are not removed here.
     
    108109            set_theme_mod('background_repeat', $repeat);
    109110        }
    110         if ( isset($_POST['background-position']) ) {
     111
     112        if ( isset($_POST['background-position-x']) ) {
    111113            check_admin_referer('custom-background');
    112             if ( in_array($_POST['background-position'], array('center', 'right', 'left')) )
    113                 $position = $_POST['background-position'];
     114            if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
     115                $position = $_POST['background-position-x'];
    114116            else
    115117                $position = 'left';
    116             set_theme_mod('background_position', $position);
    117         }
     118            set_theme_mod('background_position_x', $position);
     119        }
     120
    118121        if ( isset($_POST['background-attachment']) ) {
    119122            check_admin_referer('custom-background');
     
    124127            set_theme_mod('background_attachment', $attachment);
    125128        }
     129
    126130        if ( isset($_POST['background-color']) ) {
    127131            check_admin_referer('custom-background');
     
    156160    } else {
    157161?>
    158 <h3><?php _e('Background Preview'); ?></h3>
     162<h3><?php _e('Background Image'); ?></h3>
    159163<table class="form-table">
    160164<tbody>
    161165<tr valign="top">
    162 <th scope="row"><?php _e('Current Background'); ?></th>
     166<th scope="row"><?php _e('Preview'); ?></th>
    163167<td>
    164168<?php
    165169$background_styles = '';
    166 if ( $bgcolor = get_background_color() ) {
    167     $background_styles .= "background-color: #{$bgcolor};";
    168 }
    169 
    170 if ( get_background_image() ) {
    171     $background_styles .= "
    172     background-image: url(" . get_theme_mod('background_image_thumb', '') . ");
    173     background-repeat: ". get_theme_mod('background_repeat', 'repeat') . ";
    174     background-position: ". get_theme_mod('background_position', 'left') . " top;
    175     background-attachment: " . get_theme_mod('background_attachment', 'fixed') . ";
    176     ";
     170if ( $bgcolor = get_background_color() )
     171    $background_styles .= 'background-color: #' . $bgcolor . ';';
     172
     173if ( get_background_image() ) {
     174    // background-image URL must be single quote, see below
     175    $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
     176        . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
     177        . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
    177178}
    178179?>
    179 <div id="custom-background-image" style="<?php echo $background_styles; ?>">
     180<div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
    180181<?php if ( get_background_image() ) { ?>
    181182<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
    182183<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
    183184<?php } ?>
    184 <br class="clear" />
    185185</div>
    186186<?php } ?>
     
    190190<tr valign="top">
    191191<th scope="row"><?php _e('Remove Image'); ?></th>
    192 <td><p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p>
     192<td>
    193193<form method="post" action="">
    194194<?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
    195 <input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background'); ?>" />
     195<input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background Image'); ?>" /><br/>
     196<?php _e('This will remove the background image. You will not be able to restore any customizations.') ?>
    196197</form>
    197198</td>
     
    202203<tr valign="top">
    203204<th scope="row"><?php _e('Restore Original Image'); ?></th>
    204 <td><p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p>
     205<td>
    205206<form method="post" action="">
    206207<?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
    207 <input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" />
     208<input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" /><br/>
     209<?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?>
    208210</form>
    209211</td>
     
    217219<input type="hidden" name="action" value="save" />
    218220<?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
    219 <p class="submit">
    220 <input type="submit" value="<?php esc_attr_e('Upload'); ?>" />
     221<input type="submit" class="button" value="<?php esc_attr_e('Upload'); ?>" />
    221222</p>
    222223</form>
     
    231232<tbody>
    232233<tr valign="top">
    233 <th scope="row"><?php _e( 'Background Color' ); ?></th>
     234<th scope="row"><?php _e( 'Color' ); ?></th>
    234235<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
    235236<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
    236237<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
    237 
    238238<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    239239</fieldset></td>
    240240</tr>
    241 
    242 <tr valign="top">
    243 <th scope="row"><?php _e( 'Background Position' ); ?></th>
     241<?php if ( get_background_image() ) : ?>
     242<tr valign="top">
     243<th scope="row"><?php _e( 'Position' ); ?></th>
    244244<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
    245245<label>
    246 <input name="background-position" type="radio" value="left" <?php checked('left', get_theme_mod('background_position', 'left')); ?> />
     246<input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
    247247<?php _e('Left') ?>
    248248</label>
    249249<label>
    250 <input name="background-position" type="radio" value="center" <?php checked('center', get_theme_mod('background_position', 'left')); ?> />
     250<input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
    251251<?php _e('Center') ?>
    252252</label>
    253253<label>
    254 <input name="background-position" type="radio" value="right" <?php checked('right', get_theme_mod('background_position', 'left')); ?> />
     254<input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
    255255<?php _e('Right') ?>
    256256</label>
     
    263263<label>
    264264<select name="background-repeat">
    265     <option value="no-repeat" <?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option>
    266     <option value="repeat" <?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option>
    267     <option value="repeat-x" <?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option>
    268     <option value="repeat-y" <?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option>
     265    <option value="no-repeat"<?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option>
     266    <option value="repeat"<?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option>
     267    <option value="repeat-x"<?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option>
     268    <option value="repeat-y"<?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option>
    269269</select>
    270270</label>
     
    285285</fieldset></td>
    286286</tr>
    287 
     287<?php endif; // get_background_image() ?>
    288288</tbody>
    289289</table>
  • trunk/wp-admin/js/custom-background.dev.js

    r14670 r14684  
    1313
    1414    jQuery('#background-color').keyup(function() {
    15         var _hex = jQuery('#background-color').val();
    16         var hex = _hex;
     15        var _hex = jQuery('#background-color').val(), hex = _hex;
    1716        if ( hex[0] != '#' )
    1817            hex = '#' + hex;
     
    2423    });
    2524
    26     jQuery('input[name="background-position"]').change(function() {
    27         jQuery('#custom-background-image').css('background-position', 'top ' + jQuery(this).val());
     25    jQuery('input[name="background-position-x"]').change(function() {
     26        jQuery('#custom-background-image').css('background-position', jQuery(this).val() + ' top');
    2827    });
    2928
    3029    jQuery('select[name="background-repeat"]').change(function() {
    3130        jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
    32     });
    33    
    34     jQuery('input[name="background-attachment"]').change(function() {
    35         jQuery('#custom-background-image').css('background-attachment', jQuery(this).val());
    3631    });
    3732
  • trunk/wp-admin/js/custom-background.js

    r14670 r14684  
    1 var farbtastic;function pickColor(a){farbtastic.setColor(a);jQuery("#background-color").val(a);jQuery("#custom-background-image").css("background-color",a)}jQuery(document).ready(function(){jQuery("#pickcolor").click(function(){jQuery("#colorPickerDiv").show()});jQuery("#background-color").keyup(function(){var b=jQuery("#background-color").val();var a=b;if(a[0]!="#"){a="#"+a}a=a.replace(/[^#a-fA-F0-9]+/,"");if(a!=b){jQuery("#background-color").val(a)}if(a.length==4||a.length==7){pickColor(a)}});jQuery('input[name="background-position"]').change(function(){jQuery("#custom-background-image").css("background-position","top "+jQuery(this).val())});jQuery('select[name="background-repeat"]').change(function(){jQuery("#custom-background-image").css("background-repeat",jQuery(this).val())});jQuery('input[name="background-attachment"]').change(function(){jQuery("#custom-background-image").css("background-attachment",jQuery(this).val())});farbtastic=jQuery.farbtastic("#colorPickerDiv",function(a){pickColor(a)});pickColor(jQuery("#background-color").val());jQuery(document).mousedown(function(){jQuery("#colorPickerDiv").each(function(){var a=jQuery(this).css("display");if(a=="block"){jQuery(this).fadeOut(2)}})})});
     1var farbtastic;function pickColor(a){farbtastic.setColor(a);jQuery("#background-color").val(a);jQuery("#custom-background-image").css("background-color",a)}jQuery(document).ready(function(){jQuery("#pickcolor").click(function(){jQuery("#colorPickerDiv").show()});jQuery("#background-color").keyup(function(){var b=jQuery("#background-color").val(),a=b;if(a[0]!="#"){a="#"+a}a=a.replace(/[^#a-fA-F0-9]+/,"");if(a!=b){jQuery("#background-color").val(a)}if(a.length==4||a.length==7){pickColor(a)}});jQuery('input[name="background-position-x"]').change(function(){jQuery("#custom-background-image").css("background-position",jQuery(this).val()+" top")});jQuery('select[name="background-repeat"]').change(function(){jQuery("#custom-background-image").css("background-repeat",jQuery(this).val())});farbtastic=jQuery.farbtastic("#colorPickerDiv",function(a){pickColor(a)});pickColor(jQuery("#background-color").val());jQuery(document).mousedown(function(){jQuery("#colorPickerDiv").each(function(){var a=jQuery(this).css("display");if(a=="block"){jQuery(this).fadeOut(2)}})})});
  • trunk/wp-includes/script-loader.php

    r14682 r14684  
    406406        ) );
    407407
    408         $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), '20100321' );
     408        $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), '20100516' );
    409409        $scripts->add_data( 'custom-background', 'group', 1 );
    410         // See wp_just_in_time_script_localization() for translation data for this object
    411410    }
    412411}
     
    530529    ) );
    531530
    532     wp_localize_script( 'custom-background', 'customBackgroundL10n', array(
    533         'backgroundcolor' => '#' . get_background_color(),
    534     ) );
    535531}
    536532
  • trunk/wp-includes/theme.php

    r14658 r14684  
    15541554    }
    15551555
    1556     switch ( get_theme_mod('background_position', 'left') ) {
     1556    switch ( get_theme_mod('background_position_x', 'left') ) {
    15571557        case 'center':
    15581558            $position = 'background-position: top center;';
Note: See TracChangeset for help on using the changeset viewer.