Differentiates between approver badge style and non-approver

waximabbax · JeroenDeDauw · commit 5e851719e8b1 · 2024-08-17T22:20:18.000+02:00
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
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#0f7958" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<title>dropdown</title>
+	<path d="M18.813 11.406l-7.906 9.906c-0.75 0.906-1.906 0.906-2.625 0l-7.906-9.906c-0.75-0.938-0.375-1.656 0.781-1.656h16.875c1.188 0 1.531 0.719 0.781 1.656z"></path>
+</svg>
diff --git a/resources/Icons/arrow-down.svg b/resources/Icons/arrow-down.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>dropdown</title>
+<path d="M18.813 11.406l-7.906 9.906c-0.75 0.906-1.906 0.906-2.625 0l-7.906-9.906c-0.75-0.938-0.375-1.656 0.781-1.656h16.875c1.188 0 1.531 0.719 0.781 1.656z"></path>
+</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}}">
