Fix scroll in LayersList

This commit is contained in:
Florian Rival
2020-04-26 14:13:29 +02:00
committed by Florian Rival
parent 1759e85b84
commit b392192def
2 changed files with 51 additions and 53 deletions

View File

@@ -94,7 +94,7 @@ class LayersListBody extends Component<*, LayersListBodyState> {
});
return (
<Column noMargin>
<Column noMargin expand>
{containerLayersList}
<BackgroundColorRow
layout={layersContainer}
@@ -163,57 +163,55 @@ export default class LayersList extends Component<Props, State> {
return (
<Background>
<FullSizeMeasurer>
{({ width }) => (
<ScrollView>
<Column noMargin expand>
<SortableLayersListBody
key={listKey}
layersContainer={this.props.layersContainer}
onEditEffects={layer => this._editEffects(layer)}
onRemoveLayer={this.props.onRemoveLayer}
onRenameLayer={this.props.onRenameLayer}
onSortEnd={({ oldIndex, newIndex }) => {
const layersCount = this.props.layersContainer.getLayersCount();
this.props.layersContainer.moveLayer(
layersCount - 1 - oldIndex,
layersCount - 1 - newIndex
);
this._onLayerModified();
}}
helperClass="sortable-helper"
useDragHandle
unsavedChanges={this.props.unsavedChanges}
width={width}
/>
<Column>
<Line justifyContent="flex-end" expand>
<RaisedButton
label={<Trans>Add a layer</Trans>}
primary
onClick={this._addLayer}
icon={<Add />}
/>
</Line>
</Column>
{effectsEditedLayer && (
<EffectsListDialog
project={project}
resourceSources={this.props.resourceSources}
onChooseResource={this.props.onChooseResource}
resourceExternalEditors={this.props.resourceExternalEditors}
effectsContainer={effectsEditedLayer}
onApply={() =>
this.setState({
effectsEditedLayer: null,
})
}
/>
)}
</Column>
</ScrollView>
<ScrollView autoHideScrollbar>
<FullSizeMeasurer>
{({ width }) => (
<SortableLayersListBody
key={listKey}
layersContainer={this.props.layersContainer}
onEditEffects={layer => this._editEffects(layer)}
onRemoveLayer={this.props.onRemoveLayer}
onRenameLayer={this.props.onRenameLayer}
onSortEnd={({ oldIndex, newIndex }) => {
const layersCount = this.props.layersContainer.getLayersCount();
this.props.layersContainer.moveLayer(
layersCount - 1 - oldIndex,
layersCount - 1 - newIndex
);
this._onLayerModified();
}}
helperClass="sortable-helper"
useDragHandle
unsavedChanges={this.props.unsavedChanges}
width={width}
/>
)}
</FullSizeMeasurer>
<Column>
<Line justifyContent="flex-end" expand>
<RaisedButton
label={<Trans>Add a layer</Trans>}
primary
onClick={this._addLayer}
icon={<Add />}
/>
</Line>
</Column>
{effectsEditedLayer && (
<EffectsListDialog
project={project}
resourceSources={this.props.resourceSources}
onChooseResource={this.props.onChooseResource}
resourceExternalEditors={this.props.resourceExternalEditors}
effectsContainer={effectsEditedLayer}
onApply={() =>
this.setState({
effectsEditedLayer: null,
})
}
/>
)}
</FullSizeMeasurer>
</ScrollView>
</Background>
);
}

View File

@@ -4120,8 +4120,8 @@ storiesOf('LayersList', module)
layersContainer={testProject.testLayout}
/>
))
.add('small width', () => (
<div style={{ width: 250 }}>
.add('small width and height', () => (
<div style={{ width: 250, height: 200 }}>
<LayersList
project={testProject.project}
resourceExternalEditors={fakeResourceExternalEditors}