Merge pull request #223 from ooni/detailbox-header-toggle

Toggle sections by clicking header
ooni · Jul 23, 2019 · cc48d7c · cc48d7c
2 parents 9c991b8 + 9a2d195
commit cc48d7c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/components/measurement/CommonDetails.js b/components/measurement/CommonDetails.js
@@ -104,6 +104,7 @@ const CommonDetails = ({
               <Box >
                 <Link color='blue7' href={measurementURL} download={downloadFilename}>
                   <Button
+                    onClick={(e) => e.stopPropagation()}
                     fontSize={13}
                     mx={3}
                     px={3}>{intl.formatMessage({ id: 'Measurement.CommonDetails.RawMeasurement.Download' })}</Button>

diff --git a/components/measurement/DetailsBox.js b/components/measurement/DetailsBox.js
@@ -44,6 +44,10 @@ const StyledDetailsBox = styled(Box)`
   border: 2px solid ${props => props.theme.colors.gray2};
 `
 
+const StyledDetailsBoxHeader = styled(Flex)`
+  cursor: pointer;
+`
+
 const CollapseTrigger = styled(MdExpandLess)`
   cursor: pointer;
   background-color: white;
@@ -73,14 +77,14 @@ export class DetailsBox extends React.Component {
     return (
       <StyledDetailsBox width={1} {...rest} mb={3}>
         {title &&
-          <Flex px={3} py={2} bg='gray2' alignItems='center'>
+          <StyledDetailsBoxHeader px={3} py={2} bg='gray2' alignItems='center' onClick={() => this.onToggle()}>
             <Box>
               <Heading h={4}>{title}</Heading>
             </Box>
             <Box ml='auto'>
-              <CollapseTrigger size={36} isOpen={isOpen} onClick={() => this.onToggle()}/>
+              <CollapseTrigger size={36} isOpen={isOpen} />
             </Box>
-          </Flex>
+          </StyledDetailsBoxHeader>
         }
         {isOpen &&
           <Box p={3} flexWrap='wrap'>