[DREAM-77] Primerise PDF export tabs of Admin/Design page

app/views/custom_styles/_pdf_export_font.html.erb → app/components/custom_styles/color_list_item_component.html.erb

@@ -26,19 +26,19 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<p><%= I18n.t(:label_custom_export_font_instructions) %></p>
-
-<%=
-  render(Primer::Beta::Button.new(
-    target: "_blank",
-    data: { turbo: false },
-    tag: :a,
-    href: export_demo_pdf_download_custom_style_path
-  )) do |_c|
-    t("export.demo.button_text")
-  end
-%>
-
-<% export_fonts_fields(@custom_style).each do |font| %>
-  <%= render partial: "custom_styles/uploads/font",  locals: { font: } %>
+<%= flex_layout(align_items: :center, flex_wrap: :wrap, justify_content: :space_between) do |row| %>
+  <% row.with_column(flex: 1, mr: 3) do %>
+    <%= render(Primer::Beta::Text.new(font_weight: :bold)) { color_label } %>
+    <% if instruction.present? %>
+      <%= render(Primer::Beta::Text.new(font_size: :small, color: :subtle, ml: 1)) { instruction } %>
+    <% end %>
+  <% end %>
+
+  <% row.with_column do %>
+    <%= render(Colors::SwatchComponent.new(hexcode:, show_value:)) %>
+  <% end %>
+
+  <% row.with_column(ml: 2) do %>
+    <%= render(CustomStyles::DesignColorDialogComponent.new(**dialog_arguments)) %>
+  <% end %>
 <% end %>

app/components/custom_styles/color_list_item_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# 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, see <https://www.gnu.org/licenses/>.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module CustomStyles
+  # A BorderBoxList row showing a color's label/instruction, its current
+  # swatch, and an edit dialog (see DesignColorDialogComponent).
+  class ColorListItemComponent < ApplicationComponent
+    include OpPrimer::ComponentHelpers
+
+    attr_reader :color_label, :instruction, :hexcode, :show_value, :dialog_arguments
+
+    def initialize(label:, instruction:, hexcode:, dialog_arguments:, show_value: hexcode.present?)
+      super()
+
+      @color_label = label
+      @instruction = instruction
+      @hexcode = hexcode
+      @show_value = show_value
+      @dialog_arguments = dialog_arguments
+    end
+  end
+end

app/components/custom_styles/design_color_dialog_component.html.erb

@@ -41,7 +41,7 @@ See COPYRIGHT and LICENSE files for more details.
     dialog.with_body do
       primer_form_with(**form_arguments) do |form_builder|
         render_inline_form(form_builder) do |form|
-          form.text_field(**color_field_arguments)
+          form.color_field(**color_field_arguments)
         end
       end
     end

app/components/custom_styles/design_color_dialog_component.rb

@@ -31,46 +31,52 @@ module CustomStyles
   class DesignColorDialogComponent < ApplicationComponent
     include OpPrimer::ComponentHelpers
 
-    attr_reader :design_color, :color_label, :instruction, :hexcode
+    attr_reader :variable, :color_label, :instruction, :value, :placeholder,
+                :form_url, :form_method, :param_name, :scope_name_to_model, :field_data
 
-    def initialize(design_color:, label:, instruction:, hexcode:)
+    def initialize(variable:, label:, instruction:, value:, placeholder:, form_url:, param_name:,
+                   form_method: :post, scope_name_to_model: false, field_data: {})
       super()
 
-      @design_color = design_color
+      @variable = variable
       @color_label = label
       @instruction = instruction
-      @hexcode = hexcode
+      @value = value
+      @placeholder = placeholder
+      @form_url = form_url
+      @form_method = form_method
+      @param_name = param_name
+      @scope_name_to_model = scope_name_to_model
+      @field_data = field_data
     end
 
     private
 
-    def variable = design_color.variable
-
     def dialog_id = "design-color-#{variable}-dialog"
 
     def form_id = "design-color-#{variable}-form"
 
     def form_arguments
       {
-        url: url_helpers.update_design_colors_path,
-        method: :post,
+        url: form_url,
+        method: form_method,
         id: form_id,
         data: { turbo: false }
       }
     end
 
     def field_arguments
       {
-        name: "design_colors[]#{variable}",
+        name: param_name,
         id: "design_colors_#{variable}",
         label: color_label,
         visually_hide_label: true,
         caption: instruction,
-        value: design_color.hexcode,
-        placeholder: hexcode,
+        value:,
+        placeholder:,
         input_width: :medium,
-        scope_name_to_model: false,
-        data: { variable_name: variable }
+        scope_name_to_model:,
+        data: field_data
       }
     end
   end

app/forms/_index.sass

@@ -1,2 +1 @@
-@import "admin/settings/color_form"
 @import "projects/life_cycle/form"

app/forms/admin/settings/color_form.rb

@@ -38,21 +38,13 @@ class ColorForm < ApplicationForm
           input_width: :medium
         )
 
-        color_form.group(layout: :horizontal, classes: "color-form--hexcode-row") do |hexcode_group|
-          hexcode_group.text_field(
-            name: :hexcode,
-            label: attribute_name(:hexcode),
-            required: true,
-            autocomplete: "off",
-            input_width: :small
-          )
-
-          if show_swatch?
-            hexcode_group.html_content do
-              render(Colors::SwatchComponent.new(hexcode: model.hexcode, classes: "color-form--hexcode-row-swatch"))
-            end
-          end
-        end
+        color_form.color_field(
+          name: :hexcode,
+          label: attribute_name(:hexcode),
+          required: true,
+          autocomplete: "off",
+          input_width: :small
+        )
 
         color_form.group(layout: :horizontal) do |button_group|
           button_group.button(
@@ -76,10 +68,6 @@ class ColorForm < ApplicationForm
       def cancel_path
         url_helpers.custom_style_path(tab: :default_colors)
       end
-
-      def show_swatch?
-        model.hexcode.present? && model.errors.messages_for(:hexcode).empty?
-      end
     end
   end
 end

app/helpers/custom_styles_helper.rb

@@ -93,13 +93,6 @@ def design_tabs
         path: custom_style_path(tab: :pdf_export_styles),
         label: t(:"admin.custom_styles.tab_pdf_export_styles"),
         pdf: true
-      },
-      {
-        name: "pdf_export_font",
-        partial: "custom_styles/pdf_export_font",
-        path: custom_style_path(tab: :pdf_export_font),
-        label: t(:"admin.custom_styles.tab_pdf_export_font"),
-        pdf: true
       }
     ]
   end
@@ -201,11 +194,12 @@ def export_fonts_fields(custom_style)
     %i[regular bold italic bold_italic].map do |variant|
       field = :"export_font_#{variant}"
       font = custom_style.public_send(field)
+      present = custom_style.id && font.present?
       {
         field: field,
         label: I18n.t("label_custom_export_font_#{variant}"),
-        present: font.present?,
-        filename: custom_style.id && font.present? ? File.basename(font.file.path) : nil,
+        present:,
+        filename: present ? File.basename(font.file.path) : nil,
         delete_path: public_send(:"custom_style_export_font_#{variant}_delete_path"),
         instructions: I18n.t("text_custom_export_font_#{variant}_instructions")
       }

app/views/custom_styles/_interface.html.erb

@@ -48,33 +48,24 @@ See COPYRIGHT and LICENSE files for more details.
       <% hexcode = effective_design_color(design_color, current_theme: @current_theme) %>
 
       <% list.with_item do %>
-        <%= flex_layout(
-              align_items: :center,
-              flex_wrap: :wrap,
-              justify_content: :space_between
-            ) do |row| %>
-          <% row.with_column(flex: 1, mr: 3) do %>
-            <%= render(Primer::Beta::Text.new(font_weight: :bold)) { label } %>
-            <% if instruction.present? %>
-              <%= render(Primer::Beta::Text.new(font_size: :small, color: :subtle, ml: 1)) { instruction } %>
-            <% end %>
-          <% end %>
-
-          <% row.with_column do %>
-            <%= render(Colors::SwatchComponent.new(hexcode:, show_value: true)) %>
-          <% end %>
-
-          <% row.with_column(ml: 2) do %>
-            <%= render(
-                  CustomStyles::DesignColorDialogComponent.new(
-                    design_color:,
-                    label:,
-                    instruction:,
-                    hexcode:
-                  )
-                ) %>
-          <% end %>
-        <% end %>
+        <%= render(
+              CustomStyles::ColorListItemComponent.new(
+                label:,
+                instruction:,
+                hexcode:,
+                show_value: true,
+                dialog_arguments: {
+                  variable:,
+                  label:,
+                  instruction:,
+                  value: design_color.hexcode,
+                  placeholder: hexcode,
+                  form_url: update_design_colors_path,
+                  param_name: "design_colors[]#{variable}",
+                  field_data: { variable_name: variable }
+                }
+              )
+            ) %>
       <% end %>
     <% end %>
   <% end %>