1
0
Fork 0

fix: Update after breaking changes to Popout component

This commit is contained in:
joostdecock 2025-05-29 11:18:34 +02:00
parent b8740c2223
commit 320bcf8534
22 changed files with 26 additions and 199 deletions

View file

@ -313,7 +313,7 @@ const ShowNewApikey = ({ apikey }) => (
<CopyToClipboardButton sup content={apikey.secret} label="API key secret" />
</h6>
<pre>{apikey.secret}</pre>
<Popout warning compact>
<Popout type="warning" compact>
This is the only time you can see the key secret, make sure to copy it.
</Popout>
</div>

View file

@ -55,7 +55,7 @@ export const Email = ({ welcome = false, Link = false }) => {
return (
<div className="tw:w-full">
{changed ? (
<Popout note>
<Popout type="note">
<h3>Please confirm this change</h3>
<p>
We have sent an E-mail to your new address to confirm this change. Please click the link

View file

@ -39,7 +39,7 @@ export const Export = () => {
return (
<div className="tw:max-w-xl">
{link ? (
<Popout link>
<Popout type="link">
<h5>Your data was exported and is available for download at the following location:</h5>
<p className="tw:text-lg">
<WebLink href={link}>{link}</WebLink>

View file

@ -76,7 +76,7 @@ export const ImportSet = () => {
multiple: false,
}}
/>
<Popout tip>
<Popout type="tip">
<p>
To import a measurement set, you should have a JSON or YAML file that has the following
structure:

View file

@ -200,7 +200,7 @@ export const Mfa = ({ title = true }) => {
<LockIcon />
Set up Mult-Factor Authentication
</button>
<Popout tip>
<Popout type="tip">
<h5>Please consider enabling Two-Factor Authentication</h5>
<p>
We do not enforce a password policy, but we do recommend you enable Multi-Factor

View file

@ -111,7 +111,7 @@ export const Newsletter = ({ welcome = false, Link = false }) => {
</>
) : null}
{welcome ? null : (
<Popout tip>
<Popout type="tip">
<h5>You can unsubscribe at any time with the link below</h5>
<p>
This unsubscribe link will also be included at the bottom of every newsletter we send

View file

@ -63,7 +63,7 @@ export const Password = ({ welcome = false, Link = false }) => {
<SaveIcon /> Save
</button>
{!account.mfaEnabled && (
<Popout tip>
<Popout type="tip">
<h5>Please consider enabling Two-Factor Authentication</h5>
<p>
We do not enforce a password policy, but we do recommend you enable Two-Factor

View file

@ -146,7 +146,7 @@ export const Pattern = ({ id, Link }) => {
return (
<div className="tw:w-full">
{pattern.public ? (
<Popout note>
<Popout type="note">
<h5>This is the private view of your pattern</h5>
<p>
Everyone can access the public view since this is a public pattern.

View file

@ -748,7 +748,7 @@ const SuggestCset = ({ mset, Link }) => {
Notes
</h4>
<p>If you would like to add any notes, you can do so here.</p>
<Popout tip compact>
<Popout type="tip" compact>
This field supports markdown
</Popout>
<MarkdownInput label="Notes" current={notes} update={setNotes} valid={() => true} />

View file

@ -47,7 +47,7 @@ export const UserSetPicker = ({
if (!hasSets)
return (
<div className="tw:w-full tw:max-w-3xl tw:mx-auto">
<Popout tip>
<Popout type="tip">
<h5> You do not (yet) have any of your own measurements sets</h5>
<p>
You can store your measurements as a measurements set, after which you can generate as
@ -88,7 +88,7 @@ export const UserSetPicker = ({
)}
{lackingSets.length > 0 ? (
<div className="tw:my-4">
<Popout note>
<Popout type="note">
<h5>
Some of your measurements sets lack the measurements required to generate this pattern
</h5>
@ -174,7 +174,7 @@ export const BookmarkedSetPicker = ({
)}
{lackingSets.length > 0 && (
<div className="tw:my-4">
<Popout note>
<Popout type="note">
<h5>
Some of these measurements sets lack the measurements required to generate this
pattern

View file

@ -22,7 +22,7 @@ export const DocsView = ({ state, config, update }) => {
<div className="tw:m-auto tw:mt-8 tw:max-w-2xl tw:px-4 tw:mb-8">
<H1>Documentation</H1>
{state?.design ? (
<Popout link>
<Popout type="link">
<H5>Design Documentation</H5>
<p className="tw:text-lg">
You can find documentation for the {capitalize(state.design)} design at:
@ -36,7 +36,7 @@ export const DocsView = ({ state, config, update }) => {
</p>
</Popout>
) : null}
<Popout link>
<Popout type="link">
<H5>Understanding the FreeSewing Pattern Editor</H5>
<p className="tw:text-lg">
Please refer to the pattern editor documentation at:
@ -49,7 +49,7 @@ export const DocsView = ({ state, config, update }) => {
</b>
</p>
</Popout>
<Popout tip>
<Popout type="tip">
<H5>
Looking for info on how it <em>really</em> works?
</H5>

View file

@ -14,7 +14,7 @@ export const DraftErrorHandler = ({ failure, errors }) => {
}
return (
<Popout error>
<Popout type="error">
<p>
Sorry, there were problems drafting your pattern with the given measurements and options.
</p>

View file

@ -183,7 +183,7 @@ export const MeasurementsView = ({
<div className="tw:max-w-7xl tw:mt-8 tw:mx-auto tw:px-4 tw:mb-4">
<H1>Measurements</H1>
{missingMeasurements && missingMeasurements.length > 0 ? (
<Popout note dense noP>
<Popout type="note" dense>
<h3>
To generate this pattern, we need {missingMeasurements.length} additional measurement
{missingMeasurements.length === 1 ? '' : 's'}:
@ -198,7 +198,7 @@ export const MeasurementsView = ({
</ol>
</Popout>
) : (
<Popout tip dense noP>
<Popout type="tip" dense>
<H5>We have all required measurements to draft this pattern</H5>
<div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-2 tw:mt-2">
<button

View file

@ -77,17 +77,9 @@ export const SaveView = ({ config, state, update }) => {
}
const result = await backend.updatePattern(saveAs.pattern, patternData)
if (result.success) {
//setLoadingStatus([
// true,
// <>
// {t('status:patternSaved')} <small>[#{saveAs.pattern}]</small>
// </>,
// true,
// true,
//])
setSavedId(saveAs.pattern)
update.notify({ color: 'success', msg: 'boom' }, saveAs.pattern)
} //else setLoadingStatus([true, 'backendError', true, false])
}
}
return (
@ -98,7 +90,7 @@ export const SaveView = ({ config, state, update }) => {
<>
<h2>Save Pattern</h2>
{savedId && (
<Popout link>
<Popout type="link">
<h5>Pattern Saved</h5>
See: <Link href={`/account/patterns/${savedId}`}>/account/patterns/{savedId}</Link>
</Popout>

View file

@ -27,7 +27,7 @@ export const UndosView = ({ Design, update, state, config }) => {
<H1>Undo History</H1>
<p className="tw:mb-4">Time-travel through your recent pattern changes.</p>
{steps.length < 1 ? (
<Popout note>
<Popout type="note">
<h4>Your undo history is currently empty</h4>
<p>When you make changes to your pattern, they will show up here.</p>
<p>For example, you can click the button below to change the pattern rotation:</p>

View file

@ -28,7 +28,7 @@ export const ViewPicker = ({ Design, update, state }) => {
.map((view) => (
<MainCard key={view} {...{ view, update, Design }} />
))}
<Popout note>
<Popout type="note">
<div className="tw:text-left">
<H5>pe:measurementsFreeViewsOnly.t:</H5>
<p>pe:measurementsFreeViewsOnly.d</p>

View file

@ -142,7 +142,7 @@ const ConsentLacking = ({ banner, refresh }) => {
<Wrap>
<div className="tw:text-left">
{banner}
<Popout warning>
<Popout type="warning">
<h2>Your account lacks consent</h2>
<p>
This should have been taken care of when onboarding your account, but due to a earlier

View file

@ -400,7 +400,7 @@ export const SignInConfirmation = ({ onSuccess = false }) => {
return error === 'signInFailed' ? (
<>
<MfaForm {...{ mfaCode, setMfaCode }} onSubmit={getConfirmation} />
<Popout warning title="Sign In Failed">
<Popout type="warning" title="Sign In Failed">
<p>Your one-time token is either invalid of expired.</p>
</Popout>
</>

View file

@ -7,7 +7,7 @@ import { Popout } from '@freesewing/react/components/Popout'
function DesignExamples({ design }) {
if (!design || !examples[design] || examples[design].length < 1)
return (
<Popout note>
<Popout type="note">
Unfortunately, we do not have examples for this design yet. Hopefully, someone will post one
soon.
</Popout>

View file

@ -116,7 +116,7 @@ const InvalidUrlWarning = () => (
</p>
<details>
<summary className={linkClasses}>What does that mean?</summary>
<Popout tip title="Why do I get this error about OIDC flow?">
<Popout type="tip" title="Why do I get this error about OIDC flow?">
<p className="tw:mb-2">
Your request lacks a valid interaction ID for the OpenID Connect (OIDC) flow. Such an
interaction ID that is automatically generated by he FreeSewing backend prior to

View file

@ -1,153 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1000.0001"
height="570"
viewBox="0 0 264.58335 150.8125"
version="1.1"
id="svg562"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="collarease.svg">
<defs
id="defs556">
<marker
style="overflow:visible"
id="Arrow1MstartQR"
refX="0"
refY="0"
orient="auto">
<path
inkscape:connector-curvature="0"
transform="matrix(0.4,0,0,0.4,4,0)"
style="fill:#ff5b77;fill-rule:evenodd;stroke:#ff5b77;stroke-width:1.00000003pt;marker-start:none"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path5084" />
</marker>
<marker
orient="auto"
refY="0"
refX="0"
id="Arrow1Mend3"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path5087"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
style="fill:#ff5b77;fill-rule:evenodd;stroke:#ff5b77;stroke-width:1.00000003pt;marker-start:none"
transform="matrix(-0.4,0,0,-0.4,-4,0)" />
</marker>
<marker
style="overflow:visible"
id="marker53"
refX="0"
refY="0"
orient="auto">
<path
inkscape:connector-curvature="0"
transform="matrix(0.4,0,0,0.4,4,0)"
style="fill:#ff5b77;fill-rule:evenodd;stroke:#ff5b77;stroke-width:1.00000003pt;marker-start:none"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path51" />
</marker>
<marker
orient="auto"
refY="0"
refX="0"
id="marker57"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path55"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
style="fill:#ff5b77;fill-rule:evenodd;stroke:#ff5b77;stroke-width:1.00000003pt;marker-start:none"
transform="matrix(-0.4,0,0,-0.4,-4,0)" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.8101934"
inkscape:cx="643.91418"
inkscape:cy="184.47717"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1043"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:snap-global="false"
showguides="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata559">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-47.625)">
<path
sodipodi:nodetypes="cccccccc"
style="fill:#808080;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="M 54.1423,55.951664 41.911976,57.89133 41.479965,72.528929 88.376337,70.286566 90.362996,57.874273 78.243784,55.951664 c -2.227828,2.394111 -6.970559,2.235652 -12.047084,2.235652 -5.836933,0.03682 -9.857971,0.124718 -12.0544,-2.235652 z"
id="inside"
inkscape:connector-curvature="0" />
<path
id="primary1"
style="fill:#404040;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 54.365069,55.951664 -24.994326,3.963971 c 0.172338,1.737552 3.199375,16.991043 3.199375,24.085049 0.437121,18.491896 -1.180108,20.477076 -2.081846,24.079736 2.059602,15.42627 -0.19137,23.36576 -0.19859,37.43095 0,15.45988 -2.473168,37.24966 -2.818075,41.08324 l 77.888383,0.1366 c -0.34465,-3.83357 -1.77452,-24.63877 -1.77452,-40.09865 0,-21.75303 -1.51285,-35.46062 -1.51285,-40.89932 -2.227137,-3.85782 -3.165523,-15.233969 -2.405677,-24.110942 0,-7.094007 3.614267,-19.969111 3.786587,-21.706663 L 78.466544,55.951664 C 76.238715,58.345775 79.8041,67.655702 66.41946,67.700859 53.034819,67.746011 56.561498,58.312034 54.365069,55.951664 Z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccsccccsc" />
<path
id="primary2"
style="fill:#404040;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 29.976678,59.796959 c 4.038677,5.842073 7.195097,34.945535 2.259218,43.712951 -3.300515,29.05614 -11.777082,63.63539 -14.767163,87.13685 -7.17153,0.38249 -9.8107924,0.34584 -14.4503455,-1.16564 C 3.325709,152.0588 11.092508,115.43576 19.69795,80.932692 22.337969,70.842832 26.664555,59.796959 29.976678,59.796959 Z m 73.645182,0 c -4.038678,5.842073 -7.195093,34.945535 -2.25922,43.712951 3.30052,29.05614 11.77708,63.63539 14.76716,87.13685 7.17153,0.38249 9.8108,0.34584 14.45035,-1.16564 -0.30732,-37.42232 -8.07412,-74.04536 -16.67956,-108.548428 -2.64002,-10.08986 -6.96661,-21.135733 -10.27873,-21.135733 z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccc" />
<path
inkscape:connector-curvature="0"
id="path973"
d="m 182.5973,56.623458 -9.28477,1.267872 -0.43201,14.637599 46.89637,-2.242363 1.98666,-12.412293 -8.70857,-1.560874 c -2.22783,2.394111 -10.3812,1.873917 -15.45772,1.873917 -5.83694,0.03682 -12.80353,0.796512 -14.99996,-1.563858 z"
style="fill:#808080;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
sodipodi:nodetypes="cccccccc" />
<path
sodipodi:nodetypes="cccccccsccccsc"
inkscape:connector-curvature="0"
d="m 182.35499,56.623458 -21.58369,3.292177 c 0.17234,1.737552 3.19938,16.991043 3.19938,24.085049 0.43712,18.491896 -1.18011,20.477076 -2.08185,24.079736 2.0596,15.42627 -0.19137,23.36576 -0.19859,37.43095 0,15.45988 -2.47317,37.24966 -2.81808,41.08324 l 77.88839,0.1366 c -0.34465,-3.83357 -1.77452,-24.63877 -1.77452,-40.09865 0,-21.75303 -1.51285,-35.46062 -1.51285,-40.89932 -2.22714,-3.85782 -3.16553,-15.233969 -2.40568,-24.110942 0,-7.094007 3.61427,-19.969111 3.78659,-21.706663 l -22.04143,-3.600996 c -2.22783,2.394111 -1.608,12.997189 -14.99264,13.042346 -13.38464,0.04515 -13.2686,-10.373157 -15.46503,-12.733527 z"
style="fill:#404040;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
id="path975" />
<path
sodipodi:nodetypes="cccccccccccc"
inkscape:connector-curvature="0"
d="m 161.37724,59.796959 c 4.03867,5.842073 7.19509,34.945535 2.25921,43.712951 -3.30051,29.05614 -11.77708,63.63539 -14.76716,87.13685 -7.17153,0.38249 -9.81079,0.34584 -14.45034,-1.16564 0.30732,-37.42232 8.07412,-74.04536 16.67956,-108.548428 2.64002,-10.08986 6.9666,-21.135733 10.27873,-21.135733 z m 73.64518,0 c -4.03868,5.842073 -7.1951,34.945535 -2.25922,43.712951 3.30052,29.05614 11.77708,63.63539 14.76716,87.13685 7.17153,0.38249 9.8108,0.34584 14.45035,-1.16564 -0.30732,-37.42232 -8.07412,-74.04536 -16.67956,-108.548428 -2.64002,-10.08986 -6.96661,-21.135733 -10.27873,-21.135733 z"
style="fill:#404040;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
id="path977" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 7.8 KiB

View file

@ -1,12 +0,0 @@
---
title: 'Collar ease'
---
![Collar ease](collarease.svg)
Controls the amount of ease at your collar/neck and the size
of the neck opening..
Hugo uses the neck circumference measurement rather than head
circumference to produce the neck opening size when generating patterns.
Use this option to adjust the neck opening size if needed.