Skip to:
Content

BuddyPress.org

Changeset 9639


Ignore:
Timestamp:
03/24/2015 03:02:10 AM (6 years ago)
Author:
johnjamesjacoby
Message:

XProfile: First pass at refreshing the the "Profile Fields" UI to better match current WordPress design direction.

Likely more iteration needed here, as everyone is a critic. See #6318.

Location:
trunk/src/bp-xprofile
Files:
2 edited

Legend:

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

    r9084 r9639  
    11/* Profile field group main admin page */
    2 #tabs-bottom {
    3     background: #f5f5f5;
    4     height: 32px;
    5     border: 1px solid #dedede;
     2@-webkit-keyframes tab-throb {
     3    from { box-shadow: 0 0 10px #1e8cbe; }
     4    50% { box-shadow: 0 0 00px #1e8cbe; }
     5    to { box-shadow: 0 0 10px #1e8cbe; }
     6}
     7@-moz-keyframes tab-throb {
     8    from { box-shadow: 0 0 10px #1e8cbe; }
     9    50% { box-shadow: 0 0 00px #1e8cbe; }
     10    to { box-shadow: 0 0 10px #1e8cbe; }
     11}
     12
     13#profile-field-form {
     14    margin-top: 12px;
    615}
    716
     
    1019    }
    1120    p.nofields {
    12         margin: 20px 20px 0;
     21        margin: 20px 0 0;
    1322    }
    1423
     
    2534            margin-bottom: -1px;
    2635        }
    27         ul#field-group-tabs li.ui-state-hover a {
    28             background-color: #fafafa;
    29         }
    3036        ul#field-group-tabs li.ui-state-hover a.ui-tab {
    31             border-color: #dedede #dedede #f5f5f5 #dedede;
    3237            color: #d54e21;
    3338        }
    34         ul#field-group-tabs li.ui-state-acceptable a.ui-tab {
    35             border-color: #5a5 #5a5 #ccc #5a5;
    36             color: #8a8;
    37             background-color: #efe;
     39        ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
     40            -webkit-animation: tab-throb 2s infinite;
     41            animation: tab-throb 2s infinite;
    3842        }
    3943        ul#field-group-tabs li.drop-candidate a.ui-tab {
    40             background-color: #ffc;
    41             border-color: #aa5 #aa5 #ccc #aa5;
    42             color: #aa8;
     44            background-color: transparent;
     45            border-color: #000 #000 #ccc #000;
     46            color: #000;
    4347        }
    4448        ul#field-group-tabs li a.ui-tab {
     
    4650            display: block;
    4751            margin-top: 3px;
    48             padding: 5px 10px 5px;
    49             border: 1px solid #dedede;
    50             border-bottom: none;
     52            padding: 5px 10px 6px;
     53            border: 1px solid #e5e5e5;
    5154            background-color: #f5f5f5;
    5255            text-decoration: none;
     
    5760        /* Selected tab */
    5861        ul#field-group-tabs li.ui-state-active a.ui-tab {
    59             background-color: #f5f5f5;
    60             margin-top: -1px;
     62            background-color: #fff;
     63            margin-top: 0px;
    6164            padding: 7px 10px 7px;
    62             border: 1px solid #dedede;
    6365            border-bottom: 1px solid transparent;
    6466            color: #000;
     
    6769    /* Toolbar */
    6870    .tab-toolbar {
    69         background: #f5f5f5;
    70         border-width: 0 0 1px;
    71         border-color: #dedede;
     71        clear: left;
     72        background: #fff;
     73        border-width: 1px;
     74        border-color: #e5e5e5;
    7275        border-style: solid;
     76        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     77        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    7378        padding: 10px;
     79        margin-bottom: 10px;
    7480    }
    7581
     
    8692        float: right;
    8793        line-height: 28px;
    88         margin: 0 10px 0 0;
    89     }
    90 
    91     div.tab-wrapper {
    92         background-color: #fff;
    93         border: 1px solid #dedede;
    94         border-bottom: none;
     94    }
     95
     96    div.field-group {
    9597        clear: left;
    96         padding-bottom: 20px;
    97     }
    98 
    99     .tab-wrapper fieldset {
     98    }
     99
     100    .field-group {
     101        cursor: default;
     102        border: 1px solid #e5e5e5;
     103        background: #fff;
     104        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     105        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     106        margin-top: 10px;
     107        padding: 0 20px 20px;
     108    }
     109    .field-group .xprofile-field {
    100110        position: relative;
    101         cursor: default;
    102     }
    103         .tab-wrapper fieldset legend {
    104             font-weight: bold;
    105         }
    106     .tab-wrapper .xprofile-field {
    107         position: relative;
    108     }
    109     .tab-wrapper fieldset fieldset {
     111    }
     112    .field-group fieldset {
    110113        position: relative;
    111114        border: 1px solid #ddd;
    112         margin: 20px 20px 0;
     115        margin: 20px 0 0;
    113116        cursor: move;
    114117        background: #fafafa;
    115118        padding: 10px 0 0 ;
    116119    }
    117     .tab-wrapper fieldset fieldset legend {
    118         position: absolute;
    119         top: 10px;
    120         left: 10px;
    121         padding: 0;
    122     }
    123         .field-group fieldset:hover {
    124             border-color: #999;
    125         }
    126         fieldset div.field-wrapper {
    127             padding: 25px 10px 10px;
     120        .field-group fieldset legend {
     121            position: absolute;
     122            top: 10px;
     123            left: 10px;
     124            padding: 0;
    128125        }
    129126    fieldset.radio div div label,
     
    134131    fieldset.clear-value {
    135132        margin-left: 10px;
     133    }
     134    fieldset div.field-wrapper {
     135        padding: 25px 10px 10px;
    136136    }
    137137    .field-group div.actions {
     
    145145    .field-group div.actions input {
    146146        float: none;
     147    }
     148    .field-group fieldset:hover {
     149        border-color: #999;
    147150    }
    148151    .field-group fieldset:hover div.actions {
  • trunk/src/bp-xprofile/bp-xprofile-admin.php

    r9471 r9639  
    7373        </h2>
    7474
    75         <p><?php echo sprintf( __( 'Fields in the "%s" group will appear on the signup page.', 'buddypress' ), esc_html( stripslashes( bp_get_option( 'bp-xprofile-base-group-name' ) ) ) ) ?></p>
    76 
    7775        <form action="" id="profile-field-form" method="post">
    7876
     
    8684
    8785                <div id="message" class="<?php echo $type; ?> fade">
    88                     <p><?php echo esc_html( esc_attr( $message ) ); ?></p>
     86                    <p><?php echo esc_html( $message ); ?></p>
    8987                </div>
    9088
     
    9694                    <?php if ( !empty( $groups ) ) : foreach ( $groups as $group ) : ?>
    9795
    98                         <li id="group_<?php echo $group->id; ?>"><a href="#tabs-<?php echo $group->id; ?>" class="ui-tab"><?php echo esc_attr( $group->name ); ?><?php if ( !$group->can_delete ) : ?> <?php _e( '(Primary)', 'buddypress'); endif; ?></a></li>
     96                        <li id="group_<?php echo esc_attr( $group->id ); ?>">
     97                            <a href="#tabs-<?php echo esc_attr( $group->id ); ?>" class="ui-tab">
     98                                <?php echo esc_attr( $group->name ); ?>
     99
     100                                <?php if ( !$group->can_delete ) : ?>
     101                                    <?php _e( '(Primary)', 'buddypress'); ?>
     102                                <?php endif; ?>
     103
     104                                <span class="spinner"></span>
     105                            </a>
     106                        </li>
    99107
    100108                    <?php endforeach; endif; ?>
     
    108116                    </noscript>
    109117
    110                     <div id="tabs-<?php echo $group->id; ?>" class="tab-wrapper">
     118                    <div id="tabs-<?php echo esc_attr( $group->id ); ?>" class="tab-wrapper">
    111119                        <div class="tab-toolbar">
    112120                            <div class="tab-toolbar-left">
     
    116124                                <?php if ( $group->can_delete ) : ?>
    117125
    118                                     <a class="confirm submitdelete deletion ajax-option-delete" href="users.php?page=bp-profile-setup&amp;mode=delete_group&amp;group_id=<?php echo esc_attr( $group->id ); ?>"><?php _e( 'Delete Group', 'buddypress' ); ?></a>
     126                                    <div class="delete-button">
     127                                        <a class="confirm submitdelete deletion ajax-option-delete" href="users.php?page=bp-profile-setup&amp;mode=delete_group&amp;group_id=<?php echo esc_attr( $group->id ); ?>"><?php _e( 'Delete Group', 'buddypress' ); ?></a>
     128                                    </div>
    119129
    120130                                <?php endif; ?>
     
    135145                        </div>
    136146
    137                         <fieldset id="<?php echo $group->id; ?>" class="connectedSortable field-group">
    138 
    139                             <?php if ( $group->description ) : ?>
    140 
    141                                 <legend><?php echo esc_attr( $group->description ) ?></legend>
    142 
    143                             <?php endif;
     147                        <?php if ( ! empty( $group->description ) ) : ?>
     148
     149                            <p><?php echo esc_html( $group->description ); ?></p>
     150
     151                        <?php endif; ?>
     152
     153                        <fieldset id="<?php echo esc_attr( $group->id ); ?>" class="connectedSortable field-group">
     154                            <legend class="screen-reader-text"><?php printf( esc_html__( 'Fields for "%s" Group', 'buddypress' ), $group->name ); ?></legend>
     155
     156                            <?php
    144157
    145158                            if ( !empty( $group->fields ) ) :
     
    150163
    151164                                    $class = '';
    152                                     if ( !$field->can_delete )
     165                                    if ( empty( $field->can_delete ) ) {
    153166                                        $class = ' core nodrag';
    154 
    155                                     /* This function handles the WYSIWYG profile field
    156                                     * display for the xprofile admin setup screen
    157                                     */
     167                                    }
     168
     169                                    /**
     170                                     * This function handles the WYSIWYG profile field
     171                                     * display for the xprofile admin setup screen
     172                                     */
    158173                                    xprofile_admin_field( $field, $group, $class );
    159174
     
    167182
    168183                        </fieldset>
     184
     185                        <?php if ( empty( $group->can_delete ) ) : ?>
     186
     187                            <p><?php esc_html_e( '* Fields in this group appear on the signup page.', 'buddypress' ); ?></p>
     188
     189                        <?php endif; ?>
     190
    169191                    </div>
    170192
     
    176198                <?php endif; ?>
    177199
    178                 <div id="tabs-bottom">&nbsp;</div>
    179200            </div>
    180201        </form>
Note: See TracChangeset for help on using the changeset viewer.