Merge remote-tracking branch 'origin/develop' into develop

Emilia-Capital · Dec 10, 2024 · c564ff9 · c564ff9
2 parents 894755a + d3f2eeb
commit c564ff9
Show file tree

Hide file tree

Showing 19 changed files with 310 additions and 199 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -102,6 +102,40 @@
 		display: flex;
 		justify-content: space-between;
 	}
+
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		display: inline-block;
+
+		/* Fake hover effect for the info icon */
+		&.prpl-info-icon {
+			position: relative;
+
+			&:hover {
+				border-radius: 50%;
+				background-color: var(--prpl-color-gray-4);
+
+				&::before {
+					content: "";
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					border: 2px solid var(--prpl-color-gray-4);
+					border-radius: 50%;
+					box-sizing: border-box;
+				}
+
+				svg path {
+					fill: #fff;
+				}
+			}
+		}
+	}
+
+
 }
 
 .prpl-hidden {

diff --git a/assets/css/page-widgets/suggested-tasks.css b/assets/css/page-widgets/suggested-tasks.css
@@ -3,8 +3,7 @@
 	.badge-group-monthly {
 		padding: calc(var(--prpl-padding) / 2);
 		border-radius: var(--prpl-border-radius);
-		margin-bottom: var(--prpl-padding);
-		background: var(--prpl-background-orange);
+		background-color: var(--prpl-background-orange);
 
 		.prpl-badge-row-wrapper {
 			overflow: hidden;
@@ -96,7 +95,7 @@
 	&:has(.prpl-suggested-tasks-list li) {
 
 		.prpl-widget-title {
-			display: block;
+			display: flex;
 		}
 	}
 
@@ -114,6 +113,13 @@
 		border-bottom: none;
 	}
 
+	prpl-suggested-task:nth-child(odd) {
+
+		.prpl-suggested-task {
+			background-color: #f9fafb;
+		}
+	}
+
 	.prpl-suggested-task {
 		margin: 0;
 		padding: 0.5rem 0.5rem;
@@ -122,10 +128,6 @@
 		align-items: center;
 		position: relative;
 
-		&:nth-child(odd) {
-			background-color: #f9fafb;
-		}
-
 		h3 {
 			font-size: 1rem;
 			margin: 0;
@@ -154,7 +156,7 @@
 
 		.prpl-suggested-task-points {
 			font-size: var(--prpl-font-size-xs);
-			font-weight: 600;
+			font-weight: 700;
 			color: var(--prpl-color-headings);
 			background-color: var(--prpl-color-accent-orange);
 			width: 1.5rem;
@@ -195,6 +197,12 @@
 			cursor: pointer;
 		}
 
+		.icon {
+			width: 1rem;
+			height: 1rem;
+			display: inline-block;
+		}
+
 		.prpl-suggested-task-snooze {
 			margin-left: 5px;
 
@@ -277,6 +285,14 @@
 
 		.prpl-suggested-task-info {
 			margin-left: -30px;
+
+			p {
+				margin-bottom: 0;
+			}
+
+			p:first-child {
+				margin-top: 0;
+			}
 		}
 
 	}
@@ -294,115 +310,103 @@
 		grid-auto-rows: auto;
 	}
 
-	.prpl-widget-wrapper {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-
-		&.prpl-badge-streak {
-
-			.progress-label {
-				display: inline-block;
-			}
-
-			.progress-wrapper {
-				display: grid;
-				grid-template-columns: 1fr 1fr 1fr;
-				gap: calc(var(--prpl-gap) / 2);
-				padding: calc(var(--prpl-padding) / 2);
-				margin-bottom: var(--prpl-padding);
-
-				.prpl-badge {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: space-between;
-					flex-wrap: wrap;
-					min-width: 0;
-				}
-
-				p {
-					margin: 0;
-					font-size: var(--prpl-font-size-xs);
-					text-align: center;
-					line-height: 1.2;
-				}
-
-				prpl-badge {
-					width: 100%;
-					transform: scale(var(--multiplier));
-					margin-bottom: 1rem;
-				}
-
-			}
-
-			.prpl-badge {
-
-				/* Change this number to adjust the rate of growth of the badges size. */
-				--multiplier-default: 1.05;
-				--multiplier: var(--multiplier-default);
-
-				+.prpl-badge {
-					--multiplier: calc(var(--multiplier-default) * var(--multiplier-default));
-
-					+.prpl-badge {
-						--multiplier: calc(var(--multiplier-default) * var(--multiplier-default) * var(--multiplier-default));
-					}
-				}
-			}
-
-			.prpl-widget-content {
-				margin-bottom: 1em;
-			}
-		}
-	}
-
 	.prpl-widget-title {
 		padding: 0.5rem 1rem;
 		border-radius: 0.5rem;
 		background: var(--prpl-background-orange);
 	}
 
-	.prpl-widget-wrapper-writing {
+	.badge-group-monthly {
+		background-color: transparent;
+	}
+
+	.prpl-widget-wrapper-content {
 
 		.prpl-widget-title {
 			background: var(--prpl-background-blue);
 		}
+
+		.badge-group-content {
+			background-color: transparent;
+		}
 	}
 
 	.prpl-widget-wrapper-maintenance {
 
 		.prpl-widget-title {
 			background: var(--prpl-background-red);
 		}
-	}
 
-	.badge-group-monthly {
-		background-color: transparent;
+		.badge-group-maintenance {
+			background-color: transparent;
+		}
 	}
 }
 
-.prpl-ravi-reward-container {
-	margin-bottom: var(--prpl-padding);
+.prpl-widget-wrapper.prpl-badge-streak {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 
-	.in-popover & {
-		margin-bottom: 0;
+
+	.progress-label {
+		display: inline-block;
 	}
 
-	img {
-		border: 1px solid var(--prpl-color-gray-2);
-		border-radius: var(--prpl-border-radius);
+	.progress-wrapper {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		gap: calc(var(--prpl-gap) / 2);
+		padding: calc(var(--prpl-padding) / 2);
+		border-radius: var(--prpl-border-radius-big);
+
+		&:not(:first-child) {
+			margin-top: var(--prpl-padding);
+		}
+
+		&.badge-group-content {
+			background: var(--prpl-background-blue);
+		}
+
+		&.badge-group-maintenance {
+			background: var(--prpl-background-red);
+		}
+
+		.prpl-badge {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			min-width: 0;
+		}
 
-		&.incomplete {
-			filter: grayscale(1);
-			opacity: 0.25;
+		p {
+			margin: 0;
+			font-size: var(--prpl-font-size-xs);
+			text-align: center;
+			line-height: 1.2;
+		}
+
+		prpl-badge {
+			width: 100%;
+			margin-bottom: 1rem;
 		}
 	}
 
+	.prpl-widget-content {
+		margin-bottom: 1em;
+	}
+
+	.badge-group-monthly {
+		background-color: transparent;
+	}
 }
 
+
 #prpl-popover-monthly-badges-trigger {
 	font-size: var(--prpl-font-size-base);
 	color: var(--prpl-color-link);
 	text-decoration: underline;
+	margin-top: var(--prpl-padding);
 }
diff --git a/assets/css/page-widgets/todo.css b/assets/css/page-widgets/todo.css
@@ -93,6 +93,10 @@ prpl-todo-item {
 		border-bottom: 1.5px solid transparent;
 	}
 
+	input[type="checkbox"]:checked + .content {
+		text-decoration: line-through;
+	}
+
 	.trash,
 	.move-up,
 	.move-down {

diff --git a/assets/images/icon_info.svg b/assets/images/icon_info.svg
diff --git a/assets/images/icon_snooze.svg b/assets/images/icon_snooze.svg
diff --git a/assets/js/grid-masonry.js b/assets/js/grid-masonry.js
@@ -52,6 +52,9 @@ prplDocumentReady( () => {
 
 window.addEventListener( 'resize', prplResizeAllGridItems );
 
+// Fire event after all images are loaded.
+window.addEventListener( 'load', prplResizeAllGridItems );
+
 const prplResizeAllGridItemsEvent = new Event( 'prplResizeAllGridItemsEvent' ); // eslint-disable-line no-unused-vars
 
 // Listen for the event.

diff --git a/assets/js/web-components/prpl-suggested-task.js b/assets/js/web-components/prpl-suggested-task.js
@@ -36,7 +36,7 @@ customElements.define(
 							data-target="info"
 							title="${ progressPlannerSuggestedTask.i18n.info }"
 						>
-							<span class="dashicons dashicons-info"></span>
+							<img src="${ progressPlannerSuggestedTask.assets.infoIcon }" alt="${ progressPlannerSuggestedTask.i18n.info }" class="icon">
 							<span class="screen-reader-text">${ progressPlannerSuggestedTask.i18n.info }</span>
 						</button>`,
 				snooze: `<button
@@ -48,7 +48,7 @@ customElements.define(
 							data-target="snooze"
 							title="${ progressPlannerSuggestedTask.i18n.snooze }"
 						>
-							<span class="dashicons dashicons-clock"></span>
+							<img src="${ progressPlannerSuggestedTask.assets.snoozeIcon }" alt="${ progressPlannerSuggestedTask.i18n.snooze }" class="icon">
 							<span class="screen-reader-text">${ progressPlannerSuggestedTask.i18n.snooze }</span>
 						</button>`,
 				complete: isRemoteTask

diff --git a/classes/admin/class-scripts.php b/classes/admin/class-scripts.php
@@ -101,8 +101,12 @@ public function localize_script( $handle ) {
 					$handle,
 					'progressPlannerSuggestedTask',
 					[
-						'nonce' => \wp_create_nonce( 'progress_planner' ),
-						'i18n'  => [
+						'nonce'  => \wp_create_nonce( 'progress_planner' ),
+						'assets' => [
+							'infoIcon'   => PROGRESS_PLANNER_URL . '/assets/images/icon_info.svg',
+							'snoozeIcon' => PROGRESS_PLANNER_URL . '/assets/images/icon_snooze.svg',
+						],
+						'i18n'   => [
 							'info'           => \esc_html__( 'Info', 'progress-planner' ),
 							'snooze'         => \esc_html__( 'Snooze', 'progress-planner' ),
 							'snoozeThisTask' => \esc_html__( 'Snooze this task?', 'progress-planner' ),