openproject/app/views/custom_styles/show.html.erb

<%#-- copyright
OpenProject is an open source project management software.
Copyright (C) 2012-2022 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 %>
  <section class="form--section">
    <fieldset class="form--fieldset">
      <legend class="form--fieldset-legend"><%= I18n.t('admin.custom_styles.color_theme') %></legend>
      <div class="form--field">
        <div class="form--field-container">
          <%= styled_select_tag 'theme',
                                options_for_select(@theme_options, @current_theme),
                                container_class: '-slim' %>
        </div>
      </div>

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

<%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>
  <section class="form--section">
    <fieldset class="form--fieldset">
      <legend class="form--fieldset-legend"><%= I18n.t(:label_custom_logo) %></legend>

      <% if @custom_style.id && @custom_style.logo.present? %>
        <div>
          <%# 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' %>
        </div>
      <% end %>

      <div class="grid-block">
        <div class="form--field -required">
          <div class="attachment_field form--field-container -vertical -shrink">
            <div class="form--file-container">
              <%= f.file_field :logo, required: true, class: "attachment_choose_file", size: "15" %>
            </div>
          </div>
          <div class="form--field-instructions">
            <%= t('text_custom_logo_instructions') %>
          </div>
        </div>
      </div>

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

    </fieldset>
  </section>
<% end %>

<%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>
  <section class="form--section">
    <fieldset class="form--fieldset">
      <legend class="form--fieldset-legend"><%= I18n.t(:label_custom_favicon) %></legend>

      <% if @custom_style.id && @custom_style.favicon.present? %>
        <div>
          <%= 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' %>
        </div>
      <% end %>

      <div class="grid-block">
        <div class="form--field -required">
          <div class="attachment_field form--field-container -vertical -shrink">
            <div class="form--file-container">
              <%= f.file_field :favicon, required: true, class: "attachment_choose_file", size: "15" %>
            </div>
          </div>
          <div class="form--field-instructions">
            <%= t('text_custom_favicon_instructions') %>
          </div>
        </div>
      </div>

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

    </fieldset>
  </section>
<% end %>

<%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>
  <section class="form--section">
    <fieldset class="form--fieldset">
      <legend class="form--fieldset-legend"><%= I18n.t(:label_custom_touch_icon) %></legend>

      <% if @custom_style.id && @custom_style.touch_icon.present? %>
        <div>
          <%= 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' %>
        </div>
      <% end %>

      <div class="grid-block">
        <div class="form--field -required">
          <div class="attachment_field form--field-container -vertical -shrink">
            <div class="form--file-container">
              <%= f.file_field :touch_icon, required: true, class: "attachment_choose_file", size: "15" %>
            </div>
          </div>
          <div class="form--field-instructions">
            <%= t('text_custom_touch_icon_instructions') %>
          </div>
        </div>
      </div>

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

    </fieldset>
  </section>
<% end %>

<%= form_tag update_design_colors_path, method: :post, class: "form" do %>
  <section class="form--section">
    <fieldset class="form--fieldset -collapsible <%= 'collapsed' if @current_theme.present?  %> ">
      <legend class="form--fieldset-legend"><%= I18n.t(:label_advanced_settings) %></legend>

      <% DesignColor.setables.each do |design_color|  %>
        <div class="form--field -required">
          <label class="form--label"><%= I18n.t("admin.custom_styles.colors.#{design_color.variable}") %>:</label>
          <span class="form--field-container">
            <div class="form--field-affix">
              <%= icon_for_color(OpenStruct.new(variable: design_color.variable,
                                                hexcode: design_color.hexcode),
                                 data: { target: "#design_colors_" + design_color.variable }) %>
            </div>
            <span class="form--text-field-container">
              <%= styled_text_field_tag "design_colors[]" + design_color.variable,
                                        design_color.hexcode,
                                        class: 'design-color--variable-input',
                                        data: {  'variable-name': design_color.variable }
              %>
            </span>
          </span>
          <div class="form--field-instructions">
            <% instruction_key = "admin.custom_styles.instructions.#{design_color.variable}" %>
            <% if I18n.exists?(instruction_key, :en) %>
              <%= I18n.t(instruction_key) %>
            <% end %>
          </div>
        </div>
      <% end %>

      <button type="submit" class="button -hide-when-collapsed"><%= I18n.t(:button_save) %></button>

    </fieldset>
  </section>

  <%# Fill in the computed css variables in the inputs as their defaults %>
  <%= nonced_javascript_tag do %>
    var computedStyle = getComputedStyle(document.documentElement);

    document
      .querySelectorAlt('.design-color--variable-input')
      .forEach(function(el) {
      if (!el.value || el.value === '') {
        el.placeholder = computedStyle.getPropertyValue('--' + el.dataset.variableName).trim();
      }
    });
  <% end %>
<% end %>