consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add default colours to admin banners

Browse Source
This commit is contained in:
decabeza
2019-03-13 13:17:42 +01:00
parent 05e4c344f2
commit 528a4b6e8e
12 changed files with 91 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/banners.js.coffee
View File

@@ -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())
$("#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.Banners.update_font_color("#js-banner-title", $(this).val())
App.Banners.update_font_color("#js-banner-description", $(this).val())

6
app/assets/javascripts/forms.js.coffee
View File

@@ -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())

16
app/helpers/banners_helper.rb
View File

@@ -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

49
app/views/admin/banners/_form.html.erb
View File

@@ -64,15 +64,32 @@
</div>
<div class="row">
<div class="small-3 column">
<%= f.label :sections, t("admin.banners.banner.background_color") %>
<%= color_field(:banner, :background_color, id: 'banner_background_color_picker') %>
<%= f.text_field :background_color, label: false %>
<div class="small-12 medium-6 large-3 column">
<%= f.label :background_color, nil, for: "background_color_input" %>
<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,
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") %>
<%= color_field(:banner, :font_color, id: 'banner_font_color_picker') %>
<%= f.text_field :font_color, label: false %>
<div class="small-12 medium-6 large-3 column end">
<%= f.label :font_color, nil, for: "font_color_input" %>
<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 %>">
<%= link_to @banner.target_url do %>
<h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
<h3 id="js-banner-description" style="color:<%= @banner.font_color %>"><%= @banner.description %></h3>
<% end %>
<div id="js-banner-background" class="banner clear"
style="background-color:<%= @banner.background_color %>">
<%= link_to @banner.target_url do %>
<h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
<h3 id="js-banner-description" style="color:<%= @banner.font_color %>">
<%= @banner.description %>
</h3>
<% end %>
</div>
</div>
<% end %>

4
app/views/admin/legislation/processes/_form.html.erb
View File

@@ -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 %>

6
app/views/shared/_banner.html.erb
View File

@@ -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>
<h3 style="color:<%= banner.font_color %>"><%=banner.description %></h3>
<h2 style="color:<%= banner.font_color %>;"><%= banner.title %></h2>
<h3 style="color:<%= banner.font_color %>;"><%= banner.description %></h3>
<% end %>
</div>

3
config/locales/en/activerecord.yml
View File

@@ -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

4
config/locales/en/admin.yml
View File

@@ -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

3
config/locales/es/activerecord.yml
View File

@@ -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

4
config/locales/es/admin.yml
View File

@@ -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

35
spec/features/admin/banners_spec.rb
View File

@@ -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 "banner_font_color", with: "#ffb2b2"
fill_in "background_color_input", with: "#850000"
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
# has onChange events that update each one when the other changes, but this is only fired when
# 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")
expect(find("#background_color_input").value).to eq("#850000")
expect(find("#font_color_input").value).to eq("#ffb2b2")
end
scenario "Edit banner with live refresh", :js do
banner1 = create(:banner, title: "Hello",
description: "Wrong text",
target_url: "http://www.url.com",
post_started_at: (Time.current + 4.days),
post_ended_at: (Time.current + 10.days),
background_color: "#FF0000",
font_color: "#FFFFFF")
create(:banner, title: "Hello",
description: "Wrong text",
target_url: "http://www.url.com",
post_started_at: (Time.current + 4.days),
post_ended_at: (Time.current + 10.days),
background_color: "#FF0000",
font_color: "#FFFFFF")
visit admin_root_path

4
spec/features/banners_spec.rb
View File

@@ -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("h3")[: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};")
end
visit debates_path