ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make paneOpacity smoothly set lower when dragging (#235)

Browse Source
This commit is contained in:
Frank Noirot
2023-08-07 17:07:28 -04:00
committed by GitHub
parent e7a70a9735
commit 1cba48f513
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.tsx
View File

@ -132,7 +132,12 @@ export function App() {
useHotkeys('shift + e', () => togglePane('kclErrors'))
useHotkeys('shift + d', () => togglePane('debug'))
const paneOpacity = onboardingStatus === 'camera' ? 'opacity-20' : ''
const paneOpacity =
onboardingStatus === 'camera'
? 'opacity-20'
: isMouseDownInStream
? 'opacity-40'
: ''
// const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
const onChange = (value: string, viewUpdate: ViewUpdate) => {
@ -353,13 +358,15 @@ export function App() {
>
<AppHeader
className={
paneOpacity + (isMouseDownInStream ? ' pointer-events-none' : '')
'transition-opacity transition-duration-75 ' +
paneOpacity +
(isMouseDownInStream ? ' pointer-events-none' : '')
}
/>
<ModalContainer />
<Resizable
className={
'z-10 my-5 ml-5 pr-1 flex flex-col flex-grow overflow-hidden' +
'z-10 my-5 ml-5 pr-1 flex flex-col flex-grow overflow-hidden transition-opacity transition-duration-75 ' +
(isMouseDownInStream || onboardingStatus === 'camera'
? ' pointer-events-none '
: ' ') +
@ -438,7 +445,9 @@ export function App() {
<DebugPanel
title="Debug"
className={
paneOpacity + (isMouseDownInStream ? ' pointer-events-none' : '')
'transition-opacity transition-duration-75 ' +
paneOpacity +
(isMouseDownInStream ? ' pointer-events-none' : '')
}
open={openPanes.includes('debug')}
/>