Skip to:
Content

BuddyPress.org

Changeset 12041


Ignore:
Timestamp:
05/02/2018 05:25:24 PM (18 months 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.