Skip to:
Content

BuddyPress.org

Changeset 9084


Ignore:
Timestamp:
10/16/2014 06:20:17 PM (6 years ago)
Author:
johnjamesjacoby
Message:

Update XProfile admin area title CSS and JS to bring it up-to-speed with WordPress 4.0 expectations.

  • Remove placeholder attributes on titles and rely on accompanying labels
  • Show/hide title labels the way WordPress posts currently do
  • Add 20px bottom margin to title wrappers to separate it from descriptions
  • Tweak admin area form markup slightly to accommodate these improvements
Location:
trunk/src/bp-xprofile
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-xprofile/admin/css/admin-rtl.css

    r8958 r9084  
    250250    width: 100%;
    251251}
     252
     253#bp-xprofile-add-field .titlewrap,
     254#bp-xprofile-add-field-group .titlewrap {
     255    margin-bottom: 20px;
     256}
  • trunk/src/bp-xprofile/admin/css/admin.css

    r8952 r9084  
    250250    width: 100%;
    251251}
     252
     253#bp-xprofile-add-field .titlewrap,
     254#bp-xprofile-add-field-group .titlewrap {
     255    margin-bottom: 20px;
     256}
  • trunk/src/bp-xprofile/admin/js/admin.js

    r8648 r9084  
    120120}
    121121
     122function titleHint( id ) {
     123    id = id || 'title';
     124
     125    var title = jQuery('#' + id), titleprompt = jQuery('#' + id + '-prompt-text');
     126
     127    if ( '' === title.val() ) {
     128        titleprompt.removeClass('screen-reader-text');
     129    }
     130
     131    titleprompt.click(function(){
     132        jQuery(this).addClass('screen-reader-text');
     133        title.focus();
     134    });
     135
     136    title.blur(function(){
     137        if ( '' === this.value ) {
     138            titleprompt.removeClass('screen-reader-text');
     139        }
     140    }).focus(function(){
     141        titleprompt.addClass('screen-reader-text');
     142    }).keydown(function(e){
     143        titleprompt.addClass('screen-reader-text');
     144        jQuery(this).unbind(e);
     145    });
     146};
     147
    122148jQuery( document ).ready( function() {
    123149
    124150    // Set focus in Field Title, if we're on the right page
    125151    jQuery( '#bp-xprofile-add-field #title' ).focus();
    126    
     152
    127153    // Set up deleting options ajax
    128154    jQuery( 'a.ajax-option-delete' ).on( 'click', function() {
     
    197223    // Allow reordering of field options
    198224    enableSortableFieldOptions( jQuery('#fieldtype :selected').val() );
     225
     226    // Handle title placeholder text the WordPress way
     227    titleHint( 'title' );
    199228
    200229    // tabs init with a custom tab template and an "add" callback filling in the content
  • trunk/src/bp-xprofile/bp-xprofile-classes.php

    r9075 r9084  
    494494            <?php endif; ?>
    495495
    496             <form action="<?php echo esc_url( $action ); ?>" method="post">
     496            <form id="bp-xprofile-add-field-group" action="<?php echo esc_url( $action ); ?>" method="post">
    497497                <div id="poststuff">
    498498                    <div id="post-body" class="metabox-holder columns-2">
     
    500500                            <div id="titlediv">
    501501                                <div id="titlewrap">
    502                                     <label class="screen-reader-text" id="title-prompt-text" for="title"><?php esc_html_e( 'Field Group Title', 'buddypress') ?></label>
    503                                     <input type="text" name="group_name" autocomplete="off" id="title" value="<?php echo esc_attr( $this->name ); ?>" placeholder="<?php echo esc_attr_x( 'Group Name', 'XProfile admin edit group', 'buddypress' ); ?>" />
     502                                    <label id="title-prompt-text" for="title"><?php esc_html_e( 'Field Group Name', 'buddypress') ?></label>
     503                                    <input type="text" name="group_name" id="title" value="<?php echo esc_attr( $this->name ); ?>" autocomplete="off" />
    504504                                </div>
    505505                            </div>
     
    921921                        <div id="post-body-content">
    922922                            <div id="titlediv">
    923                                 <input type="text" name="title" id="title" value="<?php echo esc_attr( $this->name ); ?>" placeholder="<?php echo esc_attr_x( 'Field Name', 'XProfile admin edit field', 'buddypress' ); ?>" />
     923                                <div class="titlewrap">
     924                                    <label id="title-prompt-text" for="title"><?php echo esc_attr_x( 'Field Name', 'XProfile admin edit field', 'buddypress' ); ?></label>
     925                                    <input type="text" name="title" id="title" value="<?php echo esc_attr( $this->name ); ?>" autocomplete="off" />
     926                                </div>
    924927                            </div>
    925928                            <div class="postbox">
Note: See TracChangeset for help on using the changeset viewer.