[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 <[email protected]>
elastic · Oct 26, 2022 · cf8e6a7 · cf8e6a7
1 parent c31c38c
commit cf8e6a7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/...s/public/connected_components/right_side_controls/layer_control/layer_toc/_layer_toc.scss b/...s/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/...aps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx b/...aps/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/...onnected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss b/...onnected_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/.../connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/.../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()),