geckon01/decky-loader
1
0
Fork 0
mirror of https://github.com/SteamDeckHomebrew/decky-loader.git synced 2026-06-11 08:03:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

Removed FocusRing from Decky Changelog Modal and use Focusable instead which fixes: #685 (#779)

Browse Source 
* fix(Updater): Remove `FocusRing` component and use `Focusable` instead

* feat(Markdown): Add Link `class` to a tag for a mentain a Steam UI colors palette
This commit is contained in:
ynhhoJ
2025-06-29 21:37:47 +03:00
committed by GitHub
parent 414493eed2
commit cbea1518ed
2 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/Markdown.tsx
View File

@@ -1,4 +1,4 @@
import { Focusable, Navigation } from '@decky/ui';
import { Focusable, Navigation, findClass, findClassByName } from '@decky/ui';
import { FunctionComponent, useRef } from 'react';
import ReactMarkdown, { Options as ReactMarkdownOptions } from 'react-markdown';
import remarkGfm from 'remark-gfm';
@@ -8,6 +8,9 @@ interface MarkdownProps extends ReactMarkdownOptions {
}
const Markdown: FunctionComponent<MarkdownProps> = (props) => {
const eventDetailsBodyClassName = findClassByName('EventDetailsBody') || undefined;
const eventLinkClassName = findClass('43088', 'Link');
return (
<Focusable>
<ReactMarkdown
@@ -25,8 +28,10 @@ const Markdown: FunctionComponent<MarkdownProps> = (props) => {
Navigation.NavigateToExternalWeb(aRef.current!.href);
}}
style={{ display: 'inline' }}
focusClassName="steam-focus"
className={eventDetailsBodyClassName}
>
<a ref={aRef} {...nodeProps.node.properties}>
<a ref={aRef} {...nodeProps.node.properties} className={eventLinkClassName}>
{nodeProps.children}
</a>
</Focusable>

48
frontend/src/components/settings/pages/general/Updater.tsx
View File

@@ -1,14 +1,4 @@
import {
Carousel,
DialogButton,
Field,
FocusRing,
Focusable,
ProgressBarWithInfo,
Spinner,
findSP,
showModal,
} from '@decky/ui';
import { Carousel, DialogButton, Field, Focusable, ProgressBarWithInfo, Spinner, findSP, showModal } from '@decky/ui';
import { Suspense, lazy, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaExclamation } from 'react-icons/fa';
@@ -23,9 +13,31 @@ const MarkdownRenderer = lazy(() => import('../../../Markdown'));
function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | null; closeModal?: () => {} }) {
const SP = findSP();
const { t } = useTranslation();
return (
<Focusable onCancelButton={closeModal}>
<FocusRing>
<>
<style>
{`
.steam-focus {
outline-offset: 3px;
outline: 2px solid rgba(255, 255, 255, 0.6);
animation: pulseOutline 1.2s infinite ease-in-out;
}
@keyframes pulseOutline {
0% {
outline: 2px solid rgba(255, 255, 255, 0.6);
}
50% {
outline: 2px solid rgba(255, 255, 255, 1);
}
100% {
outline: 2px solid rgba(255, 255, 255, 0.6);
}
}`}
</style>
<Focusable onCancelButton={closeModal}>
<Carousel
fnItemRenderer={(id: number) => (
<Focusable
@@ -35,7 +47,9 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n
overflowY: 'scroll',
display: 'flex',
justifyContent: 'center',
margin: '40px',
margin: '30px',
padding: '0 15px',
backgroundColor: 'rgba(37, 40, 46, 0.5)',
}}
>
<div>
@@ -57,11 +71,11 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n
nItemMarginX={0}
initialColumn={0}
autoFocus={true}
fnGetColumnWidth={() => SP.innerWidth}
fnGetColumnWidth={() => SP.innerWidth - SP.innerWidth * (10 / 100)}
name={t('Updater.decky_updates') as string}
/>
</FocusRing>
</Focusable>
</Focusable>
</>
);
}