Skip to content

Add grab cursor for ops dashboard cards

David O'Regan requested to merge 37001 into master

What does this MR do?

This MR is for issue: #37001 (closed)

When the user hovers over a dashboard card in the operations screen, we want to show a grab icon which lets the user know the dashboard card is draggable/order-able.

We do this by creating a small utility class which can be re-used in the future: .cursor-grab and applying it to the dashboard cards in a utlity driven fashion as outlined by the Gitlab style guide here

We create this class as it encapsulates a very clear purpose which can be re-used.

My only question is: Is it okay to have created this ultiity class inside common.scss?

I can see from the style guide this is the old utility style-sheet but to me it made sense to group the cursor utility class here with the previously existing ones i.e. .cursor-pointer

UPDATE

gitlab-ui!1272 (merged)

CSS utility created in gitlab/ui to support this action and not add any extra bloat to the GitLab project!

Screenshots

Before After After With Link After With Link Hover
Screenshot_2020-02-18_08-54-20 Screenshot_2020-02-18_08-54-41 Screenshot_2020-02-18_08-55-10 Screenshot_2020-02-18_08-55-23

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Test case added in: ee/spec/javascripts/operations/components/dashboard/project_spec.js to ensure the utility class is applied.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by David O'Regan

Merge request reports