0002-Auto-fit-Gantt-column-widths.patch - Redmine

       max-inline-size: max(100px, calc(100% - 100px));
+    }
     /* On a narrow chart, dragging may make the subject column wider than the available space. */
     /* On a narrow chart, dragging or auto-fit may make the subject column wider than the available space. */
     .gantt-chart.is-manually-resized [data-gantt-column="subjects"] {
       flex: 0 0 var(--gantt-subject-display-width);
       inline-size: var(--gantt-subject-display-width);
-...
     .gantt-chart .ui-resizable-e {
       cursor: ew-resize;
       z-index: 30;
+    }
     .gantt-pane {
-...
       white-space: nowrap;
+    }
     /* Applied temporarily when auto-fitting a column to measure its header and row content widths. */
     .gantt-column-measuring .gantt-pane > header,
     .gantt-column-measuring .gantt-row {
       inline-size: max-content;
+    }
     .gantt-row-hover {
       background-color: rgba(var(--oc-yellow-1-rgb), 0.5);
+    }

           'subjects', min_width: 100, width: 'var(--gantt-subject-width)',
           data: {
             'gantt--chart-target': 'subjectColumn',
             # When the subject column is dragged on a narrow chart,
             # When the subject column is dragged or auto-fitted on a narrow chart,
             # let the user's chosen width take precedence over automatic shrinking.
             action: %w(
               gantt--column:resize-start->gantt--chart#handleSubjectColumnResizeStart
-...
         tag.div(**options, &)
       end
       def gantt_column_resize_handle_tag
         tag.div(
           class: 'ui-resizable-handle ui-resizable-e',
           data: {
             'gantt--column-target': 'handle',
             action: 'dblclick->gantt--column#fitWidth:prevent'
           },
           aria: {hidden: true}
+        )
       end
     end

+    }
     export default class extends Controller {
       static targets = ["handle"]
       static values = {
         minWidth: Number,
         // Local value
-...
         return this.element.dataset.ganttColumn
+      }
       fitWidth() {
         const extraPadding = 10
         let width = 0
         // Temporarily apply this class to measure the content width needed to fit the column.
         this.element.classList.add("gantt-column-measuring")
         try {
           this.element.querySelectorAll(".gantt-pane > header, .gantt-row:not([hidden])").forEach((content) => {
             width = Math.max(width, content.getBoundingClientRect().width)
           })
         } finally {
           this.element.classList.remove("gantt-column-measuring")
+        }
         width = Math.max(this.minWidthValue, Math.ceil(width) + extraPadding)
         this.dispatch("resize-start")
         this.#setWidth(width)
         this.#saveWidth(width)
+      }
       #setupResizable() {
         const options = {
           handles: "e",
           handles: { e: this.handleTarget },
           minWidth: this.minWidthValue,
           zIndex: 30,
           start: () => {
             this.dispatch("resize-start")
           },
           resize: (_event, ui) => {
             this.element.style.setProperty("--gantt-column-width", `${ui.size.width}px`)
             this.element.style.removeProperty("width")
             this.dispatch("resize", { detail: { width: ui.size.width } })
             this.#setWidth(ui.size.width)
           },
           stop: (_event, ui) => {
             if (ui.originalSize.width !== ui.size.width) {
-...
         this.#$element.resizable(options)
+      }
       #setWidth(width) {
         this.element.style.setProperty("--gantt-column-width", `${width}px`)
         this.element.style.removeProperty("width")
         this.dispatch("resize", { detail: { width } })
+      }
       #restoreWidth() {
         const width = this.#columnWidthStore.get(this.#columnName)

             <% end %>
           </div>
         </section>
         <%= gantt_column_resize_handle_tag %>
       <% end %>
       <%
-...
               <%= gantt.selected_column_content(column: column, top: layout.content_top, zoom: layout.zoom, g_width: layout.chart_width).html_safe %>
             </div>
           </section>
           <%= gantt_column_resize_handle_tag %>
         <% end %>
       <% end %>

         assert_selector(subject_column) { column_width('subjects') > narrow_width }
       end
       test 'automatic column width fitting' do
         Issue.find(3).update!(
           subject: 'Cannot save a recipe after changing the ingredients and selecting a different category'
+        )
         visit_gantt
         assert_selector '.gantt-column[data-gantt-column="subjects"].ui-resizable'
         expected_width = page.evaluate_script(<<~JS)
           (() => {
             const row = document.querySelector('[data-gantt-column="subjects"] .gantt-row[data-gantt-row-key="issue-3"]');
             const range = document.createRange();
             range.selectNodeContents(row);
             return Math.ceil(range.getBoundingClientRect().right - row.getBoundingClientRect().left) + 10;
           })()
         JS
         find('.gantt-column[data-gantt-column="subjects"] .ui-resizable-e').double_click
         assert_equal expected_width, column_width('subjects')
         page.refresh
         assert_selector '.gantt-column[data-gantt-column="subjects"].ui-resizable'
         assert_equal expected_width, column_width('subjects')
       end
       test 'context menu and tooltip interactions' do
         visit_gantt

Project

General

Profile

Redmine

Feature #44608 » 0002-Auto-fit-Gantt-column-widths.patch