Merge pull request #61 from zalmoxisus/cssfix

Improve actions list styling
alexkuz · Jan 4, 2017 · 78e58e6 · 78e58e6
2 parents 3473260 + ae02d9a
commit 78e58e6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/ActionListRow.jsx b/src/ActionListRow.jsx
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import shouldPureComponentUpdate from 'react-pure-render/function';
 import dateformat from 'dateformat';
+import debounce from 'lodash.debounce';
 import RightSlider from './RightSlider';
 
 const BUTTON_SKIP = 'Skip';
@@ -23,14 +24,6 @@ export default class ActionListRow extends Component {
 
   shouldComponentUpdate = shouldPureComponentUpdate
 
-  componentDidMount() {
-    document.addEventListener('mouseleave', this.handleMouseLeave);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mouseleave', this.handleMouseLeave);
-  }
-
   render() {
     const { styling, isSelected, action, isInitAction, onSelect,
             timestamps, isSkipped } = this.props;
@@ -45,6 +38,7 @@ export default class ActionListRow extends Component {
       <div onClick={onSelect}
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}
+           onMouseDown={this.handleMouseDown}
            {...styling([
              'actionListItem',
              isSelected && 'actionListItemSelected',
@@ -89,11 +83,24 @@ export default class ActionListRow extends Component {
     }
   }
 
-  handleMouseEnter = () => {
-    this.setState({ hover: true });
+  handleMouseEnter = e => {
+    if (this.hover) return;
+    this.handleMouseEnterDebounced(e.buttons);
   }
 
+  handleMouseEnterDebounced = debounce((buttons) => {
+    if (buttons) return;
+    this.setState({ hover: true });
+  }, 300)
+
   handleMouseLeave = () => {
-    this.setState({ hover: false });
+    this.handleMouseEnterDebounced.cancel();
+    if (this.state.hover) this.setState({ hover: false });
+  }
+
+  handleMouseDown = e => {
+    if (e.target.className.indexOf('selectorButton') === 0) return;
+    if (this.handleMouseEnterDebounced) this.handleMouseEnterDebounced.cancel();
+    if (this.state.hover) this.setState({ hover: false });
   }
 }
diff --git a/src/utils/createStylingFromTheme.js b/src/utils/createStylingFromTheme.js
@@ -123,7 +123,6 @@ const getSheetFromColorMap = map => ({
   actionListItemButtons: {
     position: 'relative',
     height: '20px',
-    'flex-basis': '25%',
     display: 'flex'
   },
 
@@ -144,7 +143,7 @@ const getSheetFromColorMap = map => ({
   },
 
   actionListItemName: {
-    overflow: 'auto',
+    overflow: 'hidden',
     'text-overflow': 'ellipsis',
     'line-height': '20px'
   },
@@ -347,6 +346,7 @@ const getSheetFromColorMap = map => ({
   },
 
   rightSlider: {
+    'font-smoothing': 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591
     position: 'absolute',
     right: 0,
     transform: 'translateX(150%)',
@@ -359,6 +359,7 @@ const getSheetFromColorMap = map => ({
   },
 
   rightSliderShown: {
+    position: 'static',
     transform: 'translateX(0)',
   },