Improving likes: Update Like button "likers" dialog design (#34308)

* Update Like button "likers" dialog design * Remove unnecessary margin styling * Adjust padding to align with the Like button * Improving likes: add RTL support to likes popover (#34348) * Add RTL support * Add changelog * Fix position --------- Co-authored-by: Paulo Cruz <paulo.cruz@automattic.com>
Automattic · Nov 30, 2023 · 14fb296 · 14fb296
1 parent 294477d
commit 14fb296
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 22 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-like-widget-dialog-new-desgin b/projects/plugins/jetpack/changelog/add-like-widget-dialog-new-desgin
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Update Like button "likers" dialog design
diff --git a/projects/plugins/jetpack/changelog/add-likes-rtl-support b/projects/plugins/jetpack/changelog/add-likes-rtl-support
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Improving likes: add RTL support to likes popover
diff --git a/projects/plugins/jetpack/modules/likes/jetpack-likes-master-iframe.php b/projects/plugins/jetpack/modules/likes/jetpack-likes-master-iframe.php
@@ -24,7 +24,8 @@ function jetpack_likes_master_iframe() {
 
 	$likes_locale = ( '' === $_locale || 'en' === $_locale ) ? '' : '&amp;lang=' . strtolower( $_locale );
 	/** This filter is documented in projects/plugins/jetpack/modules/likes.php */
-	$new_layout = apply_filters( 'likes_new_layout', false ) ? '&amp;n=1' : '';
+	$new_layout       = apply_filters( 'likes_new_layout', false ) ? '&amp;n=1' : '';
+	$new_layout_class = $new_layout ? 'wpl-new-layout' : '';
 
 	$src = sprintf(
 		'https://widgets.wp.com/likes/master.html?ver=%1$s#ver=%1$s%2$s%3$s',
@@ -42,6 +43,6 @@ function jetpack_likes_master_iframe() {
 	}
 	?>
 	<iframe src='<?php echo esc_url( $src ); ?>' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe>
-	<div id='likes-other-gravatars'><div class="likes-text"><?php echo $likers_text; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div><ul class="wpl-avatars sd-like-gravatars"></ul></div>
+	<div id='likes-other-gravatars' class='<?php echo esc_attr( $new_layout_class ); ?>'><div class="likes-text"><?php echo $likers_text; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div><ul class="wpl-avatars sd-like-gravatars"></ul></div>
 	<?php
 }
diff --git a/projects/plugins/jetpack/modules/likes/queuehandler.js b/projects/plugins/jetpack/modules/likes/queuehandler.js
@@ -206,6 +206,8 @@ function JetpackLikesMessageListener( event ) {
 				break;
 			}
 
+			const newLayout = container.classList.contains( 'wpl-new-layout' );
+
 			const list = container.querySelector( 'ul' );
 
 			container.style.display = 'none';
@@ -222,21 +224,38 @@ function JetpackLikesMessageListener( event ) {
 				}
 
 				const element = document.createElement( 'li' );
-				element.innerHTML = `
-					<a href="${ encodeURI( liker.profile_URL ) }" rel="nofollow" target="_parent" class="wpl-liker">
-						<img src="${ encodeURI( liker.avatar_URL ) }"
-							alt=""
-							style="width: 30px; height: 30px; padding-right: 3px;" />
-					</a>
-				`;
+				if ( newLayout ) {
+					element.innerHTML = `
+						<a href="${ encodeURI( liker.profile_URL ) }" rel="nofollow" target="_parent" class="wpl-liker">
+							<img src="${ encodeURI( liker.avatar_URL ) }"
+								alt=""
+								style="width: 28px; height: 28px;" />
+							<span></span>
+						</a>
+					`;
+				} else {
+					element.innerHTML = `
+						<a href="${ encodeURI( liker.profile_URL ) }" rel="nofollow" target="_parent" class="wpl-liker">
+							<img src="${ encodeURI( liker.avatar_URL ) }"
+								alt=""
+								style="width: 30px; height: 30px; padding-right: 3px;" />
+						</a>
+					`;
+				}
 
 				list.append( element );
 
 				// Add some extra attributes through native methods, to ensure strings are sanitized.
 				element.classList.add( liker.css_class );
 				element.querySelector( 'img' ).alt = liker.name;
+				if ( newLayout ) {
+					element.querySelector( 'span' ).innerText = liker.name;
+				}
 			} );
 
+			const containerStyle = getComputedStyle( container );
+			const isRtl = containerStyle.direction === 'rtl';
+
 			const el = document.querySelector( `*[name='${ data.parent }']` );
 			const rect = el.getBoundingClientRect();
 			const win = el.ownerDocument.defaultView;
@@ -245,29 +264,46 @@ function JetpackLikesMessageListener( event ) {
 				left: rect.left + win.pageXOffset,
 			};
 
-			container.style.left = offset.left + data.position.left - 10 + 'px';
-			container.style.top = offset.top + data.position.top - 33 + 'px';
+			if ( newLayout ) {
+				container.style.top = offset.top + data.position.top - 1 + 'px';
+
+				if ( isRtl ) {
+					const visibleAvatarsCount = data && data.likers ? Math.min( data.likers.length, 5 ) : 0;
+					// 24px is the width of the avatar + 4px is the padding between avatars
+					container.style.left =
+						offset.left + data.position.left + 24 * visibleAvatarsCount + 4 + 'px';
+					container.style.transform = 'translateX(-100%)';
+				} else {
+					container.style.left = offset.left + data.position.left + 'px';
+				}
+			} else {
+				container.style.left = offset.left + data.position.left - 10 + 'px';
+				container.style.top = offset.top + data.position.top - 33 + 'px';
+			}
 
 			const rowLength = Math.floor( data.width / 37 );
 			let height = Math.ceil( data.likers.length / rowLength ) * 37 + 13;
 			if ( height > 204 ) {
 				height = 204;
 			}
 
-			const containerWidth = rowLength * 37 - 7;
-			container.style.height = height + 'px';
-			container.style.width = containerWidth + 'px';
+			if ( ! newLayout ) {
+				// Avatars + padding
+				const containerWidth = rowLength * 37 - 7;
+				container.style.height = height + 'px';
+				container.style.width = containerWidth + 'px';
 
-			const listWidth = rowLength * 37;
-			list.style.width = listWidth + 'px';
+				const listWidth = rowLength * 37;
+				list.style.width = listWidth + 'px';
 
-			container.style.display = 'block';
-
-			const scrollbarWidth = list.offsetWidth - list.clientWidth;
-			if ( scrollbarWidth > 0 ) {
-				container.style.width = containerWidth + scrollbarWidth + 'px';
-				list.style.width = listWidth + scrollbarWidth + 'px';
+				const scrollbarWidth = list.offsetWidth - list.clientWidth;
+				if ( scrollbarWidth > 0 ) {
+					container.style.width = containerWidth + scrollbarWidth + 'px';
+					list.style.width = listWidth + scrollbarWidth + 'px';
+				}
 			}
+
+			container.style.display = 'block';
 		}
 	}
 }

diff --git a/projects/plugins/jetpack/modules/likes/style.css b/projects/plugins/jetpack/modules/likes/style.css
@@ -79,6 +79,21 @@ div.jetpack-comment-likes-widget-wrapper iframe {
 	z-index: 1000;
 }
 
+#likes-other-gravatars.wpl-new-layout {
+	display: none;
+	position: absolute;
+	padding: 9px 12px 10px 12px;
+	background-color: #fff;
+	border: solid 1px #dcdcde;
+	border-radius: 4px;
+	box-shadow: none;
+	min-width: 220px;
+	max-height: 240px;
+	height: auto;
+	overflow: auto;
+	z-index: 1000;
+}
+
 #likes-other-gravatars * {
 	line-height: normal;
 }
@@ -89,6 +104,13 @@ div.jetpack-comment-likes-widget-wrapper iframe {
 	padding-bottom: 8px;
 }
 
+#likes-other-gravatars.wpl-new-layout .likes-text {
+	color: #101517;
+	font-size: 12px;
+	font-weight: 500;
+	padding-bottom: 8px;
+}
+
 #likes-other-gravatars ul,
 #likes-other-gravatars li {
 	margin: 0;
@@ -114,18 +136,52 @@ div.jetpack-comment-likes-widget-wrapper iframe {
 	margin: 0 5px 5px 0;
 }
 
+#likes-other-gravatars.wpl-new-layout ul.wpl-avatars li {
+	width: 196px;
+	height: 28px;
+	float: none;
+	margin: 0 0 4px 0;
+}
+
 #likes-other-gravatars ul.wpl-avatars li a {
 	margin: 0 2px 0 0;
 	border-bottom: none !important;
 	display: block;
 }
 
+#likes-other-gravatars.wpl-new-layout ul.wpl-avatars li a {
+	margin: 0 2px 0 0;
+	border-bottom: none !important;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	text-decoration: none;
+}
+
+#likes-other-gravatars.wpl-new-layout ul.wpl-avatars li a span {
+	font-size: 12px;
+	color: #2C3338;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 #likes-other-gravatars ul.wpl-avatars li a img {
 	background: none;
 	border: none;
 	margin: 0 !important;
 	padding: 0 !important;
 	position: static;
+	box-sizing: border-box;
+}
+
+#likes-other-gravatars.wpl-new-layout ul.wpl-avatars li a img {
+	background: none;
+	border: 1px solid #fff;;
+	border-radius: 50%;
+	margin: 0 !important;
+	padding: 1px !important;
+	position: static;
 }
 
 div.sd-box {