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

Fix UI for GIFs in groups

Browse source
This commit is contained in:
Fedor Indutny 2021-06-24 14:00:11 -07:00 • committed by GitHub
parent a7799a74c1
commit 6c56d5a5f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 137 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

16
stylesheets/_modules.scss
View file

@ -3938,7 +3938,6 @@ button.module-conversation-details__action-button {
.module-image { .module-image {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 1px;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
} }
@ -4061,6 +4060,10 @@ button.module-conversation-details__action-button {
border-radius: 4px; border-radius: 4px;
} }
.module-image--cropped {
overflow: hidden;
}
.module-image--curved-top-left { .module-image--curved-top-left {
border-top-left-radius: 16px; border-top-left-radius: 16px;
} }
@ -4105,8 +4108,6 @@ button.module-conversation-details__action-button {
} }
.module-image--gif { .module-image--gif {
border-radius: 18px;
&__filesize { &__filesize {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -4279,7 +4280,7 @@ button.module-image__border-overlay:focus {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin: -1px; gap: 1px;
} }
.module-image-grid--one-image { .module-image-grid--one-image {
@ -4294,6 +4295,7 @@ button.module-image__border-overlay:focus {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1px;
} }
.module-image-grid__row { .module-image-grid__row {
@ -4301,6 +4303,7 @@ button.module-image__border-overlay:focus {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
gap: 1px;
} }
// Module: Typing Animation // Module: Typing Animation
@ -10621,11 +10624,6 @@ $contact-modal-padding: 18px;
&--deleted-for-everyone { &--deleted-for-everyone {
font-style: italic; font-style: italic;
} }
&--gif {
border-radius: inherit;
background: inherit;
}
} }
.module-message__context { .module-message__context {

8
ts/components/conversation/Image.tsx
View file

@ -20,6 +20,8 @@ export type Props = {
height?: number; height?: number;
width?: number; width?: number;
cropWidth?: number;
cropHeight?: number;
tabIndex?: number; tabIndex?: number;
overlayText?: string; overlayText?: string;
@ -158,6 +160,8 @@ export class Image extends React.Component<Props> {
theme, theme,
url, url,
width = 0, width = 0,
cropWidth = 0,
cropHeight = 0,
} = this.props; } = this.props;
const { caption, pending } = attachment || { caption: null, pending: true }; const { caption, pending } = attachment || { caption: null, pending: true };
@ -204,8 +208,10 @@ export class Image extends React.Component<Props> {
curveTopLeft ? 'module-image--curved-top-left' : null, curveTopLeft ? 'module-image--curved-top-left' : null,
curveTopRight ? 'module-image--curved-top-right' : null, curveTopRight ? 'module-image--curved-top-right' : null,
smallCurveTopLeft ? 'module-image--small-curved-top-left' : null, smallCurveTopLeft ? 'module-image--small-curved-top-left' : null,
softCorners ? 'module-image--soft-corners' : null softCorners ? 'module-image--soft-corners' : null,
cropWidth || cropHeight ? 'module-image--cropped' : null
)} )}
style={{ width: width - cropWidth, height: height - cropHeight }}
> >
{pending ? ( {pending ? (
this.renderPending() this.renderPending()

66
ts/components/conversation/ImageGrid.tsx
View file

@ -34,6 +34,8 @@ export type Props = {
onClick?: (attachment: AttachmentType) => void; onClick?: (attachment: AttachmentType) => void;
}; };
const GAP = 1;
export const ImageGrid = ({ export const ImageGrid = ({
attachments, attachments,
bottomOverlay, bottomOverlay,
@ -113,8 +115,9 @@ export const ImageGrid = ({
curveTopLeft={curveTopLeft} curveTopLeft={curveTopLeft}
curveBottomLeft={curveBottomLeft} curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={149} height={150}
width={149} width={150}
cropWidth={GAP}
url={getThumbnailUrl(attachments[0])} url={getThumbnailUrl(attachments[0])}
onClick={onClick} onClick={onClick}
onError={onError} onError={onError}
@ -129,8 +132,8 @@ export const ImageGrid = ({
curveTopRight={curveTopRight} curveTopRight={curveTopRight}
curveBottomRight={curveBottomRight} curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[1])} playIconOverlay={isVideoAttachment(attachments[1])}
height={149} height={150}
width={149} width={150}
attachment={attachments[1]} attachment={attachments[1]}
url={getThumbnailUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClick} onClick={onClick}
@ -155,7 +158,8 @@ export const ImageGrid = ({
attachment={attachments[0]} attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={200} height={200}
width={199} width={200}
cropWidth={GAP}
url={getUrl(attachments[0])} url={getUrl(attachments[0])}
onClick={onClick} onClick={onClick}
onError={onError} onError={onError}
@ -167,8 +171,9 @@ export const ImageGrid = ({
theme={theme} theme={theme}
blurHash={attachments[1].blurHash} blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight} curveTopRight={curveTopRight}
height={99} height={100}
width={99} width={100}
cropHeight={GAP}
attachment={attachments[1]} attachment={attachments[1]}
playIconOverlay={isVideoAttachment(attachments[1])} playIconOverlay={isVideoAttachment(attachments[1])}
url={getThumbnailUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
@ -183,8 +188,8 @@ export const ImageGrid = ({
bottomOverlay={withBottomOverlay} bottomOverlay={withBottomOverlay}
noBorder={false} noBorder={false}
curveBottomRight={curveBottomRight} curveBottomRight={curveBottomRight}
height={99} height={100}
width={99} width={100}
attachment={attachments[2]} attachment={attachments[2]}
playIconOverlay={isVideoAttachment(attachments[2])} playIconOverlay={isVideoAttachment(attachments[2])}
url={getThumbnailUrl(attachments[2])} url={getThumbnailUrl(attachments[2])}
@ -210,8 +215,10 @@ export const ImageGrid = ({
noBorder={false} noBorder={false}
attachment={attachments[0]} attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={149} height={150}
width={149} width={150}
cropHeight={GAP}
cropWidth={GAP}
url={getThumbnailUrl(attachments[0])} url={getThumbnailUrl(attachments[0])}
onClick={onClick} onClick={onClick}
onError={onError} onError={onError}
@ -224,8 +231,9 @@ export const ImageGrid = ({
curveTopRight={curveTopRight} curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])} playIconOverlay={isVideoAttachment(attachments[1])}
noBorder={false} noBorder={false}
height={149} height={150}
width={149} width={150}
cropHeight={GAP}
attachment={attachments[1]} attachment={attachments[1]}
url={getThumbnailUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClick} onClick={onClick}
@ -242,8 +250,9 @@ export const ImageGrid = ({
noBorder={false} noBorder={false}
curveBottomLeft={curveBottomLeft} curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[2])} playIconOverlay={isVideoAttachment(attachments[2])}
height={149} height={150}
width={149} width={150}
cropWidth={GAP}
attachment={attachments[2]} attachment={attachments[2]}
url={getThumbnailUrl(attachments[2])} url={getThumbnailUrl(attachments[2])}
onClick={onClick} onClick={onClick}
@ -258,8 +267,8 @@ export const ImageGrid = ({
noBorder={false} noBorder={false}
curveBottomRight={curveBottomRight} curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[3])} playIconOverlay={isVideoAttachment(attachments[3])}
height={149} height={150}
width={149} width={150}
attachment={attachments[3]} attachment={attachments[3]}
url={getThumbnailUrl(attachments[3])} url={getThumbnailUrl(attachments[3])}
onClick={onClick} onClick={onClick}
@ -288,8 +297,9 @@ export const ImageGrid = ({
curveTopLeft={curveTopLeft} curveTopLeft={curveTopLeft}
attachment={attachments[0]} attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={149} height={150}
width={149} width={150}
cropWidth={GAP}
url={getThumbnailUrl(attachments[0])} url={getThumbnailUrl(attachments[0])}
onClick={onClick} onClick={onClick}
onError={onError} onError={onError}
@ -301,8 +311,8 @@ export const ImageGrid = ({
blurHash={attachments[1].blurHash} blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight} curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])} playIconOverlay={isVideoAttachment(attachments[1])}
height={149} height={150}
width={149} width={150}
attachment={attachments[1]} attachment={attachments[1]}
url={getThumbnailUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClick} onClick={onClick}
@ -319,8 +329,9 @@ export const ImageGrid = ({
noBorder={isSticker} noBorder={isSticker}
curveBottomLeft={curveBottomLeft} curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[2])} playIconOverlay={isVideoAttachment(attachments[2])}
height={99} height={100}
width={99} width={100}
cropWidth={GAP}
attachment={attachments[2]} attachment={attachments[2]}
url={getThumbnailUrl(attachments[2])} url={getThumbnailUrl(attachments[2])}
onClick={onClick} onClick={onClick}
@ -334,8 +345,9 @@ export const ImageGrid = ({
bottomOverlay={withBottomOverlay} bottomOverlay={withBottomOverlay}
noBorder={isSticker} noBorder={isSticker}
playIconOverlay={isVideoAttachment(attachments[3])} playIconOverlay={isVideoAttachment(attachments[3])}
height={99} height={100}
width={98} width={100}
cropWidth={GAP}
attachment={attachments[3]} attachment={attachments[3]}
url={getThumbnailUrl(attachments[3])} url={getThumbnailUrl(attachments[3])}
onClick={onClick} onClick={onClick}
@ -350,8 +362,8 @@ export const ImageGrid = ({
noBorder={isSticker} noBorder={isSticker}
curveBottomRight={curveBottomRight} curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[4])} playIconOverlay={isVideoAttachment(attachments[4])}
height={99} height={100}
width={99} width={100}
darkOverlay={moreMessagesOverlay} darkOverlay={moreMessagesOverlay}
overlayText={moreMessagesOverlayText} overlayText={moreMessagesOverlayText}
attachment={attachments[4]} attachment={attachments[4]}

100
ts/components/conversation/Message.stories.tsx
View file

@ -720,43 +720,52 @@ story.add('Image', () => {
return renderBothDirections(props); return renderBothDirections(props);
}); });
story.add('Multiple Images', () => { for (let i = 2; i <= 5; i += 1) {
const props = createProps({ story.add(`Multiple Images x${i}`, () => {
attachments: [ const props = createProps({
{ attachments: [
url: '/fixtures/tina-rolf-269345-unsplash.jpg', {
fileName: 'tina-rolf-269345-unsplash.jpg', url: '/fixtures/tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG, fileName: 'tina-rolf-269345-unsplash.jpg',
width: 128, contentType: IMAGE_JPEG,
height: 128, width: 128,
}, height: 128,
{ },
url: '/fixtures/tina-rolf-269345-unsplash.jpg', {
fileName: 'tina-rolf-269345-unsplash.jpg', url: '/fixtures/tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG, fileName: 'tina-rolf-269345-unsplash.jpg',
width: 128, contentType: IMAGE_JPEG,
height: 128, width: 128,
}, height: 128,
{ },
url: '/fixtures/tina-rolf-269345-unsplash.jpg', {
fileName: 'tina-rolf-269345-unsplash.jpg', url: '/fixtures/tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG, fileName: 'tina-rolf-269345-unsplash.jpg',
width: 128, contentType: IMAGE_JPEG,
height: 128, width: 128,
}, height: 128,
{ },
url: '/fixtures/tina-rolf-269345-unsplash.jpg', {
fileName: 'tina-rolf-269345-unsplash.jpg', url: '/fixtures/tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG, fileName: 'tina-rolf-269345-unsplash.jpg',
width: 128, contentType: IMAGE_JPEG,
height: 128, width: 128,
}, height: 128,
], },
status: 'sent', {
}); url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
].slice(0, i),
status: 'sent',
});
return renderBothDirections(props); return renderBothDirections(props);
}); });
}
story.add('Image with Caption', () => { story.add('Image with Caption', () => {
const props = createProps({ const props = createProps({
@ -794,6 +803,25 @@ story.add('GIF', () => {
return renderBothDirections(props); return renderBothDirections(props);
}); });
story.add('GIF in a group', () => {
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
url: '/fixtures/cat-gif.mp4',
width: 400,
height: 332,
},
],
conversationType: 'group',
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Not Downloaded GIF', () => { story.add('Not Downloaded GIF', () => {
const props = createProps({ const props = createProps({
attachments: [ attachments: [

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

@ -1662,8 +1662,8 @@ export class Message extends React.Component<Props, State> {
if (attachments && attachments.length) { if (attachments && attachments.length) {
if (isGIF(attachments)) { if (isGIF(attachments)) {
// Message container border + image border // Message container border
return GIF_SIZE + 4; return GIF_SIZE + 2;
} }
if (isSticker) { if (isSticker) {

19
ts/types/Attachment.ts
View file

@ -280,21 +280,38 @@ export function getGridDimensions(
} }
if (attachments.length === 2) { if (attachments.length === 2) {
// A B
return { return {
height: 150, height: 150,
width: 300, width: 300,
}; };
} }
if (attachments.length === 3) {
// A A B
// A A C
return {
height: 200,
width: 300,
};
}
if (attachments.length === 4) { if (attachments.length === 4) {
// A B
// C D
return { return {
height: 300, height: 300,
width: 300, width: 300,
}; };
} }
// A A A B B B
// A A A B B B
// A A A B B B
// C C D D E E
// C C D D E E
return { return {
height: 200, height: 250,
width: 300, width: 300,
}; };
} }