Merge pull request #545 from oskarhane/3.0-make-dropdown-easier-to-keep

Fix for sensitive dropdown menu closing too easy
neo4j · May 23, 2017 · e287856 · e287856
2 parents 3c5c337 + 2b82f50
commit e287856
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/browser/modules/Stream/FrameTitlebar.jsx b/src/browser/modules/Stream/FrameTitlebar.jsx
@@ -30,7 +30,7 @@ import { FrameButton } from 'browser-components/buttons'
 import Visible from 'browser-components/Visible'
 import { CSVSerializer } from 'services/serializer'
 import { ExpandIcon, ContractIcon, RefreshIcon, CloseIcon, UpIcon, DownIcon, PinIcon, DownloadIcon } from 'browser-components/icons/Icons'
-import { StyledFrameTitleBar, StyledFrameCommand, DottedLineHover, FrameTitlebarButtonSection, DropdownContent, DropdownButton, DropdownItem } from './styled'
+import { StyledFrameTitleBar, StyledFrameCommand, DottedLineHover, FrameTitlebarButtonSection, DropdownList, DropdownContent, DropdownButton, DropdownItem } from './styled'
 import { downloadPNGFromSVG } from 'shared/services/exporting/pngUtils'
 
 const getCsvData = (exportData) => {
@@ -81,10 +81,12 @@ class FrameTitlebar extends Component {
           <Visible if={frame.type === 'cypher' && props.exportData}>
             <DropdownButton>
               <DownloadIcon />
-              <DropdownContent class='dropdown-content'>
-                <DropdownItem onClick={() => this.exportPNG()}>Export PNG</DropdownItem>
-                <DropdownItem download='export.csv' href={this.state.csvData}>Export CSV</DropdownItem>
-              </DropdownContent>
+              <DropdownList>
+                <DropdownContent>
+                  <DropdownItem onClick={() => this.exportPNG()}>Export PNG</DropdownItem>
+                  <DropdownItem download='export.csv' href={this.state.csvData}>Export CSV</DropdownItem>
+                </DropdownContent>
+              </DropdownList>
             </DropdownButton>
           </Visible>
           <FrameButton title='Pin at top' onClick={() => {

diff --git a/src/browser/modules/Stream/styled.jsx b/src/browser/modules/Stream/styled.jsx
@@ -275,12 +275,16 @@ export const DropdownButton = styled.li`
   }
   display: inline-block;
   &:hover {
-    > .dropdown-content {
+    > ul li {
     display: block;
     }
   };
 `
 
+export const DropdownList = styled.ul`
+
+`
+
 export const DropdownContent = styled.li`
   display: none;
   position: absolute;