add scrolling to customizeFields when there are a lot of them in CEO options

pull/3030/head
Iris Scholten 2018-03-19 11:57:36 -07:00
parent bcc87a682a
commit 5348cfae92
4 changed files with 19 additions and 14 deletions

View File

@ -28,7 +28,7 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
onFieldUpdate({internalName, displayName: rename, visible})
}
handleToggleVisible() {
handleToggleVisible(e) {
const {onFieldUpdate, internalName, displayName, visible} = this.props
onFieldUpdate({internalName, displayName, visible: !visible})
}

View File

@ -18,17 +18,19 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
return (
<div className="graph-options-group">
<label className="form-label">Customize Fields</label>
{fields.map(field => {
return (
<GraphOptionsCustomizableField
key={uuid.v4()}
internalName={field.internalName}
displayName={field.displayName}
visible={field.visible}
onFieldUpdate={onFieldUpdate}
/>
)
})}
<div className="field-controls--group">
{fields.map(field => {
return (
<GraphOptionsCustomizableField
key={uuid.v4()}
internalName={field.internalName}
displayName={field.displayName}
visible={field.visible}
onFieldUpdate={onFieldUpdate}
/>
)
})}
</div>
</div>
)
}

View File

@ -123,7 +123,7 @@ export class TableOptions extends PureComponent<Props, {}> {
const {handleUpdateTableOptions, tableOptions} = this.props
const {fieldNames} = tableOptions
const updatedFields = fieldNames.map(
op => (op.internalName === field.internalName ? field : op)
f => (f.internalName === field.internalName ? field : f)
)
handleUpdateTableOptions({...tableOptions, fieldNames: updatedFields})
}

View File

@ -256,7 +256,10 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
flex: 1 0 0;
}
.field-controls--group {
max-height: 235px;
overflow-y: scroll;
}
.field-controls--label, .field-controls--label-hidden {
@extend %gauge-controls-label-styles;
color: $g16-pearl;