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

show price on embeds in markdown

Browse source
This commit is contained in:
Sean Yesmunt 2020-05-22 16:47:10 -04:00
parent 7eb759e0da
commit 03518c8a5a
4 changed files with 35 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
lbrytv/component/fileViewerEmbeddedEnded/view.jsx
View file

@ -36,12 +36,7 @@ function FileViewerEmbeddedEnded(props: Props) {
return ( return (
<div className="file-viewer__overlay"> <div className="file-viewer__overlay">
<div className="file-viewer__overlay-secondary"> <div className="file-viewer__overlay-secondary">
<Button <Button className="file-viewer__overlay-logo" label="LBRY" icon={ICONS.LBRY} href={URL} />
className="file-viewer__overlay-logo file-viewer__embedded-title-logo"
label="LBRY"
icon={ICONS.LBRY}
href={URL}
/>
</div> </div>
<div className="file-viewer__overlay-title">{prompt}</div> <div className="file-viewer__overlay-title">{prompt}</div>
<div className="file-viewer__overlay-actions"> <div className="file-viewer__overlay-actions">

14
ui/component/fileViewerEmbeddedTitle/view.jsx
View file

@ -1,6 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import FilePrice from 'component/filePrice';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { URL } from 'config'; import { URL } from 'config';
@ -25,13 +26,12 @@ function FileViewerEmbeddedTitle(props: Props) {
const lbryLinkProps = isInApp ? { navigate: '/' } : { href: URL }; const lbryLinkProps = isInApp ? { navigate: '/' } : { href: URL };
return ( return (
<div className="file-viewer__embedded-title"> <div className="file-viewer__embedded-header">
<Button label={title} button="link" {...contentLinkProps} /> <Button label={title} button="link" className="file-viewer__embedded-title" {...contentLinkProps} />
<Button <div className="file-viewer__embedded-info">
className="file-viewer__overlay-logo file-viewer__embedded-title-logo" <Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} {...lbryLinkProps} />
icon={ICONS.LBRY} <FilePrice uri={uri} />
{...lbryLinkProps} </div>
/>
</div> </div>
); );
} }

34
ui/scss/component/_file-render.scss
View file

@ -197,11 +197,11 @@
} }
} }
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-title { .file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
display: none; display: none;
} }
.file-viewer__embedded-title { .file-viewer__embedded-header {
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -226,14 +226,32 @@
&:hover { &:hover {
color: var(--color-white); color: var(--color-white);
} }
}
&:first-of-type { .credit-amount,
max-width: 90%; .icon--Key {
margin-right: var(--spacing-medium);
}
}
@media (max-width: $breakpoint-small) { .file-viewer__embedded-title {
max-width: 80%; max-width: 75%;
}
} @media (max-width: $breakpoint-small) {
max-width: 50%;
font-size: var(--font-small);
}
}
.file-viewer__embedded-info {
display: flex;
align-items: center;
font-size: var(--font-small);
margin-left: var(--spacing-medium);
white-space: nowrap;
& > *:not(:last-child) {
margin-right: var(--spacing-small);
} }
} }

2
ui/scss/component/_purchase.scss
View file

@ -5,7 +5,7 @@
color: var(--color-purchased-text); color: var(--color-purchased-text);
.credit-amount, .credit-amount,
.icon { .icon--Key {
position: relative; position: relative;
margin-left: var(--spacing-medium); margin-left: var(--spacing-medium);
white-space: nowrap; white-space: nowrap;