-
Notifications
You must be signed in to change notification settings - Fork 194
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8440 from alphagov/refactor-uploaded_images_compo…
…nent Refactor UploadedImagesComponent
- Loading branch information
Showing
13 changed files
with
464 additions
and
196 deletions.
There are no files selected for viewing
28 changes: 28 additions & 0 deletions
28
app/components/admin/edition_images/image_component.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<li class="govuk-grid-row"> | ||
<div class="govuk-grid-column-one-third"> | ||
<img src="<%= image.url %>" alt="<%= preview_alt_text %>" class="app-view-edition-resource__preview"> | ||
<% unless image.image_data&.all_asset_variants_uploaded? %> | ||
<span class="govuk-tag govuk-tag--green">Processing</span> | ||
<% end %> | ||
</div> | ||
|
||
<div class="govuk-grid-column-two-thirds"> | ||
<p class="govuk-body"><strong>Caption: </strong><%= caption %></p> | ||
<p class="govuk-body"><strong>Alt text: </strong><%= alt_text %></p> | ||
<%= render "govuk_publishing_components/components/copy_to_clipboard", { | ||
label: tag.strong("Markdown code:"), | ||
copyable_content: image_markdown, | ||
button_text: "Copy Markdown", | ||
} %> | ||
</div> | ||
|
||
<div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group"> | ||
<% links.each do |link| %> | ||
<%= link %> | ||
<% end %> | ||
</div> | ||
</li> | ||
|
||
<% unless last_image %> | ||
<li aria-hidden="true"><hr class="app-view-edition-resource__section-break govuk-section-break govuk-section-break--visible"></li> | ||
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
# frozen_string_literal: true | ||
|
||
class Admin::EditionImages::ImageComponent < ViewComponent::Base | ||
def initialize(edition:, image:, last_image:) | ||
@edition = edition | ||
@image = image | ||
@last_image = last_image | ||
end | ||
|
||
private | ||
|
||
attr_reader :edition, :image, :last_image | ||
|
||
def preview_alt_text | ||
"Image #{find_index_from_non_lead_images + 1}" | ||
end | ||
|
||
def caption | ||
image.caption.presence || "None" | ||
end | ||
|
||
def alt_text | ||
image.alt_text.presence || "None" | ||
end | ||
|
||
def image_markdown | ||
edition.images_have_unique_filenames? ? "[Image: #{image.filename}]" : "!!#{find_image_index + 1}" | ||
end | ||
|
||
def find_index_from_non_lead_images | ||
if edition.respond_to?(:non_lead_images) | ||
edition.non_lead_images.find_index(image) | ||
else | ||
edition.images.find_index(image) | ||
end | ||
end | ||
|
||
def find_image_index | ||
edition.images.find_index(image) | ||
end | ||
|
||
def links | ||
links = [] | ||
links << link_to("Edit details", edit_admin_edition_image_path(@edition, image), class: "govuk-link") | ||
links << link_to("Delete image", confirm_destroy_admin_edition_image_path(@edition, image), class: "govuk-link gem-link--destructive") | ||
links | ||
end | ||
end |
55 changes: 55 additions & 0 deletions
55
app/components/admin/edition_images/lead_image_component.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<%= render "govuk_publishing_components/components/heading", { | ||
text: "Lead image", | ||
font_size: "m", | ||
padding: true, | ||
} %> | ||
|
||
<%= render "govuk_publishing_components/components/details", { | ||
title: "Using a lead image", | ||
} do %> | ||
<% lead_image_guidance %> | ||
<% end %> | ||
|
||
<% if lead_image.present? || case_study? %> | ||
<div class="govuk-grid-row"> | ||
<% if lead_image.present? %> | ||
<div class="app-c-edition-images-lead-image-component__lead_image"> | ||
<div class="govuk-grid-column-one-third"> | ||
<img src="<%= lead_image.url %>" alt="Lead image" class="app-view-edition-resource__preview"> | ||
<% unless lead_image.image_data&.all_asset_variants_uploaded? %> | ||
<span class="govuk-tag govuk-tag--green">Processing</span> | ||
<% end %> | ||
</div> | ||
|
||
<div class="govuk-grid-column-two-thirds"> | ||
<p class="govuk-body"><strong>Caption: </strong><%= caption %></p> | ||
<p class="govuk-body"><strong>Alt text: </strong><%= alt_text %></p> | ||
</div> | ||
</div> | ||
<% end %> | ||
|
||
<div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group"> | ||
<% if case_study? %> | ||
<%= form_with(url: update_image_display_option_admin_edition_path(edition), method: :patch) do |form| %> | ||
<%= hidden_field_tag "edition[image_display_option]", new_image_display_option %> | ||
|
||
<%= render "govuk_publishing_components/components/button", { | ||
text: update_image_display_option_button_text, | ||
secondary_solid: true, | ||
margin_bottom: 4, | ||
} %> | ||
|
||
<% if lead_image.present? %> | ||
<% links.each do |link| %> | ||
<%= link %> | ||
<% end %> | ||
<% end %> | ||
<% end %> | ||
<% elsif lead_image.present? %> | ||
<% links.each do |link| %> | ||
<%= link %> | ||
<% end %> | ||
<% end %> | ||
</div> | ||
</div> | ||
<% end %> |
86 changes: 86 additions & 0 deletions
86
app/components/admin/edition_images/lead_image_component.rb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
# frozen_string_literal: true | ||
|
||
class Admin::EditionImages::LeadImageComponent < ViewComponent::Base | ||
def initialize(edition:) | ||
@edition = edition | ||
end | ||
|
||
def render? | ||
edition.can_have_custom_lead_image? | ||
end | ||
|
||
private | ||
|
||
attr_reader :edition | ||
|
||
def lead_image_guidance | ||
if case_study? | ||
tag.p("Using a lead image is optional and can be shown or hidden. The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body") | ||
else | ||
tag.p("The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body") | ||
end | ||
end | ||
|
||
def case_study? | ||
edition.type == "CaseStudy" | ||
end | ||
|
||
def lead_image | ||
@lead_image ||= edition.lead_image | ||
end | ||
|
||
def caption | ||
lead_image.caption.presence || "None" | ||
end | ||
|
||
def alt_text | ||
lead_image.alt_text.presence || "None" | ||
end | ||
|
||
def new_image_display_option | ||
@new_image_display_option ||= if image_display_option_is_no_image? && edition_has_images? | ||
"custom_image" | ||
elsif image_display_option_is_no_image? | ||
"organisation_image" | ||
else | ||
"no_image" | ||
end | ||
end | ||
|
||
def image_display_option_is_no_image? | ||
edition.image_display_option == "no_image" | ||
end | ||
|
||
def update_image_display_option_button_text | ||
return image_display_option_button_text_when_image_has_been_uploaded if edition_has_images? | ||
|
||
image_display_option_button_text_when_no_images_uploaded | ||
end | ||
|
||
def image_display_option_button_text_when_image_has_been_uploaded | ||
return "Hide lead image" if new_image_display_option_is_no_image? | ||
|
||
"Show lead image" | ||
end | ||
|
||
def image_display_option_button_text_when_no_images_uploaded | ||
return "Remove lead image" if new_image_display_option_is_no_image? | ||
|
||
"Use default image" | ||
end | ||
|
||
def new_image_display_option_is_no_image? | ||
new_image_display_option == "no_image" | ||
end | ||
|
||
def edition_has_images? | ||
edition.images.present? | ||
end | ||
|
||
def links | ||
links = [] | ||
links << link_to("Edit details", edit_admin_edition_image_path(edition, lead_image), class: "govuk-link") | ||
links << link_to("Delete image", confirm_destroy_admin_edition_image_path(edition, lead_image), class: "govuk-link gem-link--destructive") | ||
links | ||
end | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.