Skip to content

Commit 63e03b1

Browse files
ilicfilipilicfilip
committed
popover for "delete all completed tasks"
1 parent a3285d3 commit 63e03b1

4 files changed

Lines changed: 111 additions & 2 deletions

File tree

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,3 +288,61 @@
288288
}
289289
}
290290
}
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/js/widgets/todo.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,32 @@ const prplTodoWidget = {
194194
document.querySelector( '#todo-list .prpl-loader' )?.remove();
195195
},
196196

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+
197223
/**
198224
* Delete all completed tasks.
199225
*/

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ public function the_todo_list() {
6363
</span>
6464
</summary>
6565
<div id="todo-list-completed-delete-all-wrapper">
66-
<button id="todo-list-completed-delete-all" onclick="prplTodoWidget.deleteAllCompletedTasks()">
66+
<button id="todo-list-completed-delete-all" onclick="prplTodoWidget.showDeleteAllPopover()">
6767
<span style="display: inline-block; width: 18px; height: 18px;">
6868
<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>
6969
</span>
@@ -72,6 +72,31 @@ public function the_todo_list() {
7272
</div>
7373
<ul id="todo-list-completed" class="prpl-todo-list prpl-suggested-tasks-list"></ul>
7474
</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>
75100
<?php
76101
}
77102

‎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)