#156 fix splitter handle (#157)

* #156 - fix issue of incorrectly styled splitter handle * #156 - rather than using custom react-splitter-layout fork, upgrade to v4.0.0 where a custom css file can be provided more simply
intuit · Apr 2, 2019 · 752be08 · 752be08
1 parent 59b38a9
commit 752be08
Show file tree

Hide file tree

Showing 9 changed files with 325 additions and 240 deletions.
diff --git a/app/package.json b/app/package.json
@@ -21,7 +21,7 @@
  "react-redux": "^5.1.1",
  "react-router-dom": "^4.3.1",
  "react-scripts": "2.1.8",
- "react-splitter-layout": "^3.0.1",
+ "react-splitter-layout": "^4.0.0",
  "react-test-renderer": "^16.6.3",
  "redux": "^4.0.1",
  "redux-mock-store": "^1.5.3",

diff --git a/app/public/manifest.json b/app/public/manifest.json
@@ -4,7 +4,7 @@
  "icons": [
  {
  "src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
+ "sizes": "32x32 24x24 16x16",
  "type": "image/x-icon"
  }
  ],

diff --git a/app/src/components/graph/GraphContainer.js b/app/src/components/graph/GraphContainer.js
@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
 import { withStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import SplitterLayout from 'react-splitter-layout';
+import '../../shared/reactSplitterLayoutWithOverrides.css';
 
 import "./Graph.css";
 import Graph from './Graph';

diff --git a/app/src/components/home/Home.js b/app/src/components/home/Home.js
@@ -83,7 +83,7 @@ class Home extends React.Component {
  </div>
  <div className={classes.container}>
  <TextField
- label='Search string...'
+ label='Search string or QSL...'
  className={classes.textField}
  fullWidth
  margin='normal'

diff --git a/app/src/components/results/Results.css b/app/src/components/results/Results.css
diff --git a/app/src/components/results/Results.js b/app/src/components/results/Results.js
@@ -9,15 +9,14 @@ import SearchIcon from '@material-ui/icons/Search';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SplitterLayout from 'react-splitter-layout';
+import '../../shared/reactSplitterLayoutWithOverrides.css';
 
 import { ENTER_KEYCODE } from '../../config/appConfig';
 import ResultList from './ResultList';
 import EntityDetails from '../entityDetails/EntityDetails';
 import * as queryActions from '../../actions/queryActions';
 import { getQueryParam } from '../../utils/url';
 
-import './Results.css';
-
 const styles = theme => ({
  progress: {
  margin: theme.spacing.unit * 2

diff --git a/app/src/shared/grabIcon.png b/app/src/shared/grabIcon.png
diff --git a/app/src/shared/reactSplitterLayoutWithOverrides.css b/app/src/shared/reactSplitterLayoutWithOverrides.css
@@ -0,0 +1,55 @@
+.splitter-layout {
+ position: absolute;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.splitter-layout .layout-pane {
+ position: relative;
+ flex: 0 0 auto;
+ overflow: auto;
+}
+
+.splitter-layout .layout-pane.layout-pane-primary {
+ flex: 1 1 auto;
+}
+
+.splitter-layout > .layout-splitter {
+ flex: 0 0 auto;
+ width: 12px;
+ height: 100%;
+ cursor: col-resize;
+ background-color: #ccc;
+ background-image: url("grabIcon.png");
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.splitter-layout .layout-splitter:hover {
+ background-color: #bbb;
+}
+
+.splitter-layout.layout-changing {
+ cursor: col-resize;
+}
+
+.splitter-layout.layout-changing > .layout-splitter {
+ background-color: #aaa;
+}
+
+.splitter-layout.splitter-layout-vertical {
+ flex-direction: column;
+}
+
+.splitter-layout.splitter-layout-vertical.layout-changing {
+ cursor: row-resize;
+}
+
+.splitter-layout.splitter-layout-vertical > .layout-splitter {
+ width: 100%;
+ height: 4px;
+ cursor: row-resize;
+}