Skip to content

Commit f265b25

Browse files
sadakchapsadakchap
authored
Improve cell value copying of pointer cell (#1708)
* showing tooltip on mouse enter & leave * added new arrow svg * showing arrow icon if cell has follow link value * Pill pointer, relation to follow link if selected * added bottom margin for Pill * following link even if cell is not selected on icon click * using existing arrow icon * removed arrow.svg file * remove arrow outline * removed Download & delete option from file Editor * update Pill to download image on icon click * update Browser cell file value * opening upload dialog on double click * File Editor on Edit Row dialog * pill design update * removing extra padding from pill * showing new pointer layout on Edit row dialog * making input fields light blue * added margin in new pill design * added undefined placeholder for edit row modal * center toggle Input * removed ccss comment
1 parent 69bf041 commit f265b25

File tree

7 files changed

+116
-38
lines changed

7 files changed

+116
-38
lines changed

‎src/components/BrowserCell/BrowserCell.react.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -243,12 +243,14 @@ export default class BrowserCell extends Component {
243243
value = object;
244244
}
245245
content = onPointerClick ? (
246-
<a href='javascript:;' onClick={onPointerClick.bind(undefined, value)}>
247-
<Pill value={value.id} />
248-
</a>
246+
<Pill
247+
value={value.id}
248+
onClick={onPointerClick.bind(undefined, value)}
249+
followClick={true}
250+
/>
249251
) : (
250-
value.id
251-
);
252+
value.id
253+
);
252254
this.copyableValue = value.id;
253255
}
254256
else if (type === 'Array') {
@@ -289,7 +291,7 @@ export default class BrowserCell extends Component {
289291
this.copyableValue = content = JSON.stringify(value);
290292
} else if (type === 'File') {
291293
const fileName = value.url() ? getFileName(value) : 'Uploading\u2026';
292-
content = <Pill value={fileName} />;
294+
content = <Pill value={fileName} fileDownloadLink={value.url()} />;
293295
this.copyableValue = fileName;
294296
} else if (type === 'ACL') {
295297
let pieces = [];
@@ -318,8 +320,8 @@ export default class BrowserCell extends Component {
318320
this.copyableValue = content = value.coordinates.map(coord => `(${coord})`)
319321
} else if (type === 'Relation') {
320322
content = setRelation ? (
321-
<div style={{ textAlign: 'center', cursor: 'pointer' }}>
322-
<Pill onClick={() => setRelation(value)} value='View relation' />
323+
<div style={{ textAlign: 'center' }}>
324+
<Pill onClick={() => setRelation(value)} value='View relation' followClick={true} />
323325
</div>
324326
) : (
325327
'Relation'

‎src/components/Field/Field.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,12 @@
4242
min-height: 80px;
4343
text-align: right;
4444
padding: 0;
45+
background: #f6fafb;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
4549
}
4650

47-
.input {
48-
margin: 25px 20px 0 0;
49-
}
5051

5152
.header {
5253
min-height: 56px;
@@ -56,10 +57,6 @@
5657
min-height: 56px;
5758
}
5859

59-
.input {
60-
margin: 13px 20px 0 0;
61-
}
62-
6360
& ~ .field {
6461
background: #f5f5f7;
6562
}

‎src/components/FileEditor/FileEditor.react.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,12 @@ export default class FileEditor extends React.Component {
2626
componentDidMount() {
2727
document.body.addEventListener('click', this.checkExternalClick);
2828
document.body.addEventListener('keypress', this.handleKey);
29+
let fileInputElement = document.getElementById('fileInput');
30+
if (fileInputElement) {
31+
fileInputElement.click();
32+
}
2933
}
30-
34+
3135
componentWillUnmount() {
3236
document.body.removeEventListener('click', this.checkExternalClick);
3337
document.body.removeEventListener('keypress', this.handleKey);
@@ -72,13 +76,11 @@ export default class FileEditor extends React.Component {
7276
render() {
7377
const file = this.props.value;
7478
return (
75-
<div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
76-
{file && file.url() ? <a href={file.url()} target='_blank' role='button' className={styles.download}>Download</a> : null}
79+
<div ref='input' style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
7780
<a className={styles.upload}>
78-
<input ref='fileInput' type='file' onChange={this.handleChange.bind(this)} />
81+
<input ref='fileInput' id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
7982
<span>{file ? 'Replace file' : 'Upload file'}</span>
8083
</a>
81-
{file ? <a href='javascript:;' role='button' className={styles.delete} onClick={this.removeFile}>Delete</a> : null}
8284
</div>
8385
);
8486
}

‎src/components/Pill/Pill.react.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,29 @@
77
*/
88
import React from 'react';
99
import styles from 'components/Pill/Pill.scss';
10+
import Icon from "components/Icon/Icon.react";
11+
1012
//TODO: refactor, may want to move onClick outside or need to make onClick able to handle link/button a11y
11-
let Pill = ({ value, onClick }) => (
12-
<span className={[styles.pill, onClick ? styles.action : void(0)].join(' ')} onClick={onClick}>{value}</span>
13+
let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
14+
<span
15+
className={[
16+
styles.pill,
17+
!followClick && onClick ? styles.action : void 0
18+
].join(" ")}
19+
onClick={!followClick && onClick ? onClick : null}
20+
>
21+
<span className={!followClick && fileDownloadLink ? styles.content : ''}>{value}</span>
22+
{followClick && (
23+
<a onClick={onClick}>
24+
<Icon name="right-outline" width={20} height={20} fill="#1669a1" />
25+
</a>
26+
)}
27+
{!followClick && fileDownloadLink && (
28+
<a href={fileDownloadLink} target="_blank">
29+
<Icon name="right-outline" width={20} height={20} fill="#1669a1" />
30+
</a>
31+
)}
32+
</span>
1333
);
1434

1535
export default Pill;

‎src/components/Pill/Pill.scss‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,44 @@
99

1010
.pill {
1111
@include MonospaceFont;
12-
display: inline-block;
13-
background: #D5E5F2;
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: center;
1415
color: #0E69A1;
1516
height: 20px;
1617
line-height: 20px;
1718
border-radius: 10px;
1819
font-size: 11px;
19-
padding: 0 8px;
2020
width: 100%;
21-
text-align: center;
2221
overflow: hidden;
2322
text-overflow: ellipsis;
24-
25-
&:hover {
26-
background: #BFD4E5;
23+
white-space: nowrap;
24+
margin-bottom: 4px;
25+
& a {
26+
height: 20px;
27+
width: 20px;
28+
background: #d6e5f2;
29+
border-radius: 50%;
30+
margin-left: 5px;
31+
& svg {
32+
transform: rotate(316deg);
33+
}
2734
}
2835
}
36+
37+
.content {
38+
width: 80%;
39+
text-overflow: ellipsis;
40+
overflow: hidden;
41+
text-align: left;
42+
height: 100%;
43+
white-space: nowrap;
44+
}
45+
46+
.iconAction {
47+
cursor: pointer;
48+
}
49+
50+
.disableIconAction {
51+
cursor: initial;
52+
}

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

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import GeoPointEditor from 'components/GeoPointEditor/GeoPointEditor.react';
1414
import FileEditor from 'components/FileEditor/FileEditor.react';
1515
import ObjectPickerDialog from 'dashboard/Data/Browser/ObjectPickerDialog.react';
1616
import styles from 'dashboard/Data/Browser/Browser.scss';
17+
import getFileName from 'lib/getFileName';
1718

1819
export default class EditRowDialog extends React.Component {
1920
constructor(props) {
@@ -23,14 +24,16 @@ export default class EditRowDialog extends React.Component {
2324
const { currentObject, openObjectPickers, expandedTextAreas } = this.initializeState(
2425
selectedObject
2526
);
26-
this.state = { currentObject, openObjectPickers, expandedTextAreas };
27+
this.state = { currentObject, openObjectPickers, expandedTextAreas, showFileEditor: false };
2728

2829
this.updateCurrentObject = this.updateCurrentObject.bind(this);
2930
this.handleChange = this.handleChange.bind(this);
3031
this.openAcl = this.openAcl.bind(this);
3132
this.openPointer = this.openPointer.bind(this);
3233
this.toggleObjectPicker = this.toggleObjectPicker.bind(this);
3334
this.openRelation = this.openRelation.bind(this);
35+
this.openFileEditor = this.openFileEditor.bind(this);
36+
this.hideFileEditor = this.hideFileEditor.bind(this);
3437
}
3538

3639
componentWillReceiveProps(props) {
@@ -217,6 +220,18 @@ export default class EditRowDialog extends React.Component {
217220
this.setState({ expandedTextAreas });
218221
}
219222

223+
openFileEditor() {
224+
this.setState({
225+
showFileEditor: true
226+
});
227+
}
228+
229+
hideFileEditor() {
230+
this.setState({
231+
showFileEditor: false
232+
});
233+
}
234+
220235
render() {
221236
const { selectedObject, className, columns, onClose, schema, useMasterKey } = this.props;
222237
const { currentObject, openObjectPickers, expandedTextAreas } = this.state;
@@ -248,6 +263,7 @@ export default class EditRowDialog extends React.Component {
248263
'restricted'
249264
].indexOf(name) >= 0);
250265

266+
let val = currentObject[name];
251267
switch (type) {
252268
case 'String':
253269
inputComponent = (
@@ -258,7 +274,7 @@ export default class EditRowDialog extends React.Component {
258274
: false
259275
}
260276
disabled={isDisabled}
261-
placeholder={name === 'password' ? '(hidden)' : ''}
277+
placeholder={name === 'password' ? '(hidden)' : val === undefined ? '(undefined)' : ''}
262278
value={currentObject[name]}
263279
onChange={newValue => this.updateCurrentObject(newValue, name)}
264280
onBlur={newValue => this.handleChange(newValue, name)}
@@ -270,6 +286,7 @@ export default class EditRowDialog extends React.Component {
270286
<TextInput
271287
disabled={isDisabled}
272288
value={currentObject[name]}
289+
placeholder={val === undefined ? '(undefined)' : ''}
273290
onChange={newValue => this.updateCurrentObject(newValue, name)}
274291
onBlur={newValue => this.handleChange(parseFloat(newValue), name)}
275292
/>
@@ -287,6 +304,7 @@ export default class EditRowDialog extends React.Component {
287304
expandedTextAreas[name].rows
288305
}
289306
disabled={isDisabled}
307+
placeholder={val === undefined && '(undefined)'}
290308
value={currentObject[name]}
291309
onChange={newValue => this.updateCurrentObject(newValue, name)}
292310
onBlur={newValue =>
@@ -297,7 +315,7 @@ export default class EditRowDialog extends React.Component {
297315
break;
298316
case 'Boolean':
299317
inputComponent = isDisabled ? (
300-
<TextInput disabled={true} value={selectedObject[name]} />
318+
<TextInput disabled={true} placeholder={val === undefined && '(undefined)'} value={selectedObject[name]} />
301319
) : (
302320
<Toggle
303321
type={Toggle.Types.TRUE_FALSE}
@@ -328,13 +346,24 @@ export default class EditRowDialog extends React.Component {
328346
);
329347
break;
330348
case 'File':
349+
let file = selectedObject[name];
350+
let fileName = file && file.url() ? getFileName(file) : '';
331351
inputComponent = (
332352
<div style={{ padding: '25px' }}>
333-
<FileEditor
334-
value={selectedObject[name]}
335-
style={{ position: 'inherit' }}
336-
onCommit={newValue => this.handleChange(newValue, name)}
337-
/>
353+
{file && <Pill value={fileName} fileDownloadLink={file.url()} />}
354+
<div style={{ cursor: 'pointer' }}>
355+
<Pill
356+
value={file ? 'Change file' : 'Select file'}
357+
onClick={() => this.openFileEditor()}
358+
/>
359+
{this.state.showFileEditor && (
360+
<FileEditor
361+
value={file}
362+
onCancel={this.hideFileEditor}
363+
onCommit={newValue => this.handleChange(newValue, name)}
364+
/>
365+
)}
366+
</div>
338367
</div>
339368
);
340369
break;
@@ -364,6 +393,7 @@ export default class EditRowDialog extends React.Component {
364393
<Pill
365394
onClick={() => this.openPointer(targetClass, pointerId)}
366395
value={pointerId}
396+
followClick={true}
367397
/>
368398
)}
369399
<Pill
@@ -403,6 +433,7 @@ export default class EditRowDialog extends React.Component {
403433
<Pill
404434
onClick={() => this.openRelation(relation)}
405435
value={`View ${type}`}
436+
followClick={true}
406437
/>
407438
<Pill
408439
onClick={() => this.toggleObjectPicker(name, true)}

‎src/icons/right-outline.svg‎

Lines changed: 3 additions & 1 deletion
Loading

0 commit comments

Comments
 (0)