Salastil/streamwall
1
0
Fork 0
mirror of https://github.com/streamwall/streamwall.git synced 2026-04-03 20:32:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Combine Button/ToggleButton components

Browse Source
This commit is contained in:
Max Goodhart
2020-08-11 00:59:36 -07:00
parent a9585fd7c8
commit 0d9ebd247c
1 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/web/control.js
View File

@@ -520,13 +520,13 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
{delayState.isConnected && ( {delayState.isConnected && (
<> <>
<span>delay: {delayState.delaySeconds}s</span> <span>delay: {delayState.delaySeconds}s</span>
<StyledToggleButton <StyledButton
isActive={delayState.isCensored} isActive={delayState.isCensored}
onClick={handleToggleStreamCensored} onClick={handleToggleStreamCensored}
tabIndex={1} tabIndex={1}
> >
{buttonText} {buttonText}
</StyledToggleButton> </StyledButton>
</> </>
)} )}
</StyledStreamDelayBox> </StyledStreamDelayBox>
@@ -662,20 +662,20 @@ function GridInput({
</StyledGridButtons> </StyledGridButtons>
)} )}
<StyledGridButtons side="right"> <StyledGridButtons side="right">
<StyledToggleButton <StyledButton
isActive={isBlurred} isActive={isBlurred}
onClick={handleBlurClick} onClick={handleBlurClick}
tabIndex={1} tabIndex={1}
> >
<NoVideoIcon /> <NoVideoIcon />
</StyledToggleButton> </StyledButton>
<StyledToggleButton <StyledButton
isActive={isListening} isActive={isListening}
onClick={handleListeningClick} onClick={handleListeningClick}
tabIndex={1} tabIndex={1}
> >
<SoundIcon /> <SoundIcon />
</StyledToggleButton> </StyledButton>
</StyledGridButtons> </StyledGridButtons>
<StyledGridInput <StyledGridInput
value={editingValue || spaceValue || ''} value={editingValue || spaceValue || ''}
@@ -760,6 +760,13 @@ const StyledButton = styled.button`
background: #ccc; background: #ccc;
border-radius: 5px; border-radius: 5px;
${({ isActive }) =>
isActive &&
`
border-color: red;
background: #c77;
`};
&:focus { &:focus {
outline: none; outline: none;
box-shadow: 0 0 10px orange inset; box-shadow: 0 0 10px orange inset;
@@ -778,15 +785,6 @@ const StyledSmallButton = styled(StyledButton)`
} }
` `
const StyledToggleButton = styled(StyledButton)`
${({ isActive }) =>
isActive &&
`
border-color: red;
background: #c77;
`};
`
const StyledGridContainer = styled.div` const StyledGridContainer = styled.div`
position: relative; position: relative;
` `