logo on dark background

app/assets/stylesheets/admin/pure/style.sass

@@ -101,6 +101,9 @@ a
     right: var(--bs-gutter-x)
     margin-top: 0px !important
 
+.sdfi-deletable-file__preview
+    margin-top: 10px
+
 #collapseFilters
     padding-top: 50px
 

app/controllers/admin/university/organizations_controller.rb

@@ -71,7 +71,9 @@ class Admin::University::OrganizationsController < Admin::University::Applicatio
           .permit(
             :name, :long_name, :slug, :description, :active, :siren, :kind,
             :address, :zipcode, :city, :country, :text,
-            :url, :phone, :email, :logo, :logo_delete, :logo_infos
+            :url, :phone, :email,
+            :logo, :logo_delete, :logo_infos, 
+            :logo_on_dark_background, :logo_on_dark_background_delete, :logo_on_dark_background_infos, 
           )
   end
 end

app/models/communication/block/component/organization.rb

@@ -5,7 +5,11 @@ class Communication::Block::Component::Organization < Communication::Block::Comp
   end
 
   def git_dependencies
-    [organization, organization&.logo&.blob]
+    [
+      organization,
+      organization&.logo&.blob,
+      organization&.logo_on_dark_background&.blob
+    ]
   end
 
 end

app/models/university/organization.rb

@@ -46,6 +46,7 @@ class University::Organization < ApplicationRecord
   has_summernote :text
 
   has_one_attached_deletable :logo
+  has_one_attached_deletable :logo_on_dark_background
 
   scope :ordered, -> { order(:name) }
   scope :for_kind, -> (kind) { where(kind: kind) }
@@ -115,6 +116,9 @@ class University::Organization < ApplicationRecord
   protected
 
   def explicit_blob_ids
-    [logo&.blob_id]
+    [
+      logo&.blob_id,
+      logo_on_dark_background&.blob_id
+    ]
   end
 end

app/views/admin/application/_dependencies.html.erb

@@ -2,8 +2,8 @@
 expanded ||= false
 %>
 <% if current_user.server_admin? %>
-    <div class="card bg-light">
-        <div class="card-header bg-light">
+    <div class="card">
+        <div class="card-header">
             <div class="card-actions float-end">
               <i  class="fas fa-arrow-down text-muted"
                   data-bs-toggle="collapse"

app/views/admin/university/organizations/_form.html.erb

@@ -71,14 +71,17 @@
       </div>
       <div class="card flex-fill w-100">
         <div class="card-header">
-          <h5 class="card-title mb-0">
-            <%= University::Organization.human_attribute_name('logo') %>
-          </h5>
+          <h5 class="card-title mb-0"><%= t 'university.organization.logo' %></h5>
         </div>
         <div class="card-body">
           <%= f.input :logo,
                       as: :single_deletable_file,
-                      label: false,
+                      input_html: { accept: '.jpg,.jpeg,.png,.svg' },
+                      preview: 200,
+                      resize: false,
+                      direct_upload: true %>
+          <%= f.input :logo_on_dark_background,
+                      as: :single_deletable_file,
                       input_html: { accept: '.jpg,.jpeg,.png,.svg' },
                       preview: 200,
                       resize: false,

app/views/admin/university/organizations/_list.html.erb

@@ -13,10 +13,7 @@
         <tr>
           <td><%= link_to organization, admin_university_organization_path(organization) %></td>
           <td><span class="badge bg-secondary"><%= organization.kind_i18n %></span></td>
-          <td class="p-0 bg-grey text-center">
-            <%= kamifusen_tag organization.logo,
-                              width: 40 if organization.logo.attached? %>
-          </td>
+          <td><%= kamifusen_tag organization.logo, width: 40 if organization.logo.attached? %></td>
           <td class="text-end">
             <div class="btn-group" role="group">
               <%= edit_link organization %>

app/views/admin/university/organizations/show.html.erb

@@ -88,15 +88,20 @@
         <%= @organization.active %>
       </div>
     </div>
-    <% if @organization.logo.attached? %>
+    <% if @organization.logo.attached? || @organization.logo_on_dark_background.attached? %>
       <div class="card flex-fill w-100">
         <div class="card-header">
-          <h5 class="card-title mb-0">
-            <%= University::Organization.human_attribute_name('logo') %>
-          </h5>
+          <h5 class="card-title mb-0"><%= t 'university.organization.logo' %></h5>
         </div>
-        <div class="card-body bg-grey">
-          <%= kamifusen_tag @organization.logo, class: 'img-fluid img-fill p-5' if @organization.logo.attached? %>
+        <div class="card-body">
+          <% if @organization.logo.attached? %>
+            <label class="form-label"><%= University::Organization.human_attribute_name('logo') %></label>
+            <%= kamifusen_tag @organization.logo, class: 'img-fluid img-fill bg-light img-thumbnail p-5' %>
+          <% end %>
+          <% if @organization.logo_on_dark_background.attached? %>
+            <label class="form-label mt-4"><%= University::Organization.human_attribute_name('logo_on_dark_background') %></label>
+            <%= kamifusen_tag @organization.logo_on_dark_background, class: 'img-fluid img-fill bg-dark img-thumbnail p-5' %>
+          <% end %>
         </div>
       </div>
     <% end %>

app/views/admin/university/organizations/static.html.erb

@@ -16,6 +16,9 @@ website: "<%= @about.url %>"
 <% if @about.logo.attached? %>
 logo: "<%= @about.logo.blob.id %>"
 <% end %>
+<% if @about.logo_on_dark_background.attached? %>
+logo_on_dark_background: "<%= @about.logo_on_dark_background.blob.id %>"
+<% end %>
 description: >
   <%= prepare_text_for_static @about.description %>
 <%= render 'admin/communication/blocks/static', about: @about %>

config/locales/university/en.yml

@@ -94,6 +94,8 @@ en:
         url: Website
         phone: Telephone
         email: Email
+        logo: Logo for light backgrounds (default)
+        logo_on_dark_background: Logo for dark backgrounds (optional)
         kind: Kind
         siren: Legal identification number
       university/role:
@@ -134,6 +136,8 @@ en:
         sso_button_label: "Default: Sign in via SSO"
       university_organization:
         description: If this field is empty the main text's begining will be used.
+        logo: This logo should contrast properly on a light bacgkground (white or pale grey)
+        logo_on_dark_background: This logo should contrast on a dark background (black or dark grey)
       university_person:
         description: If this field is empty, "short description" field will be used. If also emty the main text's begining will be used.
         habilitation: "Possesses an accreditation to supervise research."
@@ -180,6 +184,7 @@ en:
     organisation:
       employees: Employees
       import_hint_html: "Possible values for <i>kind</i> are: company, non_profit, government.<br><i>Siren</i>, <i>nic</i>, <i>zipcode</i> and <i>phone</i> fields must have a text format, not numbers.<br><i>Country</i> field must contain the ISO 3166 code of the country, so 2 upcase characters (<a href=\"https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes\" target=\_blank\">list</a>)."
+      logo: Logo
     person:
       administrator_roles: Administrator roles
       experience:

config/locales/university/fr.yml

@@ -94,6 +94,8 @@ fr:
         url: Site Web
         phone: Téléphone
         email: Email
+        logo: Logo sur fond clair (par défaut)
+        logo_on_dark_background: Logo sur fond sombre (optionnel)
         kind: Type
         siren: Numéro de SIREN
       university/role:
@@ -134,6 +136,8 @@ fr:
         sso_button_label: "Par défaut : Se connecter en SSO"
       university_organization:
         description: Si ce champ est vide le début du texte principal sera utilisé.
+        logo: Ce logo doit contraster sur un fond clair (blanc ou gris pâle)
+        logo_on_dark_background: Ce logo doit contraster sur un fond sombre (noir ou gris sombre).
       university_person:
         description: Si ce champ est vide la "description courte" sera utilisée. Si elle est également vide le début du texte principal sera utilisé.
         habilitation: "Détient une Habilitation à Diriger des Recherches (HDR)."
@@ -180,6 +184,7 @@ fr:
     organization:
       employees: Employés·es
       import_hint_html: "Les valeurs possibles pour <i>kind</i> sont : company, non_profit, government.<br>Les champs <i>siren</i>, <i>nic</i>, <i>zipcode</i> et <i>phone</i> doivent être au format texte, pas nombre.<br>Le champ <i>country</i> doit contenir le code ISO 3166 du pays, sur 2 caratères en majuscule (<a href=\"https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes\" target=\_blank\">liste</a>)"
+      logo: Logo
     person:
       administrator_roles: Rôles administratifs
       experience: