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

add draggable to the top of the floating player so it doesn't get stuck out of the screen

Browse source
This commit is contained in:
Sean Yesmunt 2020-01-08 15:00:50 -05:00
parent b47b52cf97
commit 4ccefa0252
2 changed files with 39 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/component/floatingViewer/view.jsx
View file

@ -142,7 +142,7 @@ export default function FileViewer(props: Props) {
position={inline ? { x: 0, y: 0 } : position}
bounds="parent"
disabled={inline}
handle=".content__info"
handle=".draggable"
cancel=".button"
>
<div
@ -162,19 +162,22 @@ export default function FileViewer(props: Props) {
})}
>
{!inline && (
<div className="content__actions">
<Tooltip label={__('View File')}>
<Button navigate={uri} icon={ICONS.VIEW} button="primary" />
</Tooltip>
<Tooltip label={__('Close')}>
<Button onClick={clearPlayingUri} icon={ICONS.REMOVE} button="primary" />
</Tooltip>
<div className="draggable content__floating-header">
<span className="media__uri--inline">{uri}</span>
<div className="content__actions">
<Tooltip label={__('View File')}>
<Button navigate={uri} icon={ICONS.VIEW} button="primary" />
</Tooltip>
<Tooltip label={__('Close')}>
<Button onClick={clearPlayingUri} icon={ICONS.REMOVE} button="primary" />
</Tooltip>
</div>
</div>
)}
{isReadyToPlay ? <FileRender uri={uri} /> : <LoadingScreen status={loadingMessage} />}
{!inline && (
<div className="content__info">
<div className="draggable content__info">
<div className="claim-preview-title" title={title || uri}>
{title || uri}
</div>

32
ui/scss/component/_content.scss
View file

@ -21,7 +21,8 @@
z-index: 9999;
&:hover {
.content__actions {
.content__actions,
.content__floating-header {
visibility: visible;
}
}
@ -40,18 +41,39 @@
.content__actions {
visibility: hidden;
position: absolute;
right: var(--spacing-small);
top: var(--spacing-small);
z-index: 1;
display: flex;
.button {
@extend .button--close;
height: 1.5rem;
top: 0;
position: relative;
margin-left: var(--spacing-small);
svg {
color: var(--color-white);
}
}
}
.content__floating-header {
visibility: hidden;
position: absolute;
top: 0;
width: 100%;
height: 2rem;
display: flex;
justify-content: space-between;
line-height: 1.5rem;
padding: 0.25rem;
background-color: var(--color-background);
}
.content__actions,
.content__floating-header {
z-index: 1;
}
.content__info {
cursor: grab;
height: var(--floating-viewer-info-height);