Changeset 12074

Timestamp:

05/10/2018 06:57:38 AM (8 years ago)

Author:

imath

Message:

BP Nouveau - Group Invites UI: add meaningful tooltips to invites list

The invites screen contains a list of the avatar of the user to invites. When hovering on one of the avatars a BP Tooltip is now informing that clicking on one of the avatar removes the corresponding user from the invites list.

Props mercime

See #7794

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• buddypress/common/js-templates/invites/index.php (modified) (1 diff)
• common-styles/_bp_tooltips.scss (modified) (1 diff)
• css/buddypress-rtl.css (modified) (4 diffs)
• css/buddypress.css (modified) (4 diffs)
• includes/groups/functions.php (modified) (1 diff)
• js/buddypress-group-invites.js (modified) (1 diff)
• sass/_nouveau_invites.scss (modified) (3 diffs)

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

@@ -96 +96 @@
 
 <script type="text/html" id="tmpl-bp-invites-selection">
-        <a href="#uninvite-user-{{data.id}}" title="{{data.name}}">
-                <img src="{{data.avatar}}" class="avatar" alt="{{data.name}}"/>
+        <a href="#uninvite-user-{{data.id}}" class="bp-tooltip" data-bp-tooltip="{{data.uninviteTooltip}}" aria-label="{{data.uninviteTooltip}}">
+                <img src="{{data.avatar}}" class="avatar" alt=""/>
         </a>
 </script>

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

@@ -101 +101 @@
         @include bp-tooltip-bottom-right;
 }
+
+.bp-invites-content #send-invites-editor .bp-tooltip {
+
+        // override .bp-invites-content .bp-tooltip
+        &:after {
+                left: 0;
+                right: auto;
+        }
+}

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

@@ -2585 +2585 @@
 }
 
-.buddypress .bp-invites-content #send-invites-editor {
-        overflow: hidden;
+.buddypress .bp-invites-content #send-invites-editor ul:before,
+.buddypress .bp-invites-content #send-invites-editor ul:after {
+        content: " ";
+        display: table;
+}
+
+.buddypress .bp-invites-content #send-invites-editor ul:after {
+        clear: both;
 }
 
@@ -2597 +2603 @@
         list-style: none;
         margin: 10px 0;
-        overflow: hidden;
 }
 
@@ -2605 +2610 @@
         max-height: 50px;
         max-width: 50px;
+}
+
+.buddypress .bp-invites-content #send-invites-editor #bp-send-invites-form {
+        clear: both;
+        margin-top: 10px;
 }
 
@@ -4773 +4783 @@
 }
 
+.bp-invites-content #send-invites-editor .bp-tooltip:after {
+        right: 0;
+        left: auto;
+}
+
 /**
 *-------------------------------------------------------------------------------

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

@@ -2585 +2585 @@
 }
 
-.buddypress .bp-invites-content #send-invites-editor {
-        overflow: hidden;
+.buddypress .bp-invites-content #send-invites-editor ul:before,
+.buddypress .bp-invites-content #send-invites-editor ul:after {
+        content: " ";
+        display: table;
+}
+
+.buddypress .bp-invites-content #send-invites-editor ul:after {
+        clear: both;
 }
 
@@ -2597 +2603 @@
         list-style: none;
         margin: 10px 0;
-        overflow: hidden;
 }
 
@@ -2605 +2610 @@
         max-height: 50px;
         max-width: 50px;
+}
+
+.buddypress .bp-invites-content #send-invites-editor #bp-send-invites-form {
+        clear: both;
+        margin-top: 10px;
 }
 
@@ -4773 +4783 @@
 }
 
+.bp-invites-content #send-invites-editor .bp-tooltip:after {
+        left: 0;
+        right: auto;
+}
+
 /**
 *-------------------------------------------------------------------------------

trunk/src/bp-templates/bp-nouveau/includes/groups/functions.php

@@ -151 +151 @@
                 'invites_form_reset' => __( 'Invites cleared. Please use one of the available tabs to select members to invite.', 'buddypress' ),
                 'invites_sending'    => __( 'Sending the invites. Please wait.', 'buddypress' ),
+                'removeUserInvite'   => __( 'Disinvite %s', 'buddypress' ),
                 'group_id'           => ! bp_get_current_group_id() ? bp_get_new_group_id() : bp_get_current_group_id(),
                 'is_group_create'    => bp_is_group_create(),

trunk/src/bp-templates/bp-nouveau/js/buddypress-group-invites.js

@@ -804 +804 @@
                 initialize: function() {
                         this.model.on( 'change:selected', this.removeView, this );
+
+                        // Build the BP Tooltip.
+                        if ( ! this.model.get( 'uninviteTooltip' ) ) {
+                                this.model.set( 'uninviteTooltip',
+                                        BP_Nouveau.group_invites.removeUserInvite.replace( '%s', this.model.get( 'name' ) ),
+                                        { silent: true }
+                                );
+                        }
+
                         this.el.id = 'uninvite-user-' + this.model.get( 'id' );
                 },

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

@@ -78 +78 @@
                 } // close li
 
+                @include clearfix-element("#send-invites-editor ul");
+
                 #send-invites-editor {
-                        overflow: hidden;
 
                         textarea {
@@ -89 +90 @@
                                 list-style: none;
                                 margin: $marg-sml 0;
-                                overflow: hidden;
 
                                 li {
@@ -98 +98 @@
                                 }
                         } // ul
+
+                        #bp-send-invites-form {
+                                clear: both;
+                                margin-top: $marg-sml;
+                        }
 
                         .action {