Changeset 9639

Timestamp:

03/24/2015 03:02:10 AM (9 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:

• admin/css/admin.css (modified) (9 diffs)
• bp-xprofile-admin.php (modified) (9 diffs)

trunk/src/bp-xprofile/admin/css/admin.css

@@ -1 +1 @@
 /* Profile field group main admin page */
-#tabs-bottom {
-    background: #f5f5f5;
-    height: 32px;
-    border: 1px solid #dedede;
+@-webkit-keyframes tab-throb {
+    from { box-shadow: 0 0 10px #1e8cbe; }
+    50% { box-shadow: 0 0 00px #1e8cbe; }
+    to { box-shadow: 0 0 10px #1e8cbe; }
+}
+@-moz-keyframes tab-throb {
+    from { box-shadow: 0 0 10px #1e8cbe; }
+    50% { box-shadow: 0 0 00px #1e8cbe; }
+    to { box-shadow: 0 0 10px #1e8cbe; }
+}
+
+#profile-field-form {
+    margin-top: 12px;
 }
 
@@ -10 +19 @@
     }
     p.nofields {
-        margin: 20px 20px 0;
+        margin: 20px 0 0;
     }
 
@@ -25 +34 @@
             margin-bottom: -1px;
         }
-        ul#field-group-tabs li.ui-state-hover a {
-            background-color: #fafafa;
-        }
         ul#field-group-tabs li.ui-state-hover a.ui-tab {
-            border-color: #dedede #dedede #f5f5f5 #dedede;
             color: #d54e21;
         }
-        ul#field-group-tabs li.ui-state-acceptable a.ui-tab {
-            border-color: #5a5 #5a5 #ccc #5a5;
-            color: #8a8;
-            background-color: #efe;
+        ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
+            -webkit-animation: tab-throb 2s infinite;
+            animation: tab-throb 2s infinite;
         }
         ul#field-group-tabs li.drop-candidate a.ui-tab {
-            background-color: #ffc;
-            border-color: #aa5 #aa5 #ccc #aa5;
-            color: #aa8;
+            background-color: transparent;
+            border-color: #000 #000 #ccc #000;
+            color: #000;
         }
         ul#field-group-tabs li a.ui-tab {
@@ -46 +50 @@
             display: block;
             margin-top: 3px;
-            padding: 5px 10px 5px;
-            border: 1px solid #dedede;
-            border-bottom: none;
+            padding: 5px 10px 6px;
+            border: 1px solid #e5e5e5;
             background-color: #f5f5f5;
             text-decoration: none;
@@ -57 +60 @@
         /* Selected tab */
         ul#field-group-tabs li.ui-state-active a.ui-tab {
-            background-color: #f5f5f5;
-            margin-top: -1px;
+            background-color: #fff;
+            margin-top: 0px;
             padding: 7px 10px 7px;
-            border: 1px solid #dedede;
             border-bottom: 1px solid transparent;
             color: #000;
@@ -67 +69 @@
     /* Toolbar */
     .tab-toolbar {
-        background: #f5f5f5;
-        border-width: 0 0 1px;
-        border-color: #dedede;
+        clear: left;
+        background: #fff;
+        border-width: 1px;
+        border-color: #e5e5e5;
         border-style: solid;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
         padding: 10px;
+        margin-bottom: 10px;
     }
 
@@ -86 +92 @@
         float: right;
         line-height: 28px;
-        margin: 0 10px 0 0;
-    }
-
-    div.tab-wrapper {
-        background-color: #fff;
-        border: 1px solid #dedede;
-        border-bottom: none;
+    }
+
+    div.field-group {
         clear: left;
-        padding-bottom: 20px;
-    }
-
-    .tab-wrapper fieldset {
+    }
+
+    .field-group {
+        cursor: default;
+        border: 1px solid #e5e5e5;
+        background: #fff;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        margin-top: 10px;
+        padding: 0 20px 20px;
+    }
+    .field-group .xprofile-field {
         position: relative;
-        cursor: default;
-    }
-        .tab-wrapper fieldset legend {
-            font-weight: bold;
-        }
-    .tab-wrapper .xprofile-field {
-        position: relative;
-    }
-    .tab-wrapper fieldset fieldset {
+    }
+    .field-group fieldset {
         position: relative;
         border: 1px solid #ddd;
-        margin: 20px 20px 0;
+        margin: 20px 0 0;
         cursor: move;
         background: #fafafa;
         padding: 10px 0 0 ;
     }
-    .tab-wrapper fieldset fieldset legend {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        padding: 0;
-    }
-        .field-group fieldset:hover {
-            border-color: #999;
-        }
-        fieldset div.field-wrapper {
-            padding: 25px 10px 10px;
+        .field-group fieldset legend {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            padding: 0;
         }
     fieldset.radio div div label,
@@ -134 +131 @@
     fieldset.clear-value {
         margin-left: 10px;
+    }
+    fieldset div.field-wrapper {
+        padding: 25px 10px 10px;
     }
     .field-group div.actions {
@@ -145 +145 @@
     .field-group div.actions input {
         float: none;
+    }
+    .field-group fieldset:hover {
+        border-color: #999;
     }
     .field-group fieldset:hover div.actions {

trunk/src/bp-xprofile/bp-xprofile-admin.php

@@ -73 +73 @@
         </h2>
 
-        <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>
-
         <form action="" id="profile-field-form" method="post">
 
@@ -86 +84 @@
 
                 <div id="message" class="<?php echo $type; ?> fade">
-                    <p><?php echo esc_html( esc_attr( $message ) ); ?></p>
+                    <p><?php echo esc_html( $message ); ?></p>
                 </div>
 
@@ -96 +94 @@
                     <?php if ( !empty( $groups ) ) : foreach ( $groups as $group ) : ?>
 
-                        <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>
+                        <li id="group_<?php echo esc_attr( $group->id ); ?>">
+                            <a href="#tabs-<?php echo esc_attr( $group->id ); ?>" class="ui-tab">
+                                <?php echo esc_attr( $group->name ); ?>
+
+                                <?php if ( !$group->can_delete ) : ?>
+                                    <?php _e( '(Primary)', 'buddypress'); ?>
+                                <?php endif; ?>
+
+                                <span class="spinner"></span>
+                            </a>
+                        </li>
 
                     <?php endforeach; endif; ?>
@@ -108 +116 @@
                     </noscript>
 
-                    <div id="tabs-<?php echo $group->id; ?>" class="tab-wrapper">
+                    <div id="tabs-<?php echo esc_attr( $group->id ); ?>" class="tab-wrapper">
                         <div class="tab-toolbar">
                             <div class="tab-toolbar-left">
@@ -116 +124 @@
                                 <?php if ( $group->can_delete ) : ?>
 
-                                    <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>
+                                    <div class="delete-button">
+                                        <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>
+                                    </div>
 
                                 <?php endif; ?>
@@ -135 +145 @@
                         </div>
 
-                        <fieldset id="<?php echo $group->id; ?>" class="connectedSortable field-group">
-
-                            <?php if ( $group->description ) : ?>
-
-                                <legend><?php echo esc_attr( $group->description ) ?></legend>
-
-                            <?php endif;
+                        <?php if ( ! empty( $group->description ) ) : ?>
+
+                            <p><?php echo esc_html( $group->description ); ?></p>
+
+                        <?php endif; ?>
+
+                        <fieldset id="<?php echo esc_attr( $group->id ); ?>" class="connectedSortable field-group">
+                            <legend class="screen-reader-text"><?php printf( esc_html__( 'Fields for "%s" Group', 'buddypress' ), $group->name ); ?></legend>
+
+                            <?php
 
                             if ( !empty( $group->fields ) ) :
@@ -150 +163 @@
 
                                     $class = '';
-                                    if ( !$field->can_delete )
+                                    if ( empty( $field->can_delete ) ) {
                                         $class = ' core nodrag';
-
-                                    /* This function handles the WYSIWYG profile field
-                                    * display for the xprofile admin setup screen
-                                    */
+                                    }
+
+                                    /**
+                                     * This function handles the WYSIWYG profile field
+                                     * display for the xprofile admin setup screen
+                                     */
                                     xprofile_admin_field( $field, $group, $class );
 
@@ -167 +182 @@
 
                         </fieldset>
+
+                        <?php if ( empty( $group->can_delete ) ) : ?>
+
+                            <p><?php esc_html_e( '* Fields in this group appear on the signup page.', 'buddypress' ); ?></p>
+
+                        <?php endif; ?>
+
                     </div>
 
@@ -176 +198 @@
                 <?php endif; ?>
 
-                <div id="tabs-bottom">&nbsp;</div>
             </div>
         </form>