mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-11-13 06:37:29 -06:00
[bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts (#4010)
* fix photoswipe layout issues (chrome) * aaaaaaaaaaaaaa * wwwwwwwwwwww
This commit is contained in:
parent
f5ce219844
commit
b510f3c539
18 changed files with 257 additions and 125 deletions
|
|
@ -65,7 +65,8 @@ export default function HeaderPermsOverview() {
|
|||
} = useGetHeaderAllowsQuery(NoArg, { skip: permType !== "allow" });
|
||||
|
||||
const itemToEntry = (perm: HeaderPermission) => {
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on a header perm,
|
||||
// go to the detail view for perm.
|
||||
setLocation(`/${permType}s/${perm.id}`, {
|
||||
|
|
@ -81,7 +82,12 @@ export default function HeaderPermsOverview() {
|
|||
key={perm.id}
|
||||
className="entry pseudolink"
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -211,7 +211,8 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
|
|||
|
||||
const title = `${permTypeUpper} ${domain}`;
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on a draft, direct
|
||||
// to the detail view for that draft.
|
||||
setLocation(linkTo, {
|
||||
|
|
@ -228,7 +229,12 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
|
|||
aria-label={title}
|
||||
title={title}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,8 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
|
|||
return <ErrorC error={new Error("id was undefined")} />;
|
||||
}
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on a exclude, direct
|
||||
// to the detail view for that exclude.
|
||||
setLocation(linkTo, {
|
||||
|
|
@ -203,7 +204,12 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
|
|||
aria-label={`Exclude ${domain}`}
|
||||
title={`Exclude ${domain}`}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
|
|||
}, [exportResult]);
|
||||
|
||||
const importFileRef = useRef<HTMLInputElement>(null);
|
||||
const importFileOnClick = () => {
|
||||
const importFileOnClick = (e) => {
|
||||
e.preventDefault();
|
||||
importFileRef.current?.click();
|
||||
};
|
||||
|
||||
|
|
@ -110,7 +111,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
|
|||
className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`}
|
||||
tabIndex={0}
|
||||
onClick={importFileOnClick}
|
||||
onKeyDown={e => e.key === "Enter" && importFileOnClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
importFileOnClick(e);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
>
|
||||
<i className="fa fa-fw " aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
|
|||
successfullyFetchedAtStr = new Date(successfullyFetchedAt).toDateString();
|
||||
}
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on a subscription, direct
|
||||
// to the detail view for that subscription.
|
||||
setLocation(linkTo, {
|
||||
|
|
@ -126,7 +127,12 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
|
|||
aria-label={ariaLabel}
|
||||
title={ariaLabel}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -184,7 +184,8 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
|
|||
const created = new Date(report.created_at).toLocaleString();
|
||||
const title = `${status}. @${target.account.acct} was reported by @${from.account.acct} on ${created}. Reason: "${comment}"`;
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on a report, direct
|
||||
// to the detail view for that report.
|
||||
setLocation(linkTo, {
|
||||
|
|
@ -201,7 +202,12 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
|
|||
aria-label={title}
|
||||
title={title}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -139,7 +139,8 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
|
|||
const created = useCreated(app);
|
||||
const redirectURIs = useRedirectURIs(app);
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on an app, direct
|
||||
// to the detail view for that app.
|
||||
setLocation(linkTo, {
|
||||
|
|
@ -156,7 +157,12 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
|
|||
aria-label={`${app.name}`}
|
||||
title={`${app.name}`}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -174,7 +174,8 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
|
|||
const ourContent = useContent(req.status);
|
||||
const theirContent = useContent(req.reply);
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = (e) => {
|
||||
e.preventDefault();
|
||||
// When clicking on a request, direct
|
||||
// to the detail view for that request.
|
||||
setLocation(linkTo, {
|
||||
|
|
@ -191,7 +192,12 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
|
|||
aria-label={label}
|
||||
title={label}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === "Enter" && onClick()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue