Skip to:
Content

BuddyPress.org

Changeset 9639


Ignore:
Timestamp:
03/24/2015 03:02:10 AM (11 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.