Skip to content

Commit

Permalink
Merge pull request #325 from IBMa/joho-layout-2564
Browse files Browse the repository at this point in the history 
Joho layout 2564
  • Loading branch information
@ErickRenteria
ErickRenteria authored Mar 3, 2021
2 parents f1d728d + 082bd15 commit 43f9928
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 64 deletions.
2 changes: 1 addition & 1 deletion accessibility-checker-extension/src/ts/devtools/DevToolsPanelApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -650,7 +650,7 @@ export default class DevToolsPanelApp extends React.Component<IPanelProps, IPane
focusedViewText={this.state.focusedViewText}
getCurrentSelectedElement={this.getCurrentSelectedElement.bind(this)}
/>
<div style={{ marginTop: "7rem", height: "calc(100% - 7rem)" }}>
<div style={{ marginTop: "8rem", height: "calc(100% - 8rem)" }}>
<div role="region" aria-label="issue list" className="issueList">
{this.state.numScanning > 0 ? <Loading /> : <></>}
{this.state.report && <Report
Expand Down
87 changes: 27 additions & 60 deletions accessibility-checker-extension/src/ts/devtools/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
Button, Checkbox, ContentSwitcher, Switch, Tooltip
} from 'carbon-components-react';
import { settings } from 'carbon-components';
import { Reset16, ReportData16, Renew16 } from '@carbon/icons-react';
import { ReportData16, Renew16 } from '@carbon/icons-react';
import { IArchiveDefinition } from '../background/helper/engineCache';
import OptionUtil from '../util/optionUtil';

Expand Down Expand Up @@ -121,7 +121,7 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
noScan = true;
}

let isLatestArchive = this.isLatestArchive(this.props.selectedArchive, this.props.archives);
// let isLatestArchive = this.isLatestArchive(this.props.selectedArchive, this.props.archives);

if (!counts) {
counts = {
Expand Down Expand Up @@ -157,45 +157,25 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
{/* Content for Checker Tab */}
{this.props.layout === "sub" ?
<div className="bx--row" style={{ marginTop: '10px' }}>
<div className="bx--col-md-2" style={{ display: 'flex', alignContent: 'center' }}>
<div className="bx--col-md-2 bx--col-sm-2" style={{ display: 'flex', alignContent: 'center' }}>
<Button disabled={this.props.scanning} renderIcon={Renew16} onClick={this.props.startScan.bind(this)} size="small" className="scan-button">Scan</Button>
{isLatestArchive ? "" : (
<Tooltip>
<p id="tooltip-body">
You are using a rule set from {OptionUtil.getRuleSetDate(this.props.selectedArchive, this.props.archives)}. The latest rule set is {OptionUtil.getRuleSetDate('latest', this.props.archives)}
</p>
<div className={`${prefix}--tooltip__footer`}>
<a
href={chrome.runtime.getURL("options.html")}
target="_blank"
className={`${prefix}--link`}
>
Change rule set
</a>
</div>
</Tooltip>
)}
</div>
<div className="bx--col-md-2" style={{ height: "28px" }}>

</div>

<div className="bx--col-md-1" style={{paddingRight:0}}>
<div className="headerTools" style={{ display: "flex", justifyContent: "flex-end" }}>
<Button
disabled={!this.props.counts}
onClick={this.props.collapseAll}
className="settingsButtons"
size="small"
hasIconOnly
kind="ghost"
tooltipAlignment="center"
tooltipPosition="top"
iconDescription="Reset"
type="button"
>
<Reset16/>
</Button>
{/* {isLatestArchive ? "" : ( */}
<Tooltip>
<p id="tooltip-body">
You are using a rule set from {OptionUtil.getRuleSetDate(this.props.selectedArchive, this.props.archives)}. The latest rule set is {OptionUtil.getRuleSetDate('latest', this.props.archives)}
</p>
<div className={`${prefix}--tooltip__footer`}>
<a
href={chrome.runtime.getURL("options.html")}
target="_blank"
className={`${prefix}--link`}
>
Change rule set
</a>
</div>
</Tooltip>
{/* )} */}
<span className="reportButton">
<Button
disabled={!this.props.counts}
onClick={this.props.reportHandler}
Expand All @@ -210,10 +190,11 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
>
<ReportData16/>
</Button>
</div>
</span>
</div>
<div className="bx--col-md-3 bx--col-sm-0"> </div>

<div className="bx--col-md-3">
<div className="bx--col-md-3 bx--col-sm-2">
<ContentSwitcher data-tip data-for="focusViewTip"
// title="Focus View"
style={{height: "30px"}}
Expand Down Expand Up @@ -251,9 +232,9 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
// Content for the Assessment Tab
:
<div className="bx--row" style={{ marginTop: '10px' }}>
<div className="bx--col-sm-2" style={{ display: 'flex', alignContent: 'center' }}>
<div className="bx--col-sm-3" style={{ display: 'flex', alignContent: 'center' }}>
<Button disabled={this.props.scanning} renderIcon={Renew16} onClick={this.props.startScan.bind(this)} size="small" className="scan-button">Scan</Button>
{isLatestArchive ? "" : (
{/* {isLatestArchive ? "" : ( */}
<Tooltip>
<p id="tooltip-body">
You are using a rule set from {OptionUtil.getRuleSetDate(this.props.selectedArchive, this.props.archives)}. The latest rule set is {OptionUtil.getRuleSetDate('latest', this.props.archives)}
Expand All @@ -268,26 +249,12 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
</a>
</div>
</Tooltip>
)}
{/* )} */}
</div>
<div className="bx--col-sm-2" style={{ position: "relative" }}>
<div className="bx--col-sm-1" style={{ position: "relative" }}>
<div className="headerTools" style={{ display: "flex", justifyContent: "flex-end" }}>
<div style={{ width: 210, paddingRight: "16px" }}>
</div>
<Button
disabled={!this.props.counts}
onClick={this.props.collapseAll}
className="settingsButtons"
size="small"
hasIconOnly
kind="ghost"
tooltipAlignment="center"
tooltipPosition="top"
iconDescription="Reset"
type="button"
>
<Reset16/>
</Button>
<Button
disabled={!this.props.counts}
onClick={this.props.reportHandler}
Expand Down
2 changes: 1 addition & 1 deletion accessibility-checker-extension/src/ts/devtools/Report.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export default class Report extends React.Component<IReportProps, IReportState>
}

return <React.Fragment>
<div className="bx--grid" style={{paddingLeft:"1rem", marginTop:"6px"}}>
<div className="bx--grid" style={{paddingLeft:"1rem"}}>
<div className="bx--row">
<div className="bx--col-sm-4">
<Tabs
Expand Down
2 changes: 1 addition & 1 deletion accessibility-checker-extension/src/ts/options/OptionsApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ class OptionsApp extends React.Component<{}, OptionsAppState> {
kind="success"
lowContrast={true}
title="Success"
subtitle=" Your changes have been saved"
subtitle=" Your change has been saved and will take effect after you close and reopen the developer tools."
className=""
iconDescription="close notification"
onCloseButtonClick={() => {
Expand Down
20 changes: 20 additions & 0 deletions accessibility-checker-extension/src/ts/styles/panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,26 @@ $feature-flags: (
}
}

.reportButton {
button.bx--btn {
color: black;
background-color: white;
}

button.bx--btn.bx--btn--disabled {
color: #c6c6c6;
border-width: 0px;
background-color: white;
}

button.bx--btn.bx--btn--disabled:hover {
color: #c6c6c6;
svg {
fill: #c6c6c6;
}
}
}

.filterButtons {
button .bx--assistive-text {
top: -1.5rem;
Expand Down
10 changes: 9 additions & 1 deletion accessibility-checker-extension/src/ts/usingAC/UsingACApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,9 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
and each update has a date of deployment. If you need to replicate
an earlier test, choose the deployment date of the original test.
</p>
<p>
After changing options, close and reopen the developer tools for the change to take effect.
</p>
<p>
Follow the steps below to open the Accessibility Checker options
page:
Expand Down Expand Up @@ -402,7 +405,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</ul>
<p>
Select the <strong>'Save'</strong> button to keep the changes or
the <strong>'Reset'</strong> button to discard changes.
the <strong>'Reset'</strong> button to discard changes.
Close and reopen the developer tools for the change to take effect.
</p>

<h3 id="ruleset">5.2 Rule set</h3>
Expand Down Expand Up @@ -443,6 +447,10 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</p>
</li>
</ul>
<p>
After making a change, select the <strong>'Save'</strong> button, then
close and reopen the developer tools for the change to take effect.
</p>

<h2 id="usage">6. Usage</h2>
<p>
Expand Down

0 comments on commit 43f9928

Please sign in to comment.