[PROD-8291] [PROD-8327] Profile popup cards

src/bp-activity/bp-activity-filters.php

@@ -184,6 +184,18 @@
 add_action( 'bp_after_directory_activity_list', 'bb_activity_add_modal_template' );
 add_action( 'bp_after_group_activity_content', 'bb_activity_add_modal_template' );
 add_action( 'bp_after_member_activity_content', 'bb_activity_add_modal_template' );
+
+// Profile card template for activity.
+add_action( 'bp_after_directory_activity_list', 'bb_activity_add_profile_card_template' );
+add_action( 'bp_after_single_activity_content', 'bb_activity_add_profile_card_template' );
+add_action( 'bp_after_group_activity_content', 'bb_activity_add_profile_card_template' );
+add_action( 'bp_after_member_activity_content', 'bb_activity_add_profile_card_template' );
+
+// Group card template for activity.
+add_action( 'bp_after_directory_activity_list', 'bb_activity_add_group_card_template' );
+add_action( 'bp_after_group_activity_content', 'bb_activity_add_group_card_template' );
+add_action( 'bp_after_member_activity_content', 'bb_activity_add_group_card_template' );
+
 add_action( 'bp_after_directory_activity_list', 'bb_gifpicker_add_popup_template' );
 add_action( 'bp_after_group_activity_content', 'bb_gifpicker_add_popup_template' );
 add_action( 'bp_after_member_activity_content', 'bb_gifpicker_add_popup_template' );
@@ -3795,3 +3807,21 @@ function bb_activity_directory_set_pagination( $querystring, $object ) {
 
 	return http_build_query( $querystring );
 }
+
+/**
+ * Add profile hover card template.
+ *
+ * @since BuddyBoss [BBVERSION]
+ */
+function bb_activity_add_profile_card_template() {
+	bp_get_template_part( 'activity/profile-card' );
+}
+
+/**
+ * Add group hover card template.
+ *
+ * @since BuddyBoss [BBVERSION]
+ */
+function bb_activity_add_group_card_template() {
+	bp_get_template_part( 'activity/group-card' );
+}

src/bp-templates/bp-nouveau/buddypress-functions.php

@@ -639,6 +639,10 @@ public function localize_scripts() {
 			),
 			'wpTime'                     => current_time( 'Y-m-d H:i:s' ),
 			'wpTimezone'                 => bp_get_option( 'timezone_string' ),
+			'rest_url'                   => home_url( 'wp-json/buddyboss/v1' ),
+			'rest_nonce'                 => wp_create_nonce( 'wp_rest' ),
+			'member_label'               => __( 'member', 'buddyboss' ),
+			'members_label'              => __( 'members', 'buddyboss' ),
 		);
 
 		// If the Object/Item nav are in the sidebar.

src/bp-templates/bp-nouveau/buddypress/activity/comment.php

@@ -16,7 +16,7 @@
 $activity_comment_id = bp_get_activity_comment_id();
 ?>
 
-<li id="acomment-<?php echo esc_attr( $activity_comment_id ); ?>" class="<?php bp_activity_comment_css_class(); ?>" data-bp-activity-comment-id="<?php echo esc_attr( $activity_comment_id ); ?>" data-bp-timestamp="<?php bb_nouveau_activity_comment_timestamp(); ?>" data-bp-activity-comment="<?php bb_nouveau_edit_activity_comment_data(); ?>">
+<li id="acomment-<?php echo esc_attr( $activity_comment_id ); ?>" class="<?php bp_activity_comment_css_class(); ?>" data-bp-activity-comment-id="<?php echo esc_attr( $activity_comment_id ); ?>" data-bp-timestamp="<?php bb_nouveau_activity_comment_timestamp(); ?>" data-bp-activity-comment="<?php bb_nouveau_edit_activity_comment_data(); ?>" data-bb-profile-card="<?php echo bp_get_activity_comment_user_id(); ?>">
 
 	<div id="acomment-display-<?php echo esc_attr( $activity_comment_id ); ?>" class="acomment-display">
 

src/bp-templates/bp-nouveau/buddypress/activity/entry.php

@@ -34,7 +34,7 @@
 
 ?>
 
-<li class="<?php bp_activity_css_class(); ?>" id="activity-<?php echo esc_attr( $activity_id ); ?>" data-bp-activity-id="<?php echo esc_attr( $activity_id ); ?>" data-bp-timestamp="<?php bp_nouveau_activity_timestamp(); ?>" data-bp-activity="<?php bp_nouveau_edit_activity_data(); ?>" data-link-preview='<?php echo $link_preview_string; ?>' data-link-url='<?php echo empty( $link_url ) ? '' : esc_url( $link_url ); ?>' data-activity-popup-title='<?php echo empty( $activity_popup_title ) ? '' : esc_html( $activity_popup_title ); ?>'>
+<li class="<?php bp_activity_css_class(); ?>" id="activity-<?php echo esc_attr( $activity_id ); ?>" data-bp-activity-id="<?php echo esc_attr( $activity_id ); ?>" data-bp-timestamp="<?php bp_nouveau_activity_timestamp(); ?>" data-bp-activity="<?php bp_nouveau_edit_activity_data(); ?>" data-link-preview='<?php echo $link_preview_string; ?>' data-link-url='<?php echo empty( $link_url ) ? '' : esc_url( $link_url ); ?>' data-activity-popup-title='<?php echo empty( $activity_popup_title ) ? '' : esc_html( $activity_popup_title ); ?>' data-bb-profile-card="<?php echo bp_get_activity_user_id(); ?>">
 
 	<?php bb_nouveau_activity_entry_bubble_buttons(); ?>
 

src/bp-templates/bp-nouveau/buddypress/activity/group-card.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * The template for groups card.
+ *
+ * This template can be overridden by copying it to yourtheme/buddypress/activity/group-card.php.
+ *
+ * @since   BuddyBoss [BBVERSION]
+ * @version 1.0.0
+ */
+
+?>
+<div id="group-card" class="bb-group-card bb-popup-card" data-bp-item-id="" data-bp-item-component="groups">
+
+	<div class="skeleton-card">
+		<div class="skeleton-card-body">
+			<div class="skeleton-card-avatar bb-loading-bg"></div>
+			<div class="skeleton-card-entity">
+				<div class="skeleton-card-heading bb-loading-bg"></div>
+				<div class="skeleton-card-meta bb-loading-bg"></div>
+			</div>
+		</div>
+		<?php $plain_class = ! is_user_logged_in() ? 'skeleton-footer-plain' : ''; ?>
+		<div class="skeleton-card-footer <?php echo esc_attr( $plain_class ); ?>">
+			<div class="skeleton-card-button bb-loading-bg"></div>
+			<div class="skeleton-card-button bb-loading-bg"></div>
+		</div>
+	</div>
+
+	<div class="bb-card-content">
+		<div class="bb-card-body">
+			<div class="bb-card-avatar">
+				<img src="" alt="">
+			</div>
+			<div class="bb-card-entity">
+				<h4 class="bb-card-heading"></h4>
+				<div class="bb-card-meta">
+					<span class="card-meta-item card-meta-status"></span>
+					<span class="card-meta-item card-meta-type"></span>
+					<span class="card-meta-item card-meta-last-active"></span>
+				</div>
+				<div class="card-group-members">
+					<span class="bs-group-members"></span>
+				</div>
+			</div>
+		</div>
+		<div class="bb-card-footer">
+			<?php if ( is_user_logged_in() ) : ?>
+				<?php if ( bp_is_active( 'groups' ) ) : ?>
+					<div class="bb-card-action bb-card-action-join bb-card-action-primary"></div>
+				<?php endif; ?>
+			<?php endif; ?>
+			<div class="bb-card-action bb-card-action-outline">
+				<a href="" class="card-button card-button-group"><?php esc_html_e( 'View Group', 'buddyboss' ); ?></a>
+			</div>
+		</div>
+	</div>
+
+</div>

src/bp-templates/bp-nouveau/buddypress/activity/profile-card.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * The template for profile card.
+ *
+ * This template can be overridden by copying it to yourtheme/buddypress/activity/profile-card.php.
+ *
+ * @since   BuddyBoss [BBVERSION]
+ * @version 1.0.0
+ */
+
+?>
+<div id="profile-card" class="bb-profile-card bb-popup-card" data-bp-item-id="" data-bp-item-component="members">
+
+	<div class="skeleton-card">
+		<div class="skeleton-card-body">
+			<div class="skeleton-card-avatar bb-loading-bg"></div>
+			<div class="skeleton-card-entity">
+				<div class="skeleton-card-type bb-loading-bg"></div>
+				<div class="skeleton-card-heading bb-loading-bg"></div>
+				<div class="skeleton-card-meta bb-loading-bg"></div>
+			</div>
+		</div>
+		<?php $plain_class = ! is_user_logged_in() ? 'skeleton-footer-plain' : ''; ?>
+		<div class="skeleton-card-footer <?php echo esc_attr( $plain_class ); ?>">
+			<div class="skeleton-card-button bb-loading-bg"></div>
+			<div class="skeleton-card-button bb-loading-bg"></div>
+			<div class="skeleton-card-button bb-loading-bg"></div>
+		</div>
+	</div>
+
+	<div class="bb-card-content">
+		<div class="bb-card-body">
+			<div class="bb-card-avatar">
+				<span class="card-profile-status"></span>
+				<img src="" alt="">
+			</div>
+			<div class="bb-card-entity">
+				<div class="bb-card-profile-type"></div>
+				<h4 class="bb-card-heading"></h4>
+				<div class="bb-card-meta">
+					<span class="card-meta-item card-meta-joined"><?php esc_html_e( 'Joined', 'buddyboss' ); ?> <span></span></span>
+					<span class="card-meta-item card-meta-last-active"></span>
+					<span class="card-meta-item card-meta-followers"></span>
+				</div>
+			</div>
+		</div>
+		<div class="bb-card-footer">
+			<?php if ( is_user_logged_in() ) : ?>
+				<?php if ( bp_is_active( 'messages' ) ) : ?>
+					<div class="bb-card-action bb-card-action-primary">
+						<a href="" class="card-button send-message">
+							<i class="bb-icon-l bb-icon-comment"></i>
+							<?php esc_html_e( 'Message', 'buddyboss' ); ?>
+						</a>
+					</div>
+				<?php else : ?>
+					<?php if ( bp_is_active( 'friends' ) ) : ?>
+						<div class="bb-card-action bb-card-action-connect bb-card-action-primary"></div>
+					<?php endif; ?>
+				<?php endif; ?>
+				<div class="bb-card-action bb-card-action-follow bb-card-action-secondary"></div>
+			<?php endif; ?>
+			<div class="bb-card-action bb-card-action-outline">
+				<a href="" class="card-button card-button-profile"><?php esc_html_e( 'View Profile', 'buddyboss' ); ?></a>
+			</div>
+		</div>
+	</div>
+
+</div>

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

@@ -498,6 +498,34 @@
 
 	}
 
+	.footer-button-wrap {
+
+		@include dis-flex;
+
+		.action {
+			width: 100%;
+
+			.generic-button {
+				float: left;
+			}
+
+		}
+
+	}
+
+	@media screen and (max-width: 375px) {
+
+		> li {
+			min-width: 280px;
+		}
+
+	}
+
+}
+
+.buddypress-wrap ul.bp-list.groups-dir-list,
+.bb-group-card {
+
 	.bs-group-members {
 
 		@include dis-flex;
@@ -506,6 +534,7 @@
 		margin-right: 5px;
 
 		.bs-group-member {
+			display: block;
 			max-width: 28px;
 			float: left;
 			margin-right: -9px;
@@ -555,30 +584,6 @@
 	.group-footer-wrap:not(.group-join-button-hidden) .bs-group-members {
 		margin-left: -4px;
 	}
-
-	.footer-button-wrap {
-
-		@include dis-flex;
-
-		.action {
-			width: 100%;
-
-			.generic-button {
-				float: left;
-			}
-
-		}
-
-	}
-
-	@media screen and (max-width: 375px) {
-
-		> li {
-			min-width: 280px;
-		}
-
-	}
-
 }
 
 // Ensure there's space between parent act list wrapper and filters bar