0003-Support-expand-collapse-with-svg-icons.patch - Redmine

     # frozen_string_literal: true
     # Redmine - project management software
     # Copyright (C) 2006-2022  Jean-Philippe Lang
+    #
     # This program is free software; you can redistribute it and/or
     # modify it under the terms of the GNU General Public License
     # as published by the Free Software Foundation; either version 2
     # of the License, or (at your option) any later version.
+    #
     # This program is distributed in the hope that it will be useful,
     # but WITHOUT ANY WARRANTY; without even the implied warranty of
     # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     # GNU General Public License for more details.
+    #
     # You should have received a copy of the GNU General Public License
     # along with this program; if not, write to the Free Software
     # Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     class IconSetsController < ApplicationController
       def show
         icons = fetch(params[:id])
         if icons.present?
           render :json => icons, :content_type => 'application/json'
         else
           render_404
         end
       end
       private
       def fetch(name)
         IconSet.fetch(name)
       end
     end

     <div id="query_form_with_buttons" class="hide-when-print">
     <div id="query_form_content">
       <fieldset id="filters" class="collapsible <%= @query.new_record? ? "" : "collapsed" %>">
         <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>"><%= l(:label_filter_plural) %></legend>
         <%= tag.legend l(:label_filter_plural), onclick: "toggleFieldset(this);", class: collapsible(@query.new_record?) %>
         <div style="<%= @query.new_record? ? "" : "display: none;" %>">
           <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
         </div>

     <div id="query_form_with_buttons" class="hide-when-print">
     <div id="query_form_content">
       <fieldset id="filters" class="collapsible <%= @query.new_record? ? "" : "collapsed" %>">
         <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>"><%= l(:label_filter_plural) %></legend>
         <%= tag.legend l(:label_filter_plural), onclick: 'toggleFieldset(this);', class: collapsible(@query.new_record?) %>
         <div style="<%= @query.new_record? ? "" : "display: none;" %>">
           <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
         </div>
       </fieldset>
       <fieldset id="options" class="collapsible collapsed">
         <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
         <%= tag.legend l(:label_options), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
         <div style="display: none;">
           <table>
             <tr>

     </fieldset>
     <fieldset class="box tabular collapsible collapsed">
       <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_relations_mapping) %></legend>
       <%= tag.legend l(:label_relations_mapping), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
       <div id="relations-mapping" style="display: none;">
         <%= render :partial => 'issues_relations_mapping' %>
       </div>

         <% reset_cycle %>
         <tr class="group open">
           <td colspan="<%= query.inline_columns.size + 2 %>">
             <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
             <%= expander %>
             <span class="name"><%= group_name %></span> <span class="badge badge-count count"><%= group_count %></span> <span class="totals"><%= group_totals %></span>
             <%= link_to_function("#{l(:button_collapse_all)}/#{l(:button_expand_all)}",
                                  "toggleAllRowGroups(this)", :class => 'toggle-all') %>

app/views/layouts/base.html.erb
14	14	<%= javascript_heads %>
15	15	<%= heads_for_theme %>
16	16	<%= heads_for_auto_complete(@project) %>
	17	<%= preload_icon_link('common') %>
17	18	<%= call_hook :view_layouts_base_html_head %>
18	19	<!-- page specific tags -->
19	20	<%= yield :header_tags -%>

         <% reset_cycle %>
         <tr class="group open">
           <td colspan="<%= @query.inline_columns.size %>">
             <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
             <%= expander %>
             <span class="name"><%= group_name %></span>
             <% if group_count %>
             <span class="count"><%= group_count %></span>

     <div id="query_form_with_buttons" class="hide-when-print">
     <div id="query_form_content">
       <fieldset id="filters" class="collapsible <%= @query.new_record? ? "" : "collapsed" %>">
         <legend onclick="toggleFieldset(this);" class="icon icon-<%= @query.new_record? ? "expanded" : "collapsed" %>"><%= l(:label_filter_plural) %></legend>
         <%= content_tag('legend', l(:label_filter_plural), :onclick => "toggleFieldset(this);", :class => collapsible(@query.new_record?)) %>
         <div style="<%= @query.new_record? ? "" : "display: none;" %>">
           <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
         </div>
-...
       <% if @query.available_columns.any? %>
         <fieldset id="options" class="collapsible collapsed">
           <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
           <%= tag.legend l(:label_options), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
             <div class="hidden">
               <% if @query.available_display_types.size > 1 %>
               <div>

     <td style="padding-left: <%=18 * depth%>px;" class="<%=
                @repository.report_last_commit ? "filename" : "filename_no_report" %>">
     <% if entry.is_dir? %>
     <span class="expander icon icon-collapsed" onclick="scmEntryClick('<%= tr_id %>', '<%= escape_javascript(url_for(
                            :action => 'show',
                            :id     => @project,
                            :repository_id => @repository.identifier_param,
                            :path   => to_path_param(ent_path),
                            :rev    => @rev,
                            :depth  => (depth + 1),
                            :parent_id => tr_id)) %>');">&nbsp;</span>
     <% url =  url_for(:action => 'show',
                       :id     => @project,
                       :repository_id => @repository.identifier_param,
                       :path   => to_path_param(ent_path),
                       :rev    => @rev,
                       :depth  => (depth + 1),
                       :parent_id => tr_id) %>
     <%= tag.span '&nbsp;', class: 'expander icon icon-collapsed', onclick: "scmEntryClick('#{tr_id}', '#{escape_javascript(url)}')" %>
     <% end %>
     <%=  link_to ent_name,
               {:action => (entry.is_dir? ? 'show' : 'entry'), :id => @project, :repository_id => @repository.identifier_param, :path => to_path_param(ent_path), :rev => @rev},

     <div class="hide-when-print">
       <fieldset id="filters" class="collapsible collapsed">
         <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_filter_plural) %></legend>
         <%= tag.legend l(:label_filter_plural), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
         <div style="display: none;">
           <%= form_tag({}, :method => :get) do %>
             <fieldset>
-...
         <% unless mod.blank? %>
             <tr class="group open">
               <td>
                 <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
                 <%= expander %>
                 <%= l_or_humanize(mod, :prefix => 'project_module_') %>
               </td>
               <% @roles.each do |role| %>

     </fieldset>
     <fieldset class="collapsible collapsed">
       <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
       <%= tag.legend l(:label_options), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
       <div id="options-content" style="display:none;">
         <p><label><%= check_box_tag 'open_issues', 1, @open_issues %> <%= l(:label_search_open_issues_only) %></label></p>
         <p>

         <% reset_cycle %>
         <tr class="group open">
           <td colspan="<%= @query.inline_columns.size + 2 %>">
             <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
             <%= expander %>
             <span class="name"><%= group_name %></span>
             <% if group_count %>
             <span class="badge badge-count count"><%= group_count %></span>

         <tbody>
           <tr class="group open">
             <td colspan="<%= @trackers.size + 1 %>">
               <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
               <%= expander %>
               <%= l(:field_core_fields) %>
             </td>
           </tr>
-...
           <% if @custom_fields.any? %>
             <tr class="group open">
               <td colspan="<%= @trackers.size + 1 %>">
                 <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
                 <%= expander %>
                 <%= l(:label_custom_field_plural) %>
               </td>
             </tr>

     <%= render(:partial => "wiki/content", :locals => {:content => @content}) %>
     <fieldset class="collapsible collapsed hide-when-print">
       <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_attachment_plural) %> (<%= @page.attachments.length %>)</legend>
       <%= tag.legend "#{l(:label_attachment_plural)} (#{@page.attachments.length})", onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
       <div style="display: none;">
       <%= link_to_attachments @page, :thumbnails => true %>

           <%= render :partial => 'form', :locals => {:name => 'always', :workflows => @workflows['always']} %>
           <fieldset class="collapsible" style="padding: 0; margin-top: 0.5em;">
             <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_additional_workflow_transitions_for_author) %></legend>
             <%= tag.legend l(:label_additional_workflow_transitions_for_author), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
             <div id="author_workflows" style="margin: 0.5em 0 0.5em 0;">
               <%= render :partial => 'form', :locals => {:name => 'author', :workflows => @workflows['author']} %>
             </div>
-...
           <%= javascript_tag "hideFieldset($('#author_workflows'))" unless @workflows['author'].present? %>
           <fieldset class="collapsible" style="padding: 0;">
             <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_additional_workflow_transitions_for_assignee) %></legend>
             <%= tag.legend l(:label_additional_workflow_transitions_for_assignee), onclick: 'toggleFieldset(this);', class: 'icon icon-collapsed' %>
             <div id="assignee_workflows" style="margin: 0.5em 0 0.5em 0;">
           <%= render :partial => 'form', :locals => {:name => 'assignee', :workflows => @workflows['assignee']} %>
             </div>

         <tbody>
           <tr class="group open">
             <td colspan="<%= @statuses.size + 1 %>">
               <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
               <%= expander %>
               <%= l(:field_core_fields) %>
             </td>
           </tr>
-...
           <% if @custom_fields.any? %>
             <tr class="group open">
               <td colspan="<%= @statuses.size + 1 %>">
                 <span class="expander icon icon-expanded" onclick="toggleRowGroup(this);">&nbsp;</span>
                 <%= expander %>
                 <%= l(:label_custom_field_plural) %>
               </td>
             </tr>

       get 'robots', :to => 'welcome#robots'
       # SVG icons map
       resources :icon_sets, id: '/^[a-z]+$/', only: [:show], defaults: { :format => :json }
       Dir.glob File.expand_path("#{Redmine::Plugin.directory}/*") do |plugin_dir|
         file = File.join(plugin_dir, "config/routes.rb")
         if File.exist?(file)

       $('html, body').animate({scrollTop: $('#'+id).offset().top}, 100);
+    }
     /**
+     *
      * @param {HTMLElement} elem
      */
     function addSVGIcon(elem, iconClass) {
       if (rm.icons && rm.icons.common) {
         const data = rm.icons.common;
         const svg = createSVGIcon(data[iconClass]);
         elem.insertBefore(svg, elem.firstChild);
+      }
+    }
     /**
+     *
      * @param {HTMLElement} elem
      */
     function removeSVGIcon(elem) {
       const icon = elem.getElementsByTagName('svg')[0]
       if (icon) {
         elem.removeChild(icon);
+      }
+    }
     /**
+     *
      * @param {string} iconUrl
      * @returns HTMLElement
      */
     function createSVGIcon(iconUrl) {
       const xmlns = "http://www.w3.org/2000/svg";
       const svg = document.createElementNS(xmlns, 'svg');
       const use = document.createElementNS(xmlns, 'use');
       use.setAttribute('href', `${iconUrl}#icon`);
       svg.appendChild(use);
       svg.setAttribute('xmlns', xmlns)
       svg.classList.add('s16');
       return svg
+    }
     /**
+     *
      * @param {Array<HTMLElement>} elems
      * @param {string} from
      * @param {string} to
      */
     function switchClass(elems, from, to) {
       elems.forEach(function(e) {
         e.classList.remove(from);
         removeSVGIcon(e);
         e.classList.add(to);
         addSVGIcon(e, to)
       })
+    }
     /**
+     *
      * @param {Array<HTMLElement>} elems
      * @param {string} class1
      * @param {string} class2
      */
     function toggleClass(elems, class1, class2) {
       const _elems = Array.isArray(elems) ? elems : [elems];
       _elems.forEach(function(e) {
         removeSVGIcon(e);
         if (e.classList.contains(class1)) {
           e.classList.remove(class1);
           e.classList.add(class2);
           addSVGIcon(e, class2);
         } else if (e.classList.contains(class2)) {
           e.classList.remove(class2);
           e.classList.add(class1);
           addSVGIcon(e, class1);
+        }
       })
+    }
     function toggleRowGroup(el) {
       var tr = $(el).parents('tr').first();
       var n = tr.next();
       tr.toggleClass('open');
       $(el).toggleClass('icon-expanded icon-collapsed');
       toggleClass(el, 'icon-expanded', 'icon-collapsed');
       while (n.length && !n.hasClass('group')) {
         n.toggle();
         n = n.next('tr');
-...
       tbody.children('tr').each(function(index) {
         if ($(this).hasClass('group')) {
           $(this).removeClass('open');
           $(this).find('.expander').switchClass('icon-expanded', 'icon-collapsed');
           switchClass($(this).find('.expander').get(), 'icon-expanded', 'icon-collapsed');
         } else {
           $(this).hide();
+        }
-...
       tbody.children('tr').each(function(index) {
         if ($(this).hasClass('group')) {
           $(this).addClass('open');
           $(this).find('.expander').switchClass('icon-collapsed', 'icon-expanded');
           switchClass($(this).find('.expander').get(), 'icon-collapsed', 'icon-expanded');
         } else {
           $(this).show();
+        }
-...
     function toggleFieldset(el) {
       var fieldset = $(el).parents('fieldset').first();
       fieldset.toggleClass('collapsed');
       fieldset.children('legend').toggleClass('icon-expanded icon-collapsed');
       toggleClass(fieldset.children('legend').get(), 'icon-expanded', 'icon-collapsed');
       fieldset.children('div').toggle();
+    }
-...
         var el = $('#'+id);
         if (el.hasClass('open')) {
             collapseScmEntry(id);
             el.find('.expander').switchClass('icon-expanded', 'icon-collapsed');
             switchClass(el.find('.expander').get(), 'icon-expanded', 'icon-collapsed');
             el.addClass('collapsed');
             return false;
         } else if (el.hasClass('loaded')) {
             expandScmEntry(id);
             el.find('.expander').switchClass('icon-collapsed', 'icon-expanded');
             switchClass(el.find('.expander').get(), 'icon-collapsed', 'icon-expanded');
             el.removeClass('collapsed');
             return false;
+        }
-...
           success: function(data) {
             el.after(data);
             el.addClass('open').addClass('loaded').removeClass('loading');
             el.find('.expander').switchClass('icon-collapsed', 'icon-expanded');
             switchClass(el.find('.expander').get(), 'icon-collapsed', 'icon-expanded');
+          }
         });
         return true;
-...
         tribute.attach(element);
+    }
     $(document).ready(setupAjaxIndicator);
     $(document).ready(hideOnLoad);
     $(document).ready(addFormObserversForDoubleSubmit);
-...
     $(document).on('focus', '[data-auto-complete=true]', function(event) {
       inlineAutoComplete(event.target);
     });
     window.addEventListener('DOMContentLoaded', function(event) {
       const common_icon_path = document.getElementById('common_icon_path');
       if (common_icon_path !== null) {
         const url = common_icon_path.getAttribute('href');
         fetch(url, {
           method: 'GET'
         })
         .then(function(response){
           response.json().then(function(data) {
             rm.icons = rm.icons || {}
             rm.icons.common = data;
           })
         });
+      }
     });

Project

General

Profile

Redmine

Patch #23980 » 0003-Support-expand-collapse-with-svg-icons.patch