[Maps] highlight combine layer background when creating layer group (#143909)

* [Maps] highlight combine layer background when creating layer group

* tslint fixes

* eslint fixes

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese 2022-10-26 09:10:21 -06:00 committed by GitHub
parent c31c38c3d1
commit cf8e6a7eaa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 0 deletions

View file

@ -6,6 +6,10 @@
cursor: alias !important; cursor: alias !important;
} }
.mapLayerToc-droppable-isCombining {
background-color: $euiColorEmptyShade !important;
}
.mapLayerToc-droppable-isDragging * { .mapLayerToc-droppable-isDragging * {
cursor: ns-resize !important; cursor: ns-resize !important;
} }

View file

@ -244,6 +244,10 @@ export class LayerTOC extends Component<Props> {
dragHandleProps={draggableProvided.dragHandleProps} dragHandleProps={draggableProvided.dragHandleProps}
isDragging={draggableSnapshot.isDragging} isDragging={draggableSnapshot.isDragging}
isDraggingOver={droppableSnapshot.isDraggingOver} isDraggingOver={droppableSnapshot.isDraggingOver}
isCombineLayer={
this.state.combineLayer !== null &&
this.state.combineLayer.getId() === layer.getId()
}
/> />
); );
}} }}

View file

@ -62,6 +62,11 @@
pointer-events: none !important; pointer-events: none !important;
} }
.mapTocEntry-isCombineLayer {
transition: background-color $euiAnimSpeedExtraSlow ease;
background-color: transparentize($euiColorSuccess, .75);
}
.mapTocEntry-isSelected { .mapTocEntry-isSelected {
background-color: tintOrShade($euiColorLightShade, 60%, 20%); background-color: tintOrShade($euiColorLightShade, 60%, 20%);
} }

View file

@ -49,6 +49,7 @@ export interface OwnProps {
dragHandleProps?: DraggableProvidedDragHandleProps; dragHandleProps?: DraggableProvidedDragHandleProps;
isDragging?: boolean; isDragging?: boolean;
isDraggingOver?: boolean; isDraggingOver?: boolean;
isCombineLayer?: boolean;
} }
type Props = ReduxStateProps & ReduxDispatchProps & OwnProps; type Props = ReduxStateProps & ReduxDispatchProps & OwnProps;
@ -314,6 +315,7 @@ export class TOCEntry extends Component<Props, State> {
const classes = classNames('mapTocEntry', { const classes = classNames('mapTocEntry', {
'mapTocEntry-isDragging': this.props.isDragging, 'mapTocEntry-isDragging': this.props.isDragging,
'mapTocEntry-isDraggingOver': this.props.isDraggingOver, 'mapTocEntry-isDraggingOver': this.props.isDraggingOver,
'mapTocEntry-isCombineLayer': this.props.isCombineLayer,
'mapTocEntry-isSelected': 'mapTocEntry-isSelected':
this.props.layer.isPreviewLayer() || this.props.layer.isPreviewLayer() ||
(this.props.selectedLayer && this.props.selectedLayer.getId() === this.props.layer.getId()), (this.props.selectedLayer && this.props.selectedLayer.getId() === this.props.layer.getId()),