Section visibility toggle (#2634)

* Moving click handler up to parent item, preventing dupe calls on checkbox

* Alignment and setting CBs to read only

* Label alignment when sibling of input

Co-authored-by: Opender Singh <opender94@gmail.com>
This commit is contained in:
Mike Ellan
2020-09-18 16:58:06 -04:00
committed by GitHub
parent a1c96fb6ac
commit 336bbad922
2 changed files with 21 additions and 45 deletions

View File

@@ -50,10 +50,14 @@ const StyledInner = styled.div`
const StyledText = styled.div`
white-space: nowrap;
display: flex;
align-items: center;
& > *:not(:first-child) {
margin-left: 0.3em;
}
input + label {
padding-top: 0px !important;
}
`;
const StyledIconContainer = styled.div`

View File

@@ -92,64 +92,36 @@ function Sidebar(props: Props) {
<SidebarHeader headerTitle="INFO" sectionVisible={infoSec} toggleSection={setInfoSec}>
<Dropdown renderButton={DropdownEllipsis}>
<DropdownDivider>VISIBILITY</DropdownDivider>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setServersVisible}
defaultChecked={serversVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setServersVisible}>
<input type="checkbox" checked={serversVisible} readOnly />
<label htmlFor="servers">Servers</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input type="checkbox" onClick={setPathsVisible} defaultChecked={pathsVisible} />
<DropdownItem stayOpenAfterClick onClick={setPathsVisible}>
<input type="checkbox" checked={pathsVisible} readOnly />
<label htmlFor="paths">Paths</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setRequestsVisible}
defaultChecked={requestsVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setRequestsVisible}>
<input type="checkbox" checked={requestsVisible} readOnly />
<label htmlFor="requests">Requests</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setResponsesVisible}
defaultChecked={responsesVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setResponsesVisible}>
<input type="checkbox" checked={responsesVisible} readOnly />
<label htmlFor="responses">Responses</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setParametersVisible}
defaultChecked={parametersVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setParametersVisible}>
<input type="checkbox" checked={parametersVisible} readOnly />
<label htmlFor="parameters">Parameters</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setHeadersVisible}
defaultChecked={headersVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setHeadersVisible}>
<input type="checkbox" checked={headersVisible} readOnly />
<label htmlFor="headers">Headers</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setSchemasVisible}
defaultChecked={schemasVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setSchemasVisible}>
<input type="checkbox" checked={schemasVisible} readOnly />
<label htmlFor="schemas">Schemas</label>
</DropdownItem>
<DropdownItem stayOpenAfterClick>
<input
type="checkbox"
onClick={setSecurityVisible}
defaultChecked={securityVisible}
/>
<DropdownItem stayOpenAfterClick onClick={setSecurityVisible}>
<input type="checkbox" checked={securityVisible} readOnly />
<label htmlFor="security">Security</label>
</DropdownItem>
</Dropdown>