variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-08-20 21:09:35 +02:00
parent c02999061e
commit efc52592ba
2 changed files with 29 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx
View file

@ -3,7 +3,8 @@ import {val} from '@theatre/dataverse'
import {usePrism} from '@theatre/dataverse-react' import {usePrism} from '@theatre/dataverse-react'
import getStudio from '@theatre/studio/getStudio' import getStudio from '@theatre/studio/getStudio'
import {generateDiskStateRevision} from '@theatre/studio/StudioStore/generateDiskStateRevision' import {generateDiskStateRevision} from '@theatre/studio/StudioStore/generateDiskStateRevision'
import PopoverArrow from '@theatre/studio/uiComponents/Popover/PopoverArrow' import BasicPopover from '@theatre/studio/uiComponents/Popover/BasicPopover'
import usePopover from '@theatre/studio/uiComponents/Popover/usePopover'
import React, {useCallback, useState} from 'react' import React, {useCallback, useState} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {rowBgColor} from './propEditors/utils/SingleRowPropEditor' import {rowBgColor} from './propEditors/utils/SingleRowPropEditor'
@ -19,27 +20,6 @@ const TheExportRow = styled.div`
align-items: stretch; align-items: stretch;
` `
const ExportInfo = styled.div`
background-color: #515357;
padding: 6px 11px;
margin-top: 8px;
border: 1px solid #535353;
box-shadow: 0 13px 8px -4px #0000004f;
border-radius: 3px;
position: relative;
& a {
color: inherit;
}
`
const InfoArrow = styled(PopoverArrow)`
position: absolute;
top: -2px;
left: 18px;
color: #515357;
`
const Button = styled.button<{disabled?: boolean}>` const Button = styled.button<{disabled?: boolean}>`
text-align: center; text-align: center;
padding: 8px; padding: 8px;
@ -60,6 +40,11 @@ const Button = styled.button<{disabled?: boolean}>`
} }
` `
const ExportTooltip = styled(BasicPopover)`
width: 280px;
padding: 1em;
`
const ProjectDetails: React.FC<{ const ProjectDetails: React.FC<{
projects: Project[] projects: Project[]
}> = ({projects}) => { }> = ({projects}) => {
@ -139,26 +124,35 @@ const ProjectDetails: React.FC<{
}, 40000) }, 40000)
}, []) }, [])
return ( const [tooltip, openExportTooltip] = usePopover(
<> {pointerDistanceThreshold: 50},
{nn} () => (
<Container> <ExportTooltip>
<TheExportRow>
<Button
onClick={!downloaded ? exportProject : undefined}
disabled={downloaded}
>
{downloaded ? '(Exported)' : `Export ${projectId} to JSON`}
</Button>
<ExportInfo>
<InfoArrow />
This will create a JSON file with the state of your project. You can This will create a JSON file with the state of your project. You can
commit this file to your git repo and include it in your production commit this file to your git repo and include it in your production
bundle.{' '} bundle.{' '}
<a href="https://docs.theatrejs.com/export.html" target="_blank"> <a href="https://docs.theatrejs.com/export.html" target="_blank">
Here is a quick guide on how to export to production. Here is a quick guide on how to export to production.
</a> </a>
</ExportInfo> </ExportTooltip>
),
)
return (
<>
{nn}
{tooltip}
<Container>
<TheExportRow>
<Button
onMouseEnter={(e) =>
openExportTooltip(e, e.target as unknown as HTMLButtonElement)
}
onClick={!downloaded ? exportProject : undefined}
disabled={downloaded}
>
{downloaded ? '(Exported)' : `Export ${projectId} to JSON`}
</Button>
</TheExportRow> </TheExportRow>
</Container> </Container>
</> </>

4
theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
View file

@ -25,6 +25,10 @@ const Container = styled.div`
border: 1px solid var(--popover-inner-stroke); border: 1px solid var(--popover-inner-stroke);
box-shadow: 0 6px 8px -4px black, 0 0 0 1px var(--popover-outer-stroke); box-shadow: 0 6px 8px -4px black, 0 0 0 1px var(--popover-outer-stroke);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
& a {
color: inherit;
}
` `
const BasicPopover: React.FC<{className?: string}> = React.forwardRef( const BasicPopover: React.FC<{className?: string}> = React.forwardRef(