From fb4d763c138830b324d1b060fe1c05bf451e91e5 Mon Sep 17 00:00:00 2001 From: Allison Whilden Date: Thu, 15 Dec 2016 15:15:17 -0800 Subject: [ci skip] UX Guide: add guidance on cursor usage --- doc/development/ux_guide/basics.md | 16 ++++++++++++++++ doc/development/ux_guide/img/cursors-default.png | Bin 0 -> 567 bytes doc/development/ux_guide/img/cursors-ibeam.png | Bin 0 -> 383 bytes doc/development/ux_guide/img/cursors-move.png | Bin 0 -> 276 bytes doc/development/ux_guide/img/cursors-panclosed.png | Bin 0 -> 483 bytes doc/development/ux_guide/img/cursors-panopened.png | Bin 0 -> 622 bytes doc/development/ux_guide/img/cursors-pointer.png | Bin 0 -> 574 bytes 7 files changed, 16 insertions(+) create mode 100644 doc/development/ux_guide/img/cursors-default.png create mode 100644 doc/development/ux_guide/img/cursors-ibeam.png create mode 100644 doc/development/ux_guide/img/cursors-move.png create mode 100644 doc/development/ux_guide/img/cursors-panclosed.png create mode 100644 doc/development/ux_guide/img/cursors-panopened.png create mode 100644 doc/development/ux_guide/img/cursors-pointer.png diff --git a/doc/development/ux_guide/basics.md b/doc/development/ux_guide/basics.md index 76b739386a5..e81729556d8 100644 --- a/doc/development/ux_guide/basics.md +++ b/doc/development/ux_guide/basics.md @@ -5,6 +5,7 @@ * [Typography](#typography) * [Icons](#icons) * [Color](#color) +* [Cursors](#cursors) --- @@ -59,3 +60,18 @@ GitLab uses Font Awesome icons throughout our interface. > TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage. +--- + +## Cursors +The mouse cursor is key in helping users understand how to interact with elements on the screen. + +| | | +| :------: | :------- | +| ![Default cursor](img/cursors-default.png) | Default cursor | +| ![Pointer cursor](img/cursors-pointer.png) | Pointer cursor: used to indicate that you can click on an element to invoke a command or navigate, such as links and buttons | +| ![Move cursor](img/cursors-move.png) | Move cursor: used to indicate that you can move an element around on the screen | +| ![Pan opened cursor](img/cursors-panopened.png) | Pan cursor (opened): indicates that you can grab and move the entire canvas, affecting what is seen in the view port. | +| ![Pan closed cursor](img/cursors-panclosed.png) | Pan cursor (closed): indicates that you are actively panning the canvas. | +| ![I-beam cursor](img/cursors-ibeam.png) | I-beam cursor: indicates that this is either text that you can select and copy, or a text field that you can click into to enter text. | + + diff --git a/doc/development/ux_guide/img/cursors-default.png b/doc/development/ux_guide/img/cursors-default.png new file mode 100644 index 00000000000..c188ec4e351 Binary files /dev/null and b/doc/development/ux_guide/img/cursors-default.png differ diff --git a/doc/development/ux_guide/img/cursors-ibeam.png b/doc/development/ux_guide/img/cursors-ibeam.png new file mode 100644 index 00000000000..86f28639982 Binary files /dev/null and b/doc/development/ux_guide/img/cursors-ibeam.png differ diff --git a/doc/development/ux_guide/img/cursors-move.png b/doc/development/ux_guide/img/cursors-move.png new file mode 100644 index 00000000000..a9c610eaa88 Binary files /dev/null and b/doc/development/ux_guide/img/cursors-move.png differ diff --git a/doc/development/ux_guide/img/cursors-panclosed.png b/doc/development/ux_guide/img/cursors-panclosed.png new file mode 100644 index 00000000000..6d247a765ac Binary files /dev/null and b/doc/development/ux_guide/img/cursors-panclosed.png differ diff --git a/doc/development/ux_guide/img/cursors-panopened.png b/doc/development/ux_guide/img/cursors-panopened.png new file mode 100644 index 00000000000..76f2eeda831 Binary files /dev/null and b/doc/development/ux_guide/img/cursors-panopened.png differ diff --git a/doc/development/ux_guide/img/cursors-pointer.png b/doc/development/ux_guide/img/cursors-pointer.png new file mode 100644 index 00000000000..d86dd955fa7 Binary files /dev/null and b/doc/development/ux_guide/img/cursors-pointer.png differ -- cgit v1.2.1