<%#-- copyright OpenProject is an open source project management software. Copyright (C) 2012-2024 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, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. See COPYRIGHT and LICENSE files for more details. ++#%> <% html_title t(:label_administration), t(:label_custom_style) %> <%= toolbar title: t(:label_custom_style) %> <%= error_messages_for 'custom_style' %> <%= form_tag update_design_themes_path, method: :post, class: "form" do %>

<%= I18n.t('admin.custom_styles.color_theme') %>

<%= styled_select_tag 'theme', options_for_select(@theme_options, @current_theme), container_class: '-slim' %>

<%= styled_button_tag t(:button_save), data:({ confirm: t('admin.custom_styles.theme_warning') } unless @current_theme.present?) %>

<% end %> <%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>

<%= I18n.t(:label_custom_logo) %> <% if @custom_style.id && @custom_style.logo.present? %>

<%# Don't use image_tag here due to asset host %> <%= tag('img', src: custom_style_logo_path(digest: @custom_style.digest, filename: @custom_style.logo_identifier), class: 'custom-logo-preview') %> <%= link_to t(:button_delete), custom_style_logo_delete_path, method: :delete, class: 'icon icon-delete confirm-form-submit' %>

<% end %>

<%= f.file_field :logo, required: true, class: "attachment_choose_file", size: "15" %>

<%= t('text_custom_logo_instructions') %>

<%= styled_button_tag I18n.t(@custom_style.logo.present? ? :button_replace : :button_upload), class: "button #{@custom_style.logo.blank? ? '-with-icon icon-add' : ''}" %>

<% end %> <%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>

<%= I18n.t(:label_custom_favicon) %> <% if @custom_style.id && @custom_style.favicon.present? %>

<%= tag('img', src: custom_style_favicon_path(digest: @custom_style.digest, filename: @custom_style.favicon_identifier), class: 'custom-favicon-preview') %> <%= link_to t(:button_delete), custom_style_favicon_delete_path, method: :delete, class: 'icon icon-delete confirm-form-submit' %>

<% end %>

<%= f.file_field :favicon, required: true, class: "attachment_choose_file", size: "15" %>

<%= t('text_custom_favicon_instructions') %>

<%= styled_button_tag t(@custom_style.favicon.present? ? :button_replace : :button_upload), class: "button #{@custom_style.favicon.blank? ? '-with-icon icon-add' : ''}" %>

<% end %> <%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>

<%= I18n.t(:label_custom_touch_icon) %> <% if @custom_style.id && @custom_style.touch_icon.present? %>

<%= tag('img', src: custom_style_touch_icon_path(digest: @custom_style.digest, filename: @custom_style.touch_icon_identifier), class: 'custom-touch-icon-preview') %> <%= link_to t(:button_delete), custom_style_touch_icon_delete_path, method: :delete, class: 'icon icon-delete confirm-form-submit' %>

<% end %>

<%= f.file_field :touch_icon, required: true, class: "attachment_choose_file", size: "15" %>

<%= t('text_custom_touch_icon_instructions') %>

<%= styled_button_tag t(@custom_style.touch_icon.present? ? :button_replace : :button_upload), class: "button #{@custom_style.touch_icon.blank? ? '-with-icon icon-add' : ''}" %>

<% end %> <% custom_export_expanded = @custom_style.id && (@custom_style.export_logo.present? || @custom_style.export_cover.present? || @custom_style.export_cover_text_color.present?) %>

<%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>

<%= I18n.t(:label_custom_export_logo) %> <% if @custom_style.id && @custom_style.export_logo.present? %>

<%= tag('img', src: custom_style_export_logo_path(digest: @custom_style.digest, filename: @custom_style.export_logo_identifier), class: 'custom-export-logo-preview') %> <%= link_to t(:button_delete), custom_style_export_logo_delete_path, method: :delete, class: 'icon icon-delete confirm-form-submit' %>

<% end %>

<%= f.file_field :export_logo, required: true, class: "attachment_choose_file", size: "15" %>

<%= t('text_custom_export_logo_instructions') %>

<%= styled_button_tag t(@custom_style.export_logo.present? ? :button_replace : :button_upload), class: "button #{@custom_style.export_logo.blank? ? '-with-icon icon-add' : ''}" %>

<% end %> <%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>

<%= I18n.t(:label_custom_export_cover) %> <% if @custom_style.id && @custom_style.export_cover.present? %>

<%= tag('img', src: custom_style_export_cover_path(digest: @custom_style.digest, filename: @custom_style.export_cover_identifier), class: 'custom-export-cover-preview') %> <%= link_to t(:button_delete), custom_style_export_cover_delete_path, method: :delete, class: 'icon icon-delete confirm-form-submit' %>

<% end %>

<%= f.file_field :export_cover, required: true, class: "attachment_choose_file", size: "15" %>

<%= t('text_custom_export_cover_instructions') %>

<%= styled_button_tag t(@custom_style.export_cover.present? ? :button_replace : :button_upload), class: "button #{@custom_style.export_cover.blank? ? '-with-icon icon-add' : ''}" %>

<% end %> <%= form_tag update_custom_style_export_cover_text_color_path, html: { multipart: true, class: "form -vertical" } do |f| %>

<%= I18n.t(:label_custom_export_cover_overlay) %>

<%= I18n.t(:label_custom_export_cover_text_color) %>:

<% design_color_name = 'export_cover_text_color' %> <% design_color_hex = @custom_style.export_cover_text_color.present? ? @custom_style.export_cover_text_color : '' %> <%= icon_for_color(OpenStruct.new(variable: design_color_name, hexcode: design_color_hex), data: { target: "#" + design_color_name }) %>

<%= styled_text_field_tag design_color_name, design_color_hex, placeholder: '#000' %>

<% instruction_key = "admin.custom_styles.instructions.#{design_color_name}" %> <% if I18n.exists?(instruction_key, :en) %> <%= I18n.t(instruction_key) %> <% end %>

<% end %>

<%= form_tag update_design_colors_path, method: :post, class: "form" do %>

<%= I18n.t(:label_advanced_settings) %> <% DesignColor.setables.each do |design_color| %>

<%= I18n.t("admin.custom_styles.colors.#{design_color.variable}") %>:

<%= icon_for_color(OpenStruct.new(variable: design_color.variable, hexcode: design_color.hexcode), data: { target: "#design_colors_" + design_color.variable }) %>

<%= styled_text_field_tag "design_colors[]" + design_color.variable, design_color.hexcode, class: 'design-color--variable-input', data: { 'variable-name': design_color.variable } %>

<% instruction_key = "admin.custom_styles.instructions.#{design_color.variable}" %> <% if I18n.exists?(instruction_key, :en) %> <%= I18n.t(instruction_key) %> <% end %>

<% end %>

<%# Fill in the computed css variables in the inputs as their defaults %> <%= nonced_javascript_tag do %> var computedStyle = getComputedStyle(document.documentElement); document .querySelectorAll('.design-color--variable-input') .forEach(function(el) { if (!el.value || el.value === '') { el.placeholder = computedStyle.getPropertyValue('--' + el.dataset.variableName).trim(); } }); <% end %> <% end %>