#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;
+}