Changeset 12041

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:

• buddypress/common/js-templates/messages/index.php (modified) (2 diffs)
• common-styles/_bp_tooltips.scss (modified) (1 diff)
• css/buddypress-rtl.css (modified) (4 diffs)
• css/buddypress.css (modified) (4 diffs)
• js/buddypress-messages.js (modified) (1 diff)
• sass/_nouveau_messages.scss (modified) (2 diffs)

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

@@ -10 +10 @@
 ?>
 <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">
@@ -229 +230 @@
             <# if ( undefined !== data.star_link ) { #>
 
-                <?php $test = 1; ?>
-
-                <# 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-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>
+
+                <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>
 
             <# } #>

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

@@ -95 +95 @@
 // 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;

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

@@ -3049 +3049 @@
 }
 
-.bp-messages-content .actions .bp-icons {
+.bp-messages-content .actions .bp-icons:not(.bp-hide) {
     display: inline-block;
     margin: 0;
@@ -3055 +3055 @@
 }
 
-.bp-messages-content .actions .bp-icons:before {
+.bp-messages-content .actions .bp-icons:not(.bp-hide):before {
     font-size: 26px;
 }
@@ -3098 +3098 @@
     -moz-box-shadow: 2px 1px 9px 0 #eee;
     box-shadow: 2px 1px 9px 0 #eee;
-    overflow: hidden;
+    display: table;
     padding: 0.2em;
+    width: 100%;
 }
 
@@ -4752 +4753 @@
 }
 
-.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;

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

@@ -3049 +3049 @@
 }
 
-.bp-messages-content .actions .bp-icons {
+.bp-messages-content .actions .bp-icons:not(.bp-hide) {
     display: inline-block;
     margin: 0;
@@ -3055 +3055 @@
 }
 
-.bp-messages-content .actions .bp-icons:before {
+.bp-messages-content .actions .bp-icons:not(.bp-hide):before {
     font-size: 26px;
 }
@@ -3098 +3098 @@
     -moz-box-shadow: -2px 1px 9px 0 #eee;
     box-shadow: -2px 1px 9px 0 #eee;
-    overflow: hidden;
+    display: table;
     padding: 0.2em;
+    width: 100%;
 }
 
@@ -4752 +4753 @@
 }
 
-.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;

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

@@ -1105 +1105 @@
 
             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' );
+
             }
 

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

@@ -175 +175 @@
         max-width: 30%;
 
-        .bp-icons {
+        .bp-icons:not(.bp-hide) {
             display: inline-block;
             margin: 0;
@@ -231 +231 @@
 
             @include box-shadow(-2px 1px 9px 0 #eee);
-            overflow: hidden;
+            display: table;
             padding: 0.2em;
+            width: 100%;
 
             .avatar {