From 5452c069f77d13b41a372f4839e4a734c89ef798 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 17 Nov 2021 13:46:24 +0000
Subject: [PATCH] PanelEdit: Display drag indicators on draggable sections
 (#41711)

* PanelEdit: Display drag indicators on draggable sections

* Move drag indicators between the sections
---
 .../SplitPaneWrapper/SplitPaneWrapper.tsx     | 65 ++++++++++++++-----
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
index 11e75175c78..18d143e6476 100644
--- a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
+++ b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
@@ -134,18 +134,33 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const paneSpacing = theme.spacing.md;
 
   const resizer = css`
-    font-style: italic;
-    background: transparent;
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
-    border-left: 0;
-    border-color: transparent;
-    border-style: solid;
-    transition: 0.2s border-color ease-in-out;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      transition: 0.2s border-color ease-in-out;
+    }
+
+    &::after {
+      background: ${theme.colors.panelBorder};
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transition: 0.2s background ease-in-out;
+      transform: translate(-50%, -50%);
+      border-radius: 4px;
+    }
 
     &:hover {
-      border-color: ${handleColor};
+      &::before {
+        border-color: ${handleColor};
+      }
+
+      &::after {
+        background: ${handleColor};
+      }
     }
   `;
 
@@ -155,8 +170,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       css`
         cursor: col-resize;
         width: ${paneSpacing};
-        border-right-width: 1px;
-        margin-top: 18px;
+
+        &::before {
+          border-right: 1px solid transparent;
+          height: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &::after {
+          height: 200px;
+          width: 4px;
+        }
       `
     ),
     resizerH: cx(
@@ -164,11 +189,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       css`
         height: ${paneSpacing};
         cursor: row-resize;
-        position: relative;
-        top: 0px;
-        z-index: 1;
-        border-top-width: 1px;
         margin-left: ${paneSpacing};
+
+        &::before {
+          border-top: 1px solid transparent;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 100%;
+        }
+
+        &::after {
+          height: 4px;
+          width: 200px;
+        }
       `
     ),
   };