Skip to content

Commit

Permalink
small tooltip refactor & add tooltip for activity score widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilicfilip
ilicfilip committed Oct 28, 2024
1 parent 6d64feb commit 6c30742
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 122 deletions.
55 changes: 55 additions & 0 deletions assets/css/admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,3 +383,58 @@ button.prpl-info-icon {
gap: var(--prpl-padding);
}
}


/*------------------------------------*\
Tooltip.
\*------------------------------------*/
.tooltip-actions {
justify-content: flex-end;
gap: 0.5em;
display: flex;
position: relative;
}

.prpl-tooltip {
position: absolute;
bottom: 0;
left: 100%;
transform: translate(-100%, calc(100% + 10px));

padding: 0.75rem 1.5rem 0.75rem 0.75rem;
width: 150px;
background: var(--prpl-background-green);
border-radius: var(--prpl-border-radius);
z-index: 2; /* above the gauges */
visibility: hidden; /* hidden by default */

font-size: 1rem;
font-weight: 400;
color: var(--prpl-color-text);

&[data-tooltip-visible] {
visibility: visible;
}

.close {
position: absolute;
top: 0.75rem;
right: 0;
cursor: pointer;
}

/* Arrow */
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translate(-10px, -10px) rotate(90deg);

width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 10px 7.5px 0;
border-color: transparent var(--prpl-background-green) transparent transparent;
}
}
59 changes: 7 additions & 52 deletions assets/css/page-widgets/suggested-tasks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,25 +103,20 @@
border-bottom: 1px solid var(--prpl-color-gray-3);
display: flex;
justify-content: space-between;
position: relative;

h3 {
font-size: 1rem;
margin: 0;
font-weight: 500;
}

.actions {

.tooltip-actions {
visibility: hidden;
justify-content: flex-end;
gap: 0.5em;
display: flex;
}

&:hover {

.actions {
.tooltip-actions {
visibility: visible;
}
}
Expand All @@ -141,43 +136,6 @@
cursor: pointer;
}

.prpl-suggested-task-info,
.prpl-suggested-snooze-duration-selector {
position: absolute;
bottom: 0;
left: 100%;
transform: translate(-100%, calc(100% + 10px));

padding: 0.75rem 1.5rem 0.75rem 0.75rem;
width: 150px;
background: var(--prpl-background-green);
border-radius: var(--prpl-border-radius);
z-index: 2; /* above the gauges */
visibility: hidden; /* hidden by default */

.close {
position: absolute;
top: 0.75rem;
right: 0;
cursor: pointer;
}

/* Arrow */
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translate(-20px, -10px) rotate(90deg);

width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 10px 7.5px 0;
border-color: transparent var(--prpl-background-green) transparent transparent;
}
}

.prpl-suggested-snooze-duration-selector {
margin-left: 10px;

Expand Down Expand Up @@ -256,24 +214,21 @@
}

/* Open */
&.prpl-suggested-task-snooze-open,
&.prpl-suggested-task-info-open {

.actions {
visibility: visible;
}
.prpl-suggested-task-snooze-open,
.prpl-suggested-task-info-open {
visibility: visible;
}

/* Info open */
&.prpl-suggested-task-info-open {
.prpl-suggested-task-info-open {

.prpl-suggested-task-info {
visibility: visible;
}
}

/* Snooze open */
&.prpl-suggested-task-snooze-open {
.prpl-suggested-task-snooze-open {

.prpl-suggested-snooze-duration-selector {
visibility: visible;
Expand Down
20 changes: 15 additions & 5 deletions assets/js/suggested-tasks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,21 +227,31 @@ const prplSuggestedTodoItemListeners = ( item ) => {

switch ( action ) {
case 'snooze':
item.classList.remove( 'prpl-suggested-task-info-open' );
item.classList.toggle( 'prpl-suggested-task-snooze-open' );
item.querySelector( '.tooltip-actions' ).classList.remove(
'prpl-suggested-task-info-open'
);
item.querySelector( '.tooltip-actions' ).classList.toggle(
'prpl-suggested-task-snooze-open'
);
break;

case 'close-snooze':
item.classList.remove( 'prpl-suggested-task-snooze-open' );
item.querySelector( '.tooltip-actions' ).classList.remove(
'prpl-suggested-task-snooze-open'
);
item.querySelector(
'.prpl-suggested-snooze-duration-selector.prpl-toggle-radio-group-open'
)?.classList.remove( 'prpl-toggle-radio-group-open' );
break;

case 'info':
case 'close-info':
item.classList.remove( 'prpl-suggested-task-snooze-open' );
item.classList.toggle( 'prpl-suggested-task-info-open' );
item.querySelector( '.tooltip-actions' ).classList.remove(
'prpl-suggested-task-snooze-open'
);
item.querySelector( '.tooltip-actions' ).classList.toggle(
'prpl-suggested-task-info-open'
);
break;
}
} );
Expand Down
25 changes: 14 additions & 11 deletions views/page-widgets/activity-scores.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,24 @@
?>
<h2 class="prpl-widget-title">
<?php \esc_html_e( 'Your website activity score', 'progress-planner' ); ?>
<script>const prplResizeAllGridItemsEventOnDetailsToggle = new Event( 'prplResizeAllGridItemsEvent' );</script>
<button
class="prpl-info-icon"
onclick="document.getElementById('prpl-activity-details').classList.toggle('hidden');document.dispatchEvent(prplResizeAllGridItemsEventOnDetailsToggle);"
>
<span class="dashicons dashicons-info-outline"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'More info', 'progress-planner' ); ?></span>
</button>

<div class="tooltip-actions">
<button
class="prpl-info-icon"
onclick="this.closest( '.tooltip-actions' ).querySelector( '.prpl-tooltip' ).toggleAttribute( 'data-tooltip-visible' )"
>
<span class="dashicons dashicons-info-outline"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'More info', 'progress-planner' ); ?></span>
</button>

<div class="prpl-tooltip">
<?php \esc_html_e( 'Your website activity score is based on the amount of website maintenance work you have done over the past 30 days.', 'progress-planner' ); ?>
</div>
</div>
</h2>

<div style="--background: var(--prpl-background-orange)">
<?php \progress_planner()->the_view( 'page-widgets/parts/activity-scores-gauge.php' ); ?>
<p class="hidden" id="prpl-activity-details">
<?php \esc_html_e( 'Your website activity score is based on the amount of website maintenance work you have done over the past 30 days.', 'progress-planner' ); ?>
</p>
</div>

<hr>
Expand Down
109 changes: 55 additions & 54 deletions views/suggested-tasks-item.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<li id="prpl-suggested-task-template" class="prpl-suggested-task" data-task-id="{taskId}">
<h3>{taskTitle}</h3>
<div class="actions">
<div class="tooltip-actions">
<button
type="button"
class="prpl-suggested-task-button"
Expand All @@ -36,62 +36,63 @@ class="prpl-suggested-task-button"
<span class="dashicons dashicons-clock"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'Snooze', 'progress-planner' ); ?></span>
</button>
</div>
<div class="prpl-suggested-snooze-duration-selector">

<fieldset>
<legend>
<span>
<?php esc_html_e( 'Snooze this task?', 'progress-planner' ); ?>
</span>
<button type="button" class="prpl-toggle-radio-group">
<span class="prpl-toggle-radio-group-text">
<?php esc_html_e( 'How long?', 'progress-planner' ); ?>
</span>
<span class="prpl-toggle-radio-group-arrow">
&rsaquo;
<div class="prpl-suggested-snooze-duration-selector prpl-tooltip">

<fieldset>
<legend>
<span>
<?php esc_html_e( 'Snooze this task?', 'progress-planner' ); ?>
</span>
</button>
</legend>
<button type="button" class="prpl-toggle-radio-group">
<span class="prpl-toggle-radio-group-text">
<?php esc_html_e( 'How long?', 'progress-planner' ); ?>
</span>
<span class="prpl-toggle-radio-group-arrow">
&rsaquo;
</span>
</button>
</legend>

<div class="prpl-snooze-duration-radio-group">
<label>
<input type="radio" name="snooze-duration-{taskId}" value="1-week">
<?php esc_html_e( '1 week', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="1-month">
<?php esc_html_e( '1 month', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="3-months">
<?php esc_html_e( '3 months', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="6-months">
<?php esc_html_e( '6 months', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="1-year">
<?php esc_html_e( '1 year', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="forever">
<?php esc_html_e( 'forever', 'progress-planner' ); ?>
</label>
</div>
</fieldset>
<div class="prpl-snooze-duration-radio-group">
<label>
<input type="radio" name="snooze-duration-{taskId}" value="1-week">
<?php esc_html_e( '1 week', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="1-month">
<?php esc_html_e( '1 month', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="3-months">
<?php esc_html_e( '3 months', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="6-months">
<?php esc_html_e( '6 months', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="1-year">
<?php esc_html_e( '1 year', 'progress-planner' ); ?>
</label>
<label>
<input type="radio" name="snooze-duration-{taskId}" value="forever">
<?php esc_html_e( 'forever', 'progress-planner' ); ?>
</label>
</div>
</fieldset>

<button type="button" class="prpl-suggested-task-button close" data-action="close-snooze">
<span class="dashicons dashicons-no-alt"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'Close', 'progress-planner' ); ?></span>
</button>
</div>
<div class="prpl-suggested-task-info">
{taskDescription}
<button type="button" class="prpl-suggested-task-button close" data-action="close-info">
<span class="dashicons dashicons-no-alt"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'Close', 'progress-planner' ); ?></span>
</button>
<button type="button" class="prpl-suggested-task-button close" data-action="close-snooze">
<span class="dashicons dashicons-no-alt"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'Close', 'progress-planner' ); ?></span>
</button>
</div>
<div class="prpl-suggested-task-info prpl-tooltip">
{taskDescription}
<button type="button" class="prpl-suggested-task-button close" data-action="close-info">
<span class="dashicons dashicons-no-alt"></span>
<span class="screen-reader-text"><?php \esc_html_e( 'Close', 'progress-planner' ); ?></span>
</button>
</div>
</div>
</li>

0 comments on commit 6c30742

Please sign in to comment.