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

"Scroll to recent" button improvements

Browse source
This commit is contained in:
infinite-persistence 2021-08-23 12:17:34 +08:00 • committed by infinite-persistence
parent 4e3b07ede5
commit 6f9784a43f
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import UriIndicator from 'component/uriIndicator';
import CreditAmount from 'component/common/credit-amount'; import CreditAmount from 'component/common/credit-amount';
import ChannelThumbnail from 'component/channelThumbnail'; import ChannelThumbnail from 'component/channelThumbnail';
import Tooltip from 'component/common/tooltip'; import Tooltip from 'component/common/tooltip';
import * as ICONS from 'constants/icons';
type Props = { type Props = {
uri: string, uri: string,
@ -297,10 +298,11 @@ export default function LivestreamComments(props: Props) {
{scrollPos < 0 && ( {scrollPos < 0 && (
<Button <Button
button="alt" button="secondary"
className="livestream__comments-scroll__down" className="livestream__comments__scroll-to-recent"
label={__('Recent Comments')} label={__('Recent Comments')}
onClick={restoreScrollPos} onClick={restoreScrollPos}
iconRight={ICONS.DOWN}
/> />
)} )}

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

@ -1,4 +1,5 @@
$discussion-header__height: 3rem; $discussion-header__height: 3rem;
$recent-msg-button__height: 2rem;
.livestream { .livestream {
flex: 1; flex: 1;
@ -141,6 +142,19 @@ $discussion-header__height: 3rem;
top: var(--spacing-xs); top: var(--spacing-xs);
} }
.livestream__comments__scroll-to-recent {
margin-top: -$recent-msg-button__height;
align-self: center;
margin-bottom: var(--spacing-xs);
font-size: var(--font-xsmall);
padding: var(--spacing-xxs) var(--spacing-s);
opacity: 0.9;
&:hover {
opacity: 1;
}
}
.livestream__comment-create { .livestream__comment-create {
padding: var(--spacing-s); padding: var(--spacing-s);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);