Skip to content

Commit

Permalink
fix: greatly improved table layout and presentation, clickable images…
Browse files Browse the repository at this point in the history 
…, added image path (filename), fixed table cell flow/scroll, width-contained table, fixed row height
  • Loading branch information
@danielweck
danielweck committed Feb 5, 2025
1 parent ba214cd commit 1b60f94
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 17 deletions.
4 changes: 4 additions & 0 deletions src/main/kb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@ function electronAppReady () {
}

function httpReady() {
ipcMain.on('ELECTRON_SHELL_OPEN_EXTERNAL', (event, arg) => {
if (LOG_DEBUG) console.log(`ELECTRON_SHELL_OPEN_EXTERNAL ${arg}`);
shell.openExternal(arg);
});
ipcMain.on('KB_URL', (event, arg) => {
const regexp = /http[s]?:\/\/kb.daisy.org\//;
if (!arg.match(regexp)) {
Expand Down
13 changes: 12 additions & 1 deletion src/renderer/components/ReportSections/Images.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ const path = require('path');
import { localizer } from './../../../shared/l10n/localize';
const { localize } = localizer;

import { ipcRenderer } from 'electron';

// the images page of the report
export default class Images extends React.Component {

Expand Down Expand Up @@ -49,7 +51,10 @@ export default class Images extends React.Component {
border: "black solid 1px", padding: 6,
overflow: "hidden",
}}>
<img style={{ objectFit: "contain" }} src={`fileproto://host/${src}`}/>
<img onClick={() => {
// shell.openExternal(src);
ipcRenderer.send('ELECTRON_SHELL_OPEN_EXTERNAL', `file://${decodeURIComponent(src).replace(/\\/g, "/")}`);
}} style={{ objectFit: "contain", cursor: "pointer" }} src={`fileproto://host/${src}`}/>
</TableCell>
}
},
Expand Down Expand Up @@ -175,6 +180,12 @@ export default class Images extends React.Component {
padding: 0,
margin: 0,
}}>{decodeURIComponent(row.location)}</pre>
<p style={{
whiteSpace: "pre-wrap",
padding: 3,
border: "silver solid 2px",
font: "mono"
}}>{ row.src }</p>
</div>
</TableCell>
},
Expand Down
54 changes: 50 additions & 4 deletions src/renderer/components/ReportSections/Metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,22 @@ class Metadata extends React.Component {
sortable: true,
filterOn: obj => obj,
makeCell: (row, idx) =>
<TableCell key={idx}>
<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx}>
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
{row.name}
</div>
</TableCell>
},
{
Expand All @@ -128,14 +142,32 @@ class Metadata extends React.Component {
numeric: false,
sortable: false,
makeCell: (row, idx) =>
<TableCell key={idx}>{row.value instanceof Array ?
<ul>{row.value.map((data, idx) => {
<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx}>
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
{row.value instanceof Array ?
<ul style={{
padding: "0 0 0 1em",
margin: 0,
}} >{row.value.map((data, idx) => {
return (
<li key={idx}>{data}</li>
);
})}
</ul>
: row.value}
</div>
</TableCell>
},
{
Expand All @@ -144,8 +176,22 @@ class Metadata extends React.Component {
numeric: false,
sortable: true,
makeCell: (row, idx) =>
<TableCell key={idx}>
<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx}>
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
{row.a11y}
</div>
</TableCell>
}
];
Expand Down
104 changes: 96 additions & 8 deletions src/renderer/components/ReportSections/Violations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,22 @@ export default class Violations extends React.Component {
sortOn: impact => impactOrder.indexOf(impact),
filterOn: obj => obj,
makeCell: (row, idx) =>
<TableCell key={idx} className="impact">
<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="impact">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
<span className={row.impact}>{localize(`${keyPrefix}${row.impact}`, {ignoreMissingKey: false}).replace(keyPrefix, "")}</span>
</div>
</TableCell>
},
{
Expand All @@ -67,7 +81,23 @@ export default class Violations extends React.Component {
sortable: true,
filterOn: obj => obj,
makeCell: (row, idx) =>
<TableCell key={idx} className="ruleset">{localize(`${keyPrefix}${row.rulesetTag}`, {ignoreMissingKey: true}).replace(keyPrefix, "").replace("wcag2aaa", "WCAG 2.0 AAA").replace("wcag2aa", "WCAG 2.0 AA").replace("wcag2a", "WCAG 2.0 A").replace("wcag21aaa", "WCAG 2.1 AAA").replace("wcag21aa", "WCAG 2.1 AA").replace("wcag21a", "WCAG 2.1 A").replace("wcag22aaa", "WCAG 2.2 AAA").replace("wcag22aa", "WCAG 2.2 AA").replace("wcag22a", "WCAG 2.2 A")}</TableCell>

<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="ruleset">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
{localize(`${keyPrefix}${row.rulesetTag}`, {ignoreMissingKey: true}).replace(keyPrefix, "").replace("wcag2aaa", "WCAG 2.0 AAA").replace("wcag2aa", "WCAG 2.0 AA").replace("wcag2a", "WCAG 2.0 A").replace("wcag21aaa", "WCAG 2.1 AAA").replace("wcag21aa", "WCAG 2.1 AA").replace("wcag21a", "WCAG 2.1 A").replace("wcag22aaa", "WCAG 2.2 AAA").replace("wcag22aa", "WCAG 2.2 AA").replace("wcag22a", "WCAG 2.2 A")}
</div></TableCell>
},
{
id: "rule",
Expand All @@ -77,9 +107,24 @@ export default class Violations extends React.Component {
sortOn: rule => rule.rule,
filterOn: obj => obj.rule,
makeCell: (row, idx) =>
<TableCell key={idx} className="rule">

<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="rule">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
<p>{row.rule.rule}</p>
<p className="violation-engine">{localize("report.violationsSection.via")} {row.rule.engine}</p>
</div>
</TableCell>
},
{
Expand All @@ -90,11 +135,36 @@ export default class Violations extends React.Component {
sortOn: location => location.filename,
filterOn: obj => obj.filename.indexOf('#') > 0 ? obj.filename.slice(0, obj.filename.indexOf('#')) : obj.filename,
makeCell: (row, idx) =>
<TableCell key={idx} className="location">
<p><code>{row.location.filename}</code></p>

<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="location">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
textOverflow: "ellipsis",
overflowWrap: "break-word",
}} >

<p>
<pre style={{
whiteSpace: "pre-wrap",
padding: 0,
margin: 0,
}}>{row.location.filename}</pre>
</p>

{row.location.snippet != '' ?
<pre>{unescape(row.location.snippet)}</pre>
<p><pre className='snippet' style={{
whiteSpace: "pre-wrap",
}}>{unescape(row.location.snippet)}</pre></p>
: ''}
</div>
</TableCell>
},
{
Expand All @@ -103,8 +173,25 @@ export default class Violations extends React.Component {
numeric: false,
sortable: false,
makeCell: (row, idx) =>
<TableCell key={idx} className="details">
<ul>

<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="details">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: 98,
maxheight: 98,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
<ul style={{
padding: "0 0 0 1em",
margin: 0,
}} >
{row.details.desc.map((txt, idx) => {
return (
<li key={idx}>{unescape(txt)}</li>
Expand All @@ -118,6 +205,7 @@ export default class Violations extends React.Component {
onKeyPress={(e) => { if (e.key === "Enter") { this.onExternalLinkClick(getCurrentLanguage() === "ja" ? row.details.kburl.replace(/\/docs\//, "/ja/") : row.details.kburl); }}}
onClick={() => this.onExternalLinkClick(getCurrentLanguage() === "ja" ? row.details.kburl.replace(/\/docs\//, "/ja/") : row.details.kburl)}
>{localize("report.violationsSection.learnAbout")} {row.details.kbtitle}</a></p>
</div>
</TableCell>
}
];
Expand Down
7 changes: 5 additions & 2 deletions src/renderer/components/Splash.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import { withStyles } from '@material-ui/core/styles';

import { shell, ipcRenderer } from 'electron';
import { ipcRenderer } from 'electron';
import { IPC_EVENT_showEpubFileOrFolderBrowseDialog, IPC_EVENT_showEpubFileBrowseDialog, IPC_EVENT_showEpubFolderBrowseDialog } from "../../shared/main-renderer-events";

import { localizer } from './../../shared/l10n/localize';
Expand Down Expand Up @@ -111,7 +111,10 @@ class Splash extends React.Component {
{!this.state.hideSponsor &&
<div id="sponsorship">
<span>{localize("sponsorship_prompt")}</span>
<a href="#" onClick={() => { shell.openExternal('https://daisy.org/AceAppSponsor'); }}>{localize("sponsorship_link")}</a>
<a href="#" onClick={() => {
// shell.openExternal('https://daisy.org/AceAppSponsor');
ipcRenderer.send('ELECTRON_SHELL_OPEN_EXTERNAL', 'https://daisy.org/AceAppSponsor');
}}>{localize("sponsorship_link")}</a>
<input onClick={() => {
// document.getElementById('sponsorship').remove();
localStorage.setItem('DAISY-ACE-SPONSOR-HIDE', new Date().toISOString());
Expand Down
7 changes: 7 additions & 0 deletions src/renderer/styles/Report.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@
background-color: lightyellow;
color: #905a5a;
}
pre.snippet {
background-color: white;
color: #333333;
border: silver solid 2px;
padding: 3px;
margin: 0;
}
}

.table-filters {
Expand Down
4 changes: 2 additions & 2 deletions src/shared/l10n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,9 @@
"imagesSection": {
"NA": "N/A",
"altAttribute": "'alt' attribute",
"ariaDescribedbyContent": "'aria-describedby' content",
"ariaDescribedbyContent": "'aria-describedby'",
"ariaDetails": "'aria-details'",
"associatedFigcaption": "Associated 'figcaption'",
"associatedFigcaption": "'figcaption'",
"image": "Image",
"location": "Location",
"noImages": "No images encountered in this publication.",
Expand Down

0 comments on commit 1b60f94

Please sign in to comment.