Simplify onboarding images and centralize config around primary/secondary logos (#12118)

* Simplify special snowflake onboarding images and center around primary/secondary logos

* Remove left and right navbar customization

* Update app/lib/constants/site_config.rb

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Remove spec onboarding images

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>
This commit is contained in:
Ben Halpern 2021-02-08 13:26:28 -05:00 committed by GitHub
parent e921952414
commit b2a5a8488d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 7 additions and 114 deletions

View file

@ -11,9 +11,7 @@ module Admin
campaign_sidebar_image
mascot_image_url
mascot_footer_image_url
onboarding_logo_image
onboarding_background_image
onboarding_taskcard_image
].freeze
VALID_URL = %r{\A(http|https)://([/|.\w\s-])*.[a-z]{2,5}(:[0-9]{1,5})?(/.*)?\z}.freeze

View file

@ -185,10 +185,6 @@ module Constants
description: "URL of the website where open positions are posted",
placeholder: "Jobs URL"
},
left_navbar_svg_icon: {
description: "The SVG icon used to expand the left navbar navigation menu. Should be a max of 24x24px.",
placeholder: SVG_PLACEHOLDER
},
logo_png: {
description: "Used as a fallback to the SVG. Recommended minimum of 512x512px for PWA support",
placeholder: IMAGE_PLACEHOLDER
@ -253,14 +249,6 @@ module Constants
description: "Background for onboarding splash page",
placeholder: IMAGE_PLACEHOLDER
},
onboarding_logo_image: {
description: "Main onboarding display logo image",
placeholder: IMAGE_PLACEHOLDER
},
onboarding_taskcard_image: {
description: "Used as the onboarding task-card image",
placeholder: IMAGE_PLACEHOLDER
},
payment_pointer: {
description: "Used for site-wide web monetization. " \
"See: https://github.com/thepracticaldev/dev.to/pull/6345",
@ -282,12 +270,8 @@ module Constants
description: "Add the secret key for Google reCAPTCHA, which is used for reporting abuse",
placeholder: "What is the Google reCAPTCHA secret key?"
},
right_navbar_svg_icon: {
description: "The SVG icon used to expand the right navbar navigation menu. Should be a max of 24x24px.",
placeholder: SVG_PLACEHOLDER
},
secondary_logo_url: {
description: "Used as the secondary logo",
description: "A place for an alternate logo, if you have one. Used throughout member onboarding and in some sign in forms.",
placeholder: IMAGE_PLACEHOLDER
},
spam_trigger_terms: {

View file

@ -120,8 +120,6 @@ class SiteConfig < RailsSettings::Base
format: { with: VALID_URL, message: URL_MESSAGE }
}
field :left_navbar_svg_icon, type: :string, default: STACK_ICON
field :right_navbar_svg_icon, type: :string, default: LIGHTNING_ICON
field :enable_video_upload, type: :boolean, default: false
# Mascot
@ -162,15 +160,9 @@ class SiteConfig < RailsSettings::Base
field :mailchimp_incoming_webhook_secret, type: :string, default: ""
# Onboarding
field :onboarding_logo_image, type: :string, validates: {
format: { with: VALID_URL, message: URL_MESSAGE }
}
field :onboarding_background_image, type: :string, validates: {
format: { with: VALID_URL, message: URL_MESSAGE }
}
field :onboarding_taskcard_image, type: :string, validates: {
format: { with: VALID_URL, message: URL_MESSAGE }
}
field :suggested_tags, type: :array, default: %w[]
field :suggested_users, type: :array, default: %w[]
field :prefer_manual_suggested_users, type: :boolean, default: false

View file

@ -805,28 +805,6 @@
<% end %>
</div>
<div class="crayons-field">
<%= admin_config_label :left_navbar_svg_icon %>
<%= admin_config_description Constants::SiteConfig::DETAILS[:left_navbar_svg_icon][:description] %>
<%= f.text_area :left_navbar_svg_icon,
class: "crayons-textfield",
value: SiteConfig.left_navbar_svg_icon,
rows: 6,
placeholder: Constants::SiteConfig::DETAILS[:left_navbar_svg_icon][:placeholder] %>
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
</div>
<div class="crayons-field">
<%= admin_config_label :right_navbar_svg_icon %>
<%= admin_config_description Constants::SiteConfig::DETAILS[:right_navbar_svg_icon][:description] %>
<%= f.text_area :right_navbar_svg_icon,
class: "crayons-textfield",
value: SiteConfig.right_navbar_svg_icon,
rows: 6,
placeholder: Constants::SiteConfig::DETAILS[:right_navbar_svg_icon][:placeholder] %>
<%= SiteConfig.right_navbar_svg_icon.html_safe %>
</div>
<%= render "form_submission", f: f %>
</fieldset>
</div>
@ -1064,20 +1042,6 @@
} %>
<div id="onboardingBodyContainer" class="card-body collapse hide" aria-labelledby="onboardingBodyContainer">
<fieldset class="flex flex-column gap-4">
<div class="crayons-field">
<%= admin_config_label :onboarding_logo_image %>
<%= admin_config_description Constants::SiteConfig::DETAILS[:onboarding_logo_image][:description] %>
<%= f.text_field :onboarding_logo_image,
class: "crayons-textfield",
value: SiteConfig.onboarding_logo_image,
placeholder: Constants::SiteConfig::DETAILS[:onboarding_logo_image][:placeholder] %>
<div class="row mt-2">
<div class="col-12">
<img alt="main social image" class="img-fluid" src="<%= SiteConfig.onboarding_logo_image %>" width="600px" height="337px" />
</div>
</div>
</div>
<div class="crayons-field">
<%= admin_config_label :onboarding_background_image %>
<%= admin_config_description Constants::SiteConfig::DETAILS[:onboarding_background_image][:description] %>
@ -1092,20 +1056,6 @@
</div>
</div>
<div class="crayons-field">
<%= admin_config_label :onboarding_taskcard_image %>
<%= admin_config_description Constants::SiteConfig::DETAILS[:onboarding_taskcard_image][:description] %>
<%= f.text_field :onboarding_taskcard_image,
class: "crayons-textfield",
value: SiteConfig.onboarding_taskcard_image,
placeholder: Constants::SiteConfig::DETAILS[:onboarding_taskcard_image][:placeholder] %>
<div class="row mt-2">
<div class="col-12">
<img alt="onboarding taskcard image" class="img-fluid" src="<%= SiteConfig.onboarding_taskcard_image %>" />
</div>
</div>
</div>
<div class="crayons-field">
<%= admin_config_label :suggested_users %>
<%= admin_config_description Constants::SiteConfig::DETAILS[:suggested_users][:description] %>

View file

@ -47,7 +47,7 @@
<header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
<div class="crayons-icon nav-icon ">
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
<%= inline_svg_tag("hamburger.svg", aria: true, title: "Left menu") %>
</div>
</button>
<% if user_signed_in? %>
@ -81,7 +81,7 @@
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
<div class="crayons-icon nav-icon ">
<%= SiteConfig.right_navbar_svg_icon.html_safe %>
<%= inline_svg_tag("hamburger.svg", aria: true, title: "Right menu") %>
</div>
</button>
</header>

View file

@ -24,7 +24,7 @@
</button>
<div>
<img alt="onboarding task card image" class="task-card-image" src="<%= safe_logo_url(SiteConfig.onboarding_taskcard_image) %>" />
<img alt="onboarding task card image" class="task-card-image" src="<%= safe_logo_url(SiteConfig.secondary_logo_url) %>" />
</div>
<h2 class="task-card-title" id="task-card-title">You're now a part of the community!</h2>

View file

@ -14,7 +14,7 @@
<div id="onboarding-container"
data-community-name="<%= community_name %>"
data-community-description="<%= SiteConfig.community_description %>"
data-community-logo="<%= optimized_image_url(safe_logo_url(SiteConfig.onboarding_logo_image)) %>"
data-community-logo="<%= optimized_image_url(safe_logo_url(SiteConfig.secondary_logo_url)) %>"
data-community-background="<%= optimized_image_url(SiteConfig.onboarding_background_image, width: 1680, quality: 75, random_fallback: false) %>">
<%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
</div>

View file

@ -7,7 +7,6 @@ RSpec.describe SiteConfig, type: :model do
%w[
campaign_sidebar_image main_social_image logo_png secondary_logo_url
mascot_image_url mascot_footer_image_url onboarding_background_image
onboarding_logo_image onboarding_taskcard_image
]
end

View file

@ -407,22 +407,6 @@ RSpec.describe "/admin/config", type: :request do
end.not_to change(SiteConfig, :secondary_logo_url)
end
it "updates left_navbar_svg_icon" do
expected_svg = "<svg height='100' width='100'><circle cx='50' cy='50' r='40' " \
"stroke='black' stroke-width='3'/></svg>"
post "/admin/config", params: { site_config: { left_navbar_svg_icon: expected_svg },
confirmation: confirmation_message }
expect(SiteConfig.left_navbar_svg_icon).to eq(expected_svg)
end
it "updates right_navbar_svg_icon" do
expected_svg = "<svg height='100' width='100'><circle cx='50' cy='50' r='40' " \
"stroke='black' stroke-width='1'/></svg>"
post "/admin/config", params: { site_config: { right_navbar_svg_icon: expected_svg },
confirmation: confirmation_message }
expect(SiteConfig.right_navbar_svg_icon).to eq(expected_svg)
end
it "rejects update without proper confirmation" do
expected_image_url = "https://dummyimage.com/300x300.png"
expect do
@ -588,20 +572,6 @@ RSpec.describe "/admin/config", type: :request do
end
describe "Onboarding" do
it "updates onboarding_taskcard_image" do
expected_image_url = "https://dummyimage.com/300x300.png"
post "/admin/config", params: { site_config: { onboarding_taskcard_image: expected_image_url },
confirmation: confirmation_message }
expect(SiteConfig.onboarding_taskcard_image).to eq(expected_image_url)
end
it "updates onboarding_logo_image" do
expected_image_url = "https://dummyimage.com/300x300.png"
post "/admin/config", params: { site_config: { onboarding_logo_image: expected_image_url },
confirmation: confirmation_message }
expect(SiteConfig.onboarding_logo_image).to eq(expected_image_url)
end
it "updates onboarding_background_image" do
expected_image_url = "https://dummyimage.com/300x300.png"
post "/admin/config", params: { site_config: { onboarding_background_image: expected_image_url },

View file

@ -25,14 +25,14 @@ RSpec.describe "Onboardings", type: :request do
end
it "contains proper data attribute values if the onboarding config is present" do
allow(SiteConfig).to receive(:onboarding_logo_image).and_return("onboarding_logo_image.png")
allow(SiteConfig).to receive(:secondary_logo_url).and_return("whatevs.png")
allow(SiteConfig).to receive(:onboarding_background_image).and_return("onboarding_background_image.png")
sign_in user
get onboarding_url
expect(response.body).to include(SiteConfig.community_description)
expect(response.body).to include(safe_logo_url(SiteConfig.onboarding_logo_image))
expect(response.body).to include(safe_logo_url(SiteConfig.secondary_logo_url))
expect(response.body).to include(SiteConfig.onboarding_background_image)
end
end