Changeset 9647

Timestamp:

03/25/2015 08:24:34 PM (10 years ago)

Author:

johnjamesjacoby

Message:

XProfile: Update droppable field-group tab UI thobber styling to better indicate drag & dropping is possible. Props hnla. See #6318.

Location:

trunk/src/bp-xprofile/admin

Files:

• css/admin-rtl.css (modified) (9 diffs)
• css/admin.css (modified) (3 diffs)
• js/admin.js (modified) (1 diff)

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

@@ -1 +1 @@
 /* Profile field group main admin page */
-#tabs-bottom {
-    background: #f5f5f5;
-    height: 32px;
-    border: 1px solid #dedede;
+@-o-keyframes tab-throb {
+    from { box-shadow: 0 0 10px #1e8cbe; }
+    50%  { box-shadow: 0 0 0    #1e8cbe; }
+    to   { box-shadow: 0 0 10px #1e8cbe; }
+}
+@-webkit-keyframes tab-throb {
+    from { box-shadow: 0 0 10px #1e8cbe; }
+    50%  { box-shadow: 0 0 0    #1e8cbe; }
+    to   { box-shadow: 0 0 10px #1e8cbe; }
+}
+
+@-moz-keyframes tab-throb {
+    from { box-shadow: 0 0 10px #1e8cbe; }
+    50%  { box-shadow: 0 0 0    #1e8cbe; }
+    to   { box-shadow: 0 0 10px #1e8cbe; }
+}
+
+#profile-field-form {
+    margin-top: 12px;
 }
 
@@ -10 +25 @@
     }
     p.nofields {
-        margin: 20px 20px 0;
+        margin: 20px 0 0;
     }
 
@@ -25 +40 @@
             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.drop-candidate a.ui-tab {
-            background-color: #ffc;
-            border-color: #aa5 #aa5 #ccc #aa5;
-            color: #aa8;
+        ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
+            -webkit-animation: tab-throb 2s infinite;
+            -moz-animation: tab-throb 2s infinite;
+            -o-animation: tab-throb 2s infinite;
+            animation: tab-throb 2s infinite;
+        }
+        ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
+            -webkit-box-shadow: 0 0 10px green;
+            -moz-box-shadow: 0 0 10px green;
+            -o-box-shadow: 0 0 10px green;
+            box-shadow: 0 0 10px green;
+            -webkit-animation: none;
+            -moz-animation: none;
+            -o-animation: none;
+            animation: none;
+            color: #000;
         }
         ul#field-group-tabs li a.ui-tab {
@@ -46 +64 @@
             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 +74 @@
         /* Selected tab */
         ul#field-group-tabs li.ui-state-active a.ui-tab {
-            background-color: #f5f5f5;
-            margin-top: -1px;
+            background-color: #fff;
+            margin-top: 0;
             padding: 7px 10px 7px;
-            border: 1px solid #dedede;
             border-bottom: 1px solid transparent;
             color: #000;
@@ -67 +83 @@
     /* Toolbar */
     .tab-toolbar {
-        background: #f5f5f5;
-        border-width: 0 0 1px;
-        border-color: #dedede;
+        clear: right;
+        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 +106 @@
         float: left;
         line-height: 28px;
-        margin: 0 0 0 10px;
-    }
-
-    div.tab-wrapper {
-        background-color: #fff;
-        border: 1px solid #dedede;
-        border-bottom: none;
+    }
+
+    div.field-group {
         clear: right;
-        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;
-        right: 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;
+            right: 10px;
+            padding: 0;
         }
     fieldset.radio div div label,
@@ -134 +145 @@
     fieldset.clear-value {
         margin-right: 10px;
+    }
+    fieldset div.field-wrapper {
+        padding: 25px 10px 10px;
     }
     .field-group div.actions {
@@ -145 +159 @@
     .field-group div.actions input {
         float: none;
+    }
+    .field-group fieldset:hover {
+        border-color: #999;
     }
     .field-group fieldset:hover div.actions {

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

@@ -1 +1 @@
 /* Profile field group main admin page */
+@-o-keyframes tab-throb {
+    from { box-shadow: 0 0 10px #1e8cbe; }
+    50%  { box-shadow: 0 0 0    #1e8cbe; }
+    to   { box-shadow: 0 0 10px #1e8cbe; }
+}
 @-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; }
-}
+    50%  { box-shadow: 0 0 0    #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; }
+    50%  { box-shadow: 0 0 0    #1e8cbe; }
+    to   { box-shadow: 0 0 10px #1e8cbe; }
 }
 
@@ -39 +45 @@
         ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
             -webkit-animation: tab-throb 2s infinite;
+            -moz-animation: tab-throb 2s infinite;
+            -o-animation: tab-throb 2s infinite;
             animation: tab-throb 2s infinite;
         }
-        ul#field-group-tabs li.drop-candidate a.ui-tab {
-            background-color: transparent;
-            border-color: #000 #000 #ccc #000;
+        ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
+            -webkit-box-shadow: 0 0 10px green;
+            -moz-box-shadow: 0 0 10px green;
+            -o-box-shadow: 0 0 10px green;
+            box-shadow: 0 0 10px green;
+            -webkit-animation: none;
+            -moz-animation: none;
+            -o-animation: none;
+            animation: none;
             color: #000;
         }
@@ -61 +75 @@
         ul#field-group-tabs li.ui-state-active a.ui-tab {
             background-color: #fff;
-            margin-top: 0px;
+            margin-top: 0;
             padding: 7px 10px 7px;
             border-bottom: 1px solid transparent;

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

@@ -201 +201 @@
     jQuery( 'fieldset.field-group' ).sortable({
         cursor: 'move',
-        opacity: 1,
+        opacity: 0.7,
         items: 'fieldset',
         tolerance: 'pointer',