gallery/app/views/admin/galleries/_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <%= stylesheet_link_tag "jquery.minicolors" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/modal-preview" %>
  <%= javascript_include_tag "lib/file-type" %>
  <%= javascript_include_tag "jquery.minicolors" %>
<% end %>
<style>
.main-forms fieldset .input-area .module-area {
    padding: 20px;
    overflow: visible;
}
input.minicolors-input{
    height: 2.5em;
    max-width: 90%;
}
</style>
<script type="text/javascript">
  function set_transparent(trigger) {
      var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
      if (trigger.checked){
          color_input_box.attr('data-color',color_input_box.val())
          color_input_box.minicolors('value','transparent')
          color_input_box.prop('disabled',true)
      }
      else{
          color_input_box.minicolors('value',color_input_box.attr('data-color'))
          color_input_box.prop('disabled',false)
      }
  }
  $(document).ready( function() {
      $('.minicolors-input').minicolors({
        defaultValue: '',
        format: 'hex',
        letterCase: 'lowercase',
        position: 'bottom left',
        change: function(value, opacity) {
          if( !value ) return;
          if( opacity ) value += ', ' + opacity;
        },
        theme: 'bootstrap'
      });
      $('.minicolors-input').attr('autocomplete','off')
      $('.minicolors').css('margin','0 10px')
      $('.minicolors').css('height','34px')
      $('*').submit(function () {
        $.each($(this).find('input.minicolors-input'),function(){
          var value = $(this).val();
          if (value == ''){
              $(this).find('input.minicolors-input').val('transparent');
              $(this).find('input.minicolors-input').prop('disabled',false); 
          }
        })
        return true
      });
      $('#album_thumb_process_option').change(function(){
        $('.thumb_process_option').hide();
        $('.thumb_process_option'+'.'+$(this).val()).show();
      }).trigger('change');
  });
</script>
   <fieldset>           
            <!-- Input Area -->
            <div class="input-area">

              <!-- Module Tabs -->
              <div class="nav-name"><strong><%= t(:module) %></strong></div>
              <ul class="nav nav-pills module-nav">
                <li class="active">
                  <a href="#basic" data-toggle="tab"><%= t(:basic) %></a>
                </li>
                <li>
                  <a href="#tag" data-toggle="tab"><%= t(:tags) %></a>
                </li>
                <li>
                  <a href="#advanced_setting" data-toggle="tab"><%= t('gallery.advanced_setting') %></a>
                </li>
              </ul>

              <!-- Module -->
              <div class="tab-content module-area">

                <!-- Basic Module -->
                <div class="tab-pane fade in active" id="basic">

                  <!-- Category -->
                  <div class="control-group">
                    <label class="control-label muted"><%= t(:category) %></label>
                    <div class="controls">
                     <%= select_category(f, @module_app) %>
                    </div>
                  </div>

                </div>
            <!-- Tag Module -->
                <div class="tab-pane fade" id="tag">

                  <!-- Tag -->
                  <div class="control-group">
                    <label class="control-label muted"><%= t(:tags) %></label>
                    <%= select_tags(f, @module_app) %>
                  </div>
                </div>
            <!-- Frame Color Module -->
                <% if @album.album_colors.first.nil? %>
                    <% @album.album_colors.new('color' => 'transparent') %>
                <% end %>
                <div class="tab-pane fade" id="advanced_setting">
                  <div class="control-group">
                    <label class="control-label muted"><%= t('gallery.thumb_process_option_trans') %></label>
                    <div class="controls">
                      <%= f.select :thumb_process_option, t('gallery.thumb_process_option').to_enum.with_index.collect{|v, i| [v, i]} %>
                    </div>
                  </div>
                <%= f.fields_for :album_colors do |album_color_form| %>

                  <!-- Frame Color -->
                  <div class="control-group thumb_process_option 0 1" style='display: flex;'>
                    <label class="control-label muted"><%= t('gallery.frame_color') %></label>
                    <%= album_color_form.text_field :color , :class => 'input-block-level minicolors-input' %>
                    <span style='font-size: 20px;display: flex;align-items: center;'>
                    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
                    <%= t('gallery.transparent') %>
                    </span>
                  </div>
                  <div class="control-group thumb_process_option 0 1">
                    <label class="control-label muted">
                      <%= t('gallery.thumb_resize_reference') %>
                    </label>
                    <div class="controls">
                      <%= f.select :resize_gravity, [["---#{t("default")}: #{t("gallery.gravity.#{AlbumSetting::ResizeGravities[0]}")}---",nil]]+AlbumSetting::ResizeGravities.collect{|v| [t("gallery.gravity.#{v}"),v]} %>
                    </div>
                  </div>
                  <div class="control-group" style='display: flex;'>
                    <label class="control-label muted"><%= t('gallery.album_card_background_color') %></label>
                    <%= album_color_form.text_field :album_card_background_color, :class => 'input-block-level minicolors-input' %>
                    <span style='font-size: 20px;display: flex;align-items: center;'>
                    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
                    <%= t('gallery.transparent') %>
                    </span>
                  </div>
                  <div class="control-group" style='display: flex;'>
                    <label class="control-label muted"><%= t('gallery.album_card_text_color') %></label>
                    <%= album_color_form.text_field :album_card_text_color, :class => 'input-block-level minicolors-input' %>
                    <span style='font-size: 20px;display: flex;align-items: center;'>
                    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
                    <%= t('gallery.transparent') %>
                    </span>
                  </div>
                <% end %>
                </div>
              </div>
              </div>
              <div class='input-area'>
                  <div class="nav-name"><strong><%= t(:language) %></strong></div>
                     <ul class="nav nav-pills language-nav">
                      <% @site_in_use_locales.each_with_index do |locale, i| %>
                          <li <%= (i == 0 ? 'class=active' : '') %>>
                            <a href=".<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
                          </li>
                       <% end %>
                    </ul>
                    <div class="tab-content language-area">
                  <!-- Language Tabs -->
                   
                     
                        <% @site_in_use_locales.each_with_index do |locale, i| %>
    
                             <div class="tab-pane fade in <%= (i == 0 ? 'active' : '') %> <%= locale %>">
                              <div class="control-group input-title">
                                <%= f.fields_for :name_translations do |name| %>
                                    <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %>
                                    <div class="controls">
                                       <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title",:value => (@album.name_translations[locale] rescue nil) %>
                                    </div>
                                 <% end %> 
                              </div>
                              <div class="control-group input-content">
                                 <%= f.fields_for :description_translations do |desc| %>
                                     <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %>
                                    <div class="controls">
                                      <div class="textarea">
                                        <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@album.description_translations[locale] rescue nil)%>
                                      </div>
                                    </div>
                                <% end %>
                              </div>
                            </div>
                        <% end %>
                               
                  </div>
                 
                </div>
                <!-- Form Actions -->
                <div class="form-actions">
                  <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %>
                </div>
            </div>
          </fieldset>