[ci skip] UX Guide: add guidance on cursor usage
This commit is contained in:
parent
58597bf598
commit
fb4d763c13
7 changed files with 16 additions and 0 deletions
|
@ -5,6 +5,7 @@
|
||||||
* [Typography](#typography)
|
* [Typography](#typography)
|
||||||
* [Icons](#icons)
|
* [Icons](#icons)
|
||||||
* [Color](#color)
|
* [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.
|
> 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. |
|
||||||
|
|
||||||
|
|
||||||
|
|
BIN
doc/development/ux_guide/img/cursors-default.png
Normal file
BIN
doc/development/ux_guide/img/cursors-default.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 567 B |
BIN
doc/development/ux_guide/img/cursors-ibeam.png
Normal file
BIN
doc/development/ux_guide/img/cursors-ibeam.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 383 B |
BIN
doc/development/ux_guide/img/cursors-move.png
Normal file
BIN
doc/development/ux_guide/img/cursors-move.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 276 B |
BIN
doc/development/ux_guide/img/cursors-panclosed.png
Normal file
BIN
doc/development/ux_guide/img/cursors-panclosed.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 483 B |
BIN
doc/development/ux_guide/img/cursors-panopened.png
Normal file
BIN
doc/development/ux_guide/img/cursors-panopened.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 622 B |
BIN
doc/development/ux_guide/img/cursors-pointer.png
Normal file
BIN
doc/development/ux_guide/img/cursors-pointer.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 574 B |
Loading…
Reference in a new issue