Message: video/image attachment borders inline, on top of image
Otherwise, its transparency will result in a distracting line between it and its attached message bubble
This commit is contained in:
parent
8833326b08
commit
b0b1e9b8e3
3 changed files with 96 additions and 45 deletions
|
@ -395,23 +395,34 @@ export class Message extends React.Component<Props, State> {
|
|||
<div
|
||||
onClick={onClickAttachment}
|
||||
role="button"
|
||||
className="module-message__attachment-container"
|
||||
className={classNames(
|
||||
'module-message__attachment-container',
|
||||
withCaption
|
||||
? 'module-message__attachment-container--with-content-below'
|
||||
: null,
|
||||
withContentAbove
|
||||
? 'module-message__attachment-container--with-content-above'
|
||||
: null
|
||||
)}
|
||||
>
|
||||
<img
|
||||
onError={this.handleImageErrorBound}
|
||||
className={classNames(
|
||||
'module-message__img-attachment',
|
||||
withCaption
|
||||
? 'module-message__img-attachment--with-content-below'
|
||||
: null,
|
||||
withContentAbove
|
||||
? 'module-message__img-attachment--with-content-above'
|
||||
: null
|
||||
)}
|
||||
className="module-message__img-attachment"
|
||||
height={Math.min(MAXIMUM_IMG_HEIGHT, height)}
|
||||
src={attachment.url}
|
||||
alt={i18n('imageAttachmentAlt')}
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__img-border-overlay',
|
||||
withCaption
|
||||
? 'module-message__img-border-overlay--with-content-below'
|
||||
: null,
|
||||
withContentAbove
|
||||
? 'module-message__img-border-overlay--with-content-above'
|
||||
: null
|
||||
)}
|
||||
/>
|
||||
{!withCaption && !collapseMetadata ? (
|
||||
<div className="module-message__img-overlay" />
|
||||
) : null}
|
||||
|
@ -441,23 +452,34 @@ export class Message extends React.Component<Props, State> {
|
|||
<div
|
||||
onClick={onClickAttachment}
|
||||
role="button"
|
||||
className="module-message__attachment-container"
|
||||
className={classNames(
|
||||
'module-message__attachment-container',
|
||||
withCaption
|
||||
? 'module-message__attachment-container--with-content-below'
|
||||
: null,
|
||||
withContentAbove
|
||||
? 'module-message__attachment-container--with-content-above'
|
||||
: null
|
||||
)}
|
||||
>
|
||||
<img
|
||||
onError={this.handleImageErrorBound}
|
||||
className={classNames(
|
||||
'module-message__img-attachment',
|
||||
withCaption
|
||||
? 'module-message__img-attachment--with-content-below'
|
||||
: null,
|
||||
withContentAbove
|
||||
? 'module-message__img-attachment--with-content-above'
|
||||
: null
|
||||
)}
|
||||
className="module-message__img-attachment"
|
||||
alt={i18n('videoAttachmentAlt')}
|
||||
height={Math.min(MAXIMUM_IMG_HEIGHT, height)}
|
||||
src={screenshot.url}
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__img-border-overlay',
|
||||
withCaption
|
||||
? 'module-message__img-border-overlay--with-content-below'
|
||||
: null,
|
||||
withContentAbove
|
||||
? 'module-message__img-border-overlay--with-content-above'
|
||||
: null
|
||||
)}
|
||||
/>
|
||||
{!withCaption && !collapseMetadata ? (
|
||||
<div className="module-message__img-overlay" />
|
||||
) : null}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue