1
0
Fork 0

[react] fix: pattern export issues (#218)

Fix the export functionality in the pattern editor:

* Fix the export button in the header bar
* Fix the copy to clipboard buttons displaying no text and having a weird styling.

Before:
![before](/attachments/b2c542a8-06ee-46fa-9058-36b738e285cc)
After:
![after](/attachments/754993a9-04ee-44e9-ae78-7529a1298a54)

Fixes #215

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/218
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
Co-committed-by: Jonathan Haas <haasjona@gmail.com>
This commit is contained in:
Jonathan Haas 2025-04-06 14:47:22 +00:00 committed by Joost De Cock
parent fcbb8ecc0b
commit c34bf694e1
2 changed files with 4 additions and 6 deletions

View file

@ -21,18 +21,15 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
setTimeout(() => setCopied(false), 1000) setTimeout(() => setCopied(false), 1000)
} }
export const CopyToClipboardButton = ({ content, label = false, sup = false }) => { export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
const [copied, setCopied] = useState(false) const [copied, setCopied] = useState(false)
const { setLoadingStatus } = useContext(LoadingStatusContext) const { setLoadingStatus } = useContext(LoadingStatusContext)
const text =
typeof content === 'string' ? content : strip(ReactDOMServer.renderToStaticMarkup(content))
const style = sup ? 'tw-w-4 tw-h-4 tw--mt-4' : 'tw-w-5 tw-h-5' const style = sup ? 'tw-w-4 tw-h-4 tw--mt-4' : 'tw-w-5 tw-h-5'
return ( return (
<button <button
className={copied ? 'tw-text-success' : ''} className={(copied ? 'tw-text-success ' : '') + 'tw-daisy-btn tw-w-full lg:tw-w-auto'}
onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)} onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
> >
{copied ? ( {copied ? (
@ -43,6 +40,7 @@ export const CopyToClipboardButton = ({ content, label = false, sup = false }) =
) : ( ) : (
<CopyIcon className={`${style} tw-text-inherit`} /> <CopyIcon className={`${style} tw-text-inherit`} />
)} )}
{children}
</button> </button>
) )
} }

View file

@ -480,7 +480,7 @@ export const HeaderMenuSaveIcons = (props) => {
<Button updateHandler={() => update.view('save')} tooltip="Save pattern as..."> <Button updateHandler={() => update.view('save')} tooltip="Save pattern as...">
<SaveAsIcon className={`${size} tw-text-secondary`} /> <SaveAsIcon className={`${size} tw-text-secondary`} />
</Button> </Button>
<Button updateHandler={update.clearPattern} tooltip="Export pattern"> <Button updateHandler={() => update.view('export')} tooltip="Export pattern">
<ExportIcon className={`${size} tw-text-secondary`} /> <ExportIcon className={`${size} tw-text-secondary`} />
</Button> </Button>
</div> </div>