Skip to content

Add a visual indicator to dashboard panels when in edit mode

Elwyn Benson requested to merge 389274-panel-edit-mode-visual-indicator into master

What does this MR do and why?

Add a visual indicator to dashboard panels when editing so it's clear panels can be dragged to resize.

Also change the cursor to grab / grabbing to help show the panels can be drag'n'dropped to move.

Screenshots or screen recordings

before after
(resize handles only visible on hover) image (resize handles always visible while editing) image

(unfortunately screenshots / screen recordings on my system are not including the mouse cursor so can't include a before/after. But it's changed from standard pointer to grab Opened_hand.svg, on hover and grabbing Closed_hand.svg on drag while in edit mode)

How to set up and validate locally

Note: This feature has a lot of setup steps. If you need help please ask me or I can step through these during a call with you.

  1. Follow these instructions to setup Product Analytics in GDK.
  2. Add a custom dashboard following these instructions
  3. View this dashboard, and click Edit
  4. Verify resize handles are always visible, and cursor style is grab / grabbing when hovering/dragging panels

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #389274 (closed)

Edited by Elwyn Benson

Merge request reports