فهرست منبع

Merge pull request #27705 from overleaf/dp-view-menu-divider

Prevent extra dividers from being rendered in view toolbar menu

GitOrigin-RevId: d89761c3c650c8724154b7ea07dcf77541dc1503
David 1 سال پیش
والد
کامیت
c414d905b1

+ 19 - 5
services/web/frontend/js/features/ide-redesign/components/toolbar/command-dropdown.tsx

@@ -64,11 +64,10 @@ const CommandDropdown = ({
       {populatedSections.map((section, index) => {
       {populatedSections.map((section, index) => {
         return (
         return (
           <Fragment key={section.id}>
           <Fragment key={section.id}>
-            {index > 0 && <DropdownDivider />}
-            {section.title && <DropdownHeader>{section.title}</DropdownHeader>}
-            {section.children.map(child => (
-              <CommandDropdownChild item={child} key={child.id} />
-            ))}
+            <CommandSectionContent
+              section={section}
+              includeDivider={index > 0}
+            />
           </Fragment>
           </Fragment>
         )
         )
       })}
       })}
@@ -78,16 +77,31 @@ const CommandDropdown = ({
 
 
 export const CommandSection = ({
 export const CommandSection = ({
   section: sectionStructure,
   section: sectionStructure,
+  includeDivider = true,
 }: {
 }: {
   section: MenuSectionStructure<CommandId>
   section: MenuSectionStructure<CommandId>
+  includeDivider?: boolean
 }) => {
 }) => {
   const { registry, shortcuts } = useCommandRegistry()
   const { registry, shortcuts } = useCommandRegistry()
   const section = populateSectionOrGroup(sectionStructure, registry, shortcuts)
   const section = populateSectionOrGroup(sectionStructure, registry, shortcuts)
+  return (
+    <CommandSectionContent section={section} includeDivider={includeDivider} />
+  )
+}
+
+function CommandSectionContent({
+  section,
+  includeDivider = true,
+}: {
+  section: MenuSectionStructure<TaggedCommand>
+  includeDivider?: boolean
+}) {
   if (section.children.length === 0) {
   if (section.children.length === 0) {
     return null
     return null
   }
   }
   return (
   return (
     <>
     <>
+      {includeDivider && <DropdownDivider />}
       {section.title && <DropdownHeader>{section.title}</DropdownHeader>}
       {section.title && <DropdownHeader>{section.title}</DropdownHeader>}
       {section.children.map(child => (
       {section.children.map(child => (
         <CommandDropdownChild item={child} key={child.id} />
         <CommandDropdownChild item={child} key={child.id} />

+ 4 - 2
services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx

@@ -233,8 +233,10 @@ export const ToolbarMenuBar = () => {
             }
             }
             onClick={toggleMathPreview}
             onClick={toggleMathPreview}
           />
           />
-          <DropdownDivider />
-          <CommandSection section={pdfControlsMenuSectionStructure} />
+          <CommandSection
+            section={pdfControlsMenuSectionStructure}
+            includeDivider
+          />
         </MenuBarDropdown>
         </MenuBarDropdown>
         <CommandDropdown
         <CommandDropdown
           menu={formatMenuStructure}
           menu={formatMenuStructure}