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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

72
stylesheets/_modules.scss
View file

@ -184,26 +184,64 @@
text-align: center;
position: relative;
cursor: pointer;
margin-left: -12px;
margin-right: -12px;
margin-top: -10px;
margin-bottom: -10px;
border-radius: 16px;
overflow: hidden;
background-color: $color-white;
}
.module-message__attachment-container--with-content-below {
margin-bottom: 7px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.module-message__attachment-container--with-content-above {
margin-top: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.module-message__img-border-overlay {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
left: 0;
right: 0;
border-radius: 16px;
box-shadow: inset 0px 0px 0px 1px $color-black-02;
}
.module-message__img-border-overlay--with-content-below {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.module-message__img-border-overlay--with-content-above {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.module-message__img-attachment {
max-width: 386px;
margin-left: -12px;
margin-right: -12px;
margin-top: -10px;
// The padding on the bottom of the bubble produces three extra pixels of space at the
// bottom, so this doesn't match up with the padding numbers above.
margin-bottom: -13px;
border-radius: 16px;
border: 1px solid $color-black-02;
background-color: $color-white;
object-fit: cover;
width: calc(100% + 24px);
width: 100%;
min-width: 200px;
min-height: 150px;
max-height: 300px;
// The padding on the bottom of the bubble produces three extra pixels of space at the
// bottom, so this doesn't match up with the padding numbers above.
margin-bottom: -3px;
// redundant with attachment-container, but we get cursor flashing on move otherwise
cursor: pointer;
}
@ -230,7 +268,7 @@
);
position: absolute;
bottom: 0;
z-index: 1;
z-index: 2;
left: 0;
right: 0;
margin-left: -12px;
@ -240,18 +278,6 @@
border-bottom-right-radius: 16px;
}
.module-message__img-attachment--with-content-below {
margin-bottom: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.module-message__img-attachment--with-content-above {
margin-top: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.module-message__broken-image {
font-size: 11px;
line-height: 16px;

7
stylesheets/_theme_dark.scss
View file

@ -626,11 +626,14 @@ body.dark-theme {
background-color: $color-conversation-teal;
}
.module-message__img-attachment {
border: 1px solid $color-white-02;
.module-message__attachment-container {
background-color: $color-black;
}
.module-message__img-border-overlay {
box-shadow: inset 0px 0px 0px 1px rgba($color-dark-30, 0.25);
}
.module-message__img-overlay {
background-image: linear-gradient(
to bottom,

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}