Skip to:
Content

BuddyPress.org

Changeset 9647


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