Skip to content

Commit 0e27c5e

Browse files
pivanovpivanov
committed
[issue][668] - Data browser automatically scrolls indefinitely
1 parent 46260a6 commit 0e27c5e

File tree

5 files changed

+105
-64
lines changed

5 files changed

+105
-64
lines changed

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,18 @@ import { DragDropContext } from 'react-dnd';
1515
@DragDropContext(HTML5Backend)
1616
export default class DataBrowserHeaderBar extends React.Component {
1717
render() {
18-
let { headers, onResize, selected, selectAll, onAddColumn, updateOrdering, readonly, handleDragDrop } = this.props;
18+
let { headers, onResize, selected, selectAll, onAddColumn, updateOrdering, readonly, handleDragDrop, minWidth } = this.props;
1919
let elements = [
2020
// Note: bulk checkbox is disabled as all rows are selected (not just visible ones due to current lazy loading implementation)
2121
// TODO: add bulk checking only visible rows
22-
<div key='check' className={[styles.wrap, styles.check].join(' ')}>
22+
<span key='check' className={styles.check}>
2323
{readonly ? null : <input className={styles.disabled} type='checkbox' disabled={true} checked={false} onChange={(e) => selectAll(e.target.checked)} />}
24-
</div>
24+
</span>
2525
];
2626

27+
2728
headers.forEach(({ width, name, type, targetClass, order }, i) => {
2829
let wrapStyle = { width };
29-
if (i % 2) {
30-
wrapStyle.background = '#726F85';
31-
} else {
32-
wrapStyle.background = '#66637A';
33-
}
3430
let onClick = null;
3531
if (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean') {
3632
onClick = () => updateOrdering((order === 'descending' ? '' : '-') + name);
@@ -48,21 +44,17 @@ export default class DataBrowserHeaderBar extends React.Component {
4844
targetClass={targetClass}
4945
order={order}
5046
index={i}
51-
moveDataBrowserHeader={this.props.handleDragDrop}/>
47+
moveDataBrowserHeader={handleDragDrop}/>
5248
</div>
5349
);
5450
elements.push(
5551
<DragHandle key={'handle' + i} className={styles.handle} onDrag={onResize.bind(null, i)} />
5652
);
5753
});
5854

59-
let finalStyle = {};
60-
if (headers.length % 2) {
61-
finalStyle.background = 'rgba(224,224,234,0.10)';
62-
}
6355
elements.push(
6456
readonly ? null : (
65-
<div key='add' className={styles.addColumn} style={finalStyle}>
57+
<div key='add' className={[styles.wrap, styles.addColumn].join(' ')}>
6658
<a
6759
href='javascript:;'
6860
role='button'
@@ -74,6 +66,6 @@ export default class DataBrowserHeaderBar extends React.Component {
7466
)
7567
);
7668

77-
return <div className={styles.bar}>{elements}</div>;
69+
return <div className={styles.bar} style={{ minWidth: minWidth }}>{elements}</div>;
7870
}
7971
}

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
top: 0;
1313
left: 0;
1414
height: 30px;
15-
background: #66637a;
15+
background-color: #66637a;
1616
white-space: nowrap;
1717
display: inline-block;
1818
min-width: 100%;
@@ -23,6 +23,10 @@
2323
.wrap {
2424
display: inline-block;
2525
vertical-align: top;
26+
27+
&:nth-of-type(2n+1) {
28+
background-color: #726F85;
29+
}
2630
}
2731

2832
.addColumn {
@@ -48,12 +52,13 @@
4852
}
4953

5054
.check {
55+
display: inline-block;
5156
line-height: 30px;
5257
height: 30px;
5358
vertical-align: top;
5459
text-align: center;
5560
width: 30px;
56-
background: rgba(224,224,234,0.10);
61+
background-color: #66637a;
5762
}
5863

5964
.handle {

‎src/components/DragHandle/DragHandle.react.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default class DragHandle extends React.Component {
7070
}
7171

7272
render() {
73-
return <div {...this.props} onMouseDown={this.onMouseDown} />;
73+
return <span {...this.props} onMouseDown={this.onMouseDown} />;
7474
}
7575
}
7676

‎src/dashboard/Data/Browser/Browser.scss

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
&.safari {
2323
-webkit-transform: translate3d(0,0,0);
2424
}
25+
26+
&.showAddRow {
27+
bottom: 36px;
28+
}
2529
}
2630

2731
@media (max-width: 980px) {
@@ -89,6 +93,7 @@
8993
top: 30px;
9094
bottom: 0;
9195
left: 0;
96+
width: 100%;
9297
min-width: 100%;
9398
overflow-y: auto;
9499
overflow-x: hidden;
@@ -98,6 +103,15 @@
98103
top: 126px;
99104
}
100105

106+
.rowsHolder {
107+
position: absolute;
108+
top: 0;
109+
right:0;
110+
bottom: 0;
111+
left: 0;
112+
width: 100%;
113+
}
114+
101115
.tableRow {
102116
@include MonospaceFont;
103117
font-size: 12px;
@@ -121,13 +135,15 @@
121135
}
122136

123137
.addRow {
124-
height: 30px;
138+
position: fixed;
139+
left: 300px;
140+
right: 0;
141+
bottom: 0;
142+
height: 36px;
125143
padding: 8px;
126-
127-
a {
128-
cursor: pointer;
129-
display: inline-block;
130-
}
144+
display: inline-flex;
145+
align-items: center;
146+
border-top: 1px solid #ccc;
131147

132148
svg {
133149
fill: $blue;
@@ -136,6 +152,42 @@
136152
fill: $darkBlue;
137153
}
138154
}
155+
156+
a {
157+
display: inline-flex;
158+
justify-content: center;
159+
align-items: center;
160+
margin-right: 14px;
161+
font-size: 12px;
162+
font-weight: 700;
163+
height: 24px;
164+
padding: 0 10px;
165+
border-radius: 2px;
166+
border: 1px solid transparent;
167+
}
168+
169+
+ .rowsHolder {
170+
bottom: 60px;
171+
}
172+
}
173+
174+
.addNewRow {
175+
position: relative;
176+
margin-bottom: 30px;
177+
border-bottom: 1px solid #169CEE;
178+
179+
&:before {
180+
content: '';
181+
position: absolute;
182+
left: 0;
183+
right: 0;
184+
bottom: -1px;
185+
border-bottom: 2px solid #0092ff;
186+
}
187+
188+
+ .rowsHolder {
189+
position: relative;
190+
}
139191
}
140192

141193
.notification {

‎src/dashboard/Data/Browser/BrowserTable.react.js

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default class BrowserTable extends React.Component {
8787
let attributes = obj.attributes;
8888
let index = row - this.state.offset;
8989
return (
90-
<div key={`row${index}`} className={styles.tableRow} style={{ minWidth: rowWidth }}>
90+
<div key={`row${index}`} className={styles.tableRow}>
9191
<span className={styles.checkCell}>
9292
<input
9393
type='checkbox'
@@ -154,15 +154,19 @@ export default class BrowserTable extends React.Component {
154154
));
155155
let editor = null;
156156
let table = <div ref='table' />;
157+
let classes = [styles.browser, browserUtils.isSafari() ? styles.safari : '']
158+
let addRow = null;
159+
let rowWidth = 0;
160+
157161
if (this.props.data) {
158-
let rowWidth = 210;
162+
rowWidth = 210;
159163
for (let i = 0; i < this.props.order.length; i++) {
160164
rowWidth += this.props.order[i].width;
161165
}
162166
let newRow = null;
163167
if (this.props.newObject && this.state.offset <= 0) {
164168
newRow = (
165-
<div style={{ marginBottom: 30, borderBottom: '1px solid #169CEE' }}>
169+
<div className={styles.addNewRow}>
166170
{this.renderRow({ row: -1, obj: this.props.newObject, rowWidth: rowWidth })}
167171
</div>
168172
);
@@ -238,47 +242,34 @@ export default class BrowserTable extends React.Component {
238242
}
239243
}
240244

241-
let addRow = null;
242-
if (!this.props.newObject) {
243-
if (this.props.relation) {
244-
addRow = (
245-
<div className={styles.addRow}>
246-
<Button
247-
onClick={this.props.onAddRow}
248-
primary
249-
value={`Create a ${this.props.relation.targetClassName} and attach`}
250-
/>
251-
{' '}
252-
<Button
253-
onClick={this.props.onAttachRows}
254-
primary
255-
value={`Attach existing rows from ${this.props.relation.targetClassName}`}
256-
/>
257-
</div>
258-
);
259-
} else {
260-
addRow = (
261-
<div className={styles.addRow}>
262-
<a onClick={this.props.onAddRow}>
263-
<Icon
264-
name='plus-outline'
265-
width={14}
266-
height={14}
267-
/>
268-
</a>
269-
</div>
270-
);
271-
}
245+
if (!this.props.newObject && this.props.relation) {
246+
classes.push(styles.showAddRow);
247+
248+
addRow = (
249+
<div className={styles.addRow}>
250+
<Button
251+
onClick={this.props.onAddRow}
252+
primary
253+
value={`Create a ${this.props.relation.targetClassName} and attach`}
254+
/>
255+
{' '}
256+
<Button
257+
onClick={this.props.onAttachRows}
258+
primary
259+
value={`Attach existing rows from ${this.props.relation.targetClassName}`}
260+
/>
261+
</div>
262+
);
272263
}
273264

274265
if (this.props.newObject || this.props.data.length > 0) {
275266
table = (
276-
<div className={styles.table} ref='table'>
277-
<div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
267+
<div className={styles.table} ref='table' style={{ minWidth: rowWidth }}>
278268
{newRow}
279-
{rows}
280-
<div style={{ height: Math.max(0, (this.props.data.length - this.state.offset - MAX_ROWS) * ROW_HEIGHT) }} />
281269
{addRow}
270+
<div className={styles.rowsHolder} style={{ top: Math.max(0, this.state.offset * ROW_HEIGHT) }}>
271+
{rows}
272+
</div>
282273
{editor}
283274
</div>
284275
);
@@ -309,7 +300,7 @@ export default class BrowserTable extends React.Component {
309300
}
310301

311302
return (
312-
<div className={[styles.browser, browserUtils.isSafari() ? styles.safari : ''].join(' ')}>
303+
<div className={classes.join(' ')}>
313304
{table}
314305
<DataBrowserHeaderBar
315306
selected={this.props.selection['*']}
@@ -319,7 +310,8 @@ export default class BrowserTable extends React.Component {
319310
readonly={!!this.props.relation}
320311
handleDragDrop={this.props.handleHeaderDragDrop}
321312
onResize={this.props.handleResize}
322-
onAddColumn={this.props.onAddColumn} />
313+
onAddColumn={this.props.onAddColumn}
314+
minWidth={rowWidth} />
323315
</div>
324316
);
325317
}

0 commit comments

Comments
 (0)