Skip to content

Commit 5ab913d

Browse files
rsouzasrsouzas
authored
Merge pull request #21 from back4app/scroll-fix
Scroll fix
2 parents f06a705 + 6760a38 commit 5ab913d

File tree

4 files changed

+99
-52
lines changed

4 files changed

+99
-52
lines changed

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,16 @@ 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+
<div key='check' className={styles.check}>
2323
{readonly ? null : <input className={styles.disabled} type='checkbox' disabled={true} checked={false} onChange={(e) => selectAll(e.target.checked)} />}
2424
</div>
2525
];
2626

27+
2728
headers.forEach(({ width, name, type, targetClass, order }, i) => {
2829
let wrapStyle = { width };
2930
if (i % 2) {
@@ -48,7 +49,7 @@ export default class DataBrowserHeaderBar extends React.Component {
4849
targetClass={targetClass}
4950
order={order}
5051
index={i}
51-
moveDataBrowserHeader={this.props.handleDragDrop}/>
52+
moveDataBrowserHeader={handleDragDrop}/>
5253
</div>
5354
);
5455
elements.push(
@@ -62,7 +63,7 @@ export default class DataBrowserHeaderBar extends React.Component {
6263
}
6364
elements.push(
6465
readonly ? null : (
65-
<div key='add' className={styles.addColumn} style={finalStyle}>
66+
<div key='add' className={[styles.wrap, styles.addColumn].join(' ')} style={finalStyle}>
6667
<a
6768
href='javascript:;'
6869
role='button'
@@ -74,6 +75,6 @@ export default class DataBrowserHeaderBar extends React.Component {
7475
)
7576
);
7677

77-
return <div className={styles.bar}>{elements}</div>;
78+
return <div className={styles.bar} style={{ minWidth: minWidth }}>{elements}</div>;
7879
}
7980
}

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@
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%;
19+
width: 100%;
1920
// to resolve rendering issue with retina displays
2021
-webkit-transform: translate3d(0,0,0);
2122
}
@@ -48,6 +49,7 @@
4849
}
4950

5051
.check {
52+
display: inline-block;
5153
line-height: 30px;
5254
height: 30px;
5355
vertical-align: top;

‎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)