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

nreese · kibanamachine · web-flow · commit cf8e6a7eaae6 · 2022-10-26T09:10:21.000-06:00
* [Maps] highlight combine layer background when creating layer group

* tslint fixes

* eslint fixes

Co-authored-by: Kibana Machine &lt;42973632+kibanamachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/_layer_toc.scss b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/_layer_toc.scss
@@ -6,6 +6,10 @@
   cursor: alias !important;
 }
 
+.mapLayerToc-droppable-isCombining {
+  background-color: $euiColorEmptyShade !important;
+}
+
 .mapLayerToc-droppable-isDragging * {
   cursor: ns-resize !important;
 }
diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx
@@ -244,6 +244,10 @@ export class LayerTOC extends Component<Props> {
                       dragHandleProps={draggableProvided.dragHandleProps}
                       isDragging={draggableSnapshot.isDragging}
                       isDraggingOver={droppableSnapshot.isDraggingOver}
+                      isCombineLayer={
+                        this.state.combineLayer !== null &&
+                        this.state.combineLayer.getId() === layer.getId()
+                      }
                     />
                   );
                 }}
diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss
@@ -62,6 +62,11 @@
   pointer-events: none !important;
 }
 
+.mapTocEntry-isCombineLayer {
+  transition: background-color $euiAnimSpeedExtraSlow ease;
+  background-color: transparentize($euiColorSuccess, .75);
+}
+
 .mapTocEntry-isSelected {
   background-color: tintOrShade($euiColorLightShade, 60%, 20%);
 }
diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx
@@ -49,6 +49,7 @@ export interface OwnProps {
   dragHandleProps?: DraggableProvidedDragHandleProps;
   isDragging?: boolean;
   isDraggingOver?: boolean;
+  isCombineLayer?: boolean;
 }
 
 type Props = ReduxStateProps & ReduxDispatchProps & OwnProps;
@@ -314,6 +315,7 @@ export class TOCEntry extends Component<Props, State> {
     const classes = classNames('mapTocEntry', {
       'mapTocEntry-isDragging': this.props.isDragging,
       'mapTocEntry-isDraggingOver': this.props.isDraggingOver,
+      'mapTocEntry-isCombineLayer': this.props.isCombineLayer,
       'mapTocEntry-isSelected':
         this.props.layer.isPreviewLayer() ||
         (this.props.selectedLayer && this.props.selectedLayer.getId() === this.props.layer.getId()),

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,10 @@`
`6`	`6`	`cursor: alias !important;`
`7`	`7`	`}`
`8`	`8`
	`9`	`+.mapLayerToc-droppable-isCombining {`
	`10`	`+ background-color: $euiColorEmptyShade !important;`
	`11`	`+}`
	`12`	`+`
`9`	`13`	`.mapLayerToc-droppable-isDragging * {`
`10`	`14`	`cursor: ns-resize !important;`
`11`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,11 @@`
`62`	`62`	`pointer-events: none !important;`
`63`	`63`	`}`
`64`	`64`
	`65`	`+.mapTocEntry-isCombineLayer {`
	`66`	`+ transition: background-color $euiAnimSpeedExtraSlow ease;`
	`67`	`+ background-color: transparentize($euiColorSuccess, .75);`
	`68`	`+}`
	`69`	`+`
`65`	`70`	`.mapTocEntry-isSelected {`
`66`	`71`	`background-color: tintOrShade($euiColorLightShade, 60%, 20%);`
`67`	`72`	`}`