Ticket #7723: 7723-tooltips-etc.patch

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

@@ -9 +9 @@
  */
 ?>
 <div class="subnav-filters filters user-subnav bp-messages-filters" id="subsubnav"></div>
+
+<div class="bp-messages-feedback"></div>
 <div class="bp-messages-content"></div>
-<div class="bp-messages-feedback"></div>
 
 <script type="text/html" id="tmpl-bp-messages-form">
         <?php bp_nouveau_messages_hook( 'before', 'compose_content' ); ?>
@@ -228 +229 @@
                 <div class="actions">
                         <# if ( undefined !== data.star_link ) { #>
 
-                                <?php $test = 1; ?>
+                                <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' ); ?>">
+                                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Unstar Message', 'buddypress' ); ?></span>
+                                </button>
 
-                                <# if ( false !== data.is_starred ) { #>
-                                        <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' ); ?>">
-                                                <span class="bp-screen-reader-text"><?php esc_html_e( 'Unstar Message', 'buddypress' ); ?></span>
-                                        </button>
-                                <# } else { #>
-                                        <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' ); ?>">
-                                                <span class="bp-screen-reader-text"><?php esc_html_e( 'Star Message', 'buddypress' ); ?></span>
-                                        </button>
-                                <# } #>
+                                <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' ); ?>">
+                                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Star Message', 'buddypress' ); ?></span>
+                                </button>
 
                         <# } #>
                 </div>

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

@@ -94 +94 @@
 
 // Bottom Right Tooltip
 
-.bp-invites-content .bp-tooltip {
+.bp-invites-content .bp-tooltip,
+.message-metadata .actions .bp-tooltip,
+.single-message-thread-header .actions .bp-tooltip {
 
         @include bp-tooltip-bottom-right;
 }

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

@@ -3024 +3024 @@
         max-width: 30%;
 }
 
-.bp-messages-content .actions .bp-icons {
+.bp-messages-content .actions .bp-icons:not(.bp-hide) {
         display: inline-block;
         margin: 0;
         padding: 0.3em 0.5em;
 }
 
-.bp-messages-content .actions .bp-icons:before {
+.bp-messages-content .actions .bp-icons:not(.bp-hide):before {
         font-size: 26px;
 }
 
@@ -3073 +3073 @@
         -webkit-box-shadow: 2px 1px 9px 0 #eee;
         -moz-box-shadow: 2px 1px 9px 0 #eee;
         box-shadow: 2px 1px 9px 0 #eee;
-        overflow: hidden;
+        display: table;
         padding: 0.2em;
+        width: 100%;
 }
 
 .bp-messages-content #bp-message-thread-list .message-metadata .avatar {
@@ -4727 +4728 @@
         transform: translate(0, 0);
 }
 
-.bp-invites-content .bp-tooltip:after {
+.bp-invites-content .bp-tooltip:after,
+.message-metadata .actions .bp-tooltip:after,
+.single-message-thread-header .actions .bp-tooltip:after {
         right: auto;
         left: 0;
         -webkit-transform: translate(0, 0);

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

@@ -3024 +3024 @@
         max-width: 30%;
 }
 
-.bp-messages-content .actions .bp-icons {
+.bp-messages-content .actions .bp-icons:not(.bp-hide) {
         display: inline-block;
         margin: 0;
         padding: 0.3em 0.5em;
 }
 
-.bp-messages-content .actions .bp-icons:before {
+.bp-messages-content .actions .bp-icons:not(.bp-hide):before {
         font-size: 26px;
 }
 
@@ -3073 +3073 @@
         -webkit-box-shadow: -2px 1px 9px 0 #eee;
         -moz-box-shadow: -2px 1px 9px 0 #eee;
         box-shadow: -2px 1px 9px 0 #eee;
-        overflow: hidden;
+        display: table;
         padding: 0.2em;
+        width: 100%;
 }
 
 .bp-messages-content #bp-message-thread-list .message-metadata .avatar {
@@ -4727 +4728 @@
         transform: translate(0, 0);
 }
 
-.bp-invites-content .bp-tooltip:after {
+.bp-invites-content .bp-tooltip:after,
+.message-metadata .actions .bp-tooltip:after,
+.single-message-thread-header .actions .bp-tooltip:after {
         left: auto;
         right: 0;
         -webkit-transform: translate(0, 0);

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

@@ -1104 +1104 @@
                         }
 
                         if ( 'star' === action || 'unstar' === action ) {
+                                var opposite = {
+                                        'star'  : 'unstar',
+                                        'unstar' : 'star'
+                                };
+
                                 options.data = {
                                         'star_nonce' : this.model.get( 'star_nonce' )
                                 };
+
+                                $( event.currentTarget ).addClass( 'bp-hide' );
+                                $( event.currentTarget ).parent().find( '[data-bp-action="' + opposite[ action ] + '"]' ).removeClass( 'bp-hide' );
+
                         }
 
                         bp.Nouveau.Messages.threads.doAction( action, this.model.get( 'id' ), options ).done( function( response ) {

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

@@ -174 +174 @@
                 float: right;
                 max-width: 30%;
 
-                .bp-icons {
+                .bp-icons:not(.bp-hide) {
                         display: inline-block;
                         margin: 0;
                         padding: $pad-xsml $pad-sml;
@@ -230 +230 @@
                         border-bottom: 1px solid $bp-border-dark;
 
                         @include box-shadow(-2px 1px 9px 0 #eee);
-                        overflow: hidden;
+                        display: table;
                         padding: 0.2em;
+                        width: 100%;
 
                         .avatar {
                                 width: 30px;