mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Message: video/image attachment borders inline, on top of image

Browse source 
Otherwise, its transparency will result in a distracting line between it
and its attached message bubble
This commit is contained in:
Scott Nonnenberg 2018-08-01 15:40:13 -07:00
parent 8833326b08
commit b0b1e9b8e3
3 changed files with 96 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

62
ts/components/conversation/Message.tsx
View file

@ -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}