wip: Work on menus

packages/react/components/Editor/lib/ui-preferences.mjs

@@ -1,3 +1,4 @@
+import React from 'react'
 import { defaultConfig } from '../config/index.mjs'
 import {
   MenuIcon,
@@ -11,28 +12,49 @@ export function menuUiPreferencesStructure() {
   const uiUx = defaultConfig.uxLevels.ui
   const uiPreferences = {
     ux: {
+      dense: true,
+      title: 'User Experience',
+      about: 'Controls the user experience, from keep it simple, to give me all the powers',
       ux: uiUx.ux,
       emoji: '🖥️',
       list: [1, 2, 3, 4, 5],
-      choiceTitles: {},
+      choiceTitles: {
+        1: 'Keep it as simple as possible',
+        2: 'Keep it simple, but not too simple',
+        3: 'Balance simplicity with power',
+        4: 'Give me all powers, but keep me safe',
+        5: 'Get out of my way',
+      },
+      _choiceDescriptions: {
+        1: 'Hides all but the most crucial features.',
+        2: 'Hides most of the advanced features.',
+        3: 'Reveals the majority of advanced features, but not all of them.',
+        4: 'Reveals all advanced features, keeps handrails and safety checks.',
+        5: 'Reveals all advanced features, removes handrails and safety checks.',
+      },
       icon: UxIcon,
       dflt: defaultConfig.defaultUx,
     },
+    /*
     aside: {
+      title: 'Aside Menu',
+      about: 'Whether or not to display the aside menu',
       ux: uiUx.aside,
       list: [0, 1],
       choiceTitles: {
-        0: 'pe:noAside',
-        1: 'pe:withAside',
+        0: 'Display the aside menu',
+        1: 'Hide the aside menu',
       },
       choiceDescriptions: {
-        0: 'pe:noAside',
-        1: 'pe:withAside',
+        0: 'Displays the Design Options, Core Settings, and UI Preferences menu on the side of the screen (not on mobile).',
+        1: 'Uses the entire screen size for your pattern, providing access to the Design Options, Core Settings, and UI Preferences through the header navigation only.',
       },
       dflt: 1,
       icon: MenuIcon,
     },
     kiosk: {
+      title: 'Kiosk View',
+      about: 'Whether or not to hide the header and footer',
       ux: uiUx.kiosk,
       list: [0, 1],
       choiceTitles: {
@@ -46,26 +68,37 @@ export function menuUiPreferencesStructure() {
       dflt: 0,
       icon: KioskIcon,
     },
+    */
     rotate: {
+      dense: true,
+      title: 'Rotate Pattern',
+      about: 'Allows you to rotate your pattern 90 degrees, handy for tall patterns',
       ux: uiUx.rotate,
       list: [0, 1],
       choiceTitles: {
-        0: 'pe:rotateNo',
-        1: 'pe:rotateYes',
-      },
-      choiceDescriptions: {
-        0: 'pe:noAside',
-        1: 'pe:withAside',
+        0: 'Do not rotate the pattern',
+        1: 'Rotate the pattern 90 degrees',
       },
       dflt: 0,
       icon: RotateIcon,
     },
     renderer: {
+      dense: true,
+      title: 'Pattern render engine',
+      about: 'Change the way the pattern is rendered on screen',
       ux: uiUx.renderer,
       list: ['react', 'svg'],
       choiceTitles: {
-        react: 'pe:renderWithReact',
-        svg: 'pe:renderWithCore',
+        react: (
+          <span>
+            Render using <em>@freesewing/react</em>
+          </span>
+        ),
+        svg: (
+          <span>
+            Render using <em>@freesewing/core</em>
+          </span>
+        ),
       },
       choiceDescriptions: {
         0: 'pe:noAside',
@@ -73,13 +106,12 @@ export function menuUiPreferencesStructure() {
       },
       valueTitles: {
         react: 'React',
-        svg: 'SVG',
+        svg: 'Core',
       },
       dflt: 'react',
       icon: RocketIcon,
     },
   }
 
-  uiPreferences.ux.list.forEach((i) => (uiPreferences.ux.choiceTitles[i] = 'pe:ux' + i))
   return uiPreferences
 }