From 11510bf729e04ea6f4a713820582b490266505d2 Mon Sep 17 00:00:00 2001 From: awhildy Date: Fri, 21 Oct 2016 14:25:09 -0700 Subject: [ci skip] Establish basic structure for ux_guide README.md Block out pages needed for ux_guide Add resources stub to ux_guide home Fill out principles and basics Add TOC to basics Move all of UI guide to new UX guide structure Add first level structure on ux-guide pages Add more details to buttons Add button images. Update link on development Renamed surfaces to templates. Add tooltip details Update typography and icons on Basics page Add images for color. First draft of voice and tone Delete findings page Refine pages. Fill out Surfaces pages Clean up layout on basics, surfaces, features. Add anchorlinks and counts to components Fill out components page Add item title and system info block Fill out Features page Switch tooltip placement image --- doc/development/ux_guide/surfaces.md | 53 ++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 doc/development/ux_guide/surfaces.md (limited to 'doc/development/ux_guide/surfaces.md') diff --git a/doc/development/ux_guide/surfaces.md b/doc/development/ux_guide/surfaces.md new file mode 100644 index 00000000000..d9e48a66185 --- /dev/null +++ b/doc/development/ux_guide/surfaces.md @@ -0,0 +1,53 @@ +# Surfaces + +## Contents +* [Header](#header) +* [Global menu](#global-menu) +* [Side pane](#side-pane) +* [Content area](#content-area) + +--- + +![Surfaces UX](img/surfaces-ux.png) + +## Global menu + +This menu is to navigate to pages that contain content global to GitLab. + +--- + +
+ +## Header + +The header contains 3 main elements: Project switching and searching, user account avatar and settings, and a contextual menu that changes based on the current page. + +![Surfaces Header](img/surfaces-header.png) + +--- + +
+ +## Side pane + +The side pane holds supporting information and meta data for the information in the content area. + +--- + +
+ +## Content area + +The main content of the page. The content area can include other surfaces. + +### Item title bar + +The item title bar contains the top level information to identify the item, such as the name, id and status. + +![Item title](img/surfaces-contentitemtitle.png) + +### Item system information + +The system information block contains relevant system controlled information. + +![Item system information](img/surfaces-systeminformationblock.png) \ No newline at end of file -- cgit v1.2.1 From 406eda17d444e534bfa429d8c72a90c8f91a6f00 Mon Sep 17 00:00:00 2001 From: Achilleas Pipinellis Date: Fri, 11 Nov 2016 18:20:56 +0100 Subject: Remove
and replace GFM blockquote with the Markdown general [ci skip] --- doc/development/ux_guide/surfaces.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) (limited to 'doc/development/ux_guide/surfaces.md') diff --git a/doc/development/ux_guide/surfaces.md b/doc/development/ux_guide/surfaces.md index d9e48a66185..881d6aa4cd6 100644 --- a/doc/development/ux_guide/surfaces.md +++ b/doc/development/ux_guide/surfaces.md @@ -16,8 +16,6 @@ This menu is to navigate to pages that contain content global to GitLab. --- -
- ## Header The header contains 3 main elements: Project switching and searching, user account avatar and settings, and a contextual menu that changes based on the current page. @@ -26,16 +24,12 @@ The header contains 3 main elements: Project switching and searching, user accou --- -
- ## Side pane The side pane holds supporting information and meta data for the information in the content area. --- -
- ## Content area The main content of the page. The content area can include other surfaces. @@ -50,4 +44,4 @@ The item title bar contains the top level information to identify the item, such The system information block contains relevant system controlled information. -![Item system information](img/surfaces-systeminformationblock.png) \ No newline at end of file +![Item system information](img/surfaces-systeminformationblock.png) -- cgit v1.2.1