Merge pull request #5181 from vinothkannans/image-placeholder-styling

UX: Placeholder images color changed & tootip added
This commit is contained in:
Jeff Atwood 2017-09-13 02:49:34 -07:00 committed by GitHub
commit 11cc8ff52d
4 changed files with 22 additions and 5 deletions

View File

@ -423,6 +423,7 @@ a.mention, a.mention-group {
}
.broken-image, .large-image {
color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%));
border: 1px solid $primary-low;
font-size: 32px;
padding: 16px;

View File

@ -110,13 +110,25 @@ module Jobs
if broken_images.include?(src)
tag.name = 'span'
tag.set_attribute('class', 'broken-image fa fa-chain-broken')
tag.set_attribute('title', I18n.t('post.image_placeholder.broken'))
tag.remove_attribute('src')
tag.remove_attribute('width')
tag.remove_attribute('height')
elsif large_images.include?(src)
tag.name = 'a'
tag.set_attribute('href', src)
tag.set_attribute('target', '_blank')
tag.set_attribute('title', I18n.t('post.image_placeholder.large'))
tag.remove_attribute('src')
tag.remove_attribute('width')
tag.remove_attribute('height')
tag.inner_html = '<span class="large-image fa fa-picture-o"></span>'
parent = tag.parent
if parent.name == 'a'
parent.add_next_sibling(tag)
parent.add_next_sibling('<br>')
parent.content = parent["href"]
end
end
end
if start_html == post.cooked && doc.to_html != post.cooked

View File

@ -516,6 +516,10 @@ en:
title: "leader"
change_failed_explanation: "You attempted to demote %{user_name} to '%{new_trust_level}'. However their trust level is already '%{current_trust_level}'. %{user_name} will remain at '%{current_trust_level}' - if you wish to demote user lock trust level first"
post:
image_placeholder:
broken: "This image is broken"
large: "Click to view the image"
rate_limiter:
slow_down: "You have performed this action too many times, try again later."

View File

@ -99,7 +99,7 @@ describe Jobs::PullHotlinkedImages do
<img src='#{image_url}'>
#{url}
<img src='#{broken_image_url}'>
<img src='#{large_image_url}'>
<a href='#{url}'><img src='#{large_image_url}'></a>
")
Jobs::ProcessPost.new.execute(post_id: post.id)
@ -110,8 +110,8 @@ describe Jobs::PullHotlinkedImages do
expect(post.cooked).to match(/<p><img src=.*\/uploads/)
expect(post.cooked).to match(/<img src=.*\/uploads.*\ class="thumbnail"/)
expect(post.cooked).to match(/<span .*\ class="broken-image fa fa-chain-broken/)
expect(post.cooked).to match(/<a .*\ href=.*\ target="_blank"><span class="large-image fa fa-picture-o"><\/span><\/a>/)
expect(post.cooked).to match(/<span class="broken-image fa fa-chain-broken/)
expect(post.cooked).to match(/<\/a><br><a href=.*\ target="_blank" .*\><span class="large-image fa fa-picture-o"><\/span><\/a>/)
end
end
end
@ -124,7 +124,7 @@ describe Jobs::PullHotlinkedImages do
Jobs::PullHotlinkedImages.new.execute(post_id: post.id)
post.reload
expect(post.cooked).to match(/<span .*\ class="broken-image fa fa-chain-broken/)
expect(post.cooked).to match(/<span class="broken-image fa fa-chain-broken/)
end
it 'large image with placeholder' do
@ -134,7 +134,7 @@ describe Jobs::PullHotlinkedImages do
Jobs::PullHotlinkedImages.new.execute(post_id: post.id)
post.reload
expect(post.cooked).to match(/<a .*\ href=.*\ target="_blank"><span class="large-image fa fa-picture-o"><\/span><\/a>/)
expect(post.cooked).to match(/<a href=.*\ target="_blank" .*\><span class="large-image fa fa-picture-o"><\/span><\/a>/)
end
end