From 5a76aeee7fdff496330147a0eba9d6ccc3973ad7 Mon Sep 17 00:00:00 2001
From: tohosaku <tohosaku@users.osdn.me>
Date: Sun, 20 Mar 2022 03:15:06 +0000
Subject: [PATCH 3/5] Support expand/collapse with svg icons

---
 app/controllers/icon_sets_controller.rb       |  35 ++++++
 app/views/calendars/show.html.erb             |   2 +-
 app/views/gantts/show.html.erb                |   4 +-
 app/views/imports/_issues_mapping.html.erb    |   2 +-
 app/views/issues/_list.html.erb               |   2 +-
 app/views/layouts/base.html.erb               |   1 +
 app/views/projects/_list.html.erb             |   2 +-
 app/views/queries/_query_form.html.erb        |   4 +-
 .../repositories/_dir_list_content.html.erb   |  16 +--
 app/views/roles/permissions.html.erb          |   4 +-
 app/views/search/index.html.erb               |   2 +-
 app/views/timelog/_list.html.erb              |   2 +-
 app/views/trackers/fields.html.erb            |   4 +-
 app/views/wiki/show.html.erb                  |   2 +-
 app/views/workflows/edit.html.erb             |   4 +-
 app/views/workflows/permissions.html.erb      |   4 +-
 config/routes.rb                              |   3 +
 public/javascripts/application.js             | 107 ++++++++++++++++--
 18 files changed, 165 insertions(+), 35 deletions(-)
 create mode 100644 app/controllers/icon_sets_controller.rb

diff --git a/app/controllers/icon_sets_controller.rb b/app/controllers/icon_sets_controller.rb
new file mode 100644
index 000000000..f2a1efa55
--- /dev/null
+++ b/app/controllers/icon_sets_controller.rb
@@ -0,0 +1,35 @@
+# 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
diff --git a/app/views/calendars/show.html.erb b/app/views/calendars/show.html.erb
index 76513f50e..a95cd6f2e 100644
--- a/app/views/calendars/show.html.erb
+++ b/app/views/calendars/show.html.erb
@@ -8,7 +8,7 @@
 <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>
diff --git a/app/views/gantts/show.html.erb b/app/views/gantts/show.html.erb
index e3bfa02ae..442fc71ea 100644
--- a/app/views/gantts/show.html.erb
+++ b/app/views/gantts/show.html.erb
@@ -14,14 +14,14 @@
 <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>
diff --git a/app/views/imports/_issues_mapping.html.erb b/app/views/imports/_issues_mapping.html.erb
index e1f01881e..402922b3f 100644
--- a/app/views/imports/_issues_mapping.html.erb
+++ b/app/views/imports/_issues_mapping.html.erb
@@ -6,7 +6,7 @@
 </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>
diff --git a/app/views/issues/_list.html.erb b/app/views/issues/_list.html.erb
index 2dd09d692..84715910a 100644
--- a/app/views/issues/_list.html.erb
+++ b/app/views/issues/_list.html.erb
@@ -24,7 +24,7 @@
     <% 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') %>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index a7ca52c22..8b0575f02 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -14,6 +14,7 @@
 <%= javascript_heads %>
 <%= heads_for_theme %>
 <%= heads_for_auto_complete(@project) %>
+<%= preload_icon_link('common') %>
 <%= call_hook :view_layouts_base_html_head %>
 <!-- page specific tags -->
 <%= yield :header_tags -%>
diff --git a/app/views/projects/_list.html.erb b/app/views/projects/_list.html.erb
index 0abbc59e0..4a39dc350 100644
--- a/app/views/projects/_list.html.erb
+++ b/app/views/projects/_list.html.erb
@@ -14,7 +14,7 @@
     <% 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>
diff --git a/app/views/queries/_query_form.html.erb b/app/views/queries/_query_form.html.erb
index 9f1f9ea7e..804898ce6 100644
--- a/app/views/queries/_query_form.html.erb
+++ b/app/views/queries/_query_form.html.erb
@@ -5,7 +5,7 @@
 <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>
@@ -13,7 +13,7 @@
 
   <% 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>
diff --git a/app/views/repositories/_dir_list_content.html.erb b/app/views/repositories/_dir_list_content.html.erb
index ee68c1b7a..cd50c36ab 100644
--- a/app/views/repositories/_dir_list_content.html.erb
+++ b/app/views/repositories/_dir_list_content.html.erb
@@ -7,14 +7,14 @@
 <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},
diff --git a/app/views/roles/permissions.html.erb b/app/views/roles/permissions.html.erb
index d91dd933d..ddd28b15f 100644
--- a/app/views/roles/permissions.html.erb
+++ b/app/views/roles/permissions.html.erb
@@ -2,7 +2,7 @@
 
 <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>
@@ -49,7 +49,7 @@
     <% 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| %>
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index caaa3f35c..a9eb6cce1 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -24,7 +24,7 @@
 </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>
diff --git a/app/views/timelog/_list.html.erb b/app/views/timelog/_list.html.erb
index 62e221f59..26eb9a0e5 100644
--- a/app/views/timelog/_list.html.erb
+++ b/app/views/timelog/_list.html.erb
@@ -20,7 +20,7 @@
     <% 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>
diff --git a/app/views/trackers/fields.html.erb b/app/views/trackers/fields.html.erb
index a9fe49351..cb342fb81 100644
--- a/app/views/trackers/fields.html.erb
+++ b/app/views/trackers/fields.html.erb
@@ -20,7 +20,7 @@
     <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>
@@ -44,7 +44,7 @@
       <% 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>
diff --git a/app/views/wiki/show.html.erb b/app/views/wiki/show.html.erb
index 6a0245809..40cc5554f 100644
--- a/app/views/wiki/show.html.erb
+++ b/app/views/wiki/show.html.erb
@@ -62,7 +62,7 @@
 <%= 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 %>
diff --git a/app/views/workflows/edit.html.erb b/app/views/workflows/edit.html.erb
index df4507be2..43160d3ef 100644
--- a/app/views/workflows/edit.html.erb
+++ b/app/views/workflows/edit.html.erb
@@ -40,7 +40,7 @@
       <%= 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>
@@ -48,7 +48,7 @@
       <%= 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>
diff --git a/app/views/workflows/permissions.html.erb b/app/views/workflows/permissions.html.erb
index c366a7838..b72010fbf 100644
--- a/app/views/workflows/permissions.html.erb
+++ b/app/views/workflows/permissions.html.erb
@@ -54,7 +54,7 @@
     <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>
@@ -74,7 +74,7 @@
       <% 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>
diff --git a/config/routes.rb b/config/routes.rb
index 5cb0055e5..1887e9800 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -395,6 +395,9 @@ Rails.application.routes.draw do
 
   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)
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 91da19229..f9845ebb8 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -27,11 +27,87 @@ function showAndScrollTo(id, focus) {
   $('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');
@@ -43,7 +119,7 @@ function collapseAllRowGroups(el) {
   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();
     }
@@ -55,7 +131,7 @@ function expandAllRowGroups(el) {
   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();
     }
@@ -74,7 +150,7 @@ function toggleAllRowGroups(el) {
 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();
 }
 
@@ -550,12 +626,12 @@ function scmEntryClick(id, url) {
     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;
     }
@@ -568,7 +644,7 @@ function scmEntryClick(id, url) {
       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;
@@ -1219,7 +1295,6 @@ function inlineAutoComplete(element) {
     tribute.attach(element);
 }
 
-
 $(document).ready(setupAjaxIndicator);
 $(document).ready(hideOnLoad);
 $(document).ready(addFormObserversForDoubleSubmit);
@@ -1231,3 +1306,19 @@ $(document).ready(setupWikiTableSortableHeader);
 $(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;
+      })
+    });
+  }
+});
-- 
2.30.2