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 . +*/ + +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(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 ( + + ); +} 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(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" >
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 . */ -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(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; + const [ detailsOpen, setDetailsOpen ] = useState(false); return (
- +
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"}
(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; - + const [ detailsOpen, setDetailsOpen ] = useState(false); return (
-
- +
+ @@ -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); + } + }} > +
+ +
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 ; } - 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(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" >