FIX: Inline avatar style for onebox when embedding secure images (#11229)

When embedding secure images that are inline-avatars for oneboxes we weren't applying the correct sizing/style.
This commit is contained in:
Martin Brennan 2020-11-16 09:58:40 +10:00 committed by GitHub
parent 5ca0fbc423
commit 879e4a9e29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 9 deletions

View File

@ -9,6 +9,7 @@ module Email
MAX_IMAGE_DIMENSION = 400
ONEBOX_IMAGE_BASE_STYLE = "max-height: 80%; max-width: 20%; height: auto; float: left; margin-right: 10px;"
ONEBOX_IMAGE_THUMBNAIL_STYLE = "width: 60px;"
ONEBOX_INLINE_AVATAR_STYLE = "width: 20px; height: 20px; float: none; vertical-align: middle;"
@@plugin_callbacks = []
@ -133,7 +134,7 @@ module Email
style('.onebox-metadata', "color: #919191")
style('.github-info', "margin-top: 10px;")
style('.github-info div', "display: inline; margin-right: 10px;")
style('.onebox-avatar-inline', "width: 20px; height: 20px; float: none; vertical-align: middle;")
style('.onebox-avatar-inline', ONEBOX_INLINE_AVATAR_STYLE)
@fragment.css('aside.quote blockquote > p').each do |p|
p['style'] = 'padding: 0;'
@ -261,8 +262,10 @@ module Email
if attachments[original_filename]
url = attachments[original_filename].url
style = if div['data-oneboxed']
"#{ONEBOX_IMAGE_THUMBNAIL_STYLE} #{ONEBOX_IMAGE_BASE_STYLE}"
onebox_type = div['data-onebox-type']
style = if onebox_type
onebox_style = onebox_type == "avatar-inline" ? ONEBOX_INLINE_AVATAR_STYLE : ONEBOX_IMAGE_THUMBNAIL_STYLE
"#{onebox_style} #{ONEBOX_IMAGE_BASE_STYLE}"
else
calculate_width_and_height_style(div)
end

View File

@ -451,28 +451,36 @@ module PrettyText
width = img['width']
height = img['height']
oneboxed = img.ancestors.css(".onebox-body").any? || img.classes.include?("onebox-avatar")
onebox_type = nil
if img.ancestors.css(".onebox-body").any?
if img.classes.include?("onebox-avatar-inline")
onebox_type = "avatar-inline"
else
onebox_type = "thumbnail"
end
end
# we always want this to be tiny and without any special styles
if img.classes.include?('site-icon')
oneboxed = false
onebox_type = nil
width = 16
height = 16
end
if Upload.secure_media_url?(url)
img.add_next_sibling secure_media_placeholder(doc, url, oneboxed: oneboxed, width: width, height: height)
img.add_next_sibling secure_media_placeholder(doc, url, onebox_type: onebox_type, width: width, height: height)
img.remove
end
end
end
def self.secure_media_placeholder(doc, url, oneboxed: false, width: nil, height: nil)
def self.secure_media_placeholder(doc, url, onebox_type: false, width: nil, height: nil)
data_width = width ? "data-width=#{width}" : ''
data_height = height ? "data-height=#{height}" : ''
data_oneboxed = oneboxed ? "data-oneboxed=true" : ''
data_onebox_type = onebox_type ? "data-onebox-type='#{onebox_type}'" : ''
<<~HTML
<div class="secure-media-notice" data-stripped-secure-media="#{url}" #{data_oneboxed} #{data_width} #{data_height}>
<div class="secure-media-notice" data-stripped-secure-media="#{url}" #{data_onebox_type} #{data_width} #{data_height}>
#{I18n.t('emails.secure_media_placeholder')} <a class='stripped-secure-view-media' href="#{url}">#{I18n.t("emails.view_redacted_media")}</a>.
</div>
HTML

View File

@ -362,6 +362,58 @@ describe Email::Styles do
expect(@frag.css('[data-embedded-secure-image]')[1].attr('style')).to eq('width: 60px; max-height: 80%; max-width: 20%; height: auto; float: left; margin-right: 10px;')
end
end
context "when there is an inline-avatar in the onebox" do
let(:html) do
<<~HTML
<p><a class="mention" href="/u/martin">@martin</a> check this out:</p>
<aside class="onebox githubpullrequest">
<header class="source">
<a href="https://github.com/discourse/discourse/pull/11140" target="_blank" rel="noopener">github.com/discourse/discourse</a>
</header>
<article class="onebox-body">
<div class="github-row">
<div class="github-info-container">
<h4>
<a href="https://github.com/discourse/discourse/pull/11140" target="_blank" rel="noopener">FEATURE: Implement edit functionality for post notices</a>
</h4>
<div class="branches">
<code>discourse:master</code> ← <code>discourse:feature/post_notices_edit</code>
</div>
<div class="github-info">
<div class="date">
opened <span class="discourse-local-date" data-format="ll" data-date="2020-11-05" data-time="20:33:53" data-timezone="UTC">08:33PM - 05 Nov 20 UTC</span>
</div>
<div class="user">
<a href="https://github.com/udan11" target="_blank" rel="noopener">
<img alt="udan11" src="#{Discourse.base_url}/secure-media-uploads/original/1X/123456.png" class="onebox-avatar-inline" width="20" height="20">
udan11
</a>
</div>
<div class="lines" title="2 commits changed 27 files with 250 additions and 224 deletions">
<a href="https://github.com/discourse/discourse/pull/11140/files" target="_blank" rel="noopener">
<span class="added">+250</span>
<span class="removed">-224</span>
</a>
</div>
</div>
</div>
</div>
</article>
<div class="onebox-metadata">
</div>
<div style="clear: both"></div>
</aside>
HTML
end
it "keeps the special onebox styles" do
strip_and_inline
expect(@frag.to_s).to include("cid:email/test.png")
expect(@frag.css('[data-sripped-secure-media]')).not_to be_present
expect(@frag.css('[data-embedded-secure-image]')[0].attr('style')).to eq('width: 20px; height: 20px; float: none; vertical-align: middle; max-height: 80%; max-width: 20%; height: auto; float: left; margin-right: 10px;')
end
end
end
end
end