Fade control window if disconnected

This commit is contained in:
Max Goodhart
2020-06-18 21:09:12 -07:00
parent 888b632f2a
commit 6bded73711

View File

@@ -88,6 +88,7 @@ function App({ wsEndpoint }) {
<div> <div>
connection status: {isConnected ? 'connected' : 'connecting...'} connection status: {isConnected ? 'connected' : 'connecting...'}
</div> </div>
<StyledDataContainer isConnected={isConnected}>
<div> <div>
{range(0, 3).map((y) => ( {range(0, 3).map((y) => (
<StyledGridLine> <StyledGridLine>
@@ -111,6 +112,7 @@ function App({ wsEndpoint }) {
? streamData.map((row) => <StreamLine id={row._id} row={row} />) ? streamData.map((row) => <StreamLine id={row._id} row={row} />)
: 'loading...'} : 'loading...'}
</div> </div>
</StyledDataContainer>
</div> </div>
) )
} }
@@ -182,6 +184,10 @@ function ListeningButton(props) {
) )
} }
const StyledDataContainer = styled.div`
opacity: ${({ isConnected }) => (isConnected ? 1 : 0.5)};
`
const StyledGridLine = styled.div` const StyledGridLine = styled.div`
display: flex; display: flex;
` `