Add default colours to admin banners

app/assets/javascripts/banners.js.coffee

@@ -7,13 +7,11 @@ App.Banners =
     $(selector).removeClass($(selector).attr("class"), true)
       .addClass(style, true)
 
-  update_background_color: (selector, text_selector, background_color) ->
+  update_background_color: (selector, background_color) ->
     $(selector).css("background-color", background_color)
-    $(text_selector).val(background_color)
 
-  update_font_color: (selector, text_selector, font_color) ->
+  update_font_color: (selector, font_color) ->
     $(selector).css("color", font_color)
-    $(text_selector).val(font_color)
 
   initialize: ->
     $("[data-js-banner-title]").on
@@ -24,20 +22,11 @@ App.Banners =
       change: ->
         App.Banners.update_banner("#js-banner-description", $(this).val())
 
-    $("#banner_background_color_picker").on
+    $("[name='banner[background_color]']").on
       change: ->
-        App.Banners.update_background_color("#js-banner-background", "#banner_background_color", $(this).val())
+        App.Banners.update_background_color("#js-banner-background", $(this).val())
 
-    $("#banner_background_color").on
+    $("[name='banner[font_color]']").on
       change: ->
-        App.Banners.update_background_color("#js-banner-background", "#banner_background_color_picker", $(this).val())
+        App.Banners.update_font_color("#js-banner-title", $(this).val())
-
+        App.Banners.update_font_color("#js-banner-description", $(this).val())
-    $("#banner_font_color_picker").on
-      change: ->
-        App.Banners.update_font_color("#js-banner-title", "#banner_font_color", $(this).val())
-        App.Banners.update_font_color("#js-banner-description", "#banner_font_color", $(this).val())
-
-    $("#banner_font_color").on
-      change: ->
-        App.Banners.update_font_color("#js-banner-title", "#banner_font_color_picker", $(this).val())
-        App.Banners.update_font_color("#js-banner-description", "#banner_font_color_picker", $(this).val())

app/assets/javascripts/forms.js.coffee

@@ -26,9 +26,11 @@ App.Forms =
   synchronizeInputs: ->
     progress_bar = "[name='progress_bar[percentage]']"
     process_background = "[name='legislation_process[background_color]']"
-    process_font = "[name='legislation_process[font_color]']"
+    process_font = ", [name='legislation_process[font_color]']"
+    processes = process_background + process_font
+    banners = "[name='banner[background_color]'], [name='banner[font_color]']"
 
-    inputs = $("#{progress_bar}, #{process_background}, #{process_font}")
+    inputs = $("#{progress_bar}, #{processes}, #{banners}")
     inputs.on
       input: ->
         $("[name='#{this.name}']").val($(this).val())

app/helpers/banners_helper.rb

@@ -4,4 +4,20 @@ module BannersHelper
     @banners.present? && @banners.count > 0
   end
 
+  def banner_default_bg_color
+    "#e7f2fc"
+  end
+
+  def banner_default_font_color
+    "#222222"
+  end
+
+  def banner_bg_color_or_default
+    @banner.background_color.present? ? @banner.background_color : banner_default_bg_color
+  end
+
+  def banner_font_color_or_default
+    @banner.font_color.present? ? @banner.font_color : banner_default_font_color
+  end
+
 end

app/views/admin/banners/_form.html.erb

@@ -64,15 +64,32 @@
   </div>
 
   <div class="row">
-    <div class="small-3 column">
+    <div class="small-12 medium-6 large-3 column">
-      <%= f.label :sections, t("admin.banners.banner.background_color") %>
+      <%= f.label :background_color, nil, for: "background_color_input" %>
-      <%= color_field(:banner, :background_color, id: 'banner_background_color_picker') %>
+      <p class="help-text"><%= t("admin.shared.color_help") %></p>
-      <%= f.text_field :background_color, label: false %>
+      <div class="row collapse">
+        <div class="small-12 medium-6 column">
+          <%= f.text_field :background_color, label: false, type: :color,
+                                              value: banner_bg_color_or_default %>
+        </div>
+        <div class="small-12 medium-6 column">
+          <%= f.text_field :background_color, label: false, id: "background_color_input" %>
+        </div>
+      </div>
     </div>
-    <div class="small-3 column end">
+
-      <%= f.label :sections, t("admin.banners.banner.font_color") %>
+    <div class="small-12 medium-6 large-3 column end">
-      <%= color_field(:banner, :font_color, id: 'banner_font_color_picker') %>
+      <%= f.label :font_color, nil, for: "font_color_input" %>
-      <%= f.text_field :font_color, label: false %>
+      <p class="help-text"><%= t("admin.shared.color_help") %></p>
+      <div class="row collapse">
+        <div class="small-12 medium-6 column">
+          <%= f.text_field :font_color, label: false, type: :color,
+                                        value: banner_font_color_or_default %>
+        </div>
+        <div class="small-12 medium-6 column">
+          <%= f.text_field :font_color, label: false, id: "font_color_input" %>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -80,11 +97,15 @@
     <div class="actions small-12 medium-3 column">
       <%= f.submit(class: "button expanded", value: t("admin.banners.edit.form.submit_button")) %>
     </div>
-  </div>
+
-  <div id="js-banner-background" class="banner" style="background-color:<%= @banner.background_color %>">
+    <div id="js-banner-background" class="banner clear"
-    <%= link_to @banner.target_url do %>
+                                   style="background-color:<%= @banner.background_color %>">
-      <h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
+      <%= link_to @banner.target_url do %>
-      <h3 id="js-banner-description" style="color:<%= @banner.font_color %>"><%= @banner.description %></h3>
+        <h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
-    <% end %>
+        <h3 id="js-banner-description" style="color:<%= @banner.font_color %>">
+          <%= @banner.description %>
+        </h3>
+      <% end %>
+    </div>
   </div>
 <% end %>

app/views/admin/legislation/processes/_form.html.erb

@@ -193,7 +193,7 @@
 
   <div class="small-6 large-3 column">
     <%= f.label :background_color, nil, for: "background_color_input" %>
-    <p class="help-text"><%= t("admin.legislation.processes.form.color_help") %></p>
+    <p class="help-text"><%= t("admin.shared.color_help") %></p>
     <div class="row collapse">
       <div class="small-12 medium-6 column">
         <%= f.text_field :background_color, label: false, type: :color,
@@ -207,7 +207,7 @@
 
   <div class="small-6 large-3 column end">
     <%= f.label :font_color, nil, for: "font_color_input" %>
-    <p class="help-text"><%= t("admin.legislation.processes.form.color_help") %></p>
+    <p class="help-text"><%= t("admin.shared.color_help") %></p>
     <div class="row collapse">
       <div class="small-12 medium-6 column">
         <%= f.text_field :font_color, label: false, type: :color, value: font_color_or_default %>

app/views/shared/_banner.html.erb

@@ -1,7 +1,7 @@
 <% banner = @banners.sample %>
-<div class="banner" style="background-color:<%= banner.background_color %>">
+<div class="banner" style="background-color:<%= banner.background_color %>;">
   <%= link_to banner.target_url do %>
-    <h2 style="color:<%= banner.font_color %>"><%=banner.title %></h2>
+    <h2 style="color:<%= banner.font_color %>;"><%= banner.title %></h2>
-    <h3 style="color:<%= banner.font_color %>"><%=banner.description %></h3>
+    <h3 style="color:<%= banner.font_color %>;"><%= banner.description %></h3>
   <% end %>
 </div>

config/locales/en/activerecord.yml

@@ -229,6 +229,9 @@ en:
         name: Name
         locale: locale
         body: Body
+      banner:
+        background_color: Background color
+        font_color: Font color
       legislation/process:
         title: Process Title
         summary: Summary

config/locales/en/admin.yml

@@ -38,8 +38,6 @@ en:
           proposals: Proposals
           budgets: Participatory budgeting
           help_page: Help page
-        background_color: Background colour
-        font_color: Font colour
       edit:
         editing: Edit banner
         form:
@@ -432,7 +430,6 @@ en:
           homepage_description: Here you can explain the content of the process
           homepage_enabled: Homepage enabled
           banner_title: Header colors
-          color_help: Hexadecimal format
         index:
           create: New process
           delete: Delete
@@ -1225,6 +1222,7 @@ en:
       content: Content
       created_at: Created at
       delete: Delete
+      color_help: Hexadecimal format
     spending_proposals:
       index:
         geozone_filter_all: All zones

config/locales/es/activerecord.yml

@@ -229,6 +229,9 @@ es:
         name: Nombre
         locale: Idioma
         body: Contenido
+      banner:
+        background_color: Color del fondo
+        font_color: Color del texto
       legislation/process:
         title: Título del proceso
         summary: Resumen

config/locales/es/admin.yml

@@ -38,8 +38,6 @@ es:
           proposals: Propuestas
           budgets: Presupuestos participativos
           help_page: Página de ayuda
-        background_color: Color de fondo
-        font_color: Color del texto
       edit:
         editing: Editar el banner
         form:
@@ -432,7 +430,6 @@ es:
           homepage_description: Aquí puedes explicar el contenido del proceso
           homepage_enabled: Homepage activada
           banner_title: Colores del encabezado
-          color_help: Formato hexadecimal
         index:
           create: Nuevo proceso
           delete: Borrar
@@ -1224,6 +1221,7 @@ es:
       content: Contenido
       created_at: Fecha de creación
       delete: Eliminar
+      color_help: Formato hexadecimal
     spending_proposals:
       index:
         geozone_filter_all: Todos los ámbitos de actuación

spec/features/admin/banners_spec.rb

@@ -30,7 +30,7 @@ feature "Admin banners magement" do
                   font_color: "#FFFFFF")
 
       @banner3 = create(:banner, title: "Banner number three",
-                  description:  "This is the text of banner number three and has style banner-three",
+                  description:  "This is the text of banner number three",
                   target_url:  "http://www.url.com",
                   post_started_at: (Time.current - 1.day),
                   post_ended_at:   (Time.current + 10.days),
@@ -38,7 +38,7 @@ feature "Admin banners magement" do
                   font_color: "#FFFFFF")
 
       @banner4 = create(:banner, title: "Banner number four",
-                  description:  "This is the text of banner number four and has style banner-one",
+                  description:  "This is the text of banner number four",
                   target_url:  "http://www.url.com",
                   post_started_at: (DateTime.current - 10.days),
                   post_ended_at:   (DateTime.current + 10.days),
@@ -46,7 +46,7 @@ feature "Admin banners magement" do
                   font_color: "#FFFFFF")
 
       @banner5 = create(:banner, title: "Banner number five",
-                  description:  "This is the text of banner number five and has style banner-two",
+                  description:  "This is the text of banner number five",
                   target_url:  "http://www.url.com",
                   post_started_at: (DateTime.current - 10.days),
                   post_ended_at:   (DateTime.current + 10.days),
@@ -140,29 +140,22 @@ feature "Admin banners magement" do
   scenario "Update banner color when changing from color picker or text_field", :js do
     visit new_admin_banner_path
 
-    fill_in "banner_background_color", with: "#850000"
+    fill_in "background_color_input", with: "#850000"
-    fill_in "banner_font_color", with: "#ffb2b2"
+    fill_in "font_color_input", with: "#ffb2b2"
     fill_in "Title", with: "Fun with flags"
 
-    # This last step simulates the blur event on the page. The color pickers and the text_fields
+    expect(find("#background_color_input").value).to eq("#850000")
-    # has onChange events that update each one when the other changes, but this is only fired when
+    expect(find("#font_color_input").value).to eq("#ffb2b2")
-    # the text_field loses the focus (color picker update when text_field changes). The first one
-    # works because when the test fills in the second one, the first loses the focus
-    # (so the onChange is fired). The second one never loses the focus, so the onChange is not been fired.
-    # The `fill_in` action clicks out of the text_field and makes the field to lose the focus.
-
-    expect(find("#banner_background_color_picker").value).to eq("#850000")
-    expect(find("#banner_font_color_picker").value).to eq("#ffb2b2")
   end
 
   scenario "Edit banner with live refresh", :js do
-    banner1 = create(:banner, title: "Hello",
+    create(:banner, title: "Hello",
-                              description: "Wrong text",
+                    description: "Wrong text",
-                              target_url:  "http://www.url.com",
+                    target_url:  "http://www.url.com",
-                              post_started_at: (Time.current + 4.days),
+                    post_started_at: (Time.current + 4.days),
-                              post_ended_at:   (Time.current + 10.days),
+                    post_ended_at:   (Time.current + 10.days),
-                              background_color: "#FF0000",
+                    background_color: "#FF0000",
-                              font_color: "#FFFFFF")
+                    font_color: "#FFFFFF")
 
     visit admin_root_path
 

spec/features/banners_spec.rb

@@ -18,8 +18,8 @@ feature "Banner" do
 
     within(".banner") do
       expect(page).to have_content("Banner description")
-      expect(find("h2")[:style]).to eq("color:#{banner.font_color}")
+      expect(find("h2")[:style]).to eq("color:#{banner.font_color};")
-      expect(find("h3")[:style]).to eq("color:#{banner.font_color}")
+      expect(find("h3")[:style]).to eq("color:#{banner.font_color};")
     end
 
     visit debates_path