Skip to content

Commit a967d12

Browse files
jdevalkjdevalk
authored
Merge pull request #199 from Emilia-Capital/filip/dashboard-widget-design-tweaks
Implement design tweak
2 parents 1ce5170 + 3575c1f commit a967d12

File tree

8 files changed

+47
-19
lines changed

8 files changed

+47
-19
lines changed

‎assets/css/dashboard-widgets/score.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
#progress_planner_dashboard_widget_score {
22

33
.prpl-dashboard-widget {
4+
padding-top: 5px; /* Total 16px top spacing */
45
display: grid;
56
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
67
grid-gap: calc(var(--prpl-gap) / 2);
@@ -36,12 +37,12 @@
3637
}
3738

3839
.prpl-dashboard-widget-footer {
39-
margin-top: 1em;
40-
padding-top: 1em;
40+
margin-top: 1rem;
41+
padding-top: 1rem;
4142
border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
4243
font-size: var(--prpl-font-size-base);
4344
display: flex;
44-
gap: 1em;
45+
gap: 0.5rem;
4546
align-items: center;
4647
}
4748
}

‎assets/images/logo_progress_planner_pro.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/js/web-components/prpl-gauge.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ customElements.define(
1616
start: '270deg',
1717
cutout: '57%',
1818
contentFontSize: 'var(--prpl-font-size-6xl)',
19+
contentPadding:
20+
'var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding)',
21+
marginBottom: 'var(--prpl-padding)',
1922
},
2023
content = ''
2124
) {
@@ -41,11 +44,18 @@ customElements.define(
4144
props.cutout = this.getAttribute( 'cutout' ) || props.cutout;
4245
props.contentFontSize =
4346
this.getAttribute( 'contentFontSize' ) || props.contentFontSize;
47+
props.contentPadding =
48+
this.getAttribute( 'contentPadding' ) || props.contentPadding;
49+
props.marginBottom =
50+
this.getAttribute( 'marginBottom' ) || props.marginBottom;
4451

4552
this.innerHTML = `
46-
<div style="padding: var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding); background: ${
53+
<div style="padding: ${ props.contentPadding };
54+
background: ${
4755
props.background
48-
}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative;margin-bottom: var(--prpl-padding);">
56+
}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative; margin-bottom: ${
57+
props.marginBottom
58+
};">
4959
<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${
5060
props.background
5161
} 0 ${ props.cutout }, transparent ${

‎assets/js/widgets/suggested-tasks.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
/* global customElements, progressPlannerSuggestedTasks, confetti, prplDocumentReady, progressPlannerSuggestedTask */
2-
const PRPL_SUGGESTED_TASKS_MAX_ITEMS = 5;
32

43
/**
54
* Count the number of items in the list.
@@ -262,7 +261,8 @@ document.addEventListener( 'DOMContentLoaded', () => {
262261

263262
// Inject items, until we reach the maximum number of items.
264263
while (
265-
progressPlannerCountItems() <= PRPL_SUGGESTED_TASKS_MAX_ITEMS &&
264+
progressPlannerCountItems() <
265+
parseInt( progressPlannerSuggestedTasks.maxItems ) &&
266266
progressPlannerGetNextItem()
267267
) {
268268
progressPlannerInjectNextItem();
@@ -426,7 +426,8 @@ document.addEventListener(
426426
'prplMaybeInjectSuggestedTaskEvent',
427427
() => {
428428
while (
429-
progressPlannerCountItems() <= PRPL_SUGGESTED_TASKS_MAX_ITEMS &&
429+
progressPlannerCountItems() <
430+
parseInt( progressPlannerSuggestedTasks.maxItems ) &&
430431
progressPlannerGetNextItem()
431432
) {
432433
progressPlannerInjectNextItem();

‎classes/widgets/class-suggested-tasks.php‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ public function register_scripts() {
8989
public function enqueue_scripts() {
9090
$handle = 'progress-planner-' . $this->id;
9191

92+
$current_screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
93+
9294
// Enqueue the script.
9395
\wp_enqueue_script( $handle );
9496

@@ -123,9 +125,10 @@ public function enqueue_scripts() {
123125
$handle,
124126
'progressPlannerSuggestedTasks',
125127
[
126-
'ajaxUrl' => \admin_url( 'admin-ajax.php' ),
127-
'nonce' => \wp_create_nonce( 'progress_planner' ),
128-
'tasks' => $tasks,
128+
'ajaxUrl' => \admin_url( 'admin-ajax.php' ),
129+
'nonce' => \wp_create_nonce( 'progress_planner' ),
130+
'tasks' => $tasks,
131+
'maxItems' => $current_screen && 'dashboard' === $current_screen->id ? 3 : 5,
129132
]
130133
);
131134
}

‎views/admin-page-header.php‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@
1919
?>
2020
<div class="prpl-header">
2121
<div class="prpl-header-logo">
22-
<?php \progress_planner()->the_asset( 'images/logo_progress_planner.svg' ); ?>
22+
<?php
23+
if ( \progress_planner()->is_pro_site() ) {
24+
\progress_planner()->the_asset( 'images/logo_progress_planner_pro.svg' );
25+
} else {
26+
\progress_planner()->the_asset( 'images/logo_progress_planner.svg' );
27+
}
28+
?>
2329
</div>
2430

2531
<div class="prpl-header-right">

‎views/admin-page-settings.php‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@
1414
<div class="wrap prpl-wrap prpl-settings-wrap">
1515
<div class="prpl-header">
1616
<div class="prpl-header-logo">
17-
<?php \progress_planner()->the_asset( 'images/logo_progress_planner.svg' ); ?>
17+
<?php
18+
if ( \progress_planner()->is_pro_site() ) {
19+
\progress_planner()->the_asset( 'images/logo_progress_planner_pro.svg' );
20+
} else {
21+
\progress_planner()->the_asset( 'images/logo_progress_planner.svg' );
22+
}
23+
?>
1824
</div>
1925
</div>
2026
<h1>

‎views/dashboard-widgets/score.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
?>
1111
<div class="prpl-dashboard-widget">
1212
<div>
13-
<prpl-gauge background="#fff" color="var(--prpl-color-accent-orange)" contentFontSize="var(--prpl-font-size-4xl)">
13+
<prpl-gauge background="#fff" color="var(--prpl-color-accent-orange)" contentFontSize="var(--prpl-font-size-4xl)" contentPadding="var(--prpl-padding)" marginBottom="0">
1414
<progress max="<?php echo (int) Monthly::TARGET_POINTS; ?>" value="<?php echo (float) \progress_planner()->get_widgets__suggested_tasks()->get_score(); ?>">
1515
<prpl-badge
16-
complete="<?php echo Monthly::TARGET_POINTS === (int) \progress_planner()->get_widgets__suggested_tasks()->get_score() ? 'true' : 'false'; ?>"
16+
complete="true"
1717
badge-id="<?php echo esc_attr( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) ); ?>"
1818
></prpl-badge>
1919
</progress>
@@ -22,7 +22,7 @@
2222
</div>
2323

2424
<div>
25-
<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)">
25+
<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">
2626
<progress max="100" value="<?php echo (float) \progress_planner()->get_widgets__activity_scores()->get_score(); ?>">
2727
<?php echo \esc_html( \progress_planner()->get_widgets__activity_scores()->get_score() ); ?>
2828
</progress>
@@ -31,17 +31,17 @@
3131
</div>
3232
</div>
3333

34-
<hr style="margin: 1em 0">
34+
<hr style="margin: 1rem 0">
3535

3636
<h3><?php \esc_html_e( 'Ravi\'s Recommendations', 'progress-planner' ); ?></h3>
3737
<ul style="display:none"></ul>
3838
<ul class="prpl-suggested-tasks-list"></ul>
3939

4040
<?php if ( \current_user_can( 'manage_options' ) ) : ?>
4141
<div class="prpl-dashboard-widget-footer">
42-
<img src="<?php echo \esc_attr( PROGRESS_PLANNER_URL . '/assets/images/icon_progress_planner.svg' ); ?>" style="width:1.5em;" alt="" />
42+
<img src="<?php echo \esc_attr( PROGRESS_PLANNER_URL . '/assets/images/icon_progress_planner.svg' ); ?>" style="width:1.85em;" alt="" />
4343
<a href="<?php echo \esc_url( \get_admin_url( null, 'admin.php?page=progress-planner' ) ); ?>">
44-
<?php \esc_html_e( 'Check out all your stats and badges', 'progress-planner' ); ?>
44+
<?php \esc_html_e( 'Check out all your stats and recommendations', 'progress-planner' ); ?>
4545
</a>
4646
</div>
4747
<?php endif; ?>

0 commit comments

Comments
 (0)