Skip to content

Commit c8e0d1e

Browse files
aristatharistath
authored
Merge pull request #286 from ProgressPlanner/filip/interactive-task
Interactive task type
2 parents 4c5fe58 + 3db642c commit c8e0d1e

14 files changed

Lines changed: 990 additions & 8 deletions

‎assets/css/admin.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ button.prpl-info-icon {
362362
.prpl-wrap input[type="tel"],
363363
.prpl-wrap input[type="search"] {
364364
height: 40px;
365-
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
365+
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.05);
366366
}
367367

368368
/*------------------------------------*\
@@ -472,3 +472,12 @@ button.prpl-info-icon {
472472
height: 1em;
473473
}
474474
}
475+
476+
/*------------------------------------*\
477+
Layout for columns.
478+
\*------------------------------------*/
479+
.prpl-columns-wrapper {
480+
display: grid;
481+
grid-template-columns: repeat(2, 1fr);
482+
gap: var(--prpl-padding);
483+
}

‎assets/css/page-widgets/suggested-tasks.css‎

Lines changed: 335 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,10 +266,344 @@
266266
}
267267
}
268268

269-
270269
#prpl-popover-monthly-badges-trigger {
271270
font-size: var(--prpl-font-size-base);
272271
color: var(--prpl-color-link);
273272
text-decoration: underline;
274273
margin-top: 0.75rem;
275274
}
275+
276+
/*------------------------------------*\
277+
Interactive tasks, popover.
278+
\*------------------------------------*/
279+
.prpl-popover.prpl-popover-interactive {
280+
padding: 24px 24px 14px 24px; /* 14px is needed for the "next" button hover state. */
281+
box-sizing: border-box;
282+
283+
* {
284+
max-width: calc(100% - 1px);
285+
}
286+
287+
.prpl-columns-wrapper-flex {
288+
display: flex;
289+
flex-wrap: wrap;
290+
gap: 40px;
291+
overflow: hidden;
292+
padding-bottom: 10px; /* Needed for the "next" button hover state. */
293+
294+
> * {
295+
flex-grow: 1;
296+
flex-basis: 300px;
297+
position: relative;
298+
299+
&:not(:first-child) {
300+
301+
&::before,
302+
&::after {
303+
content: "";
304+
display: block;
305+
position: absolute;
306+
top: 0;
307+
left: -20px;
308+
width: 1px;
309+
height: 100%;
310+
background-color: var(--prpl-color-gray-2);
311+
}
312+
313+
&::after {
314+
top: -20px;
315+
left: 0;
316+
width: 100%;
317+
height: 1px;
318+
}
319+
}
320+
}
321+
}
322+
323+
.prpl-column {
324+
325+
/* Set margin for headings and paragraphs. */
326+
h1,
327+
h2,
328+
h3,
329+
h4,
330+
h5,
331+
h6 {
332+
333+
&:first-child {
334+
margin-top: 0;
335+
}
336+
}
337+
338+
p {
339+
margin-bottom: 1rem;
340+
341+
&:first-child {
342+
margin-top: 0;
343+
}
344+
345+
&:last-child {
346+
margin-bottom: 0;
347+
}
348+
}
349+
350+
.prpl-interactive-task-title {
351+
font-size: 18px;
352+
line-height: 22px;
353+
354+
& + p {
355+
margin-top: 4px;
356+
}
357+
}
358+
359+
/* Set padding and background color for content column (description text). */
360+
&.prpl-column-content {
361+
padding: 20px;
362+
border-radius: var(--prpl-border-radius-big);
363+
background-color: var(--prpl-background-purple);
364+
}
365+
366+
.prpl-note {
367+
margin-bottom: 1rem;
368+
display: flex;
369+
align-items: flex-start;
370+
gap: 0.5rem;
371+
padding: 0.75rem;
372+
color: #854d0e;
373+
font-size: var(--prpl-font-size-small);
374+
border-radius: 6px;
375+
background-color: #fefce8;
376+
377+
.prpl-note-icon {
378+
display: flex;
379+
flex-shrink: 0;
380+
align-items: center;
381+
justify-content: center;
382+
width: 20px;
383+
height: 20px;
384+
color: #eab308;
385+
386+
svg {
387+
width: 100%;
388+
height: 100%;
389+
}
390+
}
391+
}
392+
393+
/* Inputs. */
394+
input[type="text"],
395+
input[type="email"],
396+
input[type="number"],
397+
input[type="url"],
398+
input[type="tel"],
399+
input[type="search"] {
400+
height: 44px;
401+
padding: 1rem; /* WIP */
402+
width: 100%;
403+
min-width: 300px; /* WIP */
404+
border-radius: 6px;
405+
border: 1px solid var(--prpl-color-gray-2);
406+
}
407+
408+
.prpl-button {
409+
padding: 0.75rem 1.25rem;
410+
border: none;
411+
color: var(--prpl-color-gray-6);
412+
font-weight: 600;
413+
border-radius: var(--prpl-border-radius);
414+
background-color: var(--prpl-color-400-orange); /* WIP: pick exact color */
415+
transition: all 0.25s ease-in-out;
416+
position: relative;
417+
418+
&::after {
419+
content: "";
420+
display: block;
421+
width: 100%;
422+
height: 100%;
423+
background: var(--prpl-color-400-orange); /* WIP: pick exact color */
424+
position: absolute;
425+
top: 0;
426+
left: 0;
427+
z-index: -1;
428+
border-radius: 6px;
429+
transition: all 0.25s ease-in-out;
430+
}
431+
432+
&:hover,
433+
&:focus {
434+
background: var(--prpl-color-400-orange); /* WIP: pick exact color */
435+
436+
&::after {
437+
background: var(--prpl-color-400-orange); /* WIP: pick exact color */
438+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
439+
width: calc(100% + 4px);
440+
height: calc(100% + 4px);
441+
margin: -2px;
442+
}
443+
}
444+
}
445+
446+
textarea {
447+
width: 100%;
448+
min-height: 100px;
449+
border-radius: 6px;
450+
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.05);
451+
border: 1px solid var(--prpl-color-gray-2);
452+
}
453+
454+
/* Used for radio and checkbox inputs. */
455+
.radios {
456+
display: flex;
457+
flex-direction: column;
458+
gap: 0.5rem;
459+
460+
.prpl-radio-wrapper {
461+
display: flex;
462+
align-items: center;
463+
}
464+
465+
--prpl-input-green: #3bb3a6;
466+
--prpl-input-gray: #8b99a6;
467+
468+
/* Hide the default input, because WP has it's own styles (which include pseudo-elements). */
469+
.prpl-custom-checkbox input[type="checkbox"],
470+
.prpl-custom-radio input[type="radio"] {
471+
position: absolute;
472+
opacity: 0;
473+
width: 0;
474+
height: 0;
475+
}
476+
477+
/* Shared styles for the custom control */
478+
.prpl-custom-control {
479+
display: inline-block;
480+
vertical-align: middle;
481+
margin-right: 12px;
482+
width: 20px;
483+
height: 20px;
484+
box-sizing: border-box;
485+
position: relative;
486+
transition: border-color 0.2s, background 0.2s;
487+
}
488+
489+
/* Label text styling */
490+
.prpl-custom-checkbox,
491+
.prpl-custom-radio {
492+
display: flex;
493+
align-items: center;
494+
margin-bottom: 0.5rem;
495+
cursor: pointer;
496+
user-select: none;
497+
}
498+
499+
/* Checkbox styles */
500+
.prpl-custom-checkbox {
501+
502+
.prpl-custom-control {
503+
border: 1px solid var(--prpl-input-gray);
504+
border-radius: 6px;
505+
background: #fff;
506+
}
507+
508+
input[type="checkbox"] {
509+
510+
/* Checkbox hover (off) */
511+
&:hover + .prpl-custom-control {
512+
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
513+
}
514+
515+
/* Checkbox checked (on) */
516+
&:checked + .prpl-custom-control {
517+
background: var(--prpl-input-green);
518+
border-color: var(--prpl-input-green);
519+
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
520+
}
521+
}
522+
523+
524+
/* Checkmark */
525+
.prpl-custom-control::after {
526+
content: "";
527+
position: absolute;
528+
left: 6px;
529+
top: 2px;
530+
width: 4px;
531+
height: 9px;
532+
border: solid #fff;
533+
border-width: 0 2px 2px 0;
534+
opacity: 0;
535+
transform: scale(0.8) rotate(45deg);
536+
transition: opacity 0.2s, transform 0.2s;
537+
}
538+
539+
input[type="checkbox"]:checked + .prpl-custom-control::after {
540+
opacity: 1;
541+
transform: scale(1) rotate(45deg);
542+
}
543+
}
544+
545+
/* Radio styles */
546+
.prpl-custom-radio {
547+
548+
.prpl-custom-control {
549+
border: 1px solid var(--prpl-input-gray);
550+
border-radius: 50%;
551+
background: #fff;
552+
}
553+
554+
/* Radio hover (off) */
555+
input[type="radio"] {
556+
557+
&:hover + .prpl-custom-control {
558+
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
559+
}
560+
561+
/* Radio checked (on) */
562+
&:checked + .prpl-custom-control {
563+
background: var(--prpl-input-green);
564+
border-color: var(--prpl-input-green);
565+
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
566+
}
567+
}
568+
569+
/* Radio dot */
570+
.prpl-custom-control::after {
571+
content: "";
572+
position: absolute;
573+
top: 5px;
574+
left: 5px;
575+
width: 8px;
576+
height: 8px;
577+
background: #fff;
578+
border-radius: 50%;
579+
opacity: 0;
580+
transition: opacity 0.2s;
581+
}
582+
583+
input[type="radio"]:checked + .prpl-custom-control::after {
584+
opacity: 1;
585+
background: #fff;
586+
}
587+
}
588+
}
589+
590+
/* Used for next step button. */
591+
.prpl-steps-nav-wrapper {
592+
margin-top: 1rem;
593+
display: flex;
594+
justify-content: flex-end;
595+
gap: 1rem;
596+
597+
.prpl-button {
598+
cursor: pointer;
599+
600+
/* If the button has empty data-action attribute disable it. */
601+
&[data-action=""] {
602+
pointer-events: none;
603+
opacity: 0.5;
604+
}
605+
}
606+
607+
}
608+
}
609+
}

‎assets/css/settings-page.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,6 @@
293293
width: 30rem;
294294
max-width: calc(100% - 2rem);
295295
border: 1px solid var(--prpl-color-gray-2);
296-
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.05);
297296
}
298297
}
299298

‎assets/css/web-components/prpl-suggested-task.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@
2727
width: 100%;
2828
}
2929
}
30+
31+
/* Button which triggers the popover, interactive tasks. */
32+
button[popovertarget] {
33+
line-height: 1;
34+
text-align: initial;
35+
}
3036
}
3137

3238
input[type="checkbox"][disabled] {

‎assets/images/icon_exclamation_triangle_solid.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)