diff options
18 files changed, 257 insertions, 125 deletions
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css index 29c143abc..059e4ac8e 100644 --- a/web/assets/themes/midnight-trip.css +++ b/web/assets/themes/midnight-trip.css @@ -113,9 +113,6 @@ html, body { .status .media .media-wrapper { background: var(--bg-nearly-opaque); } -.status .media .media-wrapper details .unknown-attachment .placeholder { - border: 0.2rem dashed var(--magenta); -} /* Polls */ .status .text .poll { diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css index 6e10c25df..5e010258f 100644 --- a/web/assets/themes/solarized-dark.css +++ b/web/assets/themes/solarized-dark.css @@ -127,7 +127,6 @@ html, body { } .status .media .media-wrapper details .unknown-attachment .placeholder { color: var(--base1); - border: 0.2rem dashed var(--base1); } .status .media .media-wrapper details video.plyr-video { background: transparent; diff --git a/web/assets/themes/solarized-light.css b/web/assets/themes/solarized-light.css index 852197860..2cd421be5 100644 --- a/web/assets/themes/solarized-light.css +++ b/web/assets/themes/solarized-light.css @@ -117,7 +117,6 @@ html, body { } .status .media .media-wrapper details .unknown-attachment .placeholder { color: var(--base1); - border: 0.2rem dashed var(--base1); } .status .media .media-wrapper details video.plyr-video { background: transparent; diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 77f562df4..d34dc0e66 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -80,7 +80,7 @@ $profile-bg: $gray4; $button-bg: $blue2; $button-fg: $gray1; $button-hover-bg: $blue3; -$button-focus-border: $blue3; +$button-focus-border: $button-hover-bg; $button-danger-bg: $error3; $button-danger-fg: $white1; diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css index 55ad6eba0..561ae1ed3 100644 --- a/web/source/css/_media-wrapper.css +++ b/web/source/css/_media-wrapper.css @@ -38,7 +38,7 @@ } details { - position: absolute; + position: relative; height: 100%; width: 100%; @@ -55,35 +55,6 @@ object-fit: cover; } - &[open] summary { - height: auto; - width: auto; - margin: 1rem; - padding: 0; - - .show { - display: none; - } - - .eye.button .hide { - display: inline-block; - grid-column: 1 / span 3; - grid-row: 1 / span 2; - } - - div.blurhash-container > canvas { - display: none; - } - - /* - Hide focus outline on click - to avoid ugly artifacts. - */ - &:focus { - outline: none; - } - } - summary { position: absolute; height: 100%; @@ -110,6 +81,14 @@ margin: 0; padding: 0.4rem; + /* + Make button outline really thick as we can't + know whether media has good contrast with it. + */ + &:focus-visible { + outline: 0.5rem dashed $button-focus-border; + } + .fa-fw { line-height: $fa-fw; } @@ -117,16 +96,6 @@ .hide { display: none; } - - &:focus-visible { - /* - Can't rely on media having background with - decent contrast so inset and use button-fg - instead so focus is definitely visible. - */ - outline: 0.25rem dashed $button-fg; - outline-offset: -0.25rem; - } } .show.sensitive { @@ -144,18 +113,42 @@ } } - a.photoswipe-slide { - display: inline-block; - height: 100%; + &[open] summary { + height: auto; + width: auto; + cursor: pointer; + + grid-template-columns: 1fr; + grid-template-rows: 1fr; + + .show { + display: none; + } + + .eye.button .hide { + display: inline-block; + } + + div.blurhash-container, + div.blurhash-container > canvas { + display: none; + } + } + + a.photoswipe-slide, + a.unknown-attachment { + position: absolute; width: 100%; + height: 100%; /* - Inset outline to avoid outline - being hidden by overflow: hidden. + Make link outline really thick as we can't + know whether media has good contrast with it. + Indent outline to avoid being hidden by overflow: hidden. */ &:focus-visible { - outline: $button-focus-outline; - outline-offset: -0.25rem; + outline: 0.5rem dotted $link-fg; + outline-offset: -0.5rem; } } @@ -173,8 +166,7 @@ width: 100%; height: 100%; padding: 0.8rem; - border: 0.2rem dashed $white2; - + display: flex; flex-direction: column; align-items: center; @@ -220,17 +212,13 @@ > span.eye.button { font-size: smaller; - padding: 0 0.2rem 0 0.2rem; + padding: 0.2rem; > .fa-fw { line-height: 1.4rem; } } } - - &[open] > summary { - margin: 0.5rem; - } } } @@ -248,7 +236,7 @@ > span.eye.button { font-size: small; - padding: 0 0.1rem 0 0.1rem; + padding: 0.1rem; > .fa-fw { line-height: 1.2rem; diff --git a/web/source/css/_status-media.css b/web/source/css/_status-media.css index 761b969be..a383715be 100644 --- a/web/source/css/_status-media.css +++ b/web/source/css/_status-media.css @@ -20,7 +20,6 @@ @import "./_media-wrapper.css"; .media { - grid-column: span 3; display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 10rem; diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index 6d4b1470d..b9de769bd 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -179,19 +179,24 @@ dynamicSpoiler("text-spoiler", (details) => { const summary = details.children[0]; const button = details.querySelector(".button"); - // Use button inside summary to - // toggle post body visibility. + // Use button *instead of summary* + // to toggle post visibility. + summary.tabIndex = "-1"; button.tabIndex = "0"; button.setAttribute("aria-role", "button"); - button.onclick = () => { - details.click(); + button.onclick = (e) => { + e.preventDefault(); + return details.hasAttribute("open") + ? details.removeAttribute("open") + : details.setAttribute("open", ""); }; // Let enter also trigger the button // (for those using keyboard to navigate). button.addEventListener("keydown", (e) => { if (e.key === "Enter") { - summary.click(); + e.preventDefault(); + button.click(); } }); @@ -215,15 +220,19 @@ dynamicSpoiler("media-spoiler", (details) => { summary.tabIndex = "-1"; button.tabIndex = "0"; button.setAttribute("aria-role", "button"); - button.onclick = () => { - details.click(); + button.onclick = (e) => { + e.preventDefault(); + return details.hasAttribute("open") + ? details.removeAttribute("open") + : details.setAttribute("open", ""); }; // Let enter also trigger the button // (for those using keyboard to navigate). button.addEventListener("keydown", (e) => { if (e.key === "Enter") { - summary.click(); + e.preventDefault(); + button.click(); } }); diff --git a/web/source/settings/components/blurhash.tsx b/web/source/settings/components/blurhash.tsx new file mode 100644 index 000000000..25d973d03 --- /dev/null +++ b/web/source/settings/components/blurhash.tsx @@ -0,0 +1,75 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. +*/ + +import React, { useEffect, useRef } from "react"; +import { MediaAttachment } from "../lib/types/status"; +import { decode } from "blurhash"; + +export default function BlurhashCanvas({ media }: { media: MediaAttachment }) { + const hash = media.blurhash; + const thumbHeight = media.meta.small.height; + const thumbWidth = media.meta.small.width; + const thumbAspect = media.meta.small.aspect; + + /* + It's very expensive to draw big canvases + with blurhashes, so use tiny ones, keeping + aspect ratio of the original thumbnail. + */ + var useWidth = 32; + var useHeight = 32; + switch (true) { + case thumbWidth > thumbHeight: + useHeight = Math.round(useWidth / thumbAspect); + break; + case thumbHeight > thumbWidth: + useWidth = Math.round(useHeight * thumbAspect); + break; + } + + const pixels = decode( + hash, + useWidth, + useHeight, + ); + + const canvasRef = useRef<HTMLCanvasElement>(null); + + useEffect(() => { + const ctx = canvasRef.current?.getContext("2d"); + if (!ctx) { + return; + } + + const imageData = ctx.createImageData( + useWidth, + useHeight, + ); + imageData.data.set(pixels); + ctx.putImageData(imageData, 0, 0); + }, [pixels, useHeight, useWidth]); + + return ( + <canvas + width={useWidth} + height={useHeight} + ref={canvasRef} + ></canvas> + ); +} diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx index c26b88f6a..1495e18f7 100644 --- a/web/source/settings/components/form/inputs.tsx +++ b/web/source/settings/components/form/inputs.tsx @@ -122,7 +122,8 @@ export function FileInput({ label, field, ...props }: FileInputProps) { const ref = useRef<HTMLInputElement>(null); const { onChange, infoComponent } = field; const id = nanoid(); - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); ref.current?.click(); }; @@ -133,7 +134,12 @@ export function FileInput({ label, field, ...props }: FileInputProps) { htmlFor={id} tabIndex={0} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="button" > <div className="label-label"> diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index 04c5933d5..a5b85f214 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -17,10 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, { useRef } from "react"; +import React, { useState } from "react"; import { useVerifyCredentialsQuery } from "../lib/query/login"; import { MediaAttachment, Status as StatusType } from "../lib/types/status"; import sanitize from "sanitize-html"; +import BlurhashCanvas from "./blurhash"; export function FakeStatus({ children }) { const { data: account = { @@ -122,26 +123,15 @@ function StatusBody({ status }: { status: StatusType }) { content = sanitize(status.content); } - const detailsRef = useRef<HTMLDetailsElement>(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef<HTMLElement>(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; + const [ detailsOpen, setDetailsOpen ] = useState(false); return ( <div className="status-body"> <details className="text-spoiler" - ref={detailsRef} + open={detailsOpen} > - <summary - tabIndex={-1} - ref={summaryRef} - > + <summary tabIndex={-1}> <div className="spoiler-content" lang={status.language} @@ -155,11 +145,19 @@ function StatusBody({ status }: { status: StatusType }) { className="button" role="button" tabIndex={0} - aria-label="Toggle content visibility" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + aria-label={detailsOpen ? "Hide content" : "Show content"} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > - Toggle content visibility + {detailsOpen ? "Hide content" : "Show content"} </span> </summary> <div @@ -201,27 +199,29 @@ function StatusMedia({ status }: { status: StatusType }) { } function StatusMediaEntry({ media }: { media: MediaAttachment }) { - const detailsRef = useRef<HTMLDetailsElement>(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef<HTMLElement>(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; - + const [ detailsOpen, setDetailsOpen ] = useState(false); return ( <div className="media-wrapper"> - <details className="image-spoiler media-spoiler"> - <summary tabIndex={-1} ref={summaryRef}> + <details + className="image-spoiler media-spoiler" + open={detailsOpen} + > + <summary tabIndex={-1}> <div className="show sensitive button" role="button" - tabIndex={0} + tabIndex={-1} aria-hidden="true" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > Show media </div> @@ -229,15 +229,27 @@ function StatusMediaEntry({ media }: { media: MediaAttachment }) { className="eye button" role="button" tabIndex={0} - aria-label="Toggle show media" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + aria-label={detailsOpen ? "Hide media" : "Show media"} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > <i className="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> <i className="show fa fa-fw fa-eye" aria-hidden="true"></i> </span> + <div className="blurhash-container"> + <BlurhashCanvas media={media} /> + </div> </summary> <a + className="photoswipe-slide" href={media.url} target="_blank" > diff --git a/web/source/settings/views/admin/http-header-permissions/overview.tsx b/web/source/settings/views/admin/http-header-permissions/overview.tsx index 0b708aa8c..3509e6617 100644 --- a/web/source/settings/views/admin/http-header-permissions/overview.tsx +++ b/web/source/settings/views/admin/http-header-permissions/overview.tsx @@ -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} > diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx index 36bc7ee01..baa3e7a5b 100644 --- a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx @@ -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} > diff --git a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx index 207f94d61..adc78ec6d 100644 --- a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx @@ -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} > diff --git a/web/source/settings/views/moderation/domain-permissions/form.tsx b/web/source/settings/views/moderation/domain-permissions/form.tsx index cf1447cfd..caa2cbe83 100644 --- a/web/source/settings/views/moderation/domain-permissions/form.tsx +++ b/web/source/settings/views/moderation/domain-permissions/form.tsx @@ -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" /> diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx index 808d03dcf..def7e2c6e 100644 --- a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx @@ -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} > diff --git a/web/source/settings/views/moderation/reports/search.tsx b/web/source/settings/views/moderation/reports/search.tsx index bae0a2004..9c671268b 100644 --- a/web/source/settings/views/moderation/reports/search.tsx +++ b/web/source/settings/views/moderation/reports/search.tsx @@ -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} > diff --git a/web/source/settings/views/user/applications/search.tsx b/web/source/settings/views/user/applications/search.tsx index afbb0d326..02f8ed5c6 100644 --- a/web/source/settings/views/user/applications/search.tsx +++ b/web/source/settings/views/user/applications/search.tsx @@ -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} > diff --git a/web/source/settings/views/user/interactions/search.tsx b/web/source/settings/views/user/interactions/search.tsx index 5d2da7563..2f5f41d7d 100644 --- a/web/source/settings/views/user/interactions/search.tsx +++ b/web/source/settings/views/user/interactions/search.tsx @@ -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} > |