Skip to:
Content

BuddyPress.org

Changeset 12074


Ignore:
Timestamp:
05/10/2018 06:57:38 AM (7 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:
7 edited

Legend:

Unmodified
Added
Removed

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

    r12065 r12074  
    9696
    9797<script type="text/html" id="tmpl-bp-invites-selection">
    98     <a href="#uninvite-user-{{data.id}}" title="{{data.name}}">
    99         <img src="{{data.avatar}}" class="avatar" alt="{{data.name}}"/>
     98    <a href="#uninvite-user-{{data.id}}" class="bp-tooltip" data-bp-tooltip="{{data.uninviteTooltip}}" aria-label="{{data.uninviteTooltip}}">
     99        <img src="{{data.avatar}}" class="avatar" alt=""/>
    100100    </a>
    101101</script>

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

    r12041 r12074  
    101101    @include bp-tooltip-bottom-right;
    102102}
     103
     104.bp-invites-content #send-invites-editor .bp-tooltip {
     105
     106    // override .bp-invites-content .bp-tooltip
     107    &:after {
     108        left: 0;
     109        right: auto;
     110    }
     111}

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

    r12073 r12074  
    25852585}
    25862586
    2587 .buddypress .bp-invites-content #send-invites-editor {
    2588     overflow: hidden;
     2587.buddypress .bp-invites-content #send-invites-editor ul:before,
     2588.buddypress .bp-invites-content #send-invites-editor ul:after {
     2589    content: " ";
     2590    display: table;
     2591}
     2592
     2593.buddypress .bp-invites-content #send-invites-editor ul:after {
     2594    clear: both;
    25892595}
    25902596
    … …  
    25972603    list-style: none;
    25982604    margin: 10px 0;
    2599     overflow: hidden;
    26002605}
    26012606
    … …  
    26052610    max-height: 50px;
    26062611    max-width: 50px;
     2612}
     2613
     2614.buddypress .bp-invites-content #send-invites-editor #bp-send-invites-form {
     2615    clear: both;
     2616    margin-top: 10px;
    26072617}
    26082618
    … …  
    47734783}
    47744784
     4785.bp-invites-content #send-invites-editor .bp-tooltip:after {
     4786    right: 0;
     4787    left: auto;
     4788}
     4789
    47754790/**
    47764791*-------------------------------------------------------------------------------

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

    r12073 r12074  
    25852585}
    25862586
    2587 .buddypress .bp-invites-content #send-invites-editor {
    2588     overflow: hidden;
     2587.buddypress .bp-invites-content #send-invites-editor ul:before,
     2588.buddypress .bp-invites-content #send-invites-editor ul:after {
     2589    content: " ";
     2590    display: table;
     2591}
     2592
     2593.buddypress .bp-invites-content #send-invites-editor ul:after {
     2594    clear: both;
    25892595}
    25902596
    … …  
    25972603    list-style: none;
    25982604    margin: 10px 0;
    2599     overflow: hidden;
    26002605}
    26012606
    … …  
    26052610    max-height: 50px;
    26062611    max-width: 50px;
     2612}
     2613
     2614.buddypress .bp-invites-content #send-invites-editor #bp-send-invites-form {
     2615    clear: both;
     2616    margin-top: 10px;
    26072617}
    26082618
    … …  
    47734783}
    47744784
     4785.bp-invites-content #send-invites-editor .bp-tooltip:after {
     4786    left: 0;
     4787    right: auto;
     4788}
     4789
    47754790/**
    47764791*-------------------------------------------------------------------------------

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

    r12060 r12074  
    151151        'invites_form_reset' => __( 'Invites cleared. Please use one of the available tabs to select members to invite.', 'buddypress' ),
    152152        'invites_sending'    => __( 'Sending the invites. Please wait.', 'buddypress' ),
     153        'removeUserInvite'   => __( 'Disinvite %s', 'buddypress' ),
    153154        'group_id'           => ! bp_get_current_group_id() ? bp_get_new_group_id() : bp_get_current_group_id(),
    154155        'is_group_create'    => bp_is_group_create(),

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

    r12060 r12074  
    804804        initialize: function() {
    805805            this.model.on( 'change:selected', this.removeView, this );
     806
     807            // Build the BP Tooltip.
     808            if ( ! this.model.get( 'uninviteTooltip' ) ) {
     809                this.model.set( 'uninviteTooltip',
     810                    BP_Nouveau.group_invites.removeUserInvite.replace( '%s', this.model.get( 'name' ) ),
     811                    { silent: true }
     812                );
     813            }
     814
    806815            this.el.id = 'uninvite-user-' + this.model.get( 'id' );
    807816        },

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

    r12064 r12074  
    7878        } // close li
    7979
     80        @include clearfix-element("#send-invites-editor ul");
     81
    8082        #send-invites-editor {
    81             overflow: hidden;
    8283
    8384            textarea {
    … …  
    8990                list-style: none;
    9091                margin: $marg-sml 0;
    91                 overflow: hidden;
    9292
    9393                li {
    … …  
    9898                }
    9999            } // ul
     100
     101            #bp-send-invites-form {
     102                clear: both;
     103                margin-top: $marg-sml;
     104            }
    100105
    101106            .action {
Note: See TracChangeset for help on using the changeset viewer.