Polish up the My Stories page

This commit is contained in:
Josh Perez 2022-08-24 20:33:16 -04:00 committed by GitHub
parent 68398823e3
commit 984f26c98e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 43 deletions

View File

@ -3,19 +3,32 @@
.MyStories {
&__distribution {
padding: 0 14px;
&__title {
@include font-body-1-bold;
color: $color-gray-05;
margin: 24px 0 8px 0;
margin: 24px 10px 8px 10px;
}
}
&__story-button {
flex: 1;
}
&__story {
align-items: center;
border-radius: 10px;
display: flex;
height: 96px;
padding-right: 10px;
&:hover {
background: $color-gray-65;
& .MyStories__story__download,
.MyStories__story__more__button {
background: $color-gray-60;
}
}
&__details {
@include font-body-1-bold;
@ -23,11 +36,7 @@
display: flex;
flex-direction: column;
flex: 1;
}
&__preview {
@include button-reset;
margin-right: 12px;
margin-left: 12px;
}
&__timestamp {
@ -48,12 +57,16 @@
&::after {
@include color-svg(
'../images/icons/v2/save-outline-24.svg',
$color-gray-25
$color-gray-15
);
content: '';
height: 18px;
width: 18px;
}
&:hover {
background: $color-gray-75 !important;
}
}
&__more__button {
@ -69,12 +82,16 @@
&::after {
@include color-svg(
'../images/icons/v2/more-horiz-24.svg',
$color-gray-25
$color-gray-15
);
content: '';
height: 18px;
width: 18px;
}
&:hover {
background: $color-gray-75 !important;
}
}
}

View File

@ -41,7 +41,7 @@
margin-left: 24px;
opacity: 1;
position: absolute;
right: 14px;
right: 16px;
top: 0px;
width: 22px;
}
@ -114,7 +114,7 @@
}
&__search__container {
margin: 14px 16px 8px 16px;
margin: 14px 16px 10px 16px;
}
&__placeholder {

View File

@ -8,6 +8,7 @@
border-radius: 10px;
display: flex;
height: 96px;
min-height: 96px;
padding: 0 10px;
width: 100%;
@ -87,14 +88,16 @@
@include button-reset;
align-items: center;
background-size: cover;
background-color: $color-gray-60;
background-size: cover;
border-radius: 8px;
display: flex;
height: 72px;
justify-content: center;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 46px;
z-index: $z-index-base;
}

View File

@ -78,18 +78,18 @@ export const MyStories = ({
</div>
{list.stories.map(story => (
<div className="MyStories__story" key={story.timestamp}>
{story.attachment && (
<button
aria-label={i18n('MyStories__story')}
className="MyStories__story__preview"
onClick={() =>
viewStory({
storyId: story.messageId,
storyViewMode: StoryViewModeType.User,
})
}
type="button"
>
<button
aria-label={i18n('MyStories__story')}
className="StoryListItem__button MyStories__story-button"
onClick={() =>
viewStory({
storyId: story.messageId,
storyViewMode: StoryViewModeType.User,
})
}
type="button"
>
<div className="StoryListItem__previews">
<StoryImage
attachment={story.attachment}
firstName={i18n('you')}
@ -97,26 +97,27 @@ export const MyStories = ({
isMe
isThumbnail
label={i18n('MyStories__story')}
moduleClassName="MyStories__story__preview"
moduleClassName="StoryListItem__previews--image"
queueStoryDownload={queueStoryDownload}
storyId={story.messageId}
/>
</button>
)}
<div className="MyStories__story__details">
{story.views === 1
? i18n('MyStories__views--singular', [String(story.views)])
: i18n('MyStories__views--plural', [
String(story.views || 0),
])}
<MessageTimestamp
i18n={i18n}
isRelativeTime
module="MyStories__story__timestamp"
timestamp={story.timestamp}
/>
</div>
</div>
<div className="MyStories__story__details">
{story.views === 1
? i18n('MyStories__views--singular', [
String(story.views),
])
: i18n('MyStories__views--plural', [
String(story.views || 0),
])}
<MessageTimestamp
i18n={i18n}
isRelativeTime
module="MyStories__story__timestamp"
timestamp={story.timestamp}
/>
</div>
</button>
<button
aria-label={i18n('MyStories__download')}
className="MyStories__story__download"

View File

@ -133,6 +133,10 @@ export const TextAttachment = ({
node.setSelectionRange(node.value.length, node.value.length);
}, [isEditingText]);
const storyBackgroundColor = {
background: getBackgroundColor(textAttachment),
};
return (
<Measure bounds>
{({ contentRect, measureRef }) => (
@ -151,11 +155,12 @@ export const TextAttachment = ({
}
}}
ref={measureRef}
style={isThumbnail ? storyBackgroundColor : undefined}
>
<div
className="TextAttachment__story"
style={{
background: getBackgroundColor(textAttachment),
...(isThumbnail ? {} : storyBackgroundColor),
transform: `scale(${(contentRect.bounds?.height || 1) / 1280})`,
}}
>