[explorev2] improving the scrolling/scrollbars placement (#1840)

This commit is contained in:
Maxime Beauchemin 2016-12-16 08:06:40 -08:00 committed by GitHub
parent 7a5bb94754
commit 007ee88d33
3 changed files with 46 additions and 52 deletions

View File

@ -196,7 +196,6 @@ class ChartContainer extends React.Component {
ref={(ref) => { this.chartContainerRef = ref; }} ref={(ref) => { this.chartContainerRef = ref; }}
className={this.props.viz_type} className={this.props.viz_type}
style={{ style={{
overflowX: 'auto',
opacity: loading ? '0.25' : '1', opacity: loading ? '0.25' : '1',
}} }}
/> />

View File

@ -61,56 +61,52 @@ class ControlPanelsContainer extends React.Component {
render() { render() {
return ( return (
<Panel> <div className="scrollbar-container">
{this.props.alert && <Panel className="scrollbar-content">
<Alert bsStyle="warning"> {this.props.alert &&
{this.props.alert} <Alert bsStyle="warning">
<i {this.props.alert}
className="fa fa-close pull-right" <i
onClick={this.removeAlert.bind(this)} className="fa fa-close pull-right"
style={{ cursor: 'pointer' }} onClick={this.removeAlert.bind(this)}
/> style={{ cursor: 'pointer' }}
</Alert> />
} </Alert>
{!this.props.isDatasourceMetaLoading && }
<div className="scrollbar-container"> {!this.props.isDatasourceMetaLoading && this.sectionsToRender().map((section) => (
<div className="scrollbar-content"> <ControlPanelSection
{this.sectionsToRender().map((section) => ( key={section.label}
<ControlPanelSection label={section.label}
key={section.label} tooltip={section.description}
label={section.label} >
tooltip={section.description} {section.fieldSetRows.map((fieldSets, i) => (
> <FieldSetRow
{section.fieldSetRows.map((fieldSets, i) => ( key={`${section.label}-fieldSetRow-${i}`}
<FieldSetRow fieldSets={fieldSets}
key={`${section.label}-fieldSetRow-${i}`} fieldOverrides={this.fieldOverrides()}
fieldSets={fieldSets} onChange={this.onChange.bind(this)}
fieldOverrides={this.fieldOverrides()} fields={this.props.fields}
onChange={this.onChange.bind(this)} form_data={this.props.form_data}
fields={this.props.fields} />
form_data={this.props.form_data}
/>
))}
</ControlPanelSection>
))} ))}
{this.filterSectionsToRender().map((section) => ( </ControlPanelSection>
<ControlPanelSection ))}
key={section.label} {this.filterSectionsToRender().map((section) => (
label={section.label} <ControlPanelSection
tooltip={section.description} key={section.label}
> label={section.label}
<Filters tooltip={section.description}
filterColumnOpts={[]} >
filters={this.props.form_data.filters} <Filters
actions={this.props.actions} filterColumnOpts={[]}
prefix={section.prefix} filters={this.props.form_data.filters}
/> actions={this.props.actions}
</ControlPanelSection> prefix={section.prefix}
))} />
</div> </ControlPanelSection>
</div> ))}
} </Panel>
</Panel> </div>
); );
} }
} }

View File

@ -11,9 +11,8 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
overflow: scroll; overflow-y: auto;
margin-right: 0px; margin-right: 0px;
margin-bottom: 100px;
} }
.fave-unfave-icon, .edit-desc-icon { .fave-unfave-icon, .edit-desc-icon {