Polish up the My Stories page
This commit is contained in:
Josh Perez
GitHub
parent
68398823e3
commit
984f26c98e
5 changed files with 69 additions and 43 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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})`,
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue