Include opacity to colors to allow images in cover blocks not to be tinted

app/cells/decidim/alternative_landing/content_blocks/base_cell.rb

@@ -40,10 +40,18 @@ def colors
           model.settings.to_h.select { |k, _v| k.match?(/color_/) }
         end
 
+        def opacities
+          model.settings.to_h.select { |k, _v| k.match?(/opacity_/) }
+        end
+
         def color_keys
           form.object.settings.to_h.keys.grep(/color_/)
         end
 
+        def opacity_keys
+          form.object.settings.to_h.keys.grep(/opacity_/)
+        end
+
         # Renders a view with the customizable CSS variables in two flavours:
         # 1. as a hexadecimal valid CSS color (ie: #ff0000)
         # 2. as a disassembled RGB components (ie: 255,0,0)
@@ -62,6 +70,12 @@ def color_keys
         #
         # background-color: rgba(var(--primary-rgb), 0.5)
         def css
+          colors_css + opacities_css
+        end
+
+        private
+
+        def colors_css
           colors.each.map do |k, v|
             if v.match?(/^#[0-9a-fA-F]{6}$/)
               "--#{k}: #{v};--#{k}-rgb: #{v[1..2].hex},#{v[3..4].hex},#{v[5..6].hex};"
@@ -70,6 +84,12 @@ def css
             end
           end.join
         end
+
+        def opacities_css
+          opacities.each.map do |k, v|
+            "--#{k}: #{v};"
+          end.join
+        end
       end
     end
   end

app/cells/decidim/alternative_landing/content_blocks/cover_full_settings_form/show.erb

@@ -8,6 +8,13 @@
       </div>
     <% end %>
   </div>
+  <div style="display: flex; gap: 1rem;">
+    <% opacity_keys.each do |opacity_key| %>
+      <div style="flex: auto;">
+        <%= settings_fields.number_field opacity_key, label: t(".#{opacity_key}"), step: 0.1, min: 0, max: 1 %>
+      </div>
+    <% end %>
+  </div>
 <% end %>
 <% form.fields_for :images, form.object.images do |images_fields| %>
   <%= images_fields.upload :background_image, label: t(".background_image") %>

app/cells/decidim/alternative_landing/content_blocks/cover_half_settings_form/show.erb

@@ -10,6 +10,13 @@
       </div>
     <% end %>
   </div>
+  <div style="display: flex; gap: 1rem;">
+    <% opacity_keys.each do |opacity_key| %>
+      <div style="flex: auto;">
+        <%= settings_fields.number_field opacity_key, label: t(".#{opacity_key}"), step: 0.1, min: 0, max: 1 %>
+      </div>
+    <% end %>
+  </div>
 <% end %>
 <% form.fields_for :images, form.object.images do |images_fields| %>
   <%= images_fields.upload :background_image, label: t(".background_image") %>

app/packs/stylesheets/decidim/alternative_landing/content_blocks/cover.scss

@@ -1,10 +1,10 @@
 @import "stylesheets/decidim/alternative_landing/content_blocks/variables";
 
-@mixin cover-background-image($color) {
+@mixin cover-background-image($color, $opacity) {
   background-size: cover;
   background-position: center;
   background-blend-mode: luminosity;
-  background-color: $color;
+  background-color: rgba($color, $opacity);
   min-height: 100vh;
 }
 
@@ -16,12 +16,12 @@
 }
 
 .cover-full {
-  color: var(--color_text);
+  color: rgba(var(--color_text-rgb), var(--opacity_text));
 
-  @include cover-background-image(var(--color_background_image));
+  @include cover-background-image(var(--color_background_image-rgb), var(--opacity_background_image));
 
   .cover-text {
-    background-color: rgba(var(--color_background_text-rgb), 0.7);
+    background-color: rgba(var(--color_background_text-rgb), var(--opacity_background_text));
     padding: $gap * 2;
   }
 }
@@ -33,7 +33,7 @@
   .cover-image {
     grid-column: 2;
 
-    @include cover-background-image(var(--color_background_image));
+    @include cover-background-image(var(--color_background_image-rgb), var(--opacity_background_image));
   }
 
   .cover-text {
@@ -54,7 +54,7 @@
 }
 
 .navbar.transparent {
-  background-color: rgba(var(--color_navbar-rgb), 0.3);
+  background-color: rgba(var(--color_navbar-rgb), var(--opacity_navbar));
   position: relative;
   margin-bottom: -50px;
 }

config/locales/en.yml

@@ -31,6 +31,10 @@ en:
           color_background_text: Text background color
           color_navbar: Navbar color
           color_text: Text color
+          opacity_background_image: Image tint opacity
+          opacity_background_text: Text background opacity
+          opacity_navbar: Navbar opacity
+          opacity_text: Text opacity
           title: Title
         cover_half:
           name: Cover (Half screen)
@@ -43,6 +47,10 @@ en:
           color_text: Text color
           link_text: Link text
           link_url: Link url
+          opacity_background_image: Image tint opacity
+          opacity_background_text: Text background opacity
+          opacity_navbar: Navbar opacity
+          opacity_text: Text opacity
           title: Title
         extra_information:
           name: Process Group Information

lib/decidim/alternative_landing.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "decidim/alternative_landing/default_colors"
+require "decidim/alternative_landing/default_opacities"
 require "decidim/alternative_landing/engine"
 
 module Decidim

lib/decidim/alternative_landing/content_blocks/content_blocks_shared.rb

@@ -15,6 +15,10 @@
       Decidim::AlternativeLanding::DefaultColors.cover_full.each do |k, v|
         settings.attribute :"color_#{k}", type: :text, default: v
       end
+
+      Decidim::AlternativeLanding::DefaultOpacities.cover_full.each do |k, v|
+        settings.attribute :"opacity_#{k}", type: :text, default: v
+      end
     end
 
     content_block.images = [{ name: :background_image, uploader: "Decidim::AlternativeLanding::CoverImageUploader" }]
@@ -34,6 +38,10 @@
       Decidim::AlternativeLanding::DefaultColors.cover_half.each do |k, v|
         settings.attribute :"color_#{k}", type: :text, default: v
       end
+
+      Decidim::AlternativeLanding::DefaultOpacities.cover_half.each do |k, v|
+        settings.attribute :"opacity_#{k}", type: :text, default: v
+      end
     end
 
     content_block.images = [{ name: :background_image, uploader: "Decidim::AlternativeLanding::CoverImageUploader" }]

lib/decidim/alternative_landing/default_opacities.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Decidim
+  module AlternativeLanding
+    module DefaultOpacities
+      class << self
+        def cover_full
+          {
+            background_text: 0.7,
+            background_image: 1,
+            text: 1,
+            navbar: 0.3
+          }
+        end
+
+        def cover_half
+          {
+            background_text: 0.7,
+            background_image: 1,
+            text: 1,
+            navbar: 0.3
+          }
+        end
+      end
+    end
+  end
+end

spec/system/custom_colors_spec.rb

@@ -20,14 +20,16 @@
         {
           color_background_image: "#ff0000",
           color_background_text: "#00ff00",
-          color_text: "#0000ff"
+          color_text: "#0000ff",
+          color_navbar: "#ffff00"
         }
       end
 
-      it "renders default colors" do
+      it "renders custom colors" do
         expect(get_property_value(selector, "--color_background_image")).to eq("#ff0000")
         expect(get_property_value(selector, "--color_background_text")).to eq("#00ff00")
         expect(get_property_value(selector, "--color_text")).to eq("#0000ff")
+        expect(get_property_value(selector, "--color_navbar")).to eq("#ffff00")
       end
     end
   end
@@ -37,11 +39,13 @@
     let(:default_image_background_color) { Decidim::AlternativeLanding::DefaultColors.cover_full[:background_image] }
     let(:default_text_background_color) { Decidim::AlternativeLanding::DefaultColors.cover_full[:background_text] }
     let(:default_text_color) { Decidim::AlternativeLanding::DefaultColors.cover_full[:text] }
+    let(:default_navbar_color) { Decidim::AlternativeLanding::DefaultColors.cover_full[:navbar] }
 
     it "renders default colors" do
       expect(get_property_value(selector, "--color_background_image")).to eq(get_property_value(selector, "--secondary"))
       expect(get_property_value(selector, "--color_background_text")).to eq(get_property_value(selector, "--secondary"))
       expect(get_property_value(selector, "--color_text")).to eq(default_text_color)
+      expect(get_property_value(selector, "--color_navbar")).to eq(default_navbar_color)
     end
 
     it_behaves_like "custom colors defined"
@@ -52,11 +56,13 @@
     let(:default_image_background_color) { Decidim::AlternativeLanding::DefaultColors.cover_half[:background_image] }
     let(:default_text_background_color) { Decidim::AlternativeLanding::DefaultColors.cover_half[:background_text] }
     let(:default_text_color) { Decidim::AlternativeLanding::DefaultColors.cover_half[:text] }
+    let(:default_navbar_color) { Decidim::AlternativeLanding::DefaultColors.cover_full[:navbar] }
 
     it "renders default colors" do
       expect(get_property_value(selector, "--color_background_image")).to eq(get_property_value(selector, "--primary"))
       expect(get_property_value(selector, "--color_background_text")).to eq(get_property_value(selector, "--primary"))
       expect(get_property_value(selector, "--color_text")).to eq(default_text_color)
+      expect(get_property_value(selector, "--color_navbar")).to eq(default_navbar_color)
     end
 
     it_behaves_like "custom colors defined"

spec/system/custom_opacities_spec.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+describe "Custom opacities", type: :system, perform_enqueued: true do
+  let(:organization) { create :organization, available_locales: [:en] }
+
+  let(:settings) { {} }
+  let!(:cover_full_block) { create(:cover_full_block, organization: organization, settings: settings) }
+  let!(:cover_half_block) { create(:cover_half_block, organization: organization, settings: settings) }
+
+  before do
+    switch_to_host(organization.host)
+    visit decidim.root_path
+  end
+
+  shared_examples_for "default opacities" do
+    context "when no custom opacities defined" do
+      it "renders default opacities" do
+        expect(get_property_value(selector, "--opacity_background_image")).to eq(default_image_background_opacity)
+        expect(get_property_value(selector, "--opacity_background_text")).to eq(default_text_background_opacity)
+        expect(get_property_value(selector, "--opacity_text")).to eq(default_text_opacity)
+        expect(get_property_value(selector, "--opacity_navbar")).to eq(default_navbar_opacity)
+      end
+    end
+  end
+
+  shared_examples_for "custom opacities defined" do
+    context "when custom opacities defined" do
+      let(:settings) do
+        {
+          opacity_background_image: 0.33,
+          opacity_background_text: 0.44,
+          opacity_text: 0.55,
+          opacity_navbar: 0.66
+        }
+      end
+
+      it "renders custom opacities" do
+        expect(get_property_value(selector, "--opacity_background_image")).to eq("0.33")
+        expect(get_property_value(selector, "--opacity_background_text")).to eq("0.44")
+        expect(get_property_value(selector, "--opacity_text")).to eq("0.55")
+        expect(get_property_value(selector, "--opacity_navbar")).to eq("0.66")
+      end
+    end
+  end
+
+  describe "cover_full block" do
+    let(:selector) { ".cover-full" }
+    let(:default_image_background_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_full[:background_image].to_s }
+    let(:default_text_background_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_full[:background_text].to_s }
+    let(:default_text_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_full[:text].to_s }
+    let(:default_navbar_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_full[:navbar].to_s }
+
+    it_behaves_like "default opacities"
+    it_behaves_like "custom opacities defined"
+  end
+
+  describe "cover_half block" do
+    let(:selector) { ".cover-half" }
+    let(:default_image_background_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_half[:background_image].to_s }
+    let(:default_text_background_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_half[:background_text].to_s }
+    let(:default_text_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_half[:text].to_s }
+    let(:default_navbar_opacity) { Decidim::AlternativeLanding::DefaultOpacities.cover_full[:navbar].to_s }
+
+    it_behaves_like "default opacities"
+    it_behaves_like "custom opacities defined"
+  end
+
+  def get_computed_style(selector)
+    page.execute_script("return window.getComputedStyle($('#{selector}')[0])").strip
+  end
+
+  def get_property_value(selector, variable_name)
+    page.execute_script("return window.getComputedStyle($('#{selector}')[0]).getPropertyValue('#{variable_name}')").strip
+  end
+end