Skip to:
Content

BuddyPress.org

Changeset 10295


Ignore:
Timestamp:
10/21/2015 11:36:04 PM (9 years ago)
Author:
r-a-y
Message:

bp-legacy: Improve the UX of the "What's New" activity post form.

  • The "What's New" <textarea> is now styled more consistently across all themes.
  • The block under the textarea ("Post in" dropdown box, "Post Update" and other items) is no longer truncated when there are many items there.
  • Selecting an item in the "Post in" dropdown box or clicking on any custom button no longer animates and hides the entire block.
  • For theme developers, the 'active' CSS class is now removed from the #whats-new-content DIV on focusout.
  • For theme develoeprs, the 'active' CSS class is also added to the #whats-new-textarea DIV on focus.
  • Various style declarations in our companion stylesheets are no longer needed.

See #6569.

Location:
trunk/src/bp-templates/bp-legacy
Files:
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css

    r10291 r10295  
    126126#buddypress form#whats-new-form textarea {
    127127    background: #fff;
     128    box-sizing: border-box;
    128129    color: #555;
    129130    font-family: inherit;
    130131    font-size: medium;
    131     height: 20px;
     132    height: 2.2em;
     133    line-height: 1.4;
    132134    padding: 6px;
    133     width: 98%;
     135    width: 100%;
    134136}
    135137body.no-js #buddypress form#whats-new-form textarea {
    … …  
    144146    margin-top: 12px;
    145147}
    146 #buddypress #whats-new-options {
    147     overflow: auto;
    148     height: 0;
     148#buddypress #whats-new-options:after {
     149    clear: both;
     150    content: "";
     151    display: table;
    149152}
    150153body.no-js #buddypress #whats-new-options {

  • trunk/src/bp-templates/bp-legacy/css/buddypress.css

    r10290 r10295  
    126126#buddypress form#whats-new-form textarea {
    127127    background: #fff;
     128    box-sizing: border-box;
    128129    color: #555;
    129130    font-family: inherit;
    130131    font-size: medium;
    131     height: 20px;
     132    height: 2.2em;
     133    line-height: 1.4;
    132134    padding: 6px;
    133     width: 98%;
     135    width: 100%;
    134136}
    135137body.no-js #buddypress form#whats-new-form textarea {
    … …  
    144146    margin-top: 12px;
    145147}
    146 #buddypress #whats-new-options {
    147     overflow: auto;
    148     height: 0;
     148#buddypress #whats-new-options:after {
     149    clear: both;
     150    content: "";
     151    display: table;
    149152}
    150153body.no-js #buddypress #whats-new-options {

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen-rtl.css

    r10292 r10295  
    458458}
    459459
    460 #buddypress form#whats-new-form textarea {
    461     width: 100%;
    462 }
    463 
    464460@media screen and (max-width: 30em) {
    465461    #buddypress form#whats-new-form #whats-new-post-in-box select {
    … …  
    492488        order: 1;
    493489    }
    494 }
    495 
    496 #buddypress form#whats-new-form #whats-new-options[style] {
    497     min-height: 6rem;
    498     overflow: visible;
    499490}
    500491

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css

    r10292 r10295  
    458458}
    459459
    460 #buddypress form#whats-new-form textarea {
    461     width: 100%;
    462 }
    463 
    464460@media screen and (max-width: 30em) {
    465461    #buddypress form#whats-new-form #whats-new-post-in-box select {
    … …  
    492488        order: 1;
    493489    }
    494 }
    495 
    496 #buddypress form#whats-new-form #whats-new-options[style] {
    497     min-height: 6rem;
    498     overflow: visible;
    499490}
    500491

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss

    r10292 r10295  
    652652        }
    653653
    654         textarea {width: 100%;}
    655654        // corrective measure for clipped elements due to JS inline styling
    656655
    … …  
    687686
    688687        #whats-new-options[style] {
    689             min-height: 6rem;
    690             overflow: visible;
    691 
    692688            #whats-new-post-in-box {
    693689                border: 1px solid rgba($border-color, 0.5);

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css

    r10155 r10295  
    425425}
    426426
    427 #buddypress form#whats-new-form textarea#whats-new {
    428     width: 100%;
    429 }
    430 
    431 #buddypress form#whats-new-form #whats-new-content #whats-new-options[style] {
    432     height: auto !important;
    433 }
    434 
    435427@media screen and (max-width: 594px) {
    436428    #buddypress form#whats-new-form #whats-new-content #whats-new-options {

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen.css

    r10155 r10295  
    425425}
    426426
    427 #buddypress form#whats-new-form textarea#whats-new {
    428     width: 100%;
    429 }
    430 
    431 #buddypress form#whats-new-form #whats-new-content #whats-new-options[style] {
    432     height: auto !important;
    433 }
    434 
    435427@media screen and (max-width: 594px) {
    436428    #buddypress form#whats-new-form #whats-new-content #whats-new-options {

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen.scss

    r10155 r10295  
    673673        }
    674674
    675         textarea#whats-new {
    676             width: 100%;
    677         }
    678 
    679675        #whats-new-content {
    680 
    681             #whats-new-options[style] {
    682                 // Have to override the BP fixed height
    683                 height: auto !important;
    684             }
    685 
    686676            @media screen and (max-width: 594px) {
    687677                #whats-new-options {

  • trunk/src/bp-templates/bp-legacy/css/twentysixteen-rtl.css

    r10285 r10295  
    571571}
    572572
    573 #buddypress form#whats-new-form textarea {
    574     width: 100%;
    575 }
    576 
    577573@media screen and (max-width: 46.25em) {
    578574    #buddypress form#whats-new-form #whats-new-content {
    … …  
    581577        padding: 10px 0 0;
    582578    }
    583 }
    584 
    585 #buddypress form#whats-new-form #whats-new-content.active #whats-new-options[style] {
    586     min-height: 6rem;
    587     overflow: visible;
    588579}
    589580

  • trunk/src/bp-templates/bp-legacy/css/twentysixteen.css

    r10285 r10295  
    571571}
    572572
    573 #buddypress form#whats-new-form textarea {
    574     width: 100%;
    575 }
    576 
    577573@media screen and (max-width: 46.25em) {
    578574    #buddypress form#whats-new-form #whats-new-content {
    … …  
    581577        padding: 10px 0 0;
    582578    }
    583 }
    584 
    585 #buddypress form#whats-new-form #whats-new-content.active #whats-new-options[style] {
    586     min-height: 6rem;
    587     overflow: visible;
    588579}
    589580

  • trunk/src/bp-templates/bp-legacy/css/twentysixteen.scss

    r10285 r10295  
    873873        }
    874874
    875         textarea {width: 100%;}
    876875        // corrective measure for clipped elements due to JS inline styling
    877876
    … …  
    886885        #whats-new-content.active {
    887886            #whats-new-options[style] {
    888                 min-height: 6rem; // unit open to debate px value might be better.
    889                 overflow: visible;
    890 
    891887                #whats-new-post-in-box {
    892888                    border: 1px solid rgba($border-color, 0.5);

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen-rtl.css

    r10283 r10295  
    523523}
    524524
    525 #buddypress form#whats-new-form textarea {
    526     width: 100%;
    527 }
    528 
    529525@media screen and (max-width: 46.25em) {
    530526    #buddypress form#whats-new-form #whats-new-content {
    … …  
    533529        padding: 10px 0 0;
    534530    }
    535 }
    536 
    537 #buddypress form#whats-new-form #whats-new-content.active #whats-new-options[style] {
    538     min-height: 6rem;
    539     overflow: visible;
    540531}
    541532

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen.css

    r10283 r10295  
    523523}
    524524
    525 #buddypress form#whats-new-form textarea {
    526     width: 100%;
    527 }
    528 
    529525@media screen and (max-width: 46.25em) {
    530526    #buddypress form#whats-new-form #whats-new-content {
    … …  
    533529        padding: 10px 0 0;
    534530    }
    535 }
    536 
    537 #buddypress form#whats-new-form #whats-new-content.active #whats-new-options[style] {
    538     min-height: 6rem;
    539     overflow: visible;
    540531}
    541532

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen.scss

    r10283 r10295  
    782782        }
    783783
    784         textarea {width: 100%;}
    785784        // corrective measure for clipped elements due to JS inline styling
    786785
    … …  
    795794        #whats-new-content.active {
    796795            #whats-new-options[style] {
    797                 min-height: 6rem; // unit open to debate px value might be better.
    798                 overflow: visible;
    799 
    800796                #whats-new-post-in-box {
    801797                    border: 1px solid rgba($border-color, 0.5);

  • trunk/src/bp-templates/bp-legacy/js/buddypress.js

    r10294 r10295  
    3333        var $member_nicename = $whats_new.val();
    3434
    35         jq('#whats-new-options').animate({
    36             height:'50px'
    37         });
     35        jq('#whats-new-options').slideDown();
    3836
    3937        $whats_new.animate({
    40             height:'50px'
     38            height:'3.8em'
    4139        });
    4240
    … …  
    4745
    4846        $whats_new.val('').focus().val( $member_nicename );
     47    } else {
     48        jq('#whats-new-options').hide();
    4949    }
    5050
    … …  
    5353    /* Textarea focus */
    5454    $whats_new.focus( function(){
    55         jq('#whats-new-options').animate({
    56             height:'50px'
    57         });
    58         jq('#whats-new-form textarea').animate({
    59             height:'50px'
    60         });
     55        jq( '#whats-new-options' ).slideDown();
     56
     57        jq( this ).animate({
     58            height:'3.8em'
     59        });
     60
    6161        jq('#aw-whats-new-submit').prop('disabled', false);
    6262
     63        jq( this ).parent().addClass( 'active' );
    6364        jq( '#whats-new-content' ).addClass( 'active' );
    6465
    … …  
    8485    });
    8586
    86     /* On blur, shrink if it's empty */
    87     $whats_new.blur( function(){
    88         if ( document.activeElement !== this ) {
    89             if (!this.value.match(/\S+/)) {
    90                 this.value = '';
    91                 jq('#whats-new-options').animate({
    92                     height:'0'
     87    /* For the "What's New" form, do the following on focusout. */
     88    jq( '#whats-new-form' ).on( 'focusout', function( e ) {
     89        var elem = jq( this );
     90
     91        // Let child hover actions passthrough.
     92        // This allows click events to go through without focusout.
     93        setTimeout( function () {
     94            if ( ! elem.find(':hover').length ) {
     95                // Do not slide up if textarea has content.
     96                if ( '' !== $whats_new.val() ) {
     97                    return;
     98                }
     99
     100                $whats_new.animate({
     101                    height:'2.2em'
    93102                });
    94                 jq('form#whats-new-form textarea').animate({
    95                     height:'20px'
    96                 });
    97                 jq('#aw-whats-new-submit').prop('disabled', true);
     103
     104                jq( '#whats-new-options' ).slideUp();
     105
     106                jq('#aw-whats-new-submit').prop( 'disabled', true );
     107
    98108                jq( '#whats-new-content' ).removeClass( 'active' );
    99             }
    100         }
    101     });
     109                $whats_new.parent().removeClass( 'active' );
     110            }
     111        }, 0 );
     112    } );
    102113
    103114    /* New posts */
    … …  
    231242            }
    232243
    233             jq('#whats-new-options').animate({
    234                 height:'0px'
    235             });
     244            jq('#whats-new-options').slideUp();
    236245            jq('#whats-new-form textarea').animate({
    237                 height:'20px'
     246                height:'2.2em'
    238247            });
    239248            jq('#aw-whats-new-submit').prop('disabled', true).removeClass('loading');
Note: See TracChangeset for help on using the changeset viewer.