Differentiates between approver badge style and non-approver

ProfessionalWiki · Aug 17, 2024 · 5e85171 · 5e85171
1 parent feb1baf
commit 5e85171
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 4 deletions.
diff --git a/resources/ApprovePage.js b/resources/ApprovePage.js
@@ -25,6 +25,7 @@ const handleApprovalResponse = ( approve, data ) => {
 
 	$badgeElement.toggleClass( 'approved-badge' );
 	$badgeElement.toggleClass( 'unapproved-badge' );
+	$( '.dropdown-icon' ).toggleClass( 'approved' );
 
 	elements.forEach( ( selector ) => $( selector ).toggleClass( 'display-none' ) );
 

diff --git a/resources/Icons/approved-arrow-down.svg b/resources/Icons/approved-arrow-down.svg
diff --git a/resources/Icons/arrow-down.svg b/resources/Icons/arrow-down.svg
diff --git a/resources/PageApprovals.css b/resources/PageApprovals.css
@@ -11,7 +11,6 @@
 	border-radius: 20px;
 	font-weight: bold;
 	font-size: 12px;
-	cursor: pointer;
 	position: relative;
 }
 
@@ -33,7 +32,8 @@
 
 .status-icon,
 .checkmark-icon,
-.unapprove-icon {
+.unapprove-icon,
+.dropdown-icon {
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
@@ -60,6 +60,17 @@
 	background-image: url( Icons/checkmark.svg );
 }
 
+.dropdown-icon {
+	width: 13px;
+	height: 13px;
+	background-image: url( Icons/arrow-down.svg );
+	margin-left: 5px;
+}
+
+.dropdown-icon.approved {
+	background-image: url( Icons/approved-arrow-down.svg );
+}
+
 #unapproveButton .unapprove-icon {
 	width: 20px;
 	height: 20px;
@@ -138,7 +149,7 @@
 	.dropdown-item {
 		display: flex;
 		align-items: center;
-		padding: 10px 15px;
+		padding: 10px 23px;
 		width: 100%;
 		border: 0;
 		background: none;
@@ -163,3 +174,7 @@
 #unapproveButton {
 	color: #dc3545;
 }
+
+.cursor-pointer {
+	cursor: pointer;
+}
diff --git a/templates/PageApprovalStatus.mustache b/templates/PageApprovalStatus.mustache
@@ -1,5 +1,8 @@
 <div class="page-approval-container">
-	<div class="approval-status-badge {{#isPageApproved}}approved-badge{{/isPageApproved}}{{^isPageApproved}}unapproved-badge{{/isPageApproved}}">
+	<div class="approval-status-badge
+		{{#isPageApproved}}approved-badge{{/isPageApproved}}
+		{{^isPageApproved}}unapproved-badge{{/isPageApproved}}
+		{{#canApprove}}cursor-pointer{{/canApprove}}">
 		<div class="status-icon"></div>
 		<div class="approved-status-text {{^isPageApproved}}display-none{{/isPageApproved}}">{{statusApproved}}</div>
 		<div class="approved-status-text {{#isPageApproved}}display-none{{/isPageApproved}}">{{statusNotApproved}}</div>
@@ -14,6 +17,8 @@
 					{{approveButtonText}}
 				</button>
 			</div>
+			<span class="dropdown-icon {{#isPageApproved}}approved{{/isPageApproved}}">
+			</span>
 		{{/canApprove}}
 		<div class="approval-status-tooltip {{^isPageApproved}}display-none{{/isPageApproved}}">
 			<small class="approver-details {{^isPageApproved}}display-none{{/isPageApproved}}">