Skip to content

Commit 22ce7dc

Browse files
mbusch3mbusch3
committed
Updated reports InfoPopover button to better match mockups.
1 parent 92ff13e commit 22ce7dc

11 files changed

Lines changed: 221 additions & 183 deletions

File tree

‎assets/css/udoit4-theme.css‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,6 @@
284284
}
285285
}
286286

287-
288287
.btn-primary {
289288
background-color: var(--primary-color);
290289
border-color: var(--primary-color);
@@ -353,12 +352,13 @@
353352
background-color: transparent;
354353
color: var(--link-color);
355354
padding: .15rem 0.5rem;
356-
border-radius: 8px;
355+
border-radius: var(--element-radius);
357356
cursor: pointer;
357+
box-shadow: none;
358358
}
359359

360360
.btn-header {
361-
border-radius: 8px !important;
361+
border-radius: var(--element-radius) !important;
362362
justify-content: center;
363363
width: 100%;
364364
font-size: 0.9em;
@@ -581,13 +581,20 @@
581581

582582
.close-icon {
583583
cursor: pointer;
584-
padding: .25rem;
584+
padding: .2rem;
585585
margin-inline-end: -.5rem;
586+
border: 1px solid transparent;
587+
fill: var(--text-disabled-color);
588+
box-shadow: none;
589+
border-radius: 50%;
586590

587591
&:hover,
588592
&:focus {
593+
fill: var(--text-color);
589594
background-color: var(--gray-lighter);
590-
border-radius: 50%;
595+
}
596+
597+
&:focus {
591598
outline-offset: -2px;
592599
outline: 2px solid var(--focus-color);
593600
}
@@ -675,6 +682,22 @@
675682
}
676683
}
677684

685+
.ufixit-widget code,
686+
.ufixit-widget-dialog code,
687+
.ufixit-learn-container code,
688+
.info-popover-content code {
689+
padding: 0.15rem 0.4rem;
690+
background-color: var(--gray-dark);
691+
color: var(--white);
692+
border-radius: 4px;
693+
font-size: 0.9em;
694+
695+
strong {
696+
font-weight: 400;
697+
text-decoration: underline;
698+
}
699+
}
700+
678701
}
679702

680703
@layer udoit-layout {
@@ -1151,8 +1174,8 @@
11511174
}
11521175

11531176
.disabled {
1154-
color: var(--text-disabled);
1155-
fill: var(--text-disabled);
1177+
color: var(--text-disabled-color);
1178+
fill: var(--text-disabled-color);
11561179
}
11571180

11581181
.icon-sm {

‎assets/js/Components/FixIssuesPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -886,7 +886,7 @@ export default function FixIssuesPage({
886886
closeDialog()
887887
}
888888
}}
889-
className="close-icon icon-lg text-color"
889+
className="close-icon icon-md"
890890
tabIndex="0"
891891
role="button"
892892
alt={t('fix.button.close')}

‎assets/js/Components/Reports/IssuesTable.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.issue-label {
22
display: inline-flex;
33
align-items: center;
4-
gap: 6px;
4+
gap: .75em;
55
}
66

77
.sr-only {

‎assets/js/Components/Reports/ResolutionsReport.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useMemo, useRef, useState } from "react";
2-
import Chart, { Interaction } from "chart.js/auto";
2+
import Chart from "chart.js/auto";
33
import SliderSelect from "../Widgets/SliderSelect";
44
import './ResolutionsReport.css';
55

@@ -66,7 +66,7 @@ export default function ResolutionsReport({
6666
const [searchTerm, setSearchTerm] = useState("");
6767
const [dateStart, setDateStart] = useState(null);
6868
const [dateEnd, setDateEnd] = useState(null);
69-
const [selectedPreset, setSelectedPreset] = useState('30');
69+
const [selectedPreset, setSelectedPreset] = useState('all');
7070
const courseLimit = 5;
7171

7272
/** ---------- Use memoization to avoid compute on re-render ---------- */

‎assets/js/Components/ReportsPage.js‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import ReportsTable from './Reports/ReportsTable'
66
import IssuesTable from './Reports/IssuesTable'
77
import { formNameFromRule } from '../Services/Ufixit'
88
import InfoPopover from './Widgets/InfoPopover'
9+
import StatusPill from './Widgets/StatusPill'
910
import ProgressIcon from './Icons/ProgressIcon'
1011
import PrintIcon from './Icons/PrintIcon'
12+
import RightArrowIcon from './Icons/RightArrowIcon'
1113
import SortIcon from './Icons/SortIcon'
1214
import './ReportsPage.css'
1315

@@ -60,22 +62,39 @@ export default function ReportsPage({t, report, settings, quickSearchTerm}) {
6062
tempIssues.map((issue => {
6163
let label = ''
6264
let searchTerm = ''
65+
let content = ''
6366
let formName = formNameFromRule(issue.id)
6467
if(formName === 'review_only') {
6568
label = t('report.label.unhandled') + issue.id
69+
let tempContent = t('rule.summary.'+ issue.id)
70+
if(tempContent === `rule.summary.${issue.id}`) {
71+
tempContent = t('form.review_only.summary')
72+
}
73+
content = tempContent
6674
searchTerm = issue.id
6775
}
6876
else {
6977
label = t(`form.${formName}.title`)
7078
searchTerm = t(`form.${formName}.title`)
79+
content = t(`form.${formName}.summary`)
7180
}
7281
issue.display = label
7382
issue.label = (
74-
<span className="issue-label">
83+
<span className="issue-label clickable-text">
7584
{label}
7685
<InfoPopover
7786
t={t}
78-
content={t(`form.${formName}.summary`)}
87+
title={t('fix.label.barrier_information')}
88+
content={content}
89+
action={(
90+
<button
91+
className="btn-text btn-link btn-icon-right"
92+
onClick={() => quickSearchTerm(searchTerm)}
93+
>
94+
{t('report.label.view_barriers')}
95+
<RightArrowIcon className='icon-sm' />
96+
</button>
97+
)}
7998
/>
8099
</span>
81100
)
@@ -93,13 +112,12 @@ export default function ReportsPage({t, report, settings, quickSearchTerm}) {
93112
if (!labels.includes(issue.label_display)) {
94113
labels.push(issue.label_display)
95114
if(issue.type === 'error' || issue.type === 'issue') {
96-
issue.type = t('filter.label.severity.issue')
97-
}
98-
else if(issue.type === 'potential') {
99-
issue.type = t('filter.label.severity.potential')
115+
issue.type = (<StatusPill t={t} settings={settings} issue={{status: settings.ISSUE_FILTER.ACTIVE, severity: settings.ISSUE_FILTER.ISSUE}} />)
116+
issue.type_display = t('filter.label.severity.issue')
100117
}
101-
else if(issue.type === 'suggestion') {
102-
issue.type = t('filter.label.severity.suggestion')
118+
else if(issue.type === 'potential' || issue.type === 'suggestion') {
119+
issue.type = (<StatusPill t={t} settings={settings} issue={{status: settings.ISSUE_FILTER.ACTIVE, severity: settings.ISSUE_FILTER.POTENTIAL}} />)
120+
issue.type_display = t('filter.label.severity.potential')
103121
}
104122
issue.handled = (issue.fixed + issue.resolved > 0 ? 1 : 0)
105123
mergedIssues.push(issue)

‎assets/js/Components/Widgets/InfoPopover.css‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,29 @@
99
background: none;
1010
cursor: pointer;
1111
padding: 0;
12-
margin-inline-start: 4px;
1312
display: flex;
1413
align-items: center;
1514
line-height: 1;
1615
border-radius: 50%;
16+
padding: .2em;
17+
border: 1px solid transparent;
18+
box-shadow: none;
19+
fill: var(--text-disabled-color);
1720
}
1821

1922
.info-popover-btn:hover,
2023
.info-popover-btn:focus {
21-
outline: 2px solid var(--focus-color);
22-
outline-offset: 1px;
24+
fill: var(--selection-color);
25+
background: var(--pill-success-background);
2326
}
2427

25-
.icon-info {
26-
transition: filter var(--transition-time);
28+
.info-popover-btn:hover {
29+
border-color: var(--pill-success-border);
2730
}
2831

29-
.info-popover-btn:hover .icon-info,
30-
.info-popover-btn:focus .icon-info {
31-
filter: brightness(var(--hover-brightness));
32+
.info-popover-btn:focus {
33+
outline: 2px solid var(--focus-color);
34+
outline-offset: 1px;
3235
}
3336

3437
/* The popover dialog itself */
@@ -37,43 +40,64 @@
3740
inset: unset;
3841
z-index: 1000;
3942
background: var(--white);
40-
border: 1px solid var(--border-color);
41-
border-radius: 6px;
42-
padding: 12px 16px;
43-
min-width: 220px;
44-
max-width: 320px;
43+
border-radius: var(--window-radius);
44+
min-width: 20em;
45+
max-width: 25em;
46+
border: none;
4547
outline: none;
4648
}
4749

48-
.info-popover-dialog::backdrop {
49-
background: var(--backdrop-color);
50-
backdrop-filter: none;
50+
.info-popover-title {
51+
display: flex;
52+
flex-direction: row;
53+
justify-content: space-between;
54+
gap: .5em;
55+
padding: .75em 1em;
56+
background-color: var(--background-color);
57+
border-bottom: 1px solid var(--border-color);
58+
align-items: center;
59+
text-decoration: none !important;
60+
61+
h2 {
62+
margin: 0;
63+
font-size: 1.15em;
64+
text-transform: uppercase;
65+
font-weight: 500;
66+
}
67+
68+
[role="button"] {
69+
cursor: pointer;
70+
border-radius: 50%;
71+
padding: .2em;
72+
border: 1px solid transparent;
73+
box-shadow: none;
74+
fill: var(--text-disabled-color);
75+
76+
&:hover, &:focus {
77+
fill: var(--text-color);
78+
background-color: var(--gray-lighter);
79+
}
80+
81+
&:focus {
82+
outline-offset: -2px;
83+
outline: 2px solid var(--focus-color);
84+
}
85+
}
5186
}
5287

5388
.info-popover-content {
54-
margin-bottom: 8px;
89+
padding: 1em;
5590
text-decoration: none !important;
56-
font-size: 1.1em !important;
57-
color: var(--text-color) !important;
58-
font-weight: normal !important;
59-
}
60-
61-
.info-popover-close {
62-
border: none;
63-
background: none;
64-
color: var(--link-color);
65-
cursor: pointer;
66-
font-size: 1em;
67-
float: right;
91+
font-size: 1.1em;
92+
color: var(--text-secondary-color);
93+
font-weight: 300;
6894
}
6995

70-
/* Screen reader-only utility */
71-
.sr-only {
72-
position: absolute !important;
73-
left: -9999px !important;
74-
height: 1px;
75-
width: 1px;
76-
overflow: hidden;
77-
clip: rect(1px, 1px, 1px, 1px);
78-
white-space: nowrap;
79-
}
96+
.info-popover-action {
97+
border-top: 1px solid var(--border-color);
98+
display: flex;
99+
flex-direction: row;
100+
justify-content: end;
101+
gap: 1rem;
102+
padding: .75rem 1rem;
103+
}

0 commit comments

Comments
 (0)