Skip to:
Content

BuddyPress.org

Changeset 9647


Ignore:
Timestamp:
03/25/2015 08:24:34 PM (5 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:
3 edited

Legend:

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

    r9084 r9647  
    11/* Profile field group main admin page */
    2 #tabs-bottom {
    3     background: #f5f5f5;
    4     height: 32px;
    5     border: 1px solid #dedede;
     2@-o-keyframes tab-throb {
     3    from { box-shadow: 0 0 10px #1e8cbe; }
     4    50%  { box-shadow: 0 0 0    #1e8cbe; }
     5    to   { box-shadow: 0 0 10px #1e8cbe; }
     6}
     7@-webkit-keyframes tab-throb {
     8    from { box-shadow: 0 0 10px #1e8cbe; }
     9    50%  { box-shadow: 0 0 0    #1e8cbe; }
     10    to   { box-shadow: 0 0 10px #1e8cbe; }
     11}
     12
     13@-moz-keyframes tab-throb {
     14    from { box-shadow: 0 0 10px #1e8cbe; }
     15    50%  { box-shadow: 0 0 0    #1e8cbe; }
     16    to   { box-shadow: 0 0 10px #1e8cbe; }
     17}
     18
     19#profile-field-form {
     20    margin-top: 12px;
    621}
    722
     
    1025    }
    1126    p.nofields {
    12         margin: 20px 20px 0;
     27        margin: 20px 0 0;
    1328    }
    1429
     
    2540            margin-bottom: -1px;
    2641        }
    27         ul#field-group-tabs li.ui-state-hover a {
    28             background-color: #fafafa;
    29         }
    3042        ul#field-group-tabs li.ui-state-hover a.ui-tab {
    31             border-color: #dedede #dedede #f5f5f5 #dedede;
    3243            color: #d54e21;
    3344        }
    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;
    38         }
    39         ul#field-group-tabs li.drop-candidate a.ui-tab {
    40             background-color: #ffc;
    41             border-color: #aa5 #aa5 #ccc #aa5;
    42             color: #aa8;
     45        ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
     46            -webkit-animation: tab-throb 2s infinite;
     47            -moz-animation: tab-throb 2s infinite;
     48            -o-animation: tab-throb 2s infinite;
     49            animation: tab-throb 2s infinite;
     50        }
     51        ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
     52            -webkit-box-shadow: 0 0 10px green;
     53            -moz-box-shadow: 0 0 10px green;
     54            -o-box-shadow: 0 0 10px green;
     55            box-shadow: 0 0 10px green;
     56            -webkit-animation: none;
     57            -moz-animation: none;
     58            -o-animation: none;
     59            animation: none;
     60            color: #000;
    4361        }
    4462        ul#field-group-tabs li a.ui-tab {
     
    4664            display: block;
    4765            margin-top: 3px;
    48             padding: 5px 10px 5px;
    49             border: 1px solid #dedede;
    50             border-bottom: none;
     66            padding: 5px 10px 6px;
     67            border: 1px solid #e5e5e5;
    5168            background-color: #f5f5f5;
    5269            text-decoration: none;
     
    5774        /* Selected tab */
    5875        ul#field-group-tabs li.ui-state-active a.ui-tab {
    59             background-color: #f5f5f5;
    60             margin-top: -1px;
     76            background-color: #fff;
     77            margin-top: 0;
    6178            padding: 7px 10px 7px;
    62             border: 1px solid #dedede;
    6379            border-bottom: 1px solid transparent;
    6480            color: #000;
     
    6783    /* Toolbar */
    6884    .tab-toolbar {
    69         background: #f5f5f5;
    70         border-width: 0 0 1px;
    71         border-color: #dedede;
     85        clear: right;
     86        background: #fff;
     87        border-width: 1px;
     88        border-color: #e5e5e5;
    7289        border-style: solid;
     90        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     91        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    7392        padding: 10px;
     93        margin-bottom: 10px;
    7494    }
    7595
     
    86106        float: left;
    87107        line-height: 28px;
    88         margin: 0 0 0 10px;
    89     }
    90 
    91     div.tab-wrapper {
    92         background-color: #fff;
    93         border: 1px solid #dedede;
    94         border-bottom: none;
     108    }
     109
     110    div.field-group {
    95111        clear: right;
    96         padding-bottom: 20px;
    97     }
    98 
    99     .tab-wrapper fieldset {
     112    }
     113
     114    .field-group {
     115        cursor: default;
     116        border: 1px solid #e5e5e5;
     117        background: #fff;
     118        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     119        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     120        margin-top: 10px;
     121        padding: 0 20px 20px;
     122    }
     123    .field-group .xprofile-field {
    100124        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 {
     125    }
     126    .field-group fieldset {
    110127        position: relative;
    111128        border: 1px solid #ddd;
    112         margin: 20px 20px 0;
     129        margin: 20px 0 0;
    113130        cursor: move;
    114131        background: #fafafa;
    115132        padding: 10px 0 0 ;
    116133    }
    117     .tab-wrapper fieldset fieldset legend {
    118         position: absolute;
    119         top: 10px;
    120         right: 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;
     134        .field-group fieldset legend {
     135            position: absolute;
     136            top: 10px;
     137            right: 10px;
     138            padding: 0;
    128139        }
    129140    fieldset.radio div div label,
     
    134145    fieldset.clear-value {
    135146        margin-right: 10px;
     147    }
     148    fieldset div.field-wrapper {
     149        padding: 25px 10px 10px;
    136150    }
    137151    .field-group div.actions {
     
    145159    .field-group div.actions input {
    146160        float: none;
     161    }
     162    .field-group fieldset:hover {
     163        border-color: #999;
    147164    }
    148165    .field-group fieldset:hover div.actions {
  • trunk/src/bp-xprofile/admin/css/admin.css

    r9639 r9647  
    11/* Profile field group main admin page */
     2@-o-keyframes tab-throb {
     3    from { box-shadow: 0 0 10px #1e8cbe; }
     4    50%  { box-shadow: 0 0 0    #1e8cbe; }
     5    to   { box-shadow: 0 0 10px #1e8cbe; }
     6}
    27@-webkit-keyframes tab-throb {
    38    from { box-shadow: 0 0 10px #1e8cbe; }
    4     50% { box-shadow: 0 0 00px #1e8cbe; }
    5     to { box-shadow: 0 0 10px #1e8cbe; }
    6 }
     9    50%  { box-shadow: 0 0 0    #1e8cbe; }
     10    to   { box-shadow: 0 0 10px #1e8cbe; }
     11}
     12
    713@-moz-keyframes tab-throb {
    814    from { box-shadow: 0 0 10px #1e8cbe; }
    9     50% { box-shadow: 0 0 00px #1e8cbe; }
    10     to { box-shadow: 0 0 10px #1e8cbe; }
     15    50%  { box-shadow: 0 0 0    #1e8cbe; }
     16    to   { box-shadow: 0 0 10px #1e8cbe; }
    1117}
    1218
     
    3945        ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
    4046            -webkit-animation: tab-throb 2s infinite;
     47            -moz-animation: tab-throb 2s infinite;
     48            -o-animation: tab-throb 2s infinite;
    4149            animation: tab-throb 2s infinite;
    4250        }
    43         ul#field-group-tabs li.drop-candidate a.ui-tab {
    44             background-color: transparent;
    45             border-color: #000 #000 #ccc #000;
     51        ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab {
     52            -webkit-box-shadow: 0 0 10px green;
     53            -moz-box-shadow: 0 0 10px green;
     54            -o-box-shadow: 0 0 10px green;
     55            box-shadow: 0 0 10px green;
     56            -webkit-animation: none;
     57            -moz-animation: none;
     58            -o-animation: none;
     59            animation: none;
    4660            color: #000;
    4761        }
     
    6175        ul#field-group-tabs li.ui-state-active a.ui-tab {
    6276            background-color: #fff;
    63             margin-top: 0px;
     77            margin-top: 0;
    6478            padding: 7px 10px 7px;
    6579            border-bottom: 1px solid transparent;
  • trunk/src/bp-xprofile/admin/js/admin.js

    r9637 r9647  
    201201    jQuery( 'fieldset.field-group' ).sortable({
    202202        cursor: 'move',
    203         opacity: 1,
     203        opacity: 0.7,
    204204        items: 'fieldset',
    205205        tolerance: 'pointer',
Note: See TracChangeset for help on using the changeset viewer.