summaryrefslogtreecommitdiff
path: root/doc
diff options
context:
space:
mode:
authorAchilleas Pipinellis <axilleas@axilleas.me>2016-12-16 11:14:50 +0000
committerAchilleas Pipinellis <axilleas@axilleas.me>2016-12-16 11:14:50 +0000
commit45bd2263698892b9de6eb7956e3085a61054f49f (patch)
tree96024526e0953b4885f5bfe0c083a0c2919140bc /doc
parentecd0c1757da536c5b522dad563b6621d0d5634b1 (diff)
parentfb4d763c138830b324d1b060fe1c05bf451e91e5 (diff)
downloadgitlab-ce-45bd2263698892b9de6eb7956e3085a61054f49f.tar.gz
Merge branch 'ux-guide-cursors' into 'master'
UX Guide: add guidance on cursor usage Add guidance to the UX guide on when to use what mouse cursor. See merge request !8128
Diffstat (limited to 'doc')
-rw-r--r--doc/development/ux_guide/basics.md16
-rw-r--r--doc/development/ux_guide/img/cursors-default.pngbin0 -> 567 bytes
-rw-r--r--doc/development/ux_guide/img/cursors-ibeam.pngbin0 -> 383 bytes
-rw-r--r--doc/development/ux_guide/img/cursors-move.pngbin0 -> 276 bytes
-rw-r--r--doc/development/ux_guide/img/cursors-panclosed.pngbin0 -> 483 bytes
-rw-r--r--doc/development/ux_guide/img/cursors-panopened.pngbin0 -> 622 bytes
-rw-r--r--doc/development/ux_guide/img/cursors-pointer.pngbin0 -> 574 bytes
7 files changed, 16 insertions, 0 deletions
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
--- /dev/null
+++ b/doc/development/ux_guide/img/cursors-default.png
Binary files 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
--- /dev/null
+++ b/doc/development/ux_guide/img/cursors-ibeam.png
Binary files 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
--- /dev/null
+++ b/doc/development/ux_guide/img/cursors-move.png
Binary files 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
--- /dev/null
+++ b/doc/development/ux_guide/img/cursors-panclosed.png
Binary files 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
--- /dev/null
+++ b/doc/development/ux_guide/img/cursors-panopened.png
Binary files 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
--- /dev/null
+++ b/doc/development/ux_guide/img/cursors-pointer.png
Binary files differ