LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add timestamp on mouseover

Browse source
This commit is contained in:
Rafael 2022-01-04 12:18:40 -03:00 committed by Thomas Zarebczan
parent c6fb204d11
commit 4a73fbf688
3 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/livestreamComment/view.jsx
View file

@ -12,6 +12,7 @@ import classnames from 'classnames';
import CommentMenuList from 'component/commentMenuList'; import CommentMenuList from 'component/commentMenuList';
import Button from 'component/button'; import Button from 'component/button';
import CreditAmount from 'component/common/credit-amount'; import CreditAmount from 'component/common/credit-amount';
import DateTime from 'component/dateTime';
import OptimizedImage from 'component/optimizedImage'; import OptimizedImage from 'component/optimizedImage';
import { parseSticker } from 'util/comments'; import { parseSticker } from 'util/comments';
@ -26,7 +27,7 @@ type Props = {
function LivestreamComment(props: Props) { function LivestreamComment(props: Props) {
const { comment, claim, uri, stakedLevel, myChannelIds } = props; const { comment, claim, uri, stakedLevel, myChannelIds } = props;
const { channel_url: authorUri, comment: message, support_amount: supportAmount } = comment; const { channel_url: authorUri, comment: message, support_amount: supportAmount, timestamp } = comment;
const [hasUserMention, setUserMention] = React.useState(false); const [hasUserMention, setUserMention] = React.useState(false);
const commentIsMine = comment.channel_id && isMyComment(comment.channel_id); const commentIsMine = comment.channel_id && isMyComment(comment.channel_id);
@ -34,6 +35,7 @@ function LivestreamComment(props: Props) {
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri; const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
const { claimName } = parseURI(authorUri || ''); const { claimName } = parseURI(authorUri || '');
const stickerFromMessage = parseSticker(message); const stickerFromMessage = parseSticker(message);
const timePosted = timestamp * 1000;
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
function isMyComment(channelId: string) { function isMyComment(channelId: string) {
@ -108,6 +110,8 @@ function LivestreamComment(props: Props) {
</span> </span>
)} )}
<DateTime date={timePosted} timeAgo />
{comment.removed ? ( {comment.removed ? (
<div className="livestream-comment__text"> <div className="livestream-comment__text">
<Empty text={__('[Removed]')} /> <Empty text={__('[Removed]')} />

10
ui/scss/component/_comments.scss
View file

@ -172,7 +172,7 @@ $thumbnailWidthSmall: 1rem;
} }
.comment__pin { .comment__pin {
margin-left: var(--spacing-s); margin: 0 var(--spacing-s);
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
.icon { .icon {
@ -223,10 +223,14 @@ $thumbnailWidthSmall: 1rem;
} }
.comment__author { .comment__author {
max-width: 10rem;
text-overflow: ellipsis;
margin-right: var(--spacing-xs); margin-right: var(--spacing-xs);
height: 100%; height: 100%;
.button__content {
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
}
} }
.comment__author--creator { .comment__author--creator {

11
ui/scss/component/_livestream.scss
View file

@ -87,6 +87,17 @@ $recent-msg-button__height: 2rem;
list-style-type: none; list-style-type: none;
position: relative; position: relative;
.date_time {
color: var(--color-text-subtitle);
opacity: 0.5;
}
&:not(:hover) {
.date_time:not(:focus) {
display: none;
}
}
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
&:hover { &:hover {
background-color: var(--color-card-background-highlighted); background-color: var(--color-card-background-highlighted);