feat: Upgrade to TailwindCSS 4 & DaisyUI 5 (#263)
Also fixes #251 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263 Co-authored-by: joostdecock <joost@joost.at> Co-committed-by: joostdecock <joost@joost.at>
This commit is contained in:
joostdecock
Joost De Cock
parent
a2863e5158
commit
44e04a4cef
164 changed files with 2361 additions and 2658 deletions
|
|
@ -69,7 +69,7 @@ export const PathXray = ({
|
|||
}}
|
||||
strokeWidth="12"
|
||||
strokeDasharray="20 10"
|
||||
className="hover:tw-cursor-pointer tw-opacity-0 hover:tw-opacity-30"
|
||||
className="tw:hover:cursor-pointer tw:opacity-0 tw:hover:opacity-30"
|
||||
onClick={() =>
|
||||
info?.set ? info.set(<PathXrayInfo {...{ path, pathName, part, stackName }} />) : null
|
||||
}
|
||||
|
|
@ -98,14 +98,14 @@ const PathXrayInfo = ({ path, pathName, stackName, part }) => {
|
|||
const rounder = rounded ? round : (val) => val
|
||||
|
||||
return (
|
||||
<div className="tw-max-w-2xl">
|
||||
<div className="tw:max-w-2xl">
|
||||
<H5>
|
||||
Path <code>{pathName}</code> of <code>{stackName}</code>
|
||||
</H5>
|
||||
{Object.keys(path.attributes.list).length > 0 ? (
|
||||
<>
|
||||
<H6>Attributes</H6>
|
||||
<div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
{Object.entries(path.attributes.list).map(([k, val]) => (
|
||||
<KeyVal color="secondary" key={k} k={k} val={val} />
|
||||
))}
|
||||
|
|
@ -118,14 +118,14 @@ const PathXrayInfo = ({ path, pathName, stackName, part }) => {
|
|||
</>
|
||||
) : null}
|
||||
<H6>Dimensions</H6>
|
||||
<table className="tw-table tw-table-auto tw-font-fixed tw-w-full">
|
||||
<table className="tw:table tw:table-auto tw:font-fixed tw:w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th className="tw-flex tw-flex-row tw-flex-wrap tw-items-center tw-justify-between">
|
||||
<th className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:justify-between">
|
||||
<span>Coordinates</span>
|
||||
<button
|
||||
className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-sm tw-daisy-btn-outline"
|
||||
className="tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-sm tw:daisy-btn-outline"
|
||||
onClick={() => setRounded(!rounded)}
|
||||
>
|
||||
{rounded ? 'Show raw' : 'Show rounded'}
|
||||
|
|
@ -135,33 +135,33 @@ const PathXrayInfo = ({ path, pathName, stackName, part }) => {
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="tw-text-right tw-font-bold tw-w-16">TopLeft</td>
|
||||
<td className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<td className="tw:text-right tw:font-bold tw:w-16">TopLeft</td>
|
||||
<td className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
<KeyVal k="x" val={rounder(path.topLeft.x)} />
|
||||
<KeyVal k="y" val={rounder(path.topLeft.y)} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="tw-text-right tw-font-bold tw-w-16">BottomRight</td>
|
||||
<td className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<td className="tw:text-right tw:font-bold tw:w-16">BottomRight</td>
|
||||
<td className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
<KeyVal k="x" val={rounder(path.bottomRight.x)} />
|
||||
<KeyVal k="y" val={rounder(path.bottomRight.y)} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="tw-text-right tw-font-bold tw-w-16">Width</td>
|
||||
<td className="tw:text-right tw:font-bold tw:w-16">Width</td>
|
||||
<td>
|
||||
<KeyVal k="mm" val={rounder(path.width)} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="tw-text-right tw-font-bold tw-w-16">Height</td>
|
||||
<td className="tw:text-right tw:font-bold tw:w-16">Height</td>
|
||||
<td>
|
||||
<KeyVal k="mm" val={rounder(path.height)} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="tw-text-right tw-font-bold tw-w-16">Path Length</td>
|
||||
<td className="tw:text-right tw:font-bold tw:w-16">Path Length</td>
|
||||
<td>
|
||||
<KeyVal k="mm" val={rounder(pathLength(path))} />
|
||||
</td>
|
||||
|
|
@ -169,14 +169,14 @@ const PathXrayInfo = ({ path, pathName, stackName, part }) => {
|
|||
</tbody>
|
||||
</table>
|
||||
<H6>Drawing operations</H6>
|
||||
<table className="tw-table tw-table-auto tw-font-fixed tw-w-full">
|
||||
<table className="tw:table tw:table-auto tw:font-fixed tw:w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th className="tw-flex tw-flex-row tw-flex-wrap tw-items-center tw-justify-between">
|
||||
<th className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:justify-between">
|
||||
<span>Coordinates</span>
|
||||
<button
|
||||
className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-sm tw-daisy-btn-outline"
|
||||
className="tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-sm tw:daisy-btn-outline"
|
||||
onClick={() => setRounded(!rounded)}
|
||||
>
|
||||
{rounded ? 'Show raw' : 'Show rounded'}
|
||||
|
|
@ -187,29 +187,29 @@ const PathXrayInfo = ({ path, pathName, stackName, part }) => {
|
|||
<tbody>
|
||||
{path.ops.map((op, i) => (
|
||||
<tr key={i}>
|
||||
<td className="tw-text-right tw-font-bold tw-w-16">{op.type}</td>
|
||||
<td className="tw:text-right tw:font-bold tw:w-16">{op.type}</td>
|
||||
{['move', 'line'].includes(op.type) ? (
|
||||
<td className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<b className="tw-text-xs tw-opacity-80 tw-block tw-w-8">To:</b>
|
||||
<td className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
<b className="tw:text-xs tw:opacity-80 tw:block tw:w-8">To:</b>
|
||||
<KeyVal k="x" val={rounder(op.to.x)} />
|
||||
<KeyVal k="y" val={rounder(op.to.y)} />
|
||||
</td>
|
||||
) : null}
|
||||
{op.type === 'close' ? <td></td> : null}
|
||||
{op.type === 'curve' ? (
|
||||
<td className="tw-flex tw-flex-col tw-gap-1">
|
||||
<div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<b className="tw-text-xs tw-opacity-80 tw-block tw-w-8">Cp1:</b>
|
||||
<td className="tw:flex tw:flex-col tw:gap-1">
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
<b className="tw:text-xs tw:opacity-80 tw:block tw:w-8">Cp1:</b>
|
||||
<KeyVal k="x" val={rounder(op.cp1.x)} />
|
||||
<KeyVal k="y" val={rounder(op.cp1.y)} />
|
||||
</div>
|
||||
<div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<b className="tw-text-xs tw-opacity-80 tw-block tw-w-8">Cp2:</b>
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
<b className="tw:text-xs tw:opacity-80 tw:block tw:w-8">Cp2:</b>
|
||||
<KeyVal k="x" val={rounder(op.cp2.x)} />
|
||||
<KeyVal k="y" val={rounder(op.cp2.y)} />
|
||||
</div>
|
||||
<div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-items-center">
|
||||
<b className="tw-text-xs tw-opacity-80 tw-block tw-w-8">To:</b>
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1 tw:items-center">
|
||||
<b className="tw:text-xs tw:opacity-80 tw:block tw:w-8">To:</b>
|
||||
<KeyVal k="x" val={rounder(op.to.x)} />
|
||||
<KeyVal k="y" val={rounder(op.to.y)} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue