[org] fix: Menus in Editor

2025-04-19 17:52:48 +02:00 · 2025-04-19 17:52:48 +02:00 · e433a7d1ce
commit e433a7d1ce
parent 5b7829673c
9 changed files with 163 additions and 89 deletions
--- a/packages/react/components/Editor/components/Accordion.mjs
+++ b/packages/react/components/Editor/components/Accordion.mjs
@ -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)}>
-              <Component
-                onClick={setActive}
-                className="tw:w-full tw:bg-transparent tw:border-0 tw:hover:bg-secondary/20 tw:hover:cursor-pointer"
-              >
-                {item[0]}
-              </Component>
-              {item[1]}
-            </div>
+            <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: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>
+    </>
  )
 }

--- a/packages/react/components/Editor/components/HeaderMenu.mjs
+++ b/packages/react/components/Editor/components/HeaderMenu.mjs
@ -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
-        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>
+    <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 tip={tooltip}>
-      <div
-        className={`tw:daisy-dropdown ${open === id ? 'tw:daisy-dropdown-open tw:z-20' : ''} ${end ? ' tw:daisy-dropdown-end' : ''}`}
+    <>
+      <details
+        className="tw:daisy-dropdown"
+        open={localOpen}
+        data-component="Editor/HeaderMenuDropdown"
      >
-        <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)}
-        >
+        <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 && (
-          <div
-            className="tw:w-screen tw:h-screen tw:absolute tw:top-10 tw:left-0 tw:opacity-0"
-            style={{ width: '200vw', transform: 'translateX(-100vw)' }}
-            onClick={() => setOpen(false)}
-          ></div>
-        )}
-      </div>
-    </Tooltip>
+        </ul>
+      </details>
+      {localOpen && (
+        <div
+          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)
+            setLocalOpen(false)
+          }}
+        ></div>
+      )}
+    </>
  )
 }

@ -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>
@ -566,12 +571,7 @@ export const HeaderMenuViewMenu = (props) => {
        </>
      }
    >
-      <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>
+      {output}
    </HeaderMenuDropdown>
  )
 }
--- a/packages/react/components/Editor/components/PatternLayout.mjs
+++ b/packages/react/components/Editor/components/PatternLayout.mjs
@ -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>
-              <DesignOptionsMenu {...props} />
+              <SideMenuUl>
+                <DesignOptionsMenu {...props} />
+              </SideMenuUl>
              <h5>Core Settings</h5>
-              <CoreSettingsMenu {...props} />
+              <SideMenuUl>
+                <CoreSettingsMenu {...props} />
+              </SideMenuUl>
              <h5>UI Preferences</h5>
-              <UiPreferencesMenu {...props} />
+              <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>
+)
--- a/packages/react/components/Editor/components/menus/Container.mjs
+++ b/packages/react/components/Editor/components/menus/Container.mjs
@ -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>
--- a/packages/react/components/Editor/components/menus/Input.mjs
+++ b/packages/react/components/Editor/components/menus/Input.mjs
@ -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'}
        `}
      />
--- a/packages/react/components/Input/index.mjs
+++ b/packages/react/components/Input/index.mjs
@ -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'}
--- a/sites/org/src/css/custom.css
+++ b/sites/org/src/css/custom.css
@ -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
--- a/sites/org/src/pages/typography.js
+++ b/sites/org/src/pages/typography.js
@ -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
--- a/sites/org/tailwind-force.html
+++ b/sites/org/tailwind-force.html
@ -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" />
+