Uploaded image for project: 'ERM Platform'
  1. ERM Platform
  2. ERM-1795

Dashboard: apply a common set of drag and drop styles and behaviours

    XMLWordPrintable

    Details

    • Template:
    • Development Team:
      ERM

      Description

      Description

      Drag and drop is supported in two places in the dashboard.

      1. "Edit widget display order" pane
      2. "New/Edit widget" pane - Column ordering

      A common set of styles should be applied to the drag and drop controls. A number of options are presented in https://docs.google.com/document/d/1NMYNUPxy98kU3rFOCNZ0qwx4IRtvCnz4xXAZoLcpzJc/edit#bookmark=id.w32lpk8xapl9

      Option H is the preferred option. Three states are anticipated.

      1. The below mockup shows the dormant state.

      2. When focus is given to the drag handle button, or when the mouse pointer hovers on the button the draggable area is highlighted, as shown in the below mockup.

      3. When the drag handle button is selected, by mouse or keyboard, and when the area is being moved. the "selected" style is applied to the draggable area, as shown in the below mockup.

      When the drag event ends the state should revert back to the dormant state in 1 above.

      Notes

      • The aim is to apply the Stripes styles for hover and click/select.
      • Ideally the appearance and behaviour will be reusable. How easy would it be to apply in other apps?
      • It is important to include a margin between the draggable area's border and it content.

        TestRail: Results

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                ostephens Owen Stephens
                Reporter:
                gosguthorpe Gill Osguthorpe
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:

                    TestRail: Runs

                      TestRail: Cases