jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes bugs with the story viewer

This commit is contained in:
Josh Perez 2022-05-04 14:45:32 -04:00 committed by GitHub
parent 36c5de4600
commit c6c6087357
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 156 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
images/icons/v2/arrow-left-32.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m23.2028 3.06066c.5857.58579.5857 1.53553 0 2.12132l-11.0104 11.01042 11.0104 11.0104c.5858.5858.5858 1.5356 0 2.1213-.5858.5858-1.5355.5858-2.1213 0l-12.02084-12.0208c-.3055-.3055-.45168-.71-.43852-1.1102-.01354-.4007.13262-.8058.43847-1.1116l12.02079-12.02084c.5858-.58579 1.5356-.58579 2.1214 0z" fill="#000" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

1
images/icons/v2/arrow-right-32.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.06066 3.06066c-.58578.58579-.58578 1.53553 0 2.12132l11.01044 11.01042-11.01048 11.0104c-.58579.5858-.58579 1.5356 0 2.1213.58578.5858 1.53558.5858 2.12128 0l12.0209-12.0208c.3055-.3055.4516-.71.4385-1.1102.0135-.4007-.1326-.8058-.4385-1.1116l-12.0208-12.02084c-.5858-.58579-1.53555-.58579-2.12134 0z" fill="#000" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

23
stylesheets/components/StoryViewer.scss
View File

@ -56,8 +56,6 @@
&__container {
flex-grow: 1;
overflow: hidden;
position: relative;
z-index: $z-index-base;
}
&__story {
@ -74,7 +72,7 @@
transform: translateX(-50%);
min-width: 284px;
width: 56.25vh;
z-index: $z-index-above-base;
z-index: $z-index-above-above-base;
&--group-avatar {
margin-left: -8px;
@ -156,14 +154,16 @@
}
&__arrow {
@include button-reset;
align-items: center;
display: flex;
height: 100vh;
position: absolute;
width: 25%;
z-index: $z-index-above-above-base;
button {
@include button-reset;
&::before {
content: '';
height: 24px;
opacity: 0;
width: 24px;
@ -174,10 +174,10 @@
justify-content: flex-start;
left: 0;
button {
&::before {
margin-left: 24px;
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
'../images/icons/v2/arrow-left-32.svg',
$color-white
);
}
@ -187,25 +187,24 @@
justify-content: flex-end;
right: 0;
button {
&::before {
margin-right: 24px;
@include color-svg(
'../images/icons/v2/chevron-right-24.svg',
'../images/icons/v2/arrow-right-32.svg',
$color-white
);
}
}
&--visible button {
&--visible::before {
opacity: 1;
visibility: visible;
}
}
&__protection {
position: absolute;
width: 100%;
z-index: $z-index-above-base;
z-index: $z-index-base;
&--top {
background: linear-gradient($color-black-alpha-16, $color-transparent);

5
ts/components/StoryViewer.stories.tsx
View File

@ -45,6 +45,7 @@ function getDefaultProps(): PropsType {
path: 'snow.jpg',
url: '/fixtures/snow.jpg',
}),
canReply: true,
messageId: '123',
sender,
timestamp: Date.now(),
@ -64,6 +65,7 @@ story.add('Wide story', () => (
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
canReply: true,
messageId: '123',
sender: getDefaultConversation(),
timestamp: Date.now(),
@ -103,6 +105,7 @@ story.add('Multi story', () => {
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
canReply: true,
messageId: '456',
sender,
timestamp: Date.now() - 3600,
@ -122,6 +125,7 @@ story.add('Caption', () => (
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
canReply: true,
messageId: '123',
sender: getDefaultConversation(),
timestamp: Date.now(),
@ -141,6 +145,7 @@ story.add('Long Caption', () => (
path: 'file.jpg',
url: '/fixtures/snow.jpg',
}),
canReply: true,
messageId: '123',
sender: getDefaultConversation(),
timestamp: Date.now(),

282
ts/components/StoryViewer.tsx
View File

@ -370,21 +370,18 @@ export const StoryViewer = ({
style={{ background: getStoryBackground(attachment) }}
/>
<div className="StoryViewer__content">
<div
<button
aria-label={i18n('back')}
className={classNames(
'StoryViewer__arrow StoryViewer__arrow--left',
{
'StoryViewer__arrow--visible': arrowToShow === Arrow.Left,
}
)}
onClick={showPrevStory}
onMouseMove={() => setArrowToShow(Arrow.Left)}
>
<button
aria-label={i18n('back')}
onClick={showPrevStory}
type="button"
/>
</div>
type="button"
/>
<div className="StoryViewer__protection StoryViewer__protection--top" />
<div className="StoryViewer__container">
<StoryImage
@ -415,157 +412,154 @@ export const StoryViewer = ({
type="button"
/>
)}
<div className="StoryViewer__meta">
{caption && (
<div className="StoryViewer__caption">
{caption.text}
{caption.hasReadMore && !hasExpandedCaption && (
<button
className="MessageBody__read-more"
onClick={() => {
setHasExpandedCaption(true);
}}
onKeyDown={(ev: React.KeyboardEvent) => {
if (ev.key === 'Space' || ev.key === 'Enter') {
setHasExpandedCaption(true);
}
}}
type="button"
>
...
{i18n('MessageBody--read-more')}
</button>
)}
</div>
)}
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
badge={undefined}
color={getAvatarColor(color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(isMe)}
name={name}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.TWENTY_EIGHT}
title={title}
/>
{group && (
<Avatar
acceptedMessageRequest={group.acceptedMessageRequest}
avatarPath={group.avatarPath}
badge={undefined}
className="StoryViewer__meta--group-avatar"
color={getAvatarColor(group.color)}
conversationType="group"
i18n={i18n}
isMe={false}
name={group.name}
profileName={group.profileName}
sharedGroupNames={group.sharedGroupNames}
size={AvatarSize.TWENTY_EIGHT}
title={group.title}
/>
)}
<div className="StoryViewer__meta--title">
{group
? i18n('Stories__from-to-group', {
name: title,
group: group.title,
})
: title}
</div>
<MessageTimestamp
i18n={i18n}
module="StoryViewer__meta--timestamp"
timestamp={timestamp}
/>
<div className="StoryViewer__progress">
{stories.map((story, index) => (
<div
className="StoryViewer__progress--container"
key={story.messageId}
>
{currentStoryIndex === index ? (
<animated.div
className="StoryViewer__progress--bar"
style={{
width: to([styles.width], width => `${width}%`),
}}
/>
) : (
<div
className="StoryViewer__progress--bar"
style={{
width: currentStoryIndex < index ? '0%' : '100%',
}}
/>
)}
</div>
))}
</div>
<div className="StoryViewer__actions">
{canReply && (
</div>
<div className="StoryViewer__meta">
{caption && (
<div className="StoryViewer__caption">
{caption.text}
{caption.hasReadMore && !hasExpandedCaption && (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
tabIndex={0}
className="MessageBody__read-more"
onClick={() => {
setHasExpandedCaption(true);
}}
onKeyDown={(ev: React.KeyboardEvent) => {
if (ev.key === 'Space' || ev.key === 'Enter') {
setHasExpandedCaption(true);
}
}}
type="button"
>
<>
{viewCount > 0 &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__views--singular"
components={[<strong>{viewCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__views--plural"
components={[<strong>{viewCount}</strong>]}
/>
))}
{viewCount > 0 && replyCount > 0 && ' '}
{replyCount > 0 &&
(replyCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__replies--singular"
components={[<strong>{replyCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__replies--plural"
components={[<strong>{replyCount}</strong>]}
/>
))}
{!viewCount && !replyCount && i18n('StoryViewer__reply')}
</>
...
{i18n('MessageBody--read-more')}
</button>
)}
</div>
)}
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
badge={undefined}
color={getAvatarColor(color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(isMe)}
name={name}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.TWENTY_EIGHT}
title={title}
/>
{group && (
<Avatar
acceptedMessageRequest={group.acceptedMessageRequest}
avatarPath={group.avatarPath}
badge={undefined}
className="StoryViewer__meta--group-avatar"
color={getAvatarColor(group.color)}
conversationType="group"
i18n={i18n}
isMe={false}
name={group.name}
profileName={group.profileName}
sharedGroupNames={group.sharedGroupNames}
size={AvatarSize.TWENTY_EIGHT}
title={group.title}
/>
)}
<div className="StoryViewer__meta--title">
{group
? i18n('Stories__from-to-group', {
name: title,
group: group.title,
})
: title}
</div>
<MessageTimestamp
i18n={i18n}
module="StoryViewer__meta--timestamp"
timestamp={timestamp}
/>
<div className="StoryViewer__progress">
{stories.map((story, index) => (
<div
className="StoryViewer__progress--container"
key={story.messageId}
>
{currentStoryIndex === index ? (
<animated.div
className="StoryViewer__progress--bar"
style={{
width: to([styles.width], width => `${width}%`),
}}
/>
) : (
<div
className="StoryViewer__progress--bar"
style={{
width: currentStoryIndex < index ? '0%' : '100%',
}}
/>
)}
</div>
))}
</div>
<div className="StoryViewer__actions">
{canReply && (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
tabIndex={0}
type="button"
>
<>
{viewCount > 0 &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__views--singular"
components={[<strong>{viewCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__views--plural"
components={[<strong>{viewCount}</strong>]}
/>
))}
{viewCount > 0 && replyCount > 0 && ' '}
{replyCount > 0 &&
(replyCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__replies--singular"
components={[<strong>{replyCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__replies--plural"
components={[<strong>{replyCount}</strong>]}
/>
))}
{!viewCount && !replyCount && i18n('StoryViewer__reply')}
</>
</button>
)}
</div>
</div>
<div
<button
aria-label={i18n('forward')}
className={classNames(
'StoryViewer__arrow StoryViewer__arrow--right',
{
'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
}
)}
onClick={showNextStory}
onMouseMove={() => setArrowToShow(Arrow.Right)}
>
<button
aria-label={i18n('forward')}
onClick={showNextStory}
type="button"
/>
</div>
type="button"
/>
<div className="StoryViewer__protection StoryViewer__protection--bottom" />
<button
aria-label={i18n('MyStories__more')}