Ticket #6604: 6604.patch

src/bp-core/bp-core-catchuri.php

@@ -402 +402 @@
         }
 
         /**
-         * Filters the template locations.
-         *
-         * Allows plugins to alter where the template files are located.
-         *
-         * @since BuddyPress (1.1.0)
-         *
-         * @param string $template           Located template path.
-         * @param array  $filtered_templates Array of templates to attempt to load.
+         * It's a modal, use the specific template
          */
-        $located_template = apply_filters( 'bp_located_template', $template, $filtered_templates );
+        if ( bp_is_modal() ) {
+                $located_template = bp_locate_template( reset( $filtered_templates ), false );
+        } else {
+                /**
+                 * Filters the template locations.
+                 *
+                 * Allows plugins to alter where the template files are located.
+                 *
+                 * @since BuddyPress (1.1.0)
+                 *
+                 * @param string $template           Located template path.
+                 * @param array  $filtered_templates Array of templates to attempt to load.
+                 */
+                $located_template = apply_filters( 'bp_located_template', $template, $filtered_templates );
+        }
+
         if ( !empty( $located_template ) ) {
                 // Template was located, lets set this as a valid page and not a 404.
                 status_header( 200 );

src/bp-core/bp-core-cssjs.php

@@ -43 +43 @@
                 'bp-avatar'   => array( 'file' => "{$url}avatar{$min}.js", 'dependencies' => array( 'jcrop' ), 'footer' => true ),
                 'bp-webcam'   => array( 'file' => "{$url}webcam{$min}.js", 'dependencies' => array( 'bp-avatar' ), 'footer' => true ),
 
+                // 2.?
+                'bp-modal' => array( 'file' => "{$url}modal{$min}.js", 'dependencies' => array( 'thickbox' ), 'footer' => true ),
+
         ) );
 
         $version = bp_get_version();
@@ -87 +90 @@
                         'file'         => "{$url}avatar{$min}.css",
                         'dependencies' => array( 'jcrop' )
                 ),
+                'bp-modal' => array(
+                        'file'         => "{$url}modal{$min}.css",
+                        'dependencies' => array( 'thickbox' )
+                ),
         ) );
 
         foreach ( $styles as $id => $style ) {
@@ -337 +344 @@
                 'bp-jquery-scroll-to'
         ) );
 }
+
+/**
+ * Add the needed script and css for the BuddyPress modal
+ *
+ * @since 2.?.0
+ */
+function bp_add_modal() {
+        // Enqueue me just once per page, please.
+        if ( did_action( 'bp_modal_scripts_enqueued' ) ) {
+                return;
+        }
+
+        wp_enqueue_script( 'bp-modal' );
+        wp_enqueue_style ( 'bp-modal' );
+
+        /**
+         * Fires at the conclusion of bp_add_modal()
+         * to avoid the scripts to be loaded more than once.
+         *
+         * @since 2.?.0
+         */
+        do_action( 'bp_modal_scripts_enqueued' );
+}
+
+/**
+ * Enqueue scripts for the BuddyPress modal iframe
+ *
+ * @since  2.?.0
+ *
+ * @param  bool $is_admin  wether the context is wp-admin or not
+ */
+function bp_modal_enqueue_scripts( $is_admin = false ) {
+        global $wp_filter;
+
+        // Leave themes register their stylesheet
+        $theme = get_template();
+        if ( empty( $theme ) ) {
+                $theme = get_stylesheet();
+        }
+
+        // Only keep scripts enqueued hooking bp_enqueue_scripts.
+        if ( isset( $wp_filter[ 'wp_enqueue_scripts' ] ) ) {
+                foreach ( $wp_filter[ 'wp_enqueue_scripts' ] as $priority => $actions ) {
+
+                        foreach ( $actions as $key => $actions_data ) {
+                                if ( 'bp_enqueue_scripts' !== $key && ! ( false !== strpos( $key, $theme ) && ! $is_admin ) ) {
+                                        unset( $wp_filter[ 'wp_enqueue_scripts' ][ $priority ][ $key ] );
+                                }
+                        }
+                }
+        }
+
+        return wp_enqueue_scripts();
+}
+add_action( 'bp_modal_header', 'bp_modal_enqueue_scripts',  1 );
+add_action( 'bp_modal_header', 'locale_stylesheet'            );
+add_action( 'bp_modal_header', 'wp_print_styles',           8 );
+add_action( 'bp_modal_header', 'wp_print_head_scripts',     9 );
+add_action( 'bp_modal_footer', 'wp_print_footer_scripts',  20 );
+
+/* Admin context */
+add_action( 'bp_admin_modal_header', 'bp_modal_enqueue_scripts',     1 );
+add_action( 'bp_admin_modal_header', 'register_admin_color_schemes', 2 );
+add_action( 'bp_admin_modal_header', 'print_admin_styles',           3 );
+add_action( 'bp_admin_modal_footer', '_wp_footer_scripts'              );

src/bp-core/bp-core-dependency.php

@@ -383 +383 @@
 }
 
 /**
+ * Fire the 'bp_modal_header' action, or the 'bp_admin_modal_header' in the modal was opened from
+ * an Administration screen.
+ *
+ * @since 2.?.0
+ */
+function bp_modal_header( $is_admin = false ) {
+        $action = 'bp_modal_header';
+
+        if ( true === (bool) $is_admin ) {
+                $action = 'bp_admin_modal_header';
+        }
+
+        /**
+         * Fires inside the 'bp_modal_header' function.
+         *
+         * @since 2.?.0
+         *
+         * @param  bool $is_admin True for a wp-admin context, false otherwise
+         */
+        do_action( $action, $is_admin );
+}
+
+/**
+ * Fire the 'bp_modal_footer' action, or the 'bp_admin_modal_footer' in the modal was opened from
+ * an Administration screen.
+ *
+ * @since 2.?.0
+ */
+function bp_modal_footer( $is_admin = false ) {
+        $action = 'bp_modal_footer';
+
+        if ( true === (bool) $is_admin ) {
+                $action = 'bp_admin_modal_footer';
+        }
+
+        /**
+         * Fires inside the 'bp_modal_footer' function.
+         *
+         * @since 2.?.0
+         *
+         * @param  bool $is_admin True for a wp-admin context, false otherwise
+         */
+        do_action( $action, $is_admin );
+}
+
+/**
  * Fire the 'bp_add_rewrite_tag' action, where BP adds its custom rewrite tags.
  *
  * @since BuddyPress (1.8.0)

src/bp-core/bp-core-functions.php

@@ -1987 +1987 @@
 }
 
 /**
+ * Set a BuddyPress modal
+ *
+ * @since  2.?.0
+ *
+ * @param  bool $set whether the current screen is a modal (True) or not (False)
+ */
+function bp_set_is_modal( $set = false ) {
+        buddypress()->core->is_modal = $set;
+}
+
+/**
  * Trigger a 404.
  *
  * @since BuddyPress (1.5.0)

src/bp-core/bp-core-template.php

@@ -2747 +2747 @@
 }
 
 /**
+ * Is the current page the BuddyPress modal?
+ *
+ * Eg http://example.com/members/foobar/bp-modal.
+ *
+ * @return bool True if the current page is the BuddyPress modal.
+ */
+function bp_is_modal() {
+        $retval = false;
+        $bp = buddypress();
+
+        if ( isset( $bp->core->is_modal ) ) {
+                $retval = (bool) $bp->core->is_modal;
+        }
+
+        return $retval;
+}
+
+/**
  * Customize the body class, according to the currently displayed BP content.
  */
 function bp_the_body_class() {
@@ -3334 +3352 @@
                 return $nav_menu;
         }
 }
+
+/**
+ * Output a modal link
+ *
+ * @since  2.?.0
+ *
+ * @param  array  $args the attributes of the BuddyPress modal
+ */
+function bp_modal_link( $args = array() ) {
+        echo bp_get_modal_link( $args );
+}
+
+        /**
+         * Get a modal link
+         *
+         * @since  2.?.0
+         *
+         * @param  array  $args {
+         *     An array of arguments.
+         *
+         *     @type int    $item_id      The ID of the item. Default: current user_id. Required.
+         *     @type string $object       The type of object (eg: user, group..). Default:user. Required.
+         *     @type string $width        The width of the modal. Default:600. Optionnal.
+         *     @type string $height       The height of the modal. Default:500. Optionnal.
+         *     @type string $modal_title  The title tag for the generated iframe on link click. Default: ''. Optionnal.
+         *     @type string $modal_action The name of the action that will be executed by the modal. Default: ''.Required.
+         *     @type array  $link_class   The list of class to add to the generated link. Default: empty array. Optionnal.
+         *     @type string $link_title   The title attribute of the link. Default: 'Open window'. Optionnal.
+         *     @type string $link_text    The text of the link. Default: 'Open window'. Optionnal.
+         * }
+         * @return string the html to link to the modal
+         */
+        function bp_get_modal_link( $args = array() ) {
+                $r = bp_parse_args( $args, array(
+                        'item_id'      => bp_loggedin_user_id(),
+                        'object'       => 'user',
+                        'width'        => 600,
+                        'height'       => 500,
+                        'modal_title'  => '',
+                        'modal_action' => '',
+                        'link_class'   => array(),
+                        'link_title'   => __( 'Open window', 'buddypress' ),
+                        'link_text'    => __( 'Open window', 'buddypress' ),
+                ) );
+
+                if ( empty( $r['item_id'] ) || empty( $r['object'] ) || empty( $r['modal_action'] ) ) {
+                        return;
+                }
+
+                // Add BuddyPress modal
+                bp_add_modal();
+
+                $query_args = array(
+                        'is_admin'  => 0,
+                        'title'     => $r['modal_title'],
+                        'action'    => $r['modal_action'],
+                        'TB_iframe' => true,
+                        'width'     => $r['width'],
+                        'height'    => $r['height'],
+                );
+
+                if ( is_admin() ) {
+                        $query_args['is_admin'] = 1;
+                }
+
+                if ( 'group' === $r['object'] ) {
+                        if ( is_a( $r['item_id'], 'BP_Groups_Group' ) ) {
+                                $group = $r['item_id'];
+                        } else {
+                                $group = groups_get_group( array( 'group_id' => $r['item_id'] ) );
+                        }
+
+                        $group_link = bp_get_group_permalink( $group );
+
+                        if ( empty( $group_link ) ) {
+                                return;
+                        }
+
+                        if ( 'group-avatar' === $r['modal_action'] ) {
+                                $group_link = trailingslashit( $group_link . 'admin' );
+                        }
+
+                        $modal_link = add_query_arg( $query_args, trailingslashit( $group_link . 'bp-modal' ) );
+
+                } elseif ( 'user' === $r['object'] ) {
+                        $user_link = bp_core_get_user_domain( $r['item_id'] );
+
+                        if ( empty( $user_link ) ) {
+                                return;
+                        }
+
+                        if ( 'change-avatar' === $r['modal_action'] ) {
+                                $user_link = trailingslashit( $user_link . 'profile' );
+                        }
+                        $modal_link = add_query_arg( $query_args, trailingslashit( $user_link . 'bp-modal' ) );
+                } else {
+                        return;
+                }
+
+                return apply_filters( 'bp_get_modal_link', sprintf( '<a href="%1$s" class="bp-thickbox %2$s" title="%3$s">%4$s</a>',
+                        esc_url( $modal_link ),
+                        esc_attr( join( ' ', (array) $r['link_class'] ) ),
+                        esc_attr( $r['link_title'] ),
+                        esc_html( $r['link_text'] )
+                ) );
+        }
+
+/**
+ * Output the modal iframe title tag
+ *
+ * @since  2.?.0
+ */
+function bp_modal_title() {
+        echo bp_modal_get_title();
+}
+
+        /**
+         * Get the modale iframe title tag
+         *
+         * @since  2.?.0
+         *
+         * @return string the title tag for the modal iframe
+         */
+        function bp_modal_get_title() {
+                $title = _x( 'BuddyPress modal', 'BuddyPress' );
+
+                if ( isset( $_GET['title'] ) ) {
+                        $title = $_GET['title'];
+                }
+
+                return apply_filters( 'bp_modal_title', esc_html( strip_tags( $title ) ), $title );
+        }
+
+/**
+ * Output the modal content
+ *
+ * @since  2.?.0
+ */
+function bp_modal_content() {
+        $action = 'bp_modal_content';
+
+        if ( isset( $_GET['action'] ) ) {
+                $action .= '_' .sanitize_file_name( $_GET['action'] );
+        }
+
+        /**
+         * This is a dynamic action depending on the $modal_action
+         * defined in bp_get_modal_link.
+         *
+         * @since  2.?.0
+         *
+         * eg: "bp_modal_content_$modal_action"
+         */
+        do_action( $action );
+}

src/bp-core/css/modal.css

@@ +1 @@
+body.bp-modal #TB_title {
+        float: left;
+        height: 1px;
+}
+
+body.bp-modal #TB_ajaxWindowTitle {
+        display: none;
+}
+
+body.bp-modal #TB_window {
+        max-width: 90%;
+        max-height: 90%;
+}
+
+body.bp-modal .tb-close-icon,
+#bp-modal-buttons .bp-full-height-icon {
+        left: auto;
+        right: -30px;
+        color: #eee;
+        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+        transition: color .1s ease-in-out, background .1s ease-in-out;
+}
+
+body.bp-modal #TB_closeWindowButton:focus,
+body.bp-modal #TB_closeWindowButton:focus .tb-close-icon,
+body.bp-modal .tb-close-icon:focus,
+body.bp-modal .tb-close-icon:hover,
+#bp-modal-buttons #bp-modal-full-height:focus,
+#bp-modal-buttons #bp-modal-full-height:focus .bp-full-height-icon,
+#bp-modal-buttons .bp-full-height-icon:focus,
+#bp-modal-buttons .bp-full-height-icon:hover {
+        color: #00a0d2;
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+}
+
+body.buddypress .tb-close-icon:before,
+body.toplevel_page_bp-groups .tb-close-icon:before {
+        content: "\f335";
+        font-size: 32px;
+}
+
+#bp-modal-buttons .bp-full-height-icon {
+        position:absolute;
+        top:30px;
+        text-align: center;
+        line-height: 29px;
+        width: 29px;
+        height: 29px;
+}
+
+#bp-modal-buttons .bp-full-height-icon:before {
+        font: normal 20px/32px 'dashicons';
+        speak: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+
+#bp-modal-buttons .bp-full-height-icon:before {
+        content: "\f316";
+}
+
+#bp-modal-buttons .bp-full-height-icon.max:before {
+        content: "\f317";
+}
+
+body.bp-modal #TB_iframeContent {
+        margin:0;
+        max-width: 100%;
+        max-height: 100%;
+}

src/bp-core/js/avatar.js

@@ -26 +26 @@
                         // Init some vars
                         this.views    = new Backbone.Collection();
                         this.jcropapi = {};
-                        this.warning = null;
+                        this.warning  = null;
+                        this.opener   = window.opener || window.parent || window.top;
 
                         // Set up nav
                         this.setupNav();
@@ -236 +237 @@
                                 type:          _.isUndefined( avatar.get( 'type' ) ) ? 'crop' : avatar.get( 'type' ),
                                 nonce:         avatar.get( 'nonces' ).set
                         } ).done( function( response ) {
-                                var avatarStatus = new bp.Views.AvatarStatus( {
-                                        value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
-                                        type : 'success'
-                                } );
+                                var avatarClass,
+                                    avatarStatus = new bp.Views.AvatarStatus( {
+                                                value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
+                                                type : 'success'
+                                        } );
 
                                 self.views.add( {
                                         id   : 'status',
@@ -248 +250 @@
 
                                 avatarStatus.inject( '.bp-avatar-status' );
 
+                                avatarClass = '.' + avatar.get( 'object' ) + '-' + response.item_id + '-avatar';
+
+                                // Update each avatars of the parent page
+                                if ( typeof self.opener.bp.updateAvatars !== 'undefined' ) {
+                                        self.opener.bp.updateAvatars( avatarClass, response.avatar );
+
                                 // Update each avatars of the page
-                                $( '.' + avatar.get( 'object' ) + '-' + response.item_id + '-avatar' ).each( function() {
-                                        $(this).prop( 'src', response.avatar );
-                                } );
+                                } else {
+                                        // Update each avatars of the page
+                                        $( avatarClass ).each( function() {
+                                                $(this).prop( 'src', response.avatar );
+                                        } );
+                                }
 
                                 // Inject the Delete nav
                                 bp.Avatar.navItems.get( 'delete' ).set( { hide: 0 } );
@@ -312 +323 @@
                                 object:        model.get( 'object' ),
                                 nonce:         model.get( 'nonces' ).remove
                         } ).done( function( response ) {
-                                var avatarStatus = new bp.Views.AvatarStatus( {
-                                        value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
-                                        type : 'success'
-                                } );
+                                var avatarClass,
+                                        avatarStatus = new bp.Views.AvatarStatus( {
+                                                value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
+                                                type : 'success'
+                                        } );
 
                                 self.views.add( {
                                         id   : 'status',
@@ -324 +336 @@
 
                                 avatarStatus.inject( '.bp-avatar-status' );
 
+                                avatarClass = '.' + model.get( 'object' ) + '-' + response.item_id + '-avatar';
+
+                                // Update each avatars of the parent page
+                                if ( typeof self.opener.bp.updateAvatars !== 'undefined' ) {
+                                        self.opener.bp.updateAvatars( avatarClass, response.avatar );
+
                                 // Update each avatars of the page
-                                $( '.' + model.get( 'object' ) + '-' + response.item_id + '-avatar').each( function() {
-                                        $( this ).prop( 'src', response.avatar );
-                                } );
+                                } else {
+                                        $( avatarClass ).each( function() {
+                                                $( this ).prop( 'src', response.avatar );
+                                        } );
+                                }
 
                                  // Remove the Delete nav
                                  bp.Avatar.navItems.get( 'delete' ).set( { active: 0, hide: 1 } );

src/bp-core/js/modal.js

@@ +1 @@
+/* global bp */
+
+window.bp = window.bp || {};
+
+( function( $ ) {
+        var originalWidth, originalHeight, originalIframeHeight;
+
+        // Asjust Thickbox
+        bp_tb_position = function() {
+                var availableWidth  = $( window ).width(),
+                        availableHeight = $( window ).height(),
+                        needReposition  = false;
+
+                // Don't do anything if we don't have needed Thickbox attributes
+                if ( typeof TB_WIDTH === 'undefined' || typeof TB_HEIGHT === 'undefined' || typeof tb_position === 'undefined' ) {
+                        return;
+                }
+
+                // Only set originalWidth and originalHeight if not defined
+                if ( typeof originalWidth === 'undefined' ) {
+                        originalWidth = TB_WIDTH;
+                }
+
+                if ( typeof originalHeight === 'undefined' ) {
+                        originalHeight = TB_HEIGHT;
+                }
+
+                if ( availableWidth < TB_WIDTH ) {
+                        TB_WIDTH = availableWidth - 50;
+                        needReposition = true;
+                } else if ( availableWidth > originalWidth ) {
+                        TB_WIDTH = originalWidth;
+                        needReposition = true;
+                }
+
+                if ( availableHeight < TB_HEIGHT ) {
+                        TB_HEIGHT = availableHeight - 50;
+                        needReposition = true;
+                } else if ( availableHeight > originalHeight ) {
+                        TB_HEIGHT = originalHeight;
+                        needReposition = true;
+                }
+
+                // Ask Thickbox to "reposition"
+                if ( true === needReposition ) {
+                        tb_position();
+
+                        $( '#TB_window' ).css( {
+                                'height' : TB_HEIGHT + 'px'
+                        } );
+
+                        $( '#TB_iframeContent' ).css( {
+                                'width' : originalWidth - 1 + 'px',
+                                'height' : TB_HEIGHT - 1 + 'px'
+                        } );
+                }
+        };
+
+        // Make sure links are not containing bigger dimensions than available ones
+        $( 'a.bp-thickbox' ).each( function() {
+                var href = $( this ).attr( 'href' ),
+                        availableWidth  = $( window ).width(),
+                        availableHeight = $( window ).height();
+
+                if ( ! href ) {
+                        return;
+                }
+
+                // Requested Thickbox width & height
+                var tb_width  = href.match( /width=([0-9]+)/ );
+                var tb_height = href.match( /height=([0-9]+)/ );
+
+                if ( tb_width[1] ) {
+                        // If too large resize
+                        if ( parseInt( tb_width[1] ) > availableWidth ) {
+                                href = href.replace( /width=[0-9]+/g, 'width=' + Number( availableWidth - 50 ) );
+
+                        // Leave unchanged
+                        } else {
+                                href = href.replace( /width=[0-9]+/g, 'width=' + tb_width[1] );
+                        }
+                }
+
+                if ( tb_height[1] ) {
+                        // If too large resize
+                        if ( parseInt( tb_height[1] ) > availableHeight ) {
+                                href = href.replace( /height=[0-9]+/g, 'height=' + Number( availableHeight - 50 ) );
+
+                        // Leave unchanged
+                        } else {
+                                href = href.replace( /height=[0-9]+/g, 'height=' + tb_height[1] );
+                        }
+                }
+
+                // Reset links
+                $( this ).attr( 'href', href );
+        } );
+
+        // Listen to bp-thickbox links
+        $( document ).ready( function() {
+                tb_init( 'a.bp-thickbox' );
+                $( 'body' ).addClass( 'bp-modal' );
+        } );
+
+        // Add a button to the BuddyPress modal
+        window.tb_showIframe = function() {
+                var isBPiframe = $( '#TB_iframeContent' ).prop( 'src' ).match( /bp-modal/ );
+
+                if ( null === isBPiframe ) {
+                        return;
+                }
+
+                $( '#TB_title' ).append( '<div id="bp-modal-buttons"><a href="#" id="bp-modal-full-height"><span class="screen-reader-text">Zoom</span><div class="bp-full-height-icon"></div></a>' );
+        };
+
+        // Toggle the BuddyPress modal height from original to full
+        $( 'body' ).on( 'click', '#bp-modal-buttons .bp-full-height-icon', function( event ) {
+                event.preventDefault();
+
+                var bpFullHeighBtn = $( this );
+
+                bp_tb_position();
+
+                if ( typeof originalIframeHeight === 'undefined' ) {
+                        originalIframeHeight = $( '#TB_iframeContent' ).prop( 'style' ).height;
+                }
+
+                if ( ! bpFullHeighBtn.hasClass( 'max' ) ) {
+                        TB_HEIGHT = $( window ).height() - 50;
+                        bpFullHeighBtn.addClass( 'max' );
+                } else {
+                        TB_HEIGHT = originalIframeHeight;
+                        bpFullHeighBtn.removeClass( 'max' );
+                }
+
+                // Reposition
+                tb_position();
+
+                $( '#TB_window' ).css( {
+                        'height' : TB_HEIGHT + 'px'
+                } );
+
+                $( '#TB_iframeContent' ).css( {
+                        'width' : originalWidth - 1 + 'px',
+                        'height' : TB_HEIGHT - 1 + 'px'
+                } );
+        } );
+
+        // Reposition on window resize
+        $( window ).resize( function() { bp_tb_position(); } );
+
+        /**
+         * Update the avatars for a given class
+         *
+         * @param  {string} avatarClass the name of the class
+         * @param  {string} replace     the link to the avatar
+         */
+        bp.updateAvatars = function( avatarClass, replace ) {
+                $( avatarClass ).each( function() {
+                        $(this).prop( 'src', replace );
+                } );
+        };
+
+        /**
+         * Insert/Update html inside a given selector
+         *
+         * @param  {string} selectorId the element ID
+         * @param  {string} html       the html to insert
+         */
+        bp.updateHtml = function( selectorId, html ) {
+                $( selectorId ).html( html );
+        };
+
+        /**
+         * Insert/Update an input value
+         * @param  {string} inputId the input ID
+         * @param  {string} val     the value to insert
+         */
+        bp.updateVal = function( inputId, val ) {
+                $( selectorId ).val( val );
+        };
+
+} )( jQuery );

src/bp-groups/admin/css/admin.css

@@ -84 +84 @@
         padding-left: 20px;
         padding-right: 20px;
 }
+
+div#bp_group_avatar div.avatar {
+        width: 150px;
+        margin: 0 auto;
+}
+
+div#bp_group_avatar div.avatar img {
+        max-width: 100%;
+        height: auto;
+}
+
+div#bp_group_avatar a.bp-groups-avatar-admin-edit {
+    display: block;
+    margin: 1em 0;
+    text-decoration: none;
+    color: #888;
+}
+
+div#bp_group_avatar a.bp-groups-avatar-admin-edit:before {
+        font: normal 20px/1 'dashicons';
+        speak: none;
+        display: inline-block;
+        padding: 0 2px 0 0;
+        top: 0;
+        left: -1px;
+        position: relative;
+        vertical-align: top;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-decoration: none !important;
+        color: #888;
+}
+
+div#bp_group_avatar a.bp-groups-avatar-admin-edit:before {
+        content: "\f107";
+}

src/bp-groups/bp-groups-admin.php

@@ -133 +133 @@
                 add_meta_box( 'bp_group_add_members', _x( 'Add New Members', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_add_new_members', get_current_screen()->id, 'normal', 'core' );
                 add_meta_box( 'bp_group_members', _x( 'Manage Members', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_members', get_current_screen()->id, 'normal', 'core' );
 
+                // Manage Group's avatar
+                $disabled_avatar_uploads = (int) bp_disable_group_avatar_uploads();
+                if ( ! $disabled_avatar_uploads && buddypress()->avatar->show_avatars && bp_attachments_is_wp_version_supported() ) {
+                        add_meta_box( 'bp_group_avatar', _x( 'Photo', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_avatar', get_current_screen()->id, 'side', 'core' );
+                }
+
                 /**
                  * Fires after the registration of all of the default group meta boxes.
                  *
@@ -797 +803 @@
 }
 
 /**
+ * Output the markup for a single group's Edit Avatar metabox.
+ *
+ * @since 2.?.0
+ */
+function bp_groups_admin_edit_metabox_avatar( $item ) {
+        ?>
+        <div class="avatar">
+
+                <?php
+                echo bp_core_fetch_avatar( array(
+                        'item_id' => $item->id,
+                        'object'  => 'group',
+                        'type'    => 'full',
+                        'title'   => $item->name
+                ) );
+
+                bp_modal_link( array(
+                        'item_id'       => $item,
+                        'object'        => 'group',
+                        'width'         => 800,
+                        'height'        => 400,
+                        'modal_title'   => __( 'Edit Group Photo', 'buddypress' ),
+                        'modal_action'  => 'group-avatar',
+                        'link_text'     => __( 'Edit Group Photo', 'buddypress' ),
+                        'link_class'    => array( 'bp-groups-avatar-admin-edit' ),
+                ) );
+                ?>
+
+        </div>
+        <?php
+}
+
+/**
  * Output the markup for a single group's Add New Members metabox.
  *
  * @since BuddyPress (1.7.0)

src/bp-groups/bp-groups-screens.php

@@ -1308 +1308 @@
 add_action( 'bp_screens', 'groups_screen_group_admin_delete_group' );
 
 /**
+ * Handle the display for a group modal
+ *
+ * @since 2.?.0
+ */
+function groups_sreen_modal() {
+        $bp = buddypress();
+
+        if ( bp_is_group_admin_page() && 'bp-modal' === bp_action_variable( 0 ) ) {
+
+                if ( ! bp_is_item_admin() ) {
+                        return;
+                }
+
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->action_variables = array( sanitize_file_name( $_GET['action'] ) );
+                }
+
+                bp_set_is_modal( true );
+
+        } elseif ( 'bp-modal' === bp_current_action() ) {
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->current_action = sanitize_file_name( $_GET['action'] );
+                }
+
+                bp_set_is_modal( true );
+        }
+
+        if ( bp_is_modal() ) {
+                bp_core_load_template( 'assets/modal' );
+        }
+}
+add_action( 'bp_screens', 'groups_sreen_modal', 0 );
+
+/**
  * Render the group settings fields on the Notification Settings page.
  */
 function groups_screen_notification_settings() {

src/bp-groups/bp-groups-template.php

@@ -6260 +6260 @@
          */
         return apply_filters( 'bp_groups_get_profile_stats', $r['output'], $r );
 }
+
+/**
+ * Output the Edit avatar template part for the group modal
+ *
+ * @since 2.?.0
+ */
+function bp_groups_modal_manage_avatar() {
+        bp_attachments_get_template_part( 'avatars/index' );
+}
+add_action( 'bp_modal_content_group-avatar', 'bp_groups_modal_manage_avatar' );

src/bp-members/bp-members-screens.php

@@ -377 +377 @@
 }
 add_action( 'bp_screens', 'bp_core_screen_activation' );
 
+/**
+ * Handle the display for a user modal
+ *
+ * @since 2.?.0
+ */
+function bp_members_sreen_modal() {
+        $bp = buddypress();
+
+        if ( bp_is_profile_component() && 'bp-modal' === bp_current_action() ) {
+
+                if ( ! bp_is_item_admin() ) {
+                        return;
+                }
+
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->current_action = sanitize_file_name( $_GET['action'] );
+                }
+
+                bp_set_is_modal( true );
+
+        } elseif ( bp_is_user() && 'bp-modal' === bp_current_component() ) {
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->current_action = sanitize_file_name( $_GET['action'] );
+                }
+
+                bp_set_is_modal( true );
+        }
+
+        if ( bp_is_modal() ) {
+                bp_core_load_template( 'assets/modal' );
+        }
+}
+add_action( 'bp_screens', 'bp_members_sreen_modal', 0 );
+
 /** Theme Compatibility *******************************************************/
 
 /**

src/bp-templates/bp-legacy/buddypress/assets/modal.php

@@ +1 @@
+<?php
+/**
+ * BuddyPress Modal template
+ *
+ * This template is used to render the BuddyPress modal
+ *
+ * @since 2.?
+ *
+ * @package BuddyPress
+ * @subpackage bp-core
+ */
+
+$is_admin = false;
+// Check if the modal was opened from an Admin page
+// And enqueue admin style if needed
+if ( ! empty( $_GET['is_admin'] ) ) {
+        $is_admin = true;
+        wp_enqueue_style( 'colors' );
+}
+
+?>
+<!DOCTYPE html>
+<!--[if IE 8]>
+<html xmlns="http://www.w3.org/1999/xhtml" class="ie8" <?php language_attributes(); ?>>
+<![endif]-->
+<!--[if !(IE 8) ]><!-->
+<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
+<!--<![endif]-->
+<head>
+<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php echo get_option( 'blog_charset' ); ?>" />
+<title><?php bloginfo('name') ?> &rsaquo; <?php bp_modal_title(); ?></title>
+
+<?php bp_modal_header( $is_admin ); ?>
+
+</head>
+<body class="bp-core-ui <?php echo ( true === $is_admin ) ? 'bp-admin' : 'bp-front' ;?> no-js">
+<script type="text/javascript">
+document.body.className = document.body.className.replace('no-js', 'js');
+</script>
+
+<div id="buddypress" class="bp-modal <?php echo ( true === $is_admin ) ? 'wrap' : '' ;?>">
+
+        <?php bp_modal_content(); ?>
+
+</div>
+
+<?php bp_modal_footer( $is_admin ); ?>
+
+</body>
+</html>

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

@@ -22 +22 @@
         3.9 - Private Messaging Threads
         3.10 - Extended Profiles
         3.11 - Widgets
+        3.12 - Modal
 4.0 - Media Queries
         4.1 - Smartphones Landscape
         4.2 - Smartphones Portrait
@@ -841 +842 @@
 #buddypress form *[disabled="disabled"]{
         cursor: default;
         opacity: .4;
- }
+}
+
+body.modal-open .screen-reader-text,
 .bp-screen-reader-text {
         position: absolute;
         margin: -1px;
@@ -1641 +1644 @@
 }
 
 /*--------------------------------------------------------------
+3.11 - Modal
+--------------------------------------------------------------*/
+body.bp-core-ui.bp-front {
+        background-color: #FFF;
+}
+
+body.bp-core-ui.bp-admin .bp-avatar-nav ul.avatar-nav-items li.current {
+        border-bottom-color: #f1f1f1;
+}
+
+#buddypress.bp-modal {
+        margin: 1em;
+}
+
+/*--------------------------------------------------------------
 4.0 - Media Queries
 --------------------------------------------------------------*/
 /*--------------------------------------------------------------

src/bp-xprofile/bp-xprofile-admin.php

@@ -684 +684 @@
          * @since BuddyPress (2.0.0)
          */
         private function setup_actions() {
-                // Enqueue scripts
-                add_action( 'bp_members_admin_enqueue_scripts',  array( $this, 'enqueue_scripts'    ), 10, 1 );
-
                 // Register the metabox in Member's community admin profile
                 add_action( 'bp_members_admin_xprofile_metabox', array( $this, 'register_metaboxes' ), 10, 3 );
 
@@ -695 +692 @@
         }
 
         /**
-         * Enqueue needed scripts.
-         *
-         * @access public
-         * @since BuddyPress (2.3.0)
-         */
-        public function enqueue_scripts( $screen_id ) {
-                if ( ( false === strpos( $screen_id, 'users_page_bp-profile-edit' )
-                        && false === strpos( $screen_id, 'profile_page_bp-profile-edit' ) )
-                        || bp_core_get_root_option( 'bp-disable-avatar-uploads' )
-                        || ! buddypress()->avatar->show_avatars
-                        || ! bp_attachments_is_wp_version_supported() ) {
-                        return;
-                }
-
-                /**
-                 * Get Thickbox
-                 *
-                 * We cannot simply use add_thickbox() here as WordPress is not playing
-                 * nice with Thickbox width/height see https://core.trac.wordpress.org/ticket/17249
-                 * Using media-upload might be interesting in the future for the send to editor stuff
-                 * and we make sure the tb_window is wide enougth
-                 */
-                wp_enqueue_style ( 'thickbox' );
-                wp_enqueue_script( 'media-upload' );
-
-                // Get Avatar Uploader
-                bp_attachments_enqueue_scripts( 'BP_Attachment_Avatar' );
-        }
-
-        /**
          * Register the xProfile metabox on Community Profile admin page.
          *
          * @access public
@@ -1064 +1031 @@
                                 'object'  => 'user',
                                 'type'    => 'full',
                                 'title'   => $user->display_name
-                        ) ); ?>
-
-                        <?php if ( bp_get_user_has_avatar( $user->ID ) ) :
+                        ) );
+
+                        // Add a BuddyPress modal to edit the avatar
+                        if ( ! bp_core_get_root_option( 'bp-disable-avatar-uploads' ) && bp_attachments_is_wp_version_supported() ) :
+                                bp_modal_link( array(
+                                        'item_id'       => $user->ID,
+                                        'object'        => 'user',
+                                        'width'         => 800,
+                                        'height'        => 400,
+                                        'modal_title'   => __( 'Edit Profile Photo', 'buddypress' ),
+                                        'modal_action'  => 'change-avatar',
+                                        'link_text'     => __( 'Edit Profile Photo', 'buddypress' ),
+                                        'link_class'    => array( 'bp-xprofile-avatar-user-edit' ),
+                                ) );
+
+                        elseif ( bp_get_user_has_avatar( $user->ID ) ) :
 
                                 $query_args = array(
                                         'user_id' => $user->ID,
@@ -1082 +1062 @@
 
                                 <a href="<?php echo esc_url( $delete_link ); ?>" title="<?php esc_attr_e( 'Delete Profile Photo', 'buddypress' ); ?>" class="bp-xprofile-avatar-user-admin"><?php esc_html_e( 'Delete Profile Photo', 'buddypress' ); ?></a></li>
 
-                        <?php endif;
-
-                        // Load the Avatar UI templates if user avatar uploads are enabled and current WordPress version is supported
-                        if ( ! bp_core_get_root_option( 'bp-disable-avatar-uploads' ) && bp_attachments_is_wp_version_supported() ) : ?>
-                                <a href="#TB_inline?width=800px&height=400px&inlineId=bp-xprofile-avatar-editor" title="<?php esc_attr_e( 'Edit Profile Photo', 'buddypress' );?>" class="thickbox bp-xprofile-avatar-user-edit"><?php esc_html_e( 'Edit Profile Photo', 'buddypress' ); ?></a>
-                                <div id="bp-xprofile-avatar-editor" style="display:none;">
-                                        <?php bp_attachments_get_template_part( 'avatars/index' ); ?>
-                                </div>
-                        <?php endif; ?>
+                        <?php endif;  ?>
 
                 </div>
                 <?php

src/bp-xprofile/bp-xprofile-template.php

@@ -1322 +1322 @@
                  */
                 return apply_filters( 'bp_profile_settings_visibility_select', $retval, $r, $args );
         }
+
+/**
+ * Output the Edit avatar template part for the user modal
+ *
+ * @since 2.?.0
+ */
+function bp_profile_modal_manage_avatar() {
+        bp_attachments_get_template_part( 'avatars/index' );
+}
+add_action( 'bp_modal_content_change-avatar', 'bp_profile_modal_manage_avatar' );