Skip to:
Content

BuddyPress.org

Changeset 12041


Ignore:
Timestamp:
05/02/2018 05:25:24 PM (8 years ago)
Author:
imath
Message:

BP Nouveau: add interactivity to starring buttons in single Messages

  • Make sure the BP Tooltip is displayed
  • Toggle the color of the star when starring unstarring
  • Move the feedback messages over the threads

Props mercime

Fixes #7723

Location:
trunk/src/bp-templates/bp-nouveau
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

    r12036 r12041  
    1010?>
    1111<div class="subnav-filters filters user-subnav bp-messages-filters" id="subsubnav"></div>
     12
     13<div class="bp-messages-feedback"></div>
    1214<div class="bp-messages-content"></div>
    13 <div class="bp-messages-feedback"></div>
    1415
    1516<script type="text/html" id="tmpl-bp-messages-form">
    … …  
    229230                        <# if ( undefined !== data.star_link ) { #>
    230231
    231                                 <?php $test = 1; ?>
    232 
    233                                 <# if ( false !== data.is_starred ) { #>
    234                                         <button type="button" class="message-action-unstar bp-tooltip bp-icons" data-bp-star-link="{{data.star_link}}" data-bp-action="unstar" data-bp-tooltip="<?php esc_attr_e( 'Unstar Message', 'buddypress' ); ?>">
    235                                                 <span class="bp-screen-reader-text"><?php esc_html_e( 'Unstar Message', 'buddypress' ); ?></span>
    236                                         </button>
    237                                 <# } else { #>
    238                                         <button type="button" class="message-action-star bp-tooltip bp-icons" data-bp-star-link="{{data.star_link}}" data-bp-action="star" data-bp-tooltip="<?php esc_attr_e( 'Star Message', 'buddypress' ); ?>">
    239                                                 <span class="bp-screen-reader-text"><?php esc_html_e( 'Star Message', 'buddypress' ); ?></span>
    240                                         </button>
    241                                 <# } #>
     232                                <button type="button" class="message-action-unstar bp-tooltip bp-icons <# if ( false === data.is_starred ) { #>bp-hide<# } #>" data-bp-star-link="{{data.star_link}}" data-bp-action="unstar" data-bp-tooltip="<?php esc_attr_e( 'Unstar Message', 'buddypress' ); ?>">
     233                                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Unstar Message', 'buddypress' ); ?></span>
     234                                </button>
     235
     236                                <button type="button" class="message-action-star bp-tooltip bp-icons <# if ( false !== data.is_starred ) { #>bp-hide<# } #>" data-bp-star-link="{{data.star_link}}" data-bp-action="star" data-bp-tooltip="<?php esc_attr_e( 'Star Message', 'buddypress' ); ?>">
     237                                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Star Message', 'buddypress' ); ?></span>
     238                                </button>
    242239
    243240                        <# } #>

  • trunk/src/bp-templates/bp-nouveau/common-styles/_bp_tooltips.scss

    r11991 r12041  
    9595// Bottom Right Tooltip
    9696
    97 .bp-invites-content .bp-tooltip {
     97.bp-invites-content .bp-tooltip,
     98.message-metadata .actions .bp-tooltip,
     99.single-message-thread-header .actions .bp-tooltip {
    98100
    99101        @include bp-tooltip-bottom-right;

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

    r12040 r12041  
    30493049}
    30503050
    3051 .bp-messages-content .actions .bp-icons {
     3051.bp-messages-content .actions .bp-icons:not(.bp-hide) {
    30523052        display: inline-block;
    30533053        margin: 0;
    … …  
    30553055}
    30563056
    3057 .bp-messages-content .actions .bp-icons:before {
     3057.bp-messages-content .actions .bp-icons:not(.bp-hide):before {
    30583058        font-size: 26px;
    30593059}
    … …  
    30983098        -moz-box-shadow: 2px 1px 9px 0 #eee;
    30993099        box-shadow: 2px 1px 9px 0 #eee;
    3100         overflow: hidden;
     3100        display: table;
    31013101        padding: 0.2em;
     3102        width: 100%;
    31023103}
    31033104
    … …  
    47524753}
    47534754
    4754 .bp-invites-content .bp-tooltip:after {
     4755.bp-invites-content .bp-tooltip:after,
     4756.message-metadata .actions .bp-tooltip:after,
     4757.single-message-thread-header .actions .bp-tooltip:after {
    47554758        right: auto;
    47564759        left: 0;

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

    r12040 r12041  
    30493049}
    30503050
    3051 .bp-messages-content .actions .bp-icons {
     3051.bp-messages-content .actions .bp-icons:not(.bp-hide) {
    30523052        display: inline-block;
    30533053        margin: 0;
    … …  
    30553055}
    30563056
    3057 .bp-messages-content .actions .bp-icons:before {
     3057.bp-messages-content .actions .bp-icons:not(.bp-hide):before {
    30583058        font-size: 26px;
    30593059}
    … …  
    30983098        -moz-box-shadow: -2px 1px 9px 0 #eee;
    30993099        box-shadow: -2px 1px 9px 0 #eee;
    3100         overflow: hidden;
     3100        display: table;
    31013101        padding: 0.2em;
     3102        width: 100%;
    31023103}
    31033104
    … …  
    47524753}
    47534754
    4754 .bp-invites-content .bp-tooltip:after {
     4755.bp-invites-content .bp-tooltip:after,
     4756.message-metadata .actions .bp-tooltip:after,
     4757.single-message-thread-header .actions .bp-tooltip:after {
    47554758        left: auto;
    47564759        right: 0;

  • trunk/src/bp-templates/bp-nouveau/js/buddypress-messages.js

    r11916 r12041  
    11051105
    11061106                        if ( 'star' === action || 'unstar' === action ) {
     1107                                var opposite = {
     1108                                        'star'  : 'unstar',
     1109                                        'unstar' : 'star'
     1110                                };
     1111
    11071112                                options.data = {
    11081113                                        'star_nonce' : this.model.get( 'star_nonce' )
    11091114                                };
     1115
     1116                                $( event.currentTarget ).addClass( 'bp-hide' );
     1117                                $( event.currentTarget ).parent().find( '[data-bp-action="' + opposite[ action ] + '"]' ).removeClass( 'bp-hide' );
     1118
    11101119                        }
    11111120

  • trunk/src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

    r11916 r12041  
    175175                max-width: 30%;
    176176
    177                 .bp-icons {
     177                .bp-icons:not(.bp-hide) {
    178178                        display: inline-block;
    179179                        margin: 0;
    … …  
    231231
    232232                        @include box-shadow(-2px 1px 9px 0 #eee);
    233                         overflow: hidden;
     233                        display: table;
    234234                        padding: 0.2em;
     235                        width: 100%;
    235236
    236237                        .avatar {
Note: See TracChangeset for help on using the changeset viewer.