Skip to content

Commit 9f7c82d

Browse files
aristatharistath
authored
Merge pull request #600 from ProgressPlanner/filip/v18/styling-changes
Todo list styling changes
2 parents 6a74739 + ebd3288 commit 9f7c82d

8 files changed

Lines changed: 243 additions & 23 deletions

File tree

‎assets/css/page-widgets/todo.css‎

Lines changed: 152 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,21 @@
2727
display: none;
2828
}
2929

30-
#todo-list > *:first-child {
31-
32-
.prpl-suggested-task {
33-
border: 1px solid #796da2;
34-
background-color: #f6f7f9;
35-
36-
.prpl-suggested-task-points-wrapper {
37-
38-
&::after {
39-
content: "";
40-
display: inline-block;
41-
width: 24px;
42-
height: 24px;
43-
background-image: url("../../images/icon_progress_planner.svg");
44-
background-size: contain;
45-
background-repeat: no-repeat;
46-
}
30+
#todo-list > .prpl-suggested-task:first-child {
31+
32+
border: 1px solid #796da2;
33+
background-color: #f6f7f9;
34+
35+
.prpl-suggested-task-points-wrapper {
36+
37+
&::after {
38+
content: "";
39+
display: inline-block;
40+
width: 24px;
41+
height: 24px;
42+
background-image: url("../../images/icon_progress_planner.svg");
43+
background-size: contain;
44+
background-repeat: no-repeat;
4745
}
4846
}
4947
}
@@ -155,7 +153,8 @@
155153
text-decoration: line-through;
156154
}
157155

158-
.prpl-move-buttons,
156+
.prpl-suggested-task-actions-wrapper,
157+
.prpl-move-buttons-wrapper,
159158
button[data-action="complete"] {
160159
display: none;
161160
}
@@ -192,6 +191,83 @@
192191
&:not(:has(.prpl-suggested-task)) {
193192
display: none;
194193
}
194+
195+
#todo-list-completed-delete-all-wrapper {
196+
margin: 0.25rem 0.5rem 0.75rem 0.5rem;
197+
border-top: 1px solid var(--prpl-color-gray-2);
198+
display: none;
199+
200+
#todo-list-completed-delete-all {
201+
display: flex;
202+
align-items: center;
203+
gap: 0.5rem;
204+
background-color: transparent;
205+
border: none;
206+
padding: 0;
207+
margin: 0.5rem 0 0 0;
208+
cursor: pointer;
209+
color: var(--prpl-color-link);
210+
font-size: var(--prpl-font-size-small);
211+
212+
&:hover {
213+
214+
svg path {
215+
fill: var(--prpl-color-accent-red);
216+
}
217+
}
218+
219+
}
220+
}
221+
222+
/* Show the delete all button if there are at least 3 completed tasks */
223+
&:has(.prpl-suggested-task:nth-of-type(3)) #todo-list-completed-delete-all-wrapper {
224+
display: block;
225+
}
226+
227+
.prpl-suggested-task-points-wrapper {
228+
position: relative;
229+
}
230+
231+
.prpl-suggested-task-points {
232+
position: absolute;
233+
right: 0;
234+
transition: all 0.3s ease-in-out;
235+
color: #38296d;
236+
background-color: #d1d5db;
237+
}
238+
239+
.prpl-suggested-task-button {
240+
241+
&.trash {
242+
display: none;
243+
margin-left: auto;
244+
flex-shrink: 0;
245+
width: 1.25rem;
246+
height: 1.25rem;
247+
opacity: 0;
248+
transition: opacity 0.3s ease-in-out;
249+
250+
&:hover {
251+
252+
svg path {
253+
fill: var(--prpl-color-accent-red);
254+
}
255+
}
256+
}
257+
}
258+
259+
.prpl-suggested-task:hover {
260+
261+
.prpl-suggested-task-points {
262+
right: 100%;
263+
transform: translateX(100%);
264+
}
265+
266+
.prpl-suggested-task-button {
267+
display: inline-block;
268+
opacity: 1;
269+
}
270+
}
195271
}
196272

197273
#todo-list {
@@ -212,3 +288,61 @@
212288
}
213289
}
214290
}
291+
292+
293+
#todo-list-completed-delete-all-popover {
294+
max-width: 600px;
295+
296+
.prpl-note {
297+
margin-bottom: 1rem;
298+
display: flex;
299+
align-items: flex-start;
300+
gap: 0.5rem;
301+
padding: 0.75rem;
302+
color: #854d0e;
303+
font-size: var(--prpl-font-size-small);
304+
border-radius: 6px;
305+
background-color: #fefce8;
306+
307+
.prpl-note-icon {
308+
display: flex;
309+
flex-shrink: 0;
310+
align-items: center;
311+
justify-content: center;
312+
width: 20px;
313+
height: 20px;
314+
color: #eab308;
315+
316+
svg {
317+
width: 100%;
318+
height: 100%;
319+
}
320+
}
321+
322+
&.prpl-note-error {
323+
color: #9f0712;
324+
background-color: var(--prpl-background-red);
325+
326+
.prpl-note-icon {
327+
color: var(--prpl-color-notification-red);
328+
}
329+
330+
}
331+
}
332+
333+
.prpl-buttons-wrapper {
334+
display: flex;
335+
gap: 2rem;
336+
337+
button {
338+
background-color: transparent;
339+
border: none;
340+
color: var(--prpl-color-link);
341+
font-size: var(--prpl-font-size-small);
342+
padding: 0;
343+
margin: 0;
344+
cursor: pointer;
345+
text-decoration: underline;
346+
}
347+
}
348+
}

‎assets/css/suggested-task.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
margin: 0;
33
padding: 0.75rem 0.5rem 0.625rem 0.5rem;
44
display: grid;
5-
grid-template-columns: 1.5rem 1fr 2rem;
5+
grid-template-columns: 1.5rem 1fr 3.5rem;
66
gap: 0.25rem 0.5rem;
77
position: relative;
88
line-height: 1;

‎assets/js/widgets/todo.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,46 @@ const prplTodoWidget = {
193193
removeLoader: () => {
194194
document.querySelector( '#todo-list .prpl-loader' )?.remove();
195195
},
196+
197+
/**
198+
* Show the delete all popover.
199+
*/
200+
showDeleteAllPopover: () => {
201+
document
202+
.getElementById( 'todo-list-completed-delete-all-popover' )
203+
.showPopover();
204+
},
205+
206+
/**
207+
* Close the delete all popover.
208+
*/
209+
closeDeleteAllPopover: () => {
210+
document
211+
.getElementById( 'todo-list-completed-delete-all-popover' )
212+
.hidePopover();
213+
},
214+
215+
/**
216+
* Delete all completed tasks and close the popover.
217+
*/
218+
deleteAllCompletedTasksAndClosePopover: () => {
219+
prplTodoWidget.deleteAllCompletedTasks();
220+
prplTodoWidget.closeDeleteAllPopover();
221+
},
222+
223+
/**
224+
* Delete all completed tasks.
225+
*/
226+
deleteAllCompletedTasks: () => {
227+
document
228+
.querySelectorAll( '#todo-list-completed .prpl-suggested-task' )
229+
.forEach( ( item ) => {
230+
const postId = parseInt( item.getAttribute( 'data-post-id' ) );
231+
prplSuggestedTask.trash( postId );
232+
} );
233+
234+
// Resize event will be triggered by the trash function.
235+
},
196236
};
197237

198238
document

‎classes/admin/widgets/class-todo.php‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,41 @@ public function the_todo_list() {
6262
</svg>
6363
</span>
6464
</summary>
65+
<div id="todo-list-completed-delete-all-wrapper">
66+
<button id="todo-list-completed-delete-all" onclick="prplTodoWidget.showDeleteAllPopover()">
67+
<span style="display: inline-block; width: 18px; height: 18px;">
68+
<svg role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#9ca3af" d="M32.99 47.88H15.01c-3.46 0-6.38-2.7-6.64-6.15L6.04 11.49l-.72.12c-.82.14-1.59-.41-1.73-1.22-.14-.82.41-1.59 1.22-1.73.79-.14 1.57-.26 2.37-.38h.02c2.21-.33 4.46-.6 6.69-.81v-.72c0-3.56 2.74-6.44 6.25-6.55 2.56-.08 5.15-.08 7.71 0 3.5.11 6.25 2.99 6.25 6.55v.72c2.24.2 4.48.47 6.7.81.79.12 1.59.25 2.38.39.82.14 1.36.92 1.22 1.73-.14.82-.92 1.36-1.73 1.22l-.72-.12-2.33 30.24c-.27 3.45-3.18 6.15-6.64 6.15Zm-17.98-3h17.97c1.9 0 3.51-1.48 3.65-3.38l2.34-30.46c-2.15-.3-4.33-.53-6.48-.7h-.03c-5.62-.43-11.32-.43-16.95 0h-.03c-2.15.17-4.33.4-6.48.7l2.34 30.46c.15 1.9 1.75 3.38 3.65 3.38ZM24 7.01c2.37 0 4.74.07 7.11.22v-.49c0-1.93-1.47-3.49-3.34-3.55-2.5-.08-5.03-.08-7.52 0-1.88.06-3.34 1.62-3.34 3.55v.49c2.36-.15 4.73-.22 7.11-.22Zm5.49 32.26h-.06c-.83-.03-1.47-.73-1.44-1.56l.79-20.65c.03-.83.75-1.45 1.56-1.44.83.03 1.47.73 1.44 1.56l-.79 20.65c-.03.81-.7 1.44-1.5 1.44Zm-10.98 0c-.8 0-1.47-.63-1.5-1.44l-.79-20.65c-.03-.83.61-1.52 1.44-1.56.84 0 1.52.61 1.56 1.44l.79 20.65c.03.83-.61 1.52-1.44 1.56h-.06Z"></path></svg>
69+
</span>
70+
<?php \esc_html_e( 'Delete all completed tasks', 'progress-planner' ); ?>
71+
</button>
72+
</div>
6573
<ul id="todo-list-completed" class="prpl-todo-list prpl-suggested-tasks-list"></ul>
6674
</details>
75+
<div id="todo-list-completed-delete-all-popover" class="prpl-popover" popover>
76+
<div class="prpl-note">
77+
<span class="prpl-note-icon">
78+
<?php \progress_planner()->the_asset( 'images/icon_exclamation_triangle_solid.svg' ); ?>
79+
</span>
80+
<span class="prpl-note-text">
81+
<?php \esc_html_e( 'Are you sure you want to delete all completed tasks? This action cannot be undone.', 'progress-planner' ); ?>
82+
</span>
83+
</div>
84+
85+
<div class="prpl-buttons-wrapper">
86+
<button id="todo-list-completed-delete-all-cancel" onclick="prplTodoWidget.closeDeleteAllPopover()">
87+
<?php
88+
/* translators: %1$s is the strong tag, %2$s is the closing strong tag. */
89+
printf( \esc_html__( '%1$sNo%2$s, keep this list', 'progress-planner' ), '<strong>', '</strong>' );
90+
?>
91+
</button>
92+
<button id="todo-list-completed-delete-all-confirm" onclick="prplTodoWidget.deleteAllCompletedTasksAndClosePopover()">
93+
<?php
94+
/* translators: %1$s is the strong tag, %2$s is the closing strong tag. */
95+
printf( \esc_html__( '%1$sYes%2$s, delete all completed tasks', 'progress-planner' ), '<strong>', '</strong>' );
96+
?>
97+
</button>
98+
</div>
99+
</div>
67100
<?php
68101
}
69102

‎tests/e2e/helpers/cleanup.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ async function cleanUpPlannerTasks( { page, context, baseUrl } ) {
2323
const todoItems = page.locator( SELECTORS.TODO_ITEM );
2424
while ( ( await todoItems.count() ) > 0 ) {
2525
const firstItem = todoItems.first();
26-
const trash = firstItem.locator( '.trash' );
26+
const trash = firstItem.locator(
27+
'.prpl-suggested-task-actions-wrapper .trash'
28+
);
2729

2830
try {
2931
console.log(
@@ -57,7 +59,9 @@ async function cleanUpPlannerTasks( { page, context, baseUrl } ) {
5759
);
5860
while ( ( await completedItems.count() ) > 0 ) {
5961
const firstCompleted = completedItems.first();
60-
const trash = firstCompleted.locator( '.trash' );
62+
const trash = firstCompleted.locator(
63+
'.prpl-suggested-task-points-wrapper .trash'
64+
);
6165

6266
try {
6367
console.log(

‎tests/e2e/sequential/todo.spec.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ function todoTests( testContext = test ) {
6868
const deleteItem = page.locator( SELECTORS.TODO_ITEM );
6969
await deleteItem.hover();
7070
await deleteItem.waitFor( { state: 'visible' } );
71-
await deleteItem.locator( '.trash' ).click();
71+
await deleteItem
72+
.locator( '.prpl-suggested-task-actions-wrapper .trash' )
73+
.click();
7274
await page.waitForTimeout( 1500 );
7375

7476
// Verify the todo was deleted

‎views/js-templates/suggested-task.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,13 @@ <h3 class="prpl-task-title">
2525
+{{ data.post.meta.prpl_points }}
2626
</span>
2727
<# } #>
28+
29+
<# if ( 'user' === data.post.prpl_category.slug ) { #>
30+
<button type="button" class="prpl-suggested-task-button trash" data-post-id="{{ data.post.id }}" title="{{ data.l10n.delete }}" onclick="prplSuggestedTask.trash( {{ data.post.id }} );">
31+
<svg role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#9ca3af" d="M32.99 47.88H15.01c-3.46 0-6.38-2.7-6.64-6.15L6.04 11.49l-.72.12c-.82.14-1.59-.41-1.73-1.22-.14-.82.41-1.59 1.22-1.73.79-.14 1.57-.26 2.37-.38h.02c2.21-.33 4.46-.6 6.69-.81v-.72c0-3.56 2.74-6.44 6.25-6.55 2.56-.08 5.15-.08 7.71 0 3.5.11 6.25 2.99 6.25 6.55v.72c2.24.2 4.48.47 6.7.81.79.12 1.59.25 2.38.39.82.14 1.36.92 1.22 1.73-.14.82-.92 1.36-1.73 1.22l-.72-.12-2.33 30.24c-.27 3.45-3.18 6.15-6.64 6.15Zm-17.98-3h17.97c1.9 0 3.51-1.48 3.65-3.38l2.34-30.46c-2.15-.3-4.33-.53-6.48-.7h-.03c-5.62-.43-11.32-.43-16.95 0h-.03c-2.15.17-4.33.4-6.48.7l2.34 30.46c.15 1.9 1.75 3.38 3.65 3.38ZM24 7.01c2.37 0 4.74.07 7.11.22v-.49c0-1.93-1.47-3.49-3.34-3.55-2.5-.08-5.03-.08-7.52 0-1.88.06-3.34 1.62-3.34 3.55v.49c2.36-.15 4.73-.22 7.11-.22Zm5.49 32.26h-.06c-.83-.03-1.47-.73-1.44-1.56l.79-20.65c.03-.83.75-1.45 1.56-1.44.83.03 1.47.73 1.44 1.56l-.79 20.65c-.03.81-.7 1.44-1.5 1.44Zm-10.98 0c-.8 0-1.47-.63-1.5-1.44l-.79-20.65c-.03-.83.61-1.52 1.44-1.56.84 0 1.52.61 1.56 1.44l.79 20.65c.03.83-.61 1.52-1.44 1.56h-.06Z"></path></svg>
32+
<span class="screen-reader-text">{{ data.l10n.delete }}</span>
33+
</button>
34+
<# } #>
2835
</div>
2936

3037
<# if ( 'user' === data.post.prpl_category.slug ) { #>

‎views/popovers/email-sending.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,4 +208,4 @@
208208
<span class="screen-reader-text"><?php \esc_html_e( 'Close', 'progress-planner' ); ?></span>
209209
</button>
210210

211-
</prpl-email-test-popup>
211+
</prpl-email-test-popup>

0 commit comments

Comments
 (0)