Skip to content

Commit

Permalink
up
Browse files Browse the repository at this point in the history
  • Loading branch information
@panaC
panaC committed Oct 3, 2024
1 parent 7eae5aa commit ad070e0
Show file tree
Hide file tree
Showing 8 changed files with 345 additions and 14 deletions.
24 changes: 23 additions & 1 deletion src/renderer/common/components/dialog/publicationInfos/tag/tagButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,28 @@ export const TagButton: React.FC<React.PropsWithChildren<IProps>> = (props) => {
search: `?focus=tags&value=${encodeURIComponent_RFC3986(tag as string)}`,
}}
state={{ displayType: "list" }}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
{tag as string}
</Link>
Expand Down Expand Up @@ -115,7 +137,7 @@ export const TagReaderButton: React.FC<React.PropsWithChildren<IBaseProps>> = (p
} else {
tagString = tag.name;
}
/*
/*
if (pubId && onClickDeleteCb && __) {
button = (
<>
Expand Down
46 changes: 45 additions & 1 deletion src/renderer/library/components/catalog/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class Header extends React.Component<IProps, undefined> {
return (
<SecondaryHeader>
<div>
<p style={{fontWeight: "600", margin: "0 0 5px"}}>{__("header.viewMode")}</p>
<p style={{ fontWeight: "600", margin: "0 0 5px" }}>{__("header.viewMode")}</p>
<div style={{ display: "flex", gap: "10px" }}>
<Link
to={this.props.location}
Expand All @@ -66,6 +66,28 @@ class Header extends React.Component<IProps, undefined> {
title={__("header.gridTitle")}
aria-pressed={displayType === DisplayType.Grid}
role={"button"}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
{(displayType === DisplayType.Grid) ?
<SVG svg={CheckIcon} ariaHidden /> :
Expand All @@ -84,6 +106,28 @@ class Header extends React.Component<IProps, undefined> {
title={__("header.listTitle")}
aria-pressed={displayType === DisplayType.List}
role={"button"}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
{(displayType === DisplayType.List) ?
<SVG svg={CheckIcon} ariaHidden /> :
Expand Down
24 changes: 23 additions & 1 deletion src/renderer/library/components/layout/BreadCrumb.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,28 @@ const LinkItemBreadcrumb = ({item: {name, path}, isTheFirstOne}: {item: IBreadCr
state={{ displayType: (location.state && (location.state as IRouterLocationState).displayType) ? (location.state as IRouterLocationState).displayType : DisplayType.Grid }}
title={name}
className={stylesButtons.button_transparency}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
{isTheFirstOne ? <SVG ariaHidden={true} svg={BreacrmbsNavIcon} /> : <></>}
<p >{name}</p>
Expand Down Expand Up @@ -202,7 +224,7 @@ const BreadCrumb = () => {
</li>
}
{
// displayFullBreadcrumb &&
// displayFullBreadcrumb &&
// (<li key={between.length+2} id="breadcrumb-li-plus">
// <button onClick={() => {
// setDisplayFullBreadcrumb(false);
Expand Down
24 changes: 23 additions & 1 deletion src/renderer/library/components/layout/LibraryHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,12 +158,34 @@ class Header extends React.Component<IProps, undefined> {
<li className={classNames(...styleClasses, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")} key={index}>
<Link
to={nextLocation}
state = {{displayType: (nextLocation.state && (nextLocation.state as IRouterLocationState).displayType) ? (nextLocation.state as IRouterLocationState).displayType : DisplayType.Grid}}
state={{ displayType: (nextLocation.state && (nextLocation.state as IRouterLocationState).displayType) ? (nextLocation.state as IRouterLocationState).displayType : DisplayType.Grid }}
replace={true}
aria-pressed={active}
role={"button"}
className={classNames(active ? stylesButtons.button_nav_primary : "", !active ? "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE" : "")}
title={item.label}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
<SVG ariaHidden svg={item.svg} />
<h3>{item.label}</h3>
Expand Down
102 changes: 95 additions & 7 deletions src/renderer/library/components/layout/LibraryLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,9 +227,31 @@ class LibraryLayout extends React.Component<IProps, undefined> {
...this.props.location,
pathname: route,
}}
style={{width: "20px"}}
style={{ width: "20px"}}
state = {{displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid}}
className={stylesButtons.button_nav_tertiary}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
<SVG svg={AvatarIcon} title={__("opds.shelf")} />
</Link>
Expand Down Expand Up @@ -267,9 +289,31 @@ class LibraryLayout extends React.Component<IProps, undefined> {
...this.props.location,
pathname: route,
}}
style={{width: "20px"}}
state = {{displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid}}
style={{ width: "20px" }}
state={{ displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid }}
className={stylesButtons.button_nav_tertiary}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
<SVG svg={HomeIcon} title={__("header.homeTitle")} />
</Link>
Expand Down Expand Up @@ -304,15 +348,37 @@ class LibraryLayout extends React.Component<IProps, undefined> {
);

refreshComponet = (
<button className={stylesButtons.button_nav_tertiary} style={{width: "20px", height: "20px"}}>
<button className={stylesButtons.button_nav_tertiary} style={{ width: "20px", height: "20px" }}>
<Link
to={{
...this.props.location,
pathname: route,
}}
style={{height: "unset"}}
state = {{displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid}}
style={{ height: "unset" }}
state={{ displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid }}
className={classNames(stylesButtons.button_refresh, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}
>
<SVG svg={RefreshIcon} title={__("header.refreshTitle")} />
</Link>
Expand All @@ -325,8 +391,30 @@ class LibraryLayout extends React.Component<IProps, undefined> {
to={{
...this.props.location,
}}
state = {{displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid}}
state={{ displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid }}
className={classNames(stylesButtons.button_refresh, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
<SVG svg={RefreshIcon} title={__("header.refreshTitle")} />
</Link>
Expand Down
24 changes: 23 additions & 1 deletion src/renderer/library/components/opds/Entry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,29 @@ class Entry extends React.Component<IProps, undefined> {
...this.props.location,
pathname: route,
}}
state = {{displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid}}
state={{ displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid }}
onClick={(e) => {
if (e.altKey || e.shiftKey || e.ctrlKey) {
e.preventDefault();
e.currentTarget.click();
}
}}
onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " ") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
>
<span>
<span title={entry.subtitle ? entry.subtitle : entry.title}>{entry.title}</span>
Expand Down
Loading

0 comments on commit ad070e0

Please sign in to comment.