Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-15 11:04:49 +00:00
Code Issues Releases Activity

firmware/bootloaderInstructions: use ol count attribute

Browse Source 
Using styles for changing list starting numbers doesn't have good
cross-browser support. We can set the start count using the start
attribute of the ol element instead.

Issue: https://github.com/pybricks/support/issues/868
This commit is contained in:
David Lechner
2022-12-21 16:28:17 -06:00
committed by David Lechner
parent 8c801adda5
commit 808e6c0e85
2 changed files with 73 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/firmware/bootloaderInstructions/BootloaderInstructions.tsx
+73 -48
View File
@@ -94,6 +94,13 @@ const recoveryMetadataFileMap: ReadonlyMap<Hub, string> = new Map([
[Hub.Prime, primeHubVtt],
[Hub.Technic, technicHubRecoveryVtt],
]);
function countValidChildren(children: React.ReactNode) {
return React.Children.toArray(children).filter((child) =>
React.isValidElement(child),
).length;
}
/**
* Provides customized instructions on how to enter bootloader mode based
* on the hub type.
@@ -150,40 +157,9 @@ const BootloaderInstructions: React.VoidFunctionComponent<
};
}, [setActiveStep]);
return (
<>
<video
controls
controlsList="nodownload nofullscreen"
muted
disablePictureInPicture
className="pb-bootloader-video"
>
<source
src={
recovery
? recoveryVideoFileMap.get(hubType)
: videoFileMap.get(hubType)
}
type="video/mp4"
/>
<track
kind="metadata"
src={
recovery
? recoveryMetadataFileMap.get(hubType)
: metadataFileMap.get(hubType)
}
ref={metadataTrackRef}
/>
</video>
<div className="pb-spacer" />
<p>
<strong>{i18n.translate('instructionGroup.prepare.title')}</strong>
</p>
<ol className="firstList">
const prepareSteps = useMemo(
() => (
<>
<li>
{i18n.translate(
hubHasUSB(hubType)
@@ -193,22 +169,21 @@ const BootloaderInstructions: React.VoidFunctionComponent<
</li>
<li>{i18n.translate('instructionGroup.prepare.turnOff')}</li>
{/* For non-usb recovery, show step about official app */}
{recovery && !hubHasUSB(hubType) ? (
{recovery && !hubHasUSB(hubType) && (
<li>
{i18n.translate('instructionGroup.prepare.app', {
lego: legoRegisteredTrademark,
})}
</li>
) : (
<></>
)}
</ol>
<p>
<strong>
{i18n.translate('instructionGroup.bootloaderMode.title')}
</strong>
</p>
<ol className="continuedList">
</>
),
[i18n, recovery, hubType],
);
const bootloaderModeSteps = useMemo(
() => (
<>
{/* City hub has power issues and requires disconnecting motors/sensors */}
{hubType === Hub.City && (
<li
@@ -301,15 +276,67 @@ const BootloaderInstructions: React.VoidFunctionComponent<
})}
</li>
)}
</>
),
[recovery, activeStep, i18n, button, hubType, light, lightPattern],
);
return (
<>
<video
controls
controlsList="nodownload nofullscreen"
muted
disablePictureInPicture
className="pb-bootloader-video"
>
<source
src={
recovery
? recoveryVideoFileMap.get(hubType)
: videoFileMap.get(hubType)
}
type="video/mp4"
/>
<track
kind="metadata"
src={
recovery
? recoveryMetadataFileMap.get(hubType)
: metadataFileMap.get(hubType)
}
ref={metadataTrackRef}
/>
</video>
<div className="pb-spacer" />
<p>
<strong>{i18n.translate('instructionGroup.prepare.title')}</strong>
</p>
<ol>{prepareSteps}</ol>
<p>
<strong>
{i18n.translate('instructionGroup.bootloaderMode.title')}
</strong>
</p>
<ol start={countValidChildren(prepareSteps.props.children) + 1}>
{bootloaderModeSteps}
</ol>
{hubHasUSB(hubType) || (!hubHasUSB(hubType) && !recovery) ? (
{(hubHasUSB(hubType) || (!hubHasUSB(hubType) && !recovery)) && (
<>
<p>
<strong>
{i18n.translate('instructionGroup.connect.title')}
</strong>
</p>
<ol className="continuedList">
<ol
start={
countValidChildren(prepareSteps.props.children) +
countValidChildren(bootloaderModeSteps.props.children) +
1
}
>
<li>
{i18n.translate(
'instructionGroup.connect.clickConnectAndFlash',
@@ -336,8 +363,6 @@ const BootloaderInstructions: React.VoidFunctionComponent<
</li>
</ol>
</>
) : (
<></>
)}
{hubHasUSB(hubType) && isLinux() && (
src/firmware/bootloaderInstructions/bootloaderInstructions.scss
-16
View File
@@ -11,19 +11,3 @@
display: block;
margin: 0 auto;
}
// Only first ol should reset.
ol.firstList {
counter-reset: listCounter 0;
}
// Increment on each li, no matter which list.
ol.firstList li,
ol.continuedList li {
counter-increment: listCounter;
// Use counter value to set marker.
&::marker {
content: counter(listCounter, decimal) '. ';
}
}