wip: Bunch of changes for v4
From the top of my head (but I'll write this up later): - We keep the info about the designs in the design - We use a new about.json file for this - The auto-generated data.mjs file is no more - Linedrawings we use in the design picker use the front - Linedrawings should respect square aspect ration - Migrated components to use the 'tw-' prefic for tailwind CSS classes to avoid conflicts with docusaurus styles
This commit is contained in:
joostdecock
parent
6b8eea2724
commit
c8808695e5
255 changed files with 3038 additions and 2304 deletions
|
|
@ -134,7 +134,7 @@ export const Pattern = ({ id, Link }) => {
|
|||
|
||||
if (!edit)
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
<div className="tw-w-full">
|
||||
{pattern.public ? (
|
||||
<Popout note>
|
||||
<h5>This is the private view of your pattern</h5>
|
||||
|
|
@ -143,9 +143,9 @@ export const Pattern = ({ id, Link }) => {
|
|||
<br />
|
||||
But only you can access this private view.
|
||||
</p>
|
||||
<p className="text-right">
|
||||
<p className="tw-text-right">
|
||||
<Link
|
||||
className={`daisy-btn daisy-btn-secondary hover:text-secondary-content hover:no-underline`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-secondary hover:tw-text-secondary-content hover:tw-no-underline`}
|
||||
href={`/pattern?id=${pattern.id}`}
|
||||
>
|
||||
<PatternIcon />
|
||||
|
|
@ -165,7 +165,7 @@ export const Pattern = ({ id, Link }) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
<div className="tw-w-full">
|
||||
<h2>Edit pattern {pattern.name}</h2>
|
||||
|
||||
{/* Name is always shown */}
|
||||
|
|
@ -203,10 +203,10 @@ export const Pattern = ({ id, Link }) => {
|
|||
{
|
||||
val: true,
|
||||
label: (
|
||||
<div className="flex flex-row items-center flex-wrap justify-between w-full">
|
||||
<div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
|
||||
<span>Public Pattern</span>
|
||||
<OkIcon
|
||||
className="w-8 h-8 text-success bg-base-100 rounded-full p-1"
|
||||
className="tw-w-8 tw-h-8 tw-text-success tw-bg-base-100 tw-rounded-full tw-p-1"
|
||||
stroke={4}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -216,9 +216,12 @@ export const Pattern = ({ id, Link }) => {
|
|||
{
|
||||
val: false,
|
||||
label: (
|
||||
<div className="flex flex-row items-center flex-wrap justify-between w-full">
|
||||
<div className="tw-flex tw-flex-row tw-items-center tw-flex-wrap tw-justify-between tw-w-full">
|
||||
<span>Private Pattern</span>
|
||||
<NoIcon className="w-8 h-8 text-error bg-base-100 rounded-full p-1" stroke={3} />
|
||||
<NoIcon
|
||||
className="tw-w-8 tw-h-8 tw-text-error tw-bg-base-100 tw-rounded-full tw-p-1"
|
||||
stroke={3}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
desc: 'Private patterns are yours and yours alone',
|
||||
|
|
@ -233,15 +236,15 @@ export const Pattern = ({ id, Link }) => {
|
|||
{account.control >= controlConfig.account.patterns.notes ? (
|
||||
<MarkdownInput id="pattern-notes" label="Notes" update={setNotes} current={notes} />
|
||||
) : null}
|
||||
<div className="flex flex-row items-center align-end gap-2 mt-8">
|
||||
<div className="tw-flex tw-flex-row tw-items-center tw-align-end tw-gap-2 tw-mt-8">
|
||||
<button
|
||||
onClick={() => setEdit(false)}
|
||||
className={`daisy-btn daisy-btn-primary daisy-btn-outline`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline`}
|
||||
>
|
||||
<ResetIcon />
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={save} className="daisy-btn daisy-btn-primary grow">
|
||||
<button onClick={save} className="tw-daisy-btn tw-daisy-btn-primary tw-grow">
|
||||
<UploadIcon />
|
||||
Save Pattern
|
||||
</button>
|
||||
|
|
@ -268,7 +271,7 @@ export const PatternCard = ({
|
|||
const s = sizes[size]
|
||||
|
||||
const wrapperProps = {
|
||||
className: `bg-base-300 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4 w-${s} aspect-square`,
|
||||
className: `tw-bg-base-300 tw-w-full tw-mb-2 tw-mx-auto tw-flex tw-flex-col tw-items-start tw-text-center tw-justify-center tw-rounded tw-shadow tw-py-4 tw-w-${s} tw-aspect-square`,
|
||||
style: {
|
||||
backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: pattern.img })})`,
|
||||
backgroundSize: 'cover',
|
||||
|
|
@ -311,7 +314,7 @@ export const PatternCard = ({
|
|||
const BadgeLink = ({ label, href }) => (
|
||||
<a
|
||||
href={href}
|
||||
className="daisy-badge daisy-badge-secondary font-bold daisy-badge-lg hover:text-secondary-content hover:no-underline"
|
||||
className="tw-daisy-badge tw-daisy-badge-secondary tw-font-bold tw-daisy-badge-lg hover:tw-text-secondary-content hover:tw-no-underline"
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
|
|
@ -332,19 +335,19 @@ const PatternHeader = ({
|
|||
}) => (
|
||||
<>
|
||||
<h2>{pattern.name}</h2>
|
||||
<div className="flex flex-row flex-wrap gap-2 text-sm items-center mb-2">
|
||||
<div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-2 tw-text-sm tw-items-center tw-mb-2">
|
||||
<KeyVal k="ID" val={pattern.id} color="secondary" />
|
||||
<KeyVal k="Created" val={<TimeAgo iso={pattern.createdAt} />} color="secondary" />
|
||||
<KeyVal k="Updated" val={<TimeAgo iso={pattern.updatedAt} />} color="secondary" />
|
||||
<KeyVal k="Public" val={pattern.public ? 'yes' : 'no'} color="secondary" />
|
||||
</div>
|
||||
<div className="flex flex-wrap md:flex-nowrap flex-row gap-2 w-full">
|
||||
<div className="w-full md:w-96 shrink-0">
|
||||
<div className="tw-flex tw-flex-wrap md:tw-flex-nowrap tw-flex-row tw-gap-2 tw-w-full">
|
||||
<div className="tw-w-full md:tw-w-96 tw-shrink-0">
|
||||
<PatternCard pattern={pattern} size="md" Link={Link} />
|
||||
</div>
|
||||
<div className="flex flex-col justify-end gap-2 mb-2 grow">
|
||||
<div className="tw-flex tw-flex-col tw-justify-end tw-gap-2 tw-mb-2 tw-grow">
|
||||
{account.control > 3 && (pattern?.public || pattern.userId === account.id) ? (
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<div className="tw-flex tw-flex-row tw-gap-2 tw-items-center">
|
||||
<BadgeLink label="JSON" href={`${urls.backend}/patterns/${pattern.id}.json`} />
|
||||
<BadgeLink label="YAML" href={`${urls.backend}/patterns/${pattern.id}.yaml`} />
|
||||
</div>
|
||||
|
|
@ -354,12 +357,12 @@ const PatternHeader = ({
|
|||
<button
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
|
||||
<ModalWrapper flex="col" justify="top lg:tw-justify-center" slideFrom="right">
|
||||
<img src={cloudflareImageUrl({ type: 'public', id: pattern.img })} />
|
||||
</ModalWrapper>
|
||||
)
|
||||
}
|
||||
className={`daisy-btn daisy-btn-secondary daisy-btn-outline ${horFlexClasses}`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline ${horFlexClasses}`}
|
||||
>
|
||||
<ShowcaseIcon />
|
||||
Show Image
|
||||
|
|
@ -367,7 +370,7 @@ const PatternHeader = ({
|
|||
{account.control > 3 ? (
|
||||
<button
|
||||
onClick={() => togglePublic()}
|
||||
className={`daisy-btn daisy-btn-${pattern.public ? 'error' : 'success'} daisy-btn-outline ${horFlexClasses} hover:text-${pattern.public ? 'error' : 'success'}-content`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-${pattern.public ? 'error' : 'success'} tw-daisy-btn-outline ${horFlexClasses} hover:tw-text-${pattern.public ? 'error' : 'success'}-content`}
|
||||
>
|
||||
{pattern.public ? <BoolNoIcon /> : <BoolYesIcon />}
|
||||
Make pattern {pattern.public ? 'private' : 'public'}
|
||||
|
|
@ -377,19 +380,19 @@ const PatternHeader = ({
|
|||
<>
|
||||
<Link
|
||||
href={`/account/patterns/${pattern.design}/edit?id=${pattern.id}`}
|
||||
className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline ${horFlexClasses}`}
|
||||
>
|
||||
<FreeSewingIcon /> Update Pattern
|
||||
</Link>
|
||||
<button
|
||||
className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline ${horFlexClasses}`}
|
||||
onClick={clone}
|
||||
>
|
||||
<CloneIcon /> Clone Pattern
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEdit(true)}
|
||||
className={`daisy-btn daisy-btn-primary ${horFlexClasses}`}
|
||||
className={`tw-daisy-btn tw-daisy-btn-primary ${horFlexClasses}`}
|
||||
>
|
||||
<EditIcon /> Edit Pattern Metadata
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue