mirror of
https://github.com/streamwall/streamwall.git
synced 2026-01-31 09:22:49 -05:00
Fade control window if disconnected
This commit is contained in:
@@ -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;
|
||||||
`
|
`
|
||||||
|
|||||||
Reference in New Issue
Block a user