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
*/
const getProps = (isActive = false) => ({
className: `tw:p-2 tw:px-4 tw:rounded-lg tw:bg-transparent tw:shadow tw:hover:cursor-pointer
tw:w-full tw:h-auto tw:content-start tw:text-left
${isActive ? 'tw:hover:bg-transparent' : 'tw:hover:bg-secondary/10'}`,
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:list-none`,
})
const getSubProps = (isActive) => ({
className: `tw:p-2 tw:px-4 tw:rounded-none tw:bg-transparent tw:w-full tw:h-auto
tw:content-start tw:bg-secondary/20 tw:text-left
${isActive ? 'tw:bg-secondary tw:hover:bg-transparent tw:shadow' : 'tw:hover:bg-secondary/10 '}`,
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:list-none`,
})
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>,
}
@ -31,20 +33,24 @@ export const BaseAccordion = ({
const Component = components[component]
return (
<nav>
<>
{items
.filter((item) => item[0])
.map((item, i) =>
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
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]}
</Component>
<div className="tw:pl-4 tw:p-2 tw:flex tw:flex-col tw:flex-nowrap tw:w-full">
{item[1]}
</div>
</div>
</li>
) : (
<Component
key={i}
@ -55,7 +61,7 @@ export const BaseAccordion = ({
</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'
// Components
import { Null } from '@freesewing/react/components/Null'
import { AsideViewMenuSpacer } from './AsideViewMenu.mjs'
import { ViewIcon, viewLabels } from './views/index.mjs'
import { Tooltip } from './Tooltip.mjs'
import {
@ -118,7 +117,7 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
<HeaderMenuDropdown
{...props}
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={
<>
<HeaderMenuIcon name="options" extraClasses="tw:text-secondary" />
@ -133,52 +132,56 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
export const HeaderMenuDropdown = (props) => {
const { tooltip, toggle, open, setOpen, id, end = false } = props
/*
* 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
*/
const [localOpen, setLocalOpen] = useState(false)
useEffect(() => {
if (open) {
if (open === id) setLocalOpen(true)
else setLocalOpen(false)
}
}, [open, id])
/*
* New DaisyUI 5 implementation
*/
return props.disabled ? (
<Tooltip tip={tooltip}>
<button
disabled
data-component="Editor/HeaderMenuDropdown"
tabIndex={0}
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`}
>
{toggle}
</button>
</Tooltip>
) : (
<Tooltip tip={tooltip}>
<div
className={`tw:daisy-dropdown ${open === id ? 'tw:daisy-dropdown-open tw:z-20' : ''} ${end ? ' tw:daisy-dropdown-end' : ''}`}
>
<div
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)}
<>
<details
className="tw:daisy-dropdown"
open={localOpen}
data-component="Editor/HeaderMenuDropdown"
>
<summary className="tw:daisy-btn tw:m-1" onClick={() => setOpen(id)}>
{toggle}
</div>
<div
tabIndex={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={{ maxHeight: 'calc(100vh - 12rem)' }}
</summary>
<ul
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"
style={{ padding: 0, maxHeight: 'calc(100vh - 8rem)' }}
>
{props.children}
</div>
{open === id && (
</ul>
</details>
{localOpen && (
<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)' }}
onClick={() => setOpen(false)}
onClick={() => {
setOpen(false)
setLocalOpen(false)
}}
></div>
)}
</div>
</Tooltip>
</>
)
}
@ -394,7 +397,7 @@ export const HeaderMenuUndoIcons = (props) => {
}
>
{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) => (
<li key={index}>
<UndoStep {...{ step, update, state, Design, index }} compact />
@ -411,7 +414,7 @@ export const HeaderMenuUndoIcons = (props) => {
</div>
</ButtonFrame>
</li>
</ul>
</>
) : null}
</HeaderMenuDropdown>
<Button
@ -509,6 +512,8 @@ export const HeaderMenuButton = ({
</Tooltip>
)
export const HeaderMenuSpacer = () => <li></li>
export const HeaderMenuViewMenu = (props) => {
const { config, update, state } = props
const output = []
@ -523,9 +528,9 @@ export const HeaderMenuViewMenu = (props) => {
'spacer',
'picker',
]) {
if (viewName === 'spacer') output.push(<AsideViewMenuSpacer key={i} />)
if (viewName === 'spacer') output.push(<HeaderMenuSpacer key={i} />)
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 (
state.ui.ux >= config.uxLevels.views[viewName] &&
(config.measurementsFreeViews.includes(viewName) || state._.missingMeasurements.length < 1)
@ -538,12 +543,12 @@ export const HeaderMenuViewMenu = (props) => {
<a
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: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' : ''}`}
onClick={() => update.view(viewName)}
>
<ViewIcon view={viewName} className="tw:w-6 tw:h-6 tw:grow-0" />
<span className="tw:text-left tw:grow tw:font-medium">
<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 tw:text-base-content">
{viewLabels[viewName]?.t || viewName}
</span>
</a>
@ -565,13 +570,8 @@ export const HeaderMenuViewMenu = (props) => {
</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}
</ul>
</HeaderMenuDropdown>
)
}

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

@ -41,14 +41,20 @@ export const PatternLayout = (props) => {
</div>
{state.ui?.aside ? (
<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>
<SideMenuUl>
<DesignOptionsMenu {...props} />
</SideMenuUl>
<h5>Core Settings</h5>
<SideMenuUl>
<CoreSettingsMenu {...props} />
</SideMenuUl>
<h5>UI Preferences</h5>
<SideMenuUl>
<UiPreferencesMenu {...props} />
</SideMenuUl>
</div>
) : null}
</div>
@ -56,3 +62,12 @@ export const PatternLayout = (props) => {
</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>}
labelBL={
<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'}
</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 }}
onChange={(evt) => handleChange(evt.target.value)}
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'}
`}
/>

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

@ -96,10 +96,10 @@ export const FormControl = ({
</>
)
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}
{labelBR ? <span className="tw:daisy-label-text-alt">{labelBR}</span> : null}
</>
</div>
)
return (
@ -114,11 +114,11 @@ export const FormControl = ({
{children}
{labelBL || labelBR ? (
forId ? (
<label className="tw:daisy-label" htmlFor={forId}>
<label className="tw:daisy-label tw:w-full" htmlFor={forId}>
{bottomLabelChildren}
</label>
) : (
<div className="tw:daisy-label">{bottomLabelChildren}</div>
<div className="tw:daisy-label tw:w-full">{bottomLabelChildren}</div>
)
) : null}
</div>
@ -137,7 +137,7 @@ export const ButtonFrame = ({
}) => (
<button
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:border-2 tw:border-secondary tw:text-left tw:bg-secondary/20
${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 '../../docs/**/*.mdx';
@source '../../tailwind-force.html';
@source '../../../../node_modules/daisyui/**/*.{js,mjs,ts,tsx}';
@source '../../../../packages/react/components/**/*.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);
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

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

@ -24,7 +24,7 @@ const namedColors = [
'error',
]
const TypographyPage = ({ page }) => {
const StylesPage = ({ page }) => {
return (
<Layout
title={`FreeSewing documentation for developers and contributors`}
@ -32,11 +32,12 @@ const TypographyPage = ({ page }) => {
>
<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">
<h1>Typography</h1>
<h1>Styles</h1>
<p>This styles page shows an overview of different elements and how they are styled.</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>It&apos;s a good starting point for theme development.</p>
<h2>Headings (this is h2)</h2>
{p} {p}
<h3>This is h3</h3>
@ -113,9 +114,19 @@ const TypographyPage = ({ page }) => {
))}
{namedColors.map((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>
))}
{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>
<h2>Tabs</h2>
<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-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" />