Redmine

div#gantt_area .context-menu-selection { background-color: rgba(var(--oc-blue-7-rgb), 0.4) !important; }

div#gantt_area .context-menu-selection:hover { background-color: rgba(var(--oc-blue-7-rgb), 0.4) !important; }

div#gantt_area .context-menu-selection a { color: var(--oc-blue-9) !important; }

.gantt_subjects div > span.expander {

.gantt_subjects .avatar {

.gantt_subjects div.project-name a,

.gantt_subjects div.version-name a {

.gantt_subjects_column,

.gantt_selected_column {

.gantt_subjects_container {

.gantt-pane-header {

.gantt-selected-column-header {

.gantt-timeline-header {

.gantt-period-day,

.gantt-period-day-number {

.gantt_subjects,

.gantt_selected_column_content {

  position: relative;

  block-size: 100%;

  font-size: 0.8em;

}

.gantt_subjects form,

.gantt_selected_column_content,

.gantt-subject-row {

  inline-size: var(--gantt-row-width);

.gantt-column-row {

.gantt_subjects div.issue-subject:hover {

.gantt-timeline-row {

#today_line {

#gantt_draw_area {

.gantt_watcher_users_column div.issue_watcher_users ul {

.gantt_watcher_users_column div.issue_watcher_users ul li {

.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::after {

.task {

  inset-block-start: var(--gantt-row-top);

  inset-block-start: var(--gantt-row-top);

.gantt-row > :is(.task, .tooltip) {

  inset-block-start: 0;

}

.task.label {

.task.label.project,

.task.label.version {

.task_late {

.task_done {

.task_todo {

.task_todo.parent {

.task_late.parent,

.task_done.parent {

.task.parent.marker.starting,

.task.parent.marker.ending {

.version.task_late {

.version.task_done {

.version.task_todo {

.version.marker {

.project.task_late {

.project.task_done {

.project.task_todo {

.project.marker {

[dir="rtl"] :is(.marker, .task.parent.marker) {

  .gantt_subjects_column {

  .gantt_subjects_container {

    options[:data] = {

      'gantt--column-column-value': column_name

    }

    options[:class] = ["gantt_#{column_name}_column", options[:class]]

  def gantt_subjects_tag(&)

    data_attributes = {

      controller: 'gantt--subjects',

      action: 'gantt--column:resize-column-subjects@document->gantt--subjects#handleResizeColumn'

    }

    tag.div(class: "gantt_subjects", data: data_attributes, &)

  end

  static targets = ["ganttArea", "drawArea", "subjectsContainer"]

    const width = Math.ceil(this.$(this.drawAreaTarget).width() || 0)

    const height = Math.ceil(this.$(this.drawAreaTarget).height() || 0)

      this.drawAreaTarget.appendChild(this.#drawPaper)

    const $drawArea = this.$(this.drawAreaTarget)

    const selectedColumns = this.element.querySelectorAll(".gantt_selected_column")

    const $subjectsContainer = this.$(".gantt_subjects_container")

        selectedColumns.forEach((element) => { element.hidden = true })

        $subjectsContainer.addClass("draw_selected_columns")

        selectedColumns.forEach((element) => { element.hidden = false })

      selectedColumns.forEach((element) => { element.hidden = true })

      $subjectsContainer.removeClass("draw_selected_columns")

    this.$("div.task_todo[data-rels]").each((_, element) => {

      const elementId = $element.attr("id")

      if (!elementId) return

      const issueId = elementId.replace("task-todo-issue-", "")

      const dataRels = $element.data("rels") || {}

      const issueFrom = this.$(`#task-todo-issue-${relation.issue_from}`)

      const issueTo = this.$(`#task-todo-issue-${relation.issue_to}`)

    const todayLeft = this.$("#today_line").position().left

    this.$("div.issue-subject, div.version-name").each((_, element) => {

        const issueDone = this.$(`#task-done-${$element.attr("id")}`)

          const issueTodo = this.$(`#task-todo-${$element.attr("id")}`)

    if (this.$("#today_line").length === 0) return

    const color = this.$("#today_line").css("border-inline-start-color") || "#ff0000"

    column: String,

    this.#dispatchResizeColumn()

    this.#dispatchResizeColumn()

    this.#$element

      .resizable(options)

      .on("resize", (event) => {

        event.stopPropagation()

        this.#dispatchResizeColumn()

      })

  }

  #dispatchResizeColumn() {

    if (!this.#$element) return

    this.dispatch(`resize-column-${this.columnValue}`, { detail: { width: this.#$element.width() } })

  initialize() {

    this.$ = window.jQuery

  }

  handleResizeColumn(event) {

    const columnWidth = event.detail.width;

    this.$(".issue-subject, .project-name, .version-name").each((_, element) => {

      const $element = this.$(element)

      $element.width(columnWidth - $element.position().left)

    })

  }

    const iconExpander = event.currentTarget

    const $subject = this.$(iconExpander.parentElement)

    const subjectInlineStart =

      this.#readInlineStart($subject) + parseInt(iconExpander.offsetWidth, 10)

    let targetShown = null

    let targetTop = 0

    let totalHeight = 0

    let outOfHierarchy = false

    const willOpen = !$subject.hasClass("open")

    this.#setIconState($subject, willOpen)

    $subject.nextAll("div").each((_, element) => {

      const $element = this.$(element)

      const json = $element.data("collapse-expand")

      const numberOfRows = $element.data("number-of-rows")

      const barsSelector = `#gantt_area .gantt-timeline-body form > div[data-collapse-expand='${json.obj_id}'][data-number-of-rows='${numberOfRows}']`

      const selectedColumnsSelector = `.gantt_selected_column div[data-collapse-expand='${json.obj_id}'][data-number-of-rows='${numberOfRows}']`

      if (outOfHierarchy || this.#readInlineStart($element) <= subjectInlineStart) {

        outOfHierarchy = true

        if (targetShown === null) return false

        const newTopVal = this.#readBlockStart($element) + totalHeight * (targetShown ? -1 : 1)

        this.#setBlockStart($element, newTopVal)

        this.$([barsSelector, selectedColumnsSelector].join()).each((__, el) => {

          this.#setBlockStart(this.$(el), newTopVal)

        })

        return true

      }

      const isShown = $element.is(":visible")

      if (targetShown === null) {

        targetShown = isShown

        targetTop = this.#readBlockStart($element)

        totalHeight = 0

      }

      if (isShown === targetShown) {

        this.$(barsSelector).each((__, task) => {

          const $task = this.$(task)

          if (!isShown && willOpen) {

            this.#setBlockStart($task, targetTop + totalHeight)

          }

          if (!$task.hasClass("tooltip")) {

            $task.toggle(willOpen)

          }

        })

        this.$(selectedColumnsSelector).each((__, attr) => {

          const $attr = this.$(attr)

          if (!isShown && willOpen) {

            this.#setBlockStart($attr, targetTop + totalHeight)

          }

          $attr.toggle(willOpen)

        })

        if (!isShown && willOpen) {

          this.#setBlockStart($element, targetTop + totalHeight)

        }

        this.#setIconState($element, willOpen)

        $element.toggle(willOpen)

        totalHeight += parseInt(json.top_increment, 10)

      }

  #readInlineStart(el) {

    const node = el.jquery ? el[0] : el

    return parseFloat(window.getComputedStyle(node).getPropertyValue("inset-inline-start"))

  }

  #readBlockStart(el) {

    const node = el.jquery ? el[0] : el

    return parseFloat(window.getComputedStyle(node).getPropertyValue("inset-block-start"))

  #setBlockStart(el, value) {

    const node = el.jquery ? el[0] : el

    const px = typeof value === "number" ? `${value}px` : value

    node.style.setProperty("--gantt-row-top", px)

    const $element = element.jquery ? element : this.$(element)

    const expander = $element.find(".expander")

    if (open) {

      $element.addClass("open")

      if (expander.length > 0) {

        expander.removeClass("icon-collapsed").addClass("icon-expanded")

        if (expander.find("svg").length === 1) {

          window.updateSVGIcon(expander[0], "angle-down")

        }

      }

    } else {

      $element.removeClass("open")

      if (expander.length > 0) {

        expander.removeClass("icon-expanded").addClass("icon-collapsed")

        if (expander.find("svg").length === 1) {

          window.updateSVGIcon(expander[0], "angle-right")

        }

      }

    <section class="gantt-pane gantt_subjects_container<%= ' draw_selected_columns' if query.draw_selected_columns %>"

             data-gantt--chart-target="subjectsContainer">

      <header class="gantt-pane-header" aria-hidden="true"></header>

      <div class="gantt-pane-body">

        <%= gantt_subjects_tag do %>

          <%= form_tag({}, data: {cm_url: issues_context_menu_path}) do %>

            <%= hidden_field_tag 'back_url', url_for(params: request.query_parameters), id: nil %>

            <%= gantt.subjects.html_safe %>

          <% end %>

    <%= gantt_column_tag(column_name, min_width: 20, width: '50px', id: column_name,

                         class: 'gantt_selected_column', hidden: !query.draw_selected_columns) do %>

      <section class="gantt-pane gantt_selected_column_container gantt_<%= column_name %>_container">

        <header class="gantt-pane-header gantt-selected-column-header"><%= column.caption %></header>

        <div class="gantt-pane-body gantt_selected_column_content gantt_<%= column_name %>">

  <div id="gantt_area" class="gantt-timeline" data-gantt--chart-target="ganttArea">

      <header class="gantt-timeline-header">

        <div class="gantt-header-row gantt-header-months">

            <div class="gantt-period gantt-period-month<%= ' gantt-period-spans-body' if period.spans_body %><%= ' gantt-period-last' if period.last %>"

          <div class="gantt-header-row gantt-header-weeks">

              <div class="gantt-period gantt-period-week<%= ' gantt-period-spans-body' if period.spans_body %><%= ' gantt-period-last' if period.last %>"

          <div class="gantt-header-row gantt-header-day-numbers">

              <div class="gantt-period gantt-period-day-number<%= ' gantt-period-non-working' if period.non_working %><%= ' gantt-period-last' if period.last %>"

          <div class="gantt-header-row gantt-header-days">

              <div class="gantt-period gantt-period-day gantt-period-spans-body<%= ' gantt-period-non-working' if period.non_working %><%= ' gantt-period-last' if period.last %>"

          <div id="today_line" style="<%= gantt_css_variables('gantt-today-start': "#{layout.today_start}px") %>" aria-hidden="true"></div>

        <div id="gantt_draw_area" data-gantt--chart-target="drawArea" aria-hidden="true"></div>

            render_project(project, options)

      def render_project(project, options={})

        render_object_row(project, options)

          render_issues(issues, options)

        render_object_row(version, options)

          render_issues(issues, options)

      def render_issues(issues, options={})

          render_object_row(issue, options)

      def render_object_row(object, options)

        send(:"subject_for_#{class_name}", object, options) unless options[:only] == :lines || options[:only] == :selected_columns

          @lines << html_gantt_row(object, options, line) if options[:format] == :html

        column_content_for_object(object, options) if options[:only] == :selected_columns && options[:column].present?

      def column_content_for_object(object, options)

          data_options = {

            :collapse_expand => "#{object.class}-#{object.id}".downcase,

            :number_of_rows => number_of_rows

          }

              :class => [

                "gantt-row",

                "gantt-column-row",

                ("issue_#{options[:column].name}" if object.is_a?(Issue))

              ],

              :id => ("#{options[:column].name}_issue_#{object.id}" if object.is_a?(Issue)),

              :data => data_options

        column_content_for_object(issue, options)

        tag_options = {}

          tag_options[:id] = "issue-#{object.id}"

          tag_options[:class] = "issue-subject hascontextmenu"

          tag_options[:id] = "version-#{object.id}"

          tag_options[:class] = "version-name"

          tag_options[:class] = "project-name"

        if object

          tag_options[:data] = {

            :collapse_expand => {

              :top_increment => params[:top_increment],

              :obj_id => "#{object.class}-#{object.id}".downcase,

            },

            :number_of_rows => number_of_rows,

          }

        end

          tag_options[:class] += ' open'

        tag_options[:class] = [tag_options[:class], 'gantt-row', 'gantt-subject-row'].compact.join(' ')

        if params[:subject_width]

          row_variables['gantt-row-width'] = "#{params[:subject_width] - params[:indent]}px"

        end

        data_options = {}

        if object

          data_options[:collapse_expand] = "#{object.class}-#{object.id}".downcase

          data_options[:number_of_rows] = number_of_rows

        end

        css = "task " +

          case object

          when Project

            "project"

          when Version

            "version"

          when Issue

            object.leaf? ? 'leaf' : 'parent'

          else

            ""

          end

          html_id = "task-todo-issue-#{object.id}" if object.is_a?(Issue)

          html_id = "task-todo-version-#{object.id}" if object.is_a?(Version)

          content_opt = {:style => style,

                         :class => "#{css} task_todo",

                         :id => html_id,

                         :data => {}}

            if rels.present?

              content_opt[:data] = {"rels" => rels.to_json}

            end

          content_opt[:data].merge!(data_options)

                                       :class => "#{css} task_late",

                                       :data => data_options)

            html_id = "task-done-issue-#{object.id}" if object.is_a?(Issue)

            html_id = "task-done-version-#{object.id}" if object.is_a?(Version)

                                       :class => "#{css} task_done",

                                       :id => html_id,

                                       :data => data_options)

                                       :class => "#{css} marker starting",

                                       :data => data_options)

                                       :class => "#{css} marker ending",

                                       :data => data_options)

                                     :class => "#{css} label",

                                     :data => data_options)

                               :class => "tip")

                                     :class => "tooltip hascontextmenu",

                                     :data => data_options)

      def html_gantt_row(object, params, content)

        data_options = {

          :collapse_expand => "#{object.class}-#{object.id}".downcase,

          :number_of_rows => number_of_rows

        }

          :class => 'gantt-row gantt-timeline-row',

          :data => data_options

    assert_select 'div.issue-subject.hascontextmenu'

    assert_select 'div.task_todo[id=?][data-rels*=?]', "task-todo-issue-#{issue1.id}", issue2.id.to_s

    assert_select 'div.task_todo[id=?]:not([data-rels])', "task-todo-issue-#{issue2.id}"

      assert_select 'div.gantt-period-month>a', :text => /^[\d-]+$/, :count => 40

      assert_select 'div.gantt-period-month>a', :text => /^[\d-]+$/, :count => 6

    assert_subject_row('div.project-name', row: '0', text: project.name)

    assert_chart_row('div.task.project.task_todo', row: '0', style_substring: 'inset-inline-start:0px;width:138px')

    assert_chart_row('div.task.leaf.task_todo', row: '1', style_substring: 'inset-inline-start:0px;width:38px')

    assert_chart_row('div.task.leaf.task_todo', row: '2', style_substring: 'inset-inline-start:16px;width:42px')

    assert_chart_row('div.task.leaf.task_todo', row: '3', style_substring: 'inset-inline-start:52px;width:46px')

    assert_subject_row('div#version-2', row: '4', text: '1.0')

    assert_chart_row('div.task.version', row: '4', style_substring: 'inset-inline-start:48px;width:90px')

    assert_chart_row('div.task.leaf.task_todo', row: '5', style_substring: 'inset-inline-start:48px;width:90px')

      'div.project-name[data-collapse-expand*="project-5"]',

    assert_chart_row('div.task.project.task_todo', row: '6', style_substring: 'inset-inline-start:56px;width:6px')

    assert_chart_row('div.task.leaf.task_todo', row: '7', style_substring: 'inset-inline-start:56px;width:6px')

    assert_chart_row('div.task.leaf.task_todo', row: '8', style_substring: 'inset-inline-start:56px;width:6px')

    assert_chart_row('div.task.leaf.task_todo', row: '9', style_substring: 'inset-inline-start:56px;width:6px')

    assert_select 'div.task[id=?][data-rels*=9]', 'task-todo-issue-10'

      'div.project-name[data-collapse-expand*="project-3"]',

      assert_select 'div.gantt-period-month > a', text: "#{m.year}-#{m.month}"

    assert_subject_row('div.project-name', row: '0', text: projects(:projects_001).name)

    assert_chart_row('div.task.project.task_todo', row: '0', style_substring: 'inset-inline-start:0px;width:258px')

      'div.project-name[data-collapse-expand*="project-5"]',

    assert_chart_row('div.task.project.task_todo', row: '1', style_substring: 'inset-inline-start:176px;width:6px')

    assert_chart_row('div.task.leaf.task_todo', row: '2', style_substring: 'inset-inline-start:176px;width:6px')

    assert_chart_row('div.task.leaf.task_todo', row: '3', style_substring: 'inset-inline-start:176px;width:6px')

    assert_chart_row('div.task.leaf.task_todo', row: '4', style_substring: 'inset-inline-start:176px;width:6px')

    assert_select 'div.task[id=?][data-rels*=9]', 'task-todo-issue-10'

      assert_select 'div.gantt-period-month > a', text: "#{m.year}-#{m.month}"

  def assert_subject_row(selector, row:, text:)

    assert_select "div.gantt_subjects form #{selector}[data-number-of-rows=?]", row do

    selector = "div.gantt_subjects form div#issue-#{issue_id}[data-number-of-rows=\"#{row}\"]"

    assert_select selector do

    matcher = "#gantt_area #{selector}[data-number-of-rows=?][style*=?]"

    assert_select matcher, row, style_substring, minimum: 1

    assert_no_selector 'div#status'

    assert_no_selector 'div#priority'

    assert_no_selector 'div#assigned_to'

    assert_no_selector 'div#updated_on'

    assert_selector '.gantt_subjects_container.draw_selected_columns'

    assert_selector 'div#status'

    assert_selector 'div#priority'

    assert_selector 'div#assigned_to'

    assert_selector 'div#updated_on'