Merge pull request #199 from Emilia-Capital/filip/dashboard-widget-de…

…sign-tweaks Implement design tweak
Emilia-Capital · Jan 6, 2025 · a967d12 · a967d12
2 parents 1ce5170 + 3575c1f
commit a967d12
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 19 deletions.
diff --git a/assets/css/dashboard-widgets/score.css b/assets/css/dashboard-widgets/score.css
@@ -1,6 +1,7 @@
 #progress_planner_dashboard_widget_score {
 
 	.prpl-dashboard-widget {
+		padding-top: 5px; /* Total 16px top spacing */
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 		grid-gap: calc(var(--prpl-gap) / 2);
@@ -36,12 +37,12 @@
 	}
 
 	.prpl-dashboard-widget-footer {
-		margin-top: 1em;
-		padding-top: 1em;
+		margin-top: 1rem;
+		padding-top: 1rem;
 		border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
 		font-size: var(--prpl-font-size-base);
 		display: flex;
-		gap: 1em;
+		gap: 0.5rem;
 		align-items: center;
 	}
 }
diff --git a/assets/images/logo_progress_planner_pro.svg b/assets/images/logo_progress_planner_pro.svg
diff --git a/assets/js/web-components/prpl-gauge.js b/assets/js/web-components/prpl-gauge.js
@@ -16,6 +16,9 @@ customElements.define(
 				start: '270deg',
 				cutout: '57%',
 				contentFontSize: 'var(--prpl-font-size-6xl)',
+				contentPadding:
+					'var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding)',
+				marginBottom: 'var(--prpl-padding)',
 			},
 			content = ''
 		) {
@@ -41,11 +44,18 @@ customElements.define(
 			props.cutout = this.getAttribute( 'cutout' ) || props.cutout;
 			props.contentFontSize =
 				this.getAttribute( 'contentFontSize' ) || props.contentFontSize;
+			props.contentPadding =
+				this.getAttribute( 'contentPadding' ) || props.contentPadding;
+			props.marginBottom =
+				this.getAttribute( 'marginBottom' ) || props.marginBottom;
 
 			this.innerHTML = `
-			<div style="padding: var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding); background: ${
+			<div style="padding: ${ props.contentPadding };
+			background: ${
 				props.background
-			}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative;margin-bottom: var(--prpl-padding);">
+			}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative; margin-bottom: ${
+				props.marginBottom
+			};">
 				<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${
 					props.background
 				} 0 ${ props.cutout }, transparent ${

diff --git a/assets/js/widgets/suggested-tasks.js b/assets/js/widgets/suggested-tasks.js
@@ -1,5 +1,4 @@
 /* global customElements, progressPlannerSuggestedTasks, confetti, prplDocumentReady, progressPlannerSuggestedTask */
-const PRPL_SUGGESTED_TASKS_MAX_ITEMS = 5;
 
 /**
  * Count the number of items in the list.
@@ -262,7 +261,8 @@ document.addEventListener( 'DOMContentLoaded', () => {
 
 	// Inject items, until we reach the maximum number of items.
 	while (
-		progressPlannerCountItems() <= PRPL_SUGGESTED_TASKS_MAX_ITEMS &&
+		progressPlannerCountItems() <
+			parseInt( progressPlannerSuggestedTasks.maxItems ) &&
 		progressPlannerGetNextItem()
 	) {
 		progressPlannerInjectNextItem();
@@ -426,7 +426,8 @@ document.addEventListener(
 	'prplMaybeInjectSuggestedTaskEvent',
 	() => {
 		while (
-			progressPlannerCountItems() <= PRPL_SUGGESTED_TASKS_MAX_ITEMS &&
+			progressPlannerCountItems() <
+				parseInt( progressPlannerSuggestedTasks.maxItems ) &&
 			progressPlannerGetNextItem()
 		) {
 			progressPlannerInjectNextItem();

diff --git a/classes/widgets/class-suggested-tasks.php b/classes/widgets/class-suggested-tasks.php
@@ -89,6 +89,8 @@ public function register_scripts() {
 	public function enqueue_scripts() {
 		$handle = 'progress-planner-' . $this->id;
 
+		$current_screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
+
 		// Enqueue the script.
 		\wp_enqueue_script( $handle );
 
@@ -123,9 +125,10 @@ public function enqueue_scripts() {
 			$handle,
 			'progressPlannerSuggestedTasks',
 			[
-				'ajaxUrl' => \admin_url( 'admin-ajax.php' ),
-				'nonce'   => \wp_create_nonce( 'progress_planner' ),
-				'tasks'   => $tasks,
+				'ajaxUrl'  => \admin_url( 'admin-ajax.php' ),
+				'nonce'    => \wp_create_nonce( 'progress_planner' ),
+				'tasks'    => $tasks,
+				'maxItems' => $current_screen && 'dashboard' === $current_screen->id ? 3 : 5,
 			]
 		);
 	}

diff --git a/views/admin-page-header.php b/views/admin-page-header.php
@@ -19,7 +19,13 @@
 ?>
 <div class="prpl-header">
 	<div class="prpl-header-logo">
-		<?php \progress_planner()->the_asset( 'images/logo_progress_planner.svg' ); ?>
+		<?php
+		if ( \progress_planner()->is_pro_site() ) {
+			\progress_planner()->the_asset( 'images/logo_progress_planner_pro.svg' );
+		} else {
+			\progress_planner()->the_asset( 'images/logo_progress_planner.svg' );
+		}
+		?>
 	</div>
 
 	<div class="prpl-header-right">

diff --git a/views/admin-page-settings.php b/views/admin-page-settings.php
@@ -14,7 +14,13 @@
 <div class="wrap prpl-wrap prpl-settings-wrap">
 	<div class="prpl-header">
 		<div class="prpl-header-logo">
-			<?php \progress_planner()->the_asset( 'images/logo_progress_planner.svg' ); ?>
+			<?php
+			if ( \progress_planner()->is_pro_site() ) {
+				\progress_planner()->the_asset( 'images/logo_progress_planner_pro.svg' );
+			} else {
+				\progress_planner()->the_asset( 'images/logo_progress_planner.svg' );
+			}
+			?>
 		</div>
 	</div>
 	<h1>

diff --git a/views/dashboard-widgets/score.php b/views/dashboard-widgets/score.php
@@ -10,10 +10,10 @@
 ?>
 <div class="prpl-dashboard-widget">
 	<div>
-		<prpl-gauge background="#fff" color="var(--prpl-color-accent-orange)" contentFontSize="var(--prpl-font-size-4xl)">
+		<prpl-gauge background="#fff" color="var(--prpl-color-accent-orange)" contentFontSize="var(--prpl-font-size-4xl)" contentPadding="var(--prpl-padding)" marginBottom="0">
 			<progress max="<?php echo (int) Monthly::TARGET_POINTS; ?>" value="<?php echo (float) \progress_planner()->get_widgets__suggested_tasks()->get_score(); ?>">
 				<prpl-badge
-					complete="<?php echo Monthly::TARGET_POINTS === (int) \progress_planner()->get_widgets__suggested_tasks()->get_score() ? 'true' : 'false'; ?>"
+					complete="true"
 					badge-id="<?php echo esc_attr( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) ); ?>"
 				></prpl-badge>
 			</progress>
@@ -22,7 +22,7 @@
 	</div>
 
 	<div>
-		<prpl-gauge background="#fff" color="<?php echo esc_attr( \progress_planner()->get_widgets__activity_scores()->get_gauge_color( \progress_planner()->get_widgets__activity_scores()->get_score() ) ); ?>" contentFontSize="var(--prpl-font-size-5xl)">
+		<prpl-gauge background="#fff" color="<?php echo esc_attr( \progress_planner()->get_widgets__activity_scores()->get_gauge_color( \progress_planner()->get_widgets__activity_scores()->get_score() ) ); ?>" contentFontSize="var(--prpl-font-size-5xl)" contentPadding="var(--prpl-padding)" marginBottom="0">
 			<progress max="100" value="<?php echo (float) \progress_planner()->get_widgets__activity_scores()->get_score(); ?>">
 				<?php echo \esc_html( \progress_planner()->get_widgets__activity_scores()->get_score() ); ?>
 			</progress>
@@ -31,17 +31,17 @@
 	</div>
 </div>
 
-<hr style="margin: 1em 0">
+<hr style="margin: 1rem 0">
 
 <h3><?php \esc_html_e( 'Ravi\'s Recommendations', 'progress-planner' ); ?></h3>
 <ul style="display:none"></ul>
 <ul class="prpl-suggested-tasks-list"></ul>
 
 <?php if ( \current_user_can( 'manage_options' ) ) : ?>
 	<div class="prpl-dashboard-widget-footer">
-		<img src="<?php echo \esc_attr( PROGRESS_PLANNER_URL . '/assets/images/icon_progress_planner.svg' ); ?>" style="width:1.5em;" alt="" />
+		<img src="<?php echo \esc_attr( PROGRESS_PLANNER_URL . '/assets/images/icon_progress_planner.svg' ); ?>" style="width:1.85em;" alt="" />
 		<a href="<?php echo \esc_url( \get_admin_url( null, 'admin.php?page=progress-planner' ) ); ?>">
-			<?php \esc_html_e( 'Check out all your stats and badges', 'progress-planner' ); ?>
+			<?php \esc_html_e( 'Check out all your stats and recommendations', 'progress-planner' ); ?>
 		</a>
 	</div>
 <?php endif; ?>