VSinerva/freesewing
1
0
Fork 0
Code Activity

[org] fix: Menus in Editor

Browse source
This commit is contained in:
joostdecock 2025-04-19 17:52:48 +02:00
parent 5b7829673c
commit e433a7d1ce
9 changed files with 163 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

28
packages/react/components/Editor/components/Accordion.mjs
View file

@ -5,19 +5,21 @@ import React, { useState } from 'react'
* So instead, we handle this in React state * So instead, we handle this in React state
*/ */
const getProps = (isActive = false) => ({ const getProps = (isActive = false) => ({
className: `tw:p-2 tw:px-4 tw:rounded-lg tw:bg-transparent tw:shadow tw:hover:cursor-pointer className: `tw:p-0 tw:rounded-lg tw:bg-transparent tw:hover:cursor-pointer
tw:w-full tw:h-auto tw:content-start tw:text-left tw:w-full tw:h-auto tw:content-start tw:text-left tw:list-none`,
${isActive ? 'tw:hover:bg-transparent' : 'tw:hover:bg-secondary/10'}`,
}) })
const getSubProps = (isActive) => ({ const getSubProps = (isActive) => ({
className: `tw:p-2 tw:px-4 tw:rounded-none tw:bg-transparent tw:w-full tw:h-auto className: `tw:p-0 tw:rounded-none tw:bg-transparent tw:w-full tw:h-auto
tw:content-start tw:bg-secondary/20 tw:text-left tw:content-start tw:bg-secondary/20 tw:text-left tw:list-none`,
${isActive ? 'tw:bg-secondary tw:hover:bg-transparent tw:shadow' : 'tw:hover:bg-secondary/10 '}`,
}) })
const components = { const components = {
button: (props) => <button {...props}>{props.children}</button>, button: (props) => (
<li role="button" {...props}>
{props.children}
</li>
),
div: (props) => <div {...props}>{props.children}</div>, div: (props) => <div {...props}>{props.children}</div>,
} }
@ -31,20 +33,24 @@ export const BaseAccordion = ({
const Component = components[component] const Component = components[component]
return ( return (
<nav> <>
{items {items
.filter((item) => item[0]) .filter((item) => item[0])
.map((item, i) => .map((item, i) =>
active === item[2] ? ( active === item[2] ? (
<div key={i} {...propsGetter(true)}> <li key={i} {...propsGetter(true)}>
<div className="tw:flex tw:flex-col tw:w-full tw:active:bg-transparent tw:hover:bg-transparent tw:p-0 tw:m-0">
<Component <Component
onClick={setActive} onClick={setActive}
className="tw:w-full tw:bg-transparent tw:border-0 tw:hover:bg-secondary/20 tw:hover:cursor-pointer" className="tw:w-full tw:bg-transparent tw:border-0 tw:hover:cursor-pointer tw:active:bg-transparent"
> >
{item[0]} {item[0]}
</Component> </Component>
<div className="tw:pl-4 tw:p-2 tw:flex tw:flex-col tw:flex-nowrap tw:w-full">
{item[1]} {item[1]}
</div> </div>
</div>
</li>
) : ( ) : (
<Component <Component
key={i} key={i}
@ -55,7 +61,7 @@ export const BaseAccordion = ({
</Component> </Component>
) )
)} )}
</nav> </>
) )
} }

82
packages/react/components/Editor/components/HeaderMenu.mjs
View file

@ -6,7 +6,6 @@ import { useBackend } from '@freesewing/react/hooks/useBackend'
import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation' import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation'
// Components // Components
import { Null } from '@freesewing/react/components/Null' import { Null } from '@freesewing/react/components/Null'
import { AsideViewMenuSpacer } from './AsideViewMenu.mjs'
import { ViewIcon, viewLabels } from './views/index.mjs' import { ViewIcon, viewLabels } from './views/index.mjs'
import { Tooltip } from './Tooltip.mjs' import { Tooltip } from './Tooltip.mjs'
import { import {
@ -118,7 +117,7 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
<HeaderMenuDropdown <HeaderMenuDropdown
{...props} {...props}
id="designMeasurements" id="designMeasurements"
tooltip="See how changes to a measurment influence the pattern being generated." tooltip="See how changes to a measurement influence the pattern being generated."
toggle={ toggle={
<> <>
<HeaderMenuIcon name="options" extraClasses="tw:text-secondary" /> <HeaderMenuIcon name="options" extraClasses="tw:text-secondary" />
@ -133,52 +132,56 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
export const HeaderMenuDropdown = (props) => { export const HeaderMenuDropdown = (props) => {
const { tooltip, toggle, open, setOpen, id, end = false } = props const { tooltip, toggle, open, setOpen, id, end = false } = props
/* const [localOpen, setLocalOpen] = useState(false)
* We need to use both !fixed and md:!absolute here to override DaisyUI's
* classes on dropdown-content to force the dropdown to use the available
* screen space on mobile, rather than be positioned under its toggle button
*/
useEffect(() => {
if (open) {
if (open === id) setLocalOpen(true)
else setLocalOpen(false)
}
}, [open, id])
/*
* New DaisyUI 5 implementation
*/
return props.disabled ? ( return props.disabled ? (
<Tooltip tip={tooltip}>
<button <button
disabled disabled
data-component="Editor/HeaderMenuDropdown"
tabIndex={0} tabIndex={0}
role="button" role="button"
className={`tw:daisy-btn tw:daisy-btn-ghost tw:hover:bg-secondary/20 tw:hover:border-solid tw:hover:border-2 tw:hover:border-secondary tw:border tw:border-secondary tw:border-2 tw:border-dotted tw:daisy-btn-sm tw:px-2 tw:z-20 tw:relative`} className={`tw:daisy-btn tw:daisy-btn-ghost tw:hover:bg-secondary/20 tw:hover:border-solid tw:hover:border-2 tw:hover:border-secondary tw:border tw:border-secondary tw:border-2 tw:border-dotted tw:daisy-btn-sm tw:px-2 tw:z-20 tw:relative`}
> >
{toggle} {toggle}
</button> </button>
</Tooltip>
) : ( ) : (
<Tooltip tip={tooltip}> <>
<div <details
className={`tw:daisy-dropdown ${open === id ? 'tw:daisy-dropdown-open tw:z-20' : ''} ${end ? ' tw:daisy-dropdown-end' : ''}`} className="tw:daisy-dropdown"
> open={localOpen}
<div data-component="Editor/HeaderMenuDropdown"
tabIndex={0}
role="button"
className="tw:daisy-btn tw:daisy-btn-ghost tw:hover:bg-secondary/20 tw:border-secondary/10 tw:hover:border-2 tw:hover:border-secondary tw:border tw:border-secondary tw:border-2 tw:border-solid tw:daisy-btn-sm tw:px-2 tw:z-20 tw:relative"
onClick={() => setOpen(open === id ? false : id)}
> >
<summary className="tw:daisy-btn tw:m-1" onClick={() => setOpen(id)}>
{toggle} {toggle}
</div> </summary>
<div <ul
tabIndex={0} className="tw:daisy-menu tw:daisy-dropdown-content tw:flex-nowrap tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-screen tw:md:max-w-md tw:overflow-y-scroll tw:m-0 tw:p-0 tw:pl-0"
className="tw:daisy-dropdown-content tw:bg-base-100/90 tw:z-20 tw:shadow tw:left-0 tw:fixed! tw:md:absolute! tw:top-12 tw:w-screen tw:md:max-w-md tw:overflow-y-scroll tw:mb-12 tw:h-fit" style={{ padding: 0, maxHeight: 'calc(100vh - 8rem)' }}
style={{ maxHeight: 'calc(100vh - 12rem)' }}
> >
{props.children} {props.children}
</div> </ul>
{open === id && ( </details>
{localOpen && (
<div <div
className="tw:w-screen tw:h-screen tw:absolute tw:top-10 tw:left-0 tw:opacity-0" className="tw:w-screen tw:h-screen tw:fixed tw:top-10 tw:left-0 tw:opacity-100"
style={{ width: '200vw', transform: 'translateX(-100vw)' }} style={{ width: '200vw', transform: 'translateX(-100vw)' }}
onClick={() => setOpen(false)} onClick={() => {
setOpen(false)
setLocalOpen(false)
}}
></div> ></div>
)} )}
</div> </>
</Tooltip>
) )
} }
@ -394,7 +397,7 @@ export const HeaderMenuUndoIcons = (props) => {
} }
> >
{undos ? ( {undos ? (
<ul className="tw:daisy-dropdown-content tw:bg-base-100/90 tw:z-20 tw:shadow tw:left-0 tw:fixed! tw:md:absolute! tw:w-screen tw:md:w-96 tw:px-4 tw:md:p-2 tw:md:pt-0 tw:contents"> <>
{undos.slice(0, 9).map((step, index) => ( {undos.slice(0, 9).map((step, index) => (
<li key={index}> <li key={index}>
<UndoStep {...{ step, update, state, Design, index }} compact /> <UndoStep {...{ step, update, state, Design, index }} compact />
@ -411,7 +414,7 @@ export const HeaderMenuUndoIcons = (props) => {
</div> </div>
</ButtonFrame> </ButtonFrame>
</li> </li>
</ul> </>
) : null} ) : null}
</HeaderMenuDropdown> </HeaderMenuDropdown>
<Button <Button
@ -509,6 +512,8 @@ export const HeaderMenuButton = ({
</Tooltip> </Tooltip>
) )
export const HeaderMenuSpacer = () => <li></li>
export const HeaderMenuViewMenu = (props) => { export const HeaderMenuViewMenu = (props) => {
const { config, update, state } = props const { config, update, state } = props
const output = [] const output = []
@ -523,9 +528,9 @@ export const HeaderMenuViewMenu = (props) => {
'spacer', 'spacer',
'picker', 'picker',
]) { ]) {
if (viewName === 'spacer') output.push(<AsideViewMenuSpacer key={i} />) if (viewName === 'spacer') output.push(<HeaderMenuSpacer key={i} />)
else if (viewName === 'spacerOver3') else if (viewName === 'spacerOver3')
output.push(state.ui.ux > 3 ? <AsideViewMenuSpacer key={i} /> : null) output.push(state.ui.ux > 3 ? <HeaderMenuSpacer key={i} /> : null)
else if ( else if (
state.ui.ux >= config.uxLevels.views[viewName] && state.ui.ux >= config.uxLevels.views[viewName] &&
(config.measurementsFreeViews.includes(viewName) || state._.missingMeasurements.length < 1) (config.measurementsFreeViews.includes(viewName) || state._.missingMeasurements.length < 1)
@ -538,12 +543,12 @@ export const HeaderMenuViewMenu = (props) => {
<a <a
className={`tw:w-full tw:text-base-content className={`tw:w-full tw:text-base-content
tw:flex tw:flex-row tw:items-center tw:gap-2 tw:md:gap-4 tw:p-2 tw:px-4 tw:flex tw:flex-row tw:items-center tw:gap-2 tw:md:gap-4 tw:p-2 tw:px-4
tw:hover:cursor-pointer tw:hover:text-base-content tw:hover:cursor-pointer tw:hover:text-base-content tw:hover:cursor-pointer
tw:hover:bg-secondary/20 ${viewName === state.view ? 'tw:bg-secondary/20' : ''}`} tw:hover:bg-secondary/20 ${viewName === state.view ? 'tw:bg-secondary/20' : ''}`}
onClick={() => update.view(viewName)} onClick={() => update.view(viewName)}
> >
<ViewIcon view={viewName} className="tw:w-6 tw:h-6 tw:grow-0" /> <ViewIcon view={viewName} className="tw:w-6 tw:h-6 tw:grow-0 tw:text-base-content" />
<span className="tw:text-left tw:grow tw:font-medium"> <span className="tw:text-left tw:grow tw:font-medium tw:text-base-content">
{viewLabels[viewName]?.t || viewName} {viewLabels[viewName]?.t || viewName}
</span> </span>
</a> </a>
@ -565,13 +570,8 @@ export const HeaderMenuViewMenu = (props) => {
</span> </span>
</> </>
} }
>
<ul
tabIndex={i}
className="tw:daisy-dropdown-content tw:bg-base-100/95tw:z-20 tw:shadow tw:left-0 tw:fixed! tw:md:absolute! tw:w-screen tw:md:max-w-lg tw:md:pt-0 tw:mt-14 tw:md:mt-0 tw:contents"
> >
{output} {output}
</ul>
</HeaderMenuDropdown> </HeaderMenuDropdown>
) )
} }

17
packages/react/components/Editor/components/PatternLayout.mjs
View file

@ -41,14 +41,20 @@ export const PatternLayout = (props) => {
</div> </div>
{state.ui?.aside ? ( {state.ui?.aside ? (
<div <div
className={`tw:hidden tw:xl:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`} className={`tw:hidden tw:md:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
> >
<h5 className="tw:capitalize">{pattern.designConfig.data.id} Options</h5> <h5 className="tw:capitalize">{pattern.designConfig.data.id} Options</h5>
<SideMenuUl>
<DesignOptionsMenu {...props} /> <DesignOptionsMenu {...props} />
</SideMenuUl>
<h5>Core Settings</h5> <h5>Core Settings</h5>
<SideMenuUl>
<CoreSettingsMenu {...props} /> <CoreSettingsMenu {...props} />
</SideMenuUl>
<h5>UI Preferences</h5> <h5>UI Preferences</h5>
<SideMenuUl>
<UiPreferencesMenu {...props} /> <UiPreferencesMenu {...props} />
</SideMenuUl>
</div> </div>
) : null} ) : null}
</div> </div>
@ -56,3 +62,12 @@ export const PatternLayout = (props) => {
</ZoomContextProvider> </ZoomContextProvider>
) )
} }
export const SideMenuUl = ({ children }) => (
<ul
className="tw:daisy-menu tw:daisy-dropdown-content tw:flex-nowrap tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-full tw:p-0 tw:pl-0"
style={{ padding: 0 }}
>
{children}
</ul>
)

2
packages/react/components/Editor/components/menus/Container.mjs
View file

@ -110,7 +110,7 @@ export const MenuItem = ({
labelBR={<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">{buttons}</div>} labelBR={<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">{buttons}</div>}
labelBL={ labelBL={
<span <span
className={`tw:text-base tw:font-medium tw:-mt-2 tw:block ${changed ? 'tw:text-accent' : 'tw:opacity-50'}`} className={`tw:text-sm tw:-mt-2 tw:block ${changed ? 'tw:text-accent' : 'tw:text-base-100-content'}`}
> >
{changed ? 'This is a custom value' : 'This is the default value'} {changed ? 'This is a custom value' : 'This is the default value'}
</span> </span>

2
packages/react/components/Editor/components/menus/Input.mjs
View file

@ -349,7 +349,7 @@ export const MenuSliderInput = ({
{...{ min, max, value: val, step: config.step || 0.1 }} {...{ min, max, value: val, step: config.step || 0.1 }}
onChange={(evt) => handleChange(evt.target.value)} onChange={(evt) => handleChange(evt.target.value)}
className={` className={`
tw:daisy-range tw:daisy-range-sm tw:mt-1 tw:daisy-range tw:daisy-range-sm tw:mt-1 tw:w-full
${changed ? 'tw:daisy-range-accent' : 'tw:daisy-range-secondary'} ${changed ? 'tw:daisy-range-accent' : 'tw:daisy-range-secondary'}
`} `}
/> />

10
packages/react/components/Input/index.mjs
View file

@ -96,10 +96,10 @@ export const FormControl = ({
</> </>
) )
const bottomLabelChildren = ( const bottomLabelChildren = (
<> <div className="tw:flex tw:flex-row tw:justify-between tw:w-full tw:items-start">
{labelBL ? <span className="tw:daisy-label-text-alt">{labelBL}</span> : null} {labelBL ? <span className="tw:daisy-label-text-alt">{labelBL}</span> : null}
{labelBR ? <span className="tw:daisy-label-text-alt">{labelBR}</span> : null} {labelBR ? <span className="tw:daisy-label-text-alt">{labelBR}</span> : null}
</> </div>
) )
return ( return (
@ -114,11 +114,11 @@ export const FormControl = ({
{children} {children}
{labelBL || labelBR ? ( {labelBL || labelBR ? (
forId ? ( forId ? (
<label className="tw:daisy-label" htmlFor={forId}> <label className="tw:daisy-label tw:w-full" htmlFor={forId}>
{bottomLabelChildren} {bottomLabelChildren}
</label> </label>
) : ( ) : (
<div className="tw:daisy-label">{bottomLabelChildren}</div> <div className="tw:daisy-label tw:w-full">{bottomLabelChildren}</div>
) )
) : null} ) : null}
</div> </div>
@ -137,7 +137,7 @@ export const ButtonFrame = ({
}) => ( }) => (
<button <button
className={` className={`
tw:daisy-btn tw:daisy-btn-ghost tw:daisy-btn-secondary tw:h-fit tw:daisy-btn tw:daisy-btn-ghost tw:h-fit
tw:w-full ${dense ? 'tw:mt-1 tw:daisy-btn-sm tw:font-light' : 'tw:mt-2 tw:py-4 tw:h-auto tw:content-start'} tw:w-full ${dense ? 'tw:mt-1 tw:daisy-btn-sm tw:font-light' : 'tw:mt-2 tw:py-4 tw:h-auto tw:content-start'}
tw:border-2 tw:border-secondary tw:text-left tw:bg-secondary/20 tw:border-2 tw:border-secondary tw:text-left tw:bg-secondary/20
${accordion ? 'tw:hover:bg-transparent' : 'tw:hover:bg-secondary/10'} ${accordion ? 'tw:hover:bg-transparent' : 'tw:hover:bg-secondary/10'}

5
sites/org/src/css/custom.css
View file

@ -17,6 +17,7 @@
@source '../**/*.{js,mjs,mdx}'; @source '../**/*.{js,mjs,mdx}';
@source '../../docs/**/*.mdx'; @source '../../docs/**/*.mdx';
@source '../../tailwind-force.html';
@source '../../../../node_modules/daisyui/**/*.{js,mjs,ts,tsx}'; @source '../../../../node_modules/daisyui/**/*.{js,mjs,ts,tsx}';
@source '../../../../packages/react/components/**/*.mjs'; @source '../../../../packages/react/components/**/*.mjs';
@source '../../../../packages/react/context/**/*.mjs'; @source '../../../../packages/react/context/**/*.mjs';
@ -168,6 +169,10 @@ a.tw\:daisy-btn-primary.tw\:daisy-btn-outline:hover {
color: var(--color-primary-content); color: var(--color-primary-content);
text-decoration: none; text-decoration: none;
} }
.tw\:daisy-menu {
--daisy-menu-active-fg: currentColor;
--daisy-menu-active-bg: var(--bg-transparent);
}
/* /*
* Make the 'edit this page' link look consistent * Make the 'edit this page' link look consistent

23
sites/org/src/pages/typography.js → sites/org/src/pages/styles.js
View file

@ -24,7 +24,7 @@ const namedColors = [
'error', 'error',
] ]
const TypographyPage = ({ page }) => { const StylesPage = ({ page }) => {
return ( return (
<Layout <Layout
title={`FreeSewing documentation for developers and contributors`} title={`FreeSewing documentation for developers and contributors`}
@ -32,11 +32,12 @@ const TypographyPage = ({ page }) => {
> >
<div className="tailwind-container"> <div className="tailwind-container">
<div className="tw:text-base-content mdx tw:max-w-prose tw:text-base-content tw:max-w-prose tw:text-current tw:xl:pl-4 tw:mx-auto tw:my-8"> <div className="tw:text-base-content mdx tw:max-w-prose tw:text-base-content tw:max-w-prose tw:text-current tw:xl:pl-4 tw:mx-auto tw:my-8">
<h1>Typography</h1> <h1>Styles</h1>
<p>This styles page shows an overview of different elements and how they are styled.</p>
<p> <p>
This typography page shows an overview of different elements and how they are styled. It&apos;s a good starting point for theme development. It is also a good resource for
debugging styling issues.
</p> </p>
<p>It&apos;s a good starting point for theme development.</p>
<h2>Headings (this is h2)</h2> <h2>Headings (this is h2)</h2>
{p} {p} {p} {p}
<h3>This is h3</h3> <h3>This is h3</h3>
@ -113,9 +114,19 @@ const TypographyPage = ({ page }) => {
))} ))}
{namedColors.map((color) => ( {namedColors.map((color) => (
<li key={color} className={`tw:text-${color}-content tw:bg-${color}`}> <li key={color} className={`tw:text-${color}-content tw:bg-${color}`}>
tw:{color}-content tw:bg-{color} tw:text-{color}-content tw:bg-{color}
</li> </li>
))} ))}
{namedColors.map((color) => (
<li key={color} className="tw:flex tw:flex-row">
<div className={`tw:text-${color}-content tw:bg-${color}/80`}>
tw:text-{color}-content tw:bg-{color}/80
</div>
</li>
))}
<li className="tw:bg-primary/80 tw:text-primary-content">
tw:bg-primary/80 tw:text-primary-content
</li>
</ul> </ul>
<h2>Tabs</h2> <h2>Tabs</h2>
<Tabs> <Tabs>
@ -138,4 +149,4 @@ const TypographyPage = ({ page }) => {
) )
} }
export default TypographyPage export default StylesPage

37
sites/org/tailwind-force.html
View file

@ -64,3 +64,40 @@
<div className="bg-gradient-to-tr from-secondary from-10% to-primary"></div> <div className="bg-gradient-to-tr from-secondary from-10% to-primary"></div>
<div className="bg-gradient-to-tr from-accent from-10% to-primary"></div> <div className="bg-gradient-to-tr from-accent from-10% to-primary"></div>
<!-- colors on transparent backgrounds -->
<div class=" bg-base-100/10" />
<div class=" bg-base-200/10" />
<div class=" bg-base-300/10" />
<div class=" bg-primary/10" />
<div class="bg-secondary/10" />
<div class=" bg-neutral/10" />
<div class=" bg-accent/10" />
<div class=" bg-success/10" />
<div class=" bg-info/10" />
<div class=" bg-warning/10" />
<div class=" bg-error/10" />
<div class=" bg-base-100/70" />
<div class=" bg-base-200/70" />
<div class=" bg-base-300/70" />
<div class=" bg-primary/70" />
<div class="bg-secondary/70" />
<div class=" bg-neutral/70" />
<div class=" bg-accent/70" />
<div class=" bg-success/70" />
<div class=" bg-info/70" />
<div class=" bg-warning/70" />
<div class=" bg-error/70" />
<div class=" bg-base-100/80" />
<div class=" bg-base-200/80" />
<div class=" bg-base-300/80" />
<div class=" bg-primary/80" />
<div class="bg-secondary/80" />
<div class=" bg-neutral/80" />
<div class=" bg-accent/80" />
<div class=" bg-success/80" />
<div class=" bg-info/80" />
<div class=" bg-warning/80" />
<div class=" bg-error/80" />