Skip to content

Commit 5967d42

Browse files
carlosmscarlosms
authored
Merge pull request #38 from carlosms/issue-18-resize
Split panels horizontally with resize
2 parents 0cbce7d + 413e511 commit 5967d42

File tree

11 files changed

+188
-45
lines changed

11 files changed

+188
-45
lines changed

‎.github/screenshot.png

201 KB
Loading

‎frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"react-dom": "^16.3.2",
1313
"react-helmet": "^5.2.0",
1414
"react-scripts": "1.1.4",
15+
"react-split-pane": "^0.1.77",
1516
"react-table": "^6.8.2"
1617
},
1718
"scripts": {

‎frontend/src/App.js

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import { Helmet } from 'react-helmet';
33
import { Grid, Row, Col } from 'react-bootstrap';
4+
import SplitPane from 'react-split-pane';
45
import QueryBox from './components/QueryBox';
56
import TabbedResults from './components/TabbedResults';
67
import api from './api';
@@ -102,7 +103,7 @@ GROUP BY committer_email, month, repo_id`,
102103
let resultsElem = '';
103104
if (results.size > 0) {
104105
resultsElem = (
105-
<Col xs={12}>
106+
<Col xs={12} className="full-height">
106107
<TabbedResults
107108
results={results}
108109
handleRemoveResult={this.handleRemoveResult}
@@ -111,24 +112,33 @@ GROUP BY committer_email, month, repo_id`,
111112
</Col>
112113
);
113114
}
114-
115115
return (
116116
<div className="app">
117117
<Helmet>
118118
<title>Gitbase Playground</title>
119119
</Helmet>
120-
<Grid>
121-
<Row className="query-row">
122-
<Col xs={12}>
123-
<QueryBox
124-
sql={this.state.sql}
125-
schema={this.state.schema}
126-
handleTextChange={this.handleTextChange}
127-
handleSubmit={this.handleSubmit}
128-
/>
120+
<Grid className="full-height">
121+
<Row className="full-height">
122+
<Col xs={12} className="full-height">
123+
<SplitPane split="horizontal" defaultSize={250} minSize={100}>
124+
<Grid className="full-height full-width">
125+
<Row className="query-box-row">
126+
<Col xs={12} className="full-height">
127+
<QueryBox
128+
sql={this.state.sql}
129+
schema={this.state.schema}
130+
handleTextChange={this.handleTextChange}
131+
handleSubmit={this.handleSubmit}
132+
/>
133+
</Col>
134+
</Row>
135+
</Grid>
136+
<Grid className="full-height full-width">
137+
<Row className="results-row">{resultsElem}</Row>
138+
</Grid>
139+
</SplitPane>
129140
</Col>
130141
</Row>
131-
<Row className="results-row">{resultsElem}</Row>
132142
</Grid>
133143
</div>
134144
);

‎frontend/src/App.less

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,62 @@
1+
@import '../node_modules/bootstrap/less/variables.less';
2+
3+
html,
4+
body,
5+
#root {
6+
margin: 0;
7+
padding: 0;
8+
height: 100%;
9+
}
10+
111
.app {
2-
margin-top: 3em;
3-
margin-bottom: 3em;
12+
height: 100%;
13+
padding-top: 3em;
14+
padding-bottom: 1em;
15+
}
16+
17+
.full-height {
18+
height: 100%;
19+
}
20+
21+
.full-width {
22+
width: 100%;
23+
}
24+
25+
.query-box-row {
26+
.full-height;
427
}
528

629
.results-row {
7-
margin-top: 3em;
30+
.full-height;
831
}
932

1033
.loader-col {
11-
margin-top: 3em;
34+
margin-top: 3em;
35+
}
36+
37+
// react-split-pane
38+
.SplitPane {
39+
position: relative !important;
40+
41+
.Pane {
42+
overflow: auto;
43+
}
44+
45+
.Resizer {
46+
margin-top: 1em;
47+
margin-bottom: 1em;
48+
padding: 2px 0;
49+
50+
color: @gray;
51+
background: @gray-lighter;
52+
53+
cursor: row-resize;
54+
55+
&:before {
56+
display: block;
57+
content: '● ● ●';
58+
text-align: center;
59+
line-height: 11px;
60+
}
61+
}
1262
}

‎frontend/src/components/QueryBox.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ class QueryBox extends Component {
6969

7070
return (
7171
<div className="query-box">
72-
<Row>
73-
<Col xs={12}>
72+
<Row className="codemirror-row">
73+
<Col xs={12} className="codemirror-col">
7474
<CodeMirror
7575
value={this.props.sql}
7676
options={options}
@@ -80,7 +80,7 @@ class QueryBox extends Component {
8080
/>
8181
</Col>
8282
</Row>
83-
<Row>
83+
<Row className="button-row">
8484
<Col xsOffset={9} xs={3}>
8585
<Button
8686
className="pull-right"

‎frontend/src/components/QueryBox.less

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
1+
@import '../../node_modules/bootstrap/less/variables.less';
2+
13
.query-box {
2-
width: 100%;
4+
height: 100%;
5+
display: flex;
6+
flex-direction: column;
7+
8+
.codemirror-row {
9+
flex-grow: 1;
10+
display: flex;
11+
}
12+
13+
.codemirror-col {
14+
flex: 1;
15+
}
16+
17+
.react-codemirror2 {
18+
height: 100%;
19+
}
320
}
421

522
button {
6-
width: 100%;
23+
width: 100%;
724
}
825

926
.CodeMirror {
10-
height: 150px;
27+
height: 100%;
1128
}
1229

1330
.CodeMirror-empty {
14-
color: dimgrey;
31+
color: @gray-light;
1532
}

‎frontend/src/components/ResultsTable.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import ReactTable from 'react-table';
44
import 'react-table/react-table.css';
5+
import './ResultsTable.less';
56

67
class ResultsTable extends Component {
78
render() {
@@ -26,6 +27,7 @@ class ResultsTable extends Component {
2627
className="results-table"
2728
data={this.props.response.data}
2829
columns={columns}
30+
defaultPageSize={10}
2931
/>
3032
);
3133
}

‎frontend/src/components/ResultsTable.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.results-table {
2+
flex-grow: 1;
3+
flex-basis: 150px;
4+
min-height: 150px;
5+
6+
.rt-tr-group {
7+
flex: 0 0 auto !important;
8+
}
9+
}

‎frontend/src/components/TabbedResults.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ class TabbedResults extends Component {
4646
return (
4747
<Tabs
4848
id="tabbed-results"
49+
className="full-height"
4950
activeKey={this.state.activeKey}
5051
onSelect={this.handleSelect}
5152
>

‎frontend/src/components/TabbedResults.less

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,53 @@
1-
21
.close {
3-
width: auto;
4-
margin-left: 1ex;
2+
width: auto;
3+
margin-left: 1ex;
4+
}
5+
6+
#tabbed-results {
7+
display: flex;
8+
flex-direction: column;
59
}
610

7-
.tab-content > .tab-pane {
8-
margin-top: 2em;
11+
.tab-content {
12+
flex: 1 1 auto;
13+
14+
display: flex;
15+
flex-direction: column;
16+
17+
> .tab-pane {
18+
flex: 1 1 auto;
19+
padding-top: 2em;
20+
21+
&[aria-hidden='false'] {
22+
display: flex;
23+
flex-direction: column;
24+
}
25+
}
926
}
1027

1128
.query-row {
12-
margin-bottom: 2em;
29+
margin-bottom: 2em;
1330

14-
.query-text {
15-
white-space: pre;
16-
font-family: monospace;
17-
float: left;
18-
max-width: 85%;
19-
overflow: auto;
20-
}
31+
.query-text {
32+
white-space: pre;
33+
font-family: monospace;
34+
float: left;
35+
max-width: 85%;
36+
overflow: auto;
37+
}
2138
}
2239

2340
button.edit-query {
24-
width: auto;
25-
float: left;
26-
padding-top: 0px;
27-
margin-left: 1ex;
41+
width: auto;
42+
float: left;
43+
padding-top: 0px;
44+
margin-left: 1ex;
2845
}
2946

3047
.tab-title {
31-
width: 150px;
32-
white-space: nowrap;
33-
overflow: hidden;
34-
text-overflow: ellipsis;
35-
display: inline-block;
48+
width: 150px;
49+
white-space: nowrap;
50+
overflow: hidden;
51+
text-overflow: ellipsis;
52+
display: inline-block;
3653
}

0 commit comments

Comments
 (0)