From fb664d3732c690f9c36c82fd187982f92a15b3a2 Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Thu, 18 May 2017 05:38:17 +0000 Subject: Add new file --- doc/development/ux_guide/illustrations.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 doc/development/ux_guide/illustrations.md (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md new file mode 100644 index 00000000000..e69de29bb2d -- cgit v1.2.1 From a7b1779c45d9d1eae57d4bcf6613059bfa0b5ace Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Thu, 18 May 2017 06:15:47 +0000 Subject: Update illustrations.md --- doc/development/ux_guide/illustrations.md | 52 +++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index e69de29bb2d..168a3cd33f4 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -0,0 +1,52 @@ +# Illustrations + +The illustrations should always align with topics and goals in specific context. + +## Principles + +#### Be simple. +- For clarity, we use simple and specific elements to create our illustrations. + +#### Be optimistic. +- We are an open-minded, optimistic, and friendly team. We should reflect those values on our illustrations to connect with our brand experience. + +#### Be gentle. +- Our illustrations assist users understand context and guide users to the right direction. Illustrations are supportive, so it should be obvious but not aggressive. + + +## Style + +#### Shapes +- All illustrations are geometric rather than organic. +- The illustrations are made by circles, rectangles, squares, and triangles. + +![example-shapes]() + +#### Stroke +- Standard border thickness: **4px** +- Depends on different situations, border thickness can be changed to **3px**. For example, when the illustration size is small, the illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px. +- We use **rounded caps** and **rounded corner**. + +![example-caps-and-corner]() + +#### Radius +- Standard corner radius: **10px** +- Depends on different situations, corner radius can be changed to **5px**. For example, when the illustration size is small, the illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. + +![example-radius]() + +#### Colors + +| Orange | Purple | Grey | +| -------- | -------- | -------- | +| ![color-orange]() | ![color-purple]() | ![color-grey]() | +| #FC6D26 | #6B4FBB | #EEEEEE | + +##### Color palette +We suggest that pick the colors from the color palette. + +| Orange | Purple | +| -------- | -------- | +| ![palette-orange]() | ![palette-purple]() | + + -- cgit v1.2.1 From a331d7603a3466ff602cddc2a3c5e95385adc5fe Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Thu, 18 May 2017 06:26:03 +0000 Subject: Update illustrations.md --- doc/development/ux_guide/illustrations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 168a3cd33f4..89547b2352d 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -43,7 +43,7 @@ The illustrations should always align with topics and goals in specific context. | #FC6D26 | #6B4FBB | #EEEEEE | ##### Color palette -We suggest that pick the colors from the color palette. +For consistency, we suggest to pick the colors from the color palette. | Orange | Purple | | -------- | -------- | -- cgit v1.2.1 From 55a6d20a7ee7dc4f42baa2b5155f80609ca1452b Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Fri, 19 May 2017 05:21:27 +0000 Subject: Update illustrations.md --- doc/development/ux_guide/illustrations.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 89547b2352d..5e7d243805d 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -27,7 +27,10 @@ The illustrations should always align with topics and goals in specific context. - Depends on different situations, border thickness can be changed to **3px**. For example, when the illustration size is small, the illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px. - We use **rounded caps** and **rounded corner**. -![example-caps-and-corner]() +| Do | Don't | +| -------- | -------- | +| ![example-caps-and-corner--do]() | ![example-caps-and-corner--dont]() | + #### Radius - Standard corner radius: **10px** @@ -35,15 +38,16 @@ The illustrations should always align with topics and goals in specific context. ![example-radius]() -#### Colors +#### Colors palette + +For consistency, we suggest to pick the colors from the color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | | ![color-orange]() | ![color-purple]() | ![color-grey]() | | #FC6D26 | #6B4FBB | #EEEEEE | -##### Color palette -For consistency, we suggest to pick the colors from the color palette. + | Orange | Purple | | -------- | -------- | -- cgit v1.2.1 From f09a7b0bbb179a15890705667366f7f9dc2a4e24 Mon Sep 17 00:00:00 2001 From: Hazel Date: Fri, 19 May 2017 13:26:25 +0800 Subject: Add the images for illustration guidelines --- .../ux_guide/img/illustrations-border-radius.png | Bin 0 -> 7779 bytes doc/development/ux_guide/img/illustrations-caps-do.png | Bin 0 -> 3775 bytes .../ux_guide/img/illustrations-caps-don't.png | Bin 0 -> 3922 bytes .../ux_guide/img/illustrations-color-grey.png | Bin 0 -> 251 bytes .../ux_guide/img/illustrations-color-orange.png | Bin 0 -> 275 bytes .../ux_guide/img/illustrations-color-purple.png | Bin 0 -> 275 bytes .../ux_guide/img/illustrations-geometric.png | Bin 0 -> 5057 bytes .../ux_guide/img/illustrations-palette-oragne.png | Bin 0 -> 10419 bytes .../ux_guide/img/illustrations-palette-purple.png | Bin 0 -> 9924 bytes 9 files changed, 0 insertions(+), 0 deletions(-) create mode 100755 doc/development/ux_guide/img/illustrations-border-radius.png create mode 100755 doc/development/ux_guide/img/illustrations-caps-do.png create mode 100755 doc/development/ux_guide/img/illustrations-caps-don't.png create mode 100755 doc/development/ux_guide/img/illustrations-color-grey.png create mode 100755 doc/development/ux_guide/img/illustrations-color-orange.png create mode 100755 doc/development/ux_guide/img/illustrations-color-purple.png create mode 100755 doc/development/ux_guide/img/illustrations-geometric.png create mode 100755 doc/development/ux_guide/img/illustrations-palette-oragne.png create mode 100755 doc/development/ux_guide/img/illustrations-palette-purple.png (limited to 'doc/development') diff --git a/doc/development/ux_guide/img/illustrations-border-radius.png b/doc/development/ux_guide/img/illustrations-border-radius.png new file mode 100755 index 00000000000..4e2fef5c7f5 Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-border-radius.png differ diff --git a/doc/development/ux_guide/img/illustrations-caps-do.png b/doc/development/ux_guide/img/illustrations-caps-do.png new file mode 100755 index 00000000000..7a2c74382f6 Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-caps-do.png differ diff --git a/doc/development/ux_guide/img/illustrations-caps-don't.png b/doc/development/ux_guide/img/illustrations-caps-don't.png new file mode 100755 index 00000000000..848f72dbe30 Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-caps-don't.png differ diff --git a/doc/development/ux_guide/img/illustrations-color-grey.png b/doc/development/ux_guide/img/illustrations-color-grey.png new file mode 100755 index 00000000000..63855026c2b Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-color-grey.png differ diff --git a/doc/development/ux_guide/img/illustrations-color-orange.png b/doc/development/ux_guide/img/illustrations-color-orange.png new file mode 100755 index 00000000000..96765c8c28c Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-color-orange.png differ diff --git a/doc/development/ux_guide/img/illustrations-color-purple.png b/doc/development/ux_guide/img/illustrations-color-purple.png new file mode 100755 index 00000000000..745d2c853ba Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-color-purple.png differ diff --git a/doc/development/ux_guide/img/illustrations-geometric.png b/doc/development/ux_guide/img/illustrations-geometric.png new file mode 100755 index 00000000000..33f05547bac Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-geometric.png differ diff --git a/doc/development/ux_guide/img/illustrations-palette-oragne.png b/doc/development/ux_guide/img/illustrations-palette-oragne.png new file mode 100755 index 00000000000..58df4459c24 Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-palette-oragne.png differ diff --git a/doc/development/ux_guide/img/illustrations-palette-purple.png b/doc/development/ux_guide/img/illustrations-palette-purple.png new file mode 100755 index 00000000000..da5c1e245c9 Binary files /dev/null and b/doc/development/ux_guide/img/illustrations-palette-purple.png differ -- cgit v1.2.1 From 85efbd1f0792b4d69e90de665e3e37345159ff47 Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Fri, 19 May 2017 05:39:20 +0000 Subject: Add some images to illustrations.md --- doc/development/ux_guide/illustrations.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 5e7d243805d..cd0d61a9d3d 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -20,7 +20,7 @@ The illustrations should always align with topics and goals in specific context. - All illustrations are geometric rather than organic. - The illustrations are made by circles, rectangles, squares, and triangles. -![example-shapes]() +Example for geometric #### Stroke - Standard border thickness: **4px** @@ -29,14 +29,14 @@ The illustrations should always align with topics and goals in specific context. | Do | Don't | | -------- | -------- | -| ![example-caps-and-corner--do]() | ![example-caps-and-corner--dont]() | +| Do: caps and corner | Don't: caps and corner | #### Radius - Standard corner radius: **10px** - Depends on different situations, corner radius can be changed to **5px**. For example, when the illustration size is small, the illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. -![example-radius]() +Example for border radius #### Colors palette @@ -44,13 +44,13 @@ For consistency, we suggest to pick the colors from the color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | -| ![color-orange]() | ![color-purple]() | ![color-grey]() | +| Orange | Purple | Grey | | #FC6D26 | #6B4FBB | #EEEEEE | - +--- | Orange | Purple | | -------- | -------- | -| ![palette-orange]() | ![palette-purple]() | +| Palette - Orange | Palette - Purple | -- cgit v1.2.1 From 7125082edc0f775037ed537b5655cccedcdb015a Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Fri, 19 May 2017 05:40:24 +0000 Subject: Update image size in illustrations.md --- doc/development/ux_guide/illustrations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index cd0d61a9d3d..c6478019ed0 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -44,13 +44,13 @@ For consistency, we suggest to pick the colors from the color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | -| Orange | Purple | Grey | +| Orange | Purple | Grey | | #FC6D26 | #6B4FBB | #EEEEEE | --- | Orange | Purple | | -------- | -------- | -| Palette - Orange | Palette - Purple | +| Palette - Orange | Palette - Purple | -- cgit v1.2.1 From c93131d3d03aa19c9bb6738b170dda48744fb211 Mon Sep 17 00:00:00 2001 From: Hazel Yang Date: Fri, 19 May 2017 05:41:53 +0000 Subject: Update illustrations.md --- doc/development/ux_guide/illustrations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index c6478019ed0..7df8e918e60 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -44,13 +44,13 @@ For consistency, we suggest to pick the colors from the color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | -| Orange | Purple | Grey | +| Orange | Purple | Grey | | #FC6D26 | #6B4FBB | #EEEEEE | --- | Orange | Purple | | -------- | -------- | -| Palette - Orange | Palette - Purple | +| Palette - Orange | Palette - Purple | -- cgit v1.2.1 From ff9a2a8b51de385b4383bf25c5ece5479738f6c4 Mon Sep 17 00:00:00 2001 From: Hazel Date: Wed, 2 Aug 2017 12:43:48 +0800 Subject: Illustration guidelines - Fix grammar error and update images. --- doc/development/ux_guide/illustrations.md | 24 ++++++++++----------- .../ux_guide/img/illustrations-palette-oragne.png | Bin 10419 -> 10439 bytes .../ux_guide/img/illustrations-palette-purple.png | Bin 9924 -> 10002 bytes 3 files changed, 11 insertions(+), 13 deletions(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 7df8e918e60..b9c98277120 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -8,39 +8,39 @@ The illustrations should always align with topics and goals in specific context. - For clarity, we use simple and specific elements to create our illustrations. #### Be optimistic. -- We are an open-minded, optimistic, and friendly team. We should reflect those values on our illustrations to connect with our brand experience. +- We are an open-minded, optimistic, and friendly team. We should reflect those values in our illustrations to connect with our brand experience. #### Be gentle. -- Our illustrations assist users understand context and guide users to the right direction. Illustrations are supportive, so it should be obvious but not aggressive. +- Our illustrations assist users in understanding context and guide users in the right direction. Illustrations are supportive, so they should be obvious but not aggressive. ## Style #### Shapes -- All illustrations are geometric rather than organic. -- The illustrations are made by circles, rectangles, squares, and triangles. +- All illustrations are geometric rather than organic. +- The illustrations are made by circles, rectangles, squares, and triangles. Example for geometric #### Stroke - Standard border thickness: **4px** -- Depends on different situations, border thickness can be changed to **3px**. For example, when the illustration size is small, the illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px. +- Depending on the situation, border thickness can be changed to **3px**. For example, when the illustration size is small, an illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px. - We use **rounded caps** and **rounded corner**. | Do | Don't | -| -------- | -------- | +| -------- | -------- | | Do: caps and corner | Don't: caps and corner | #### Radius - Standard corner radius: **10px** -- Depends on different situations, corner radius can be changed to **5px**. For example, when the illustration size is small, the illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. +- Depending on the situation, corner radius can be changed to **5px**. For example, when the illustration size is small, an illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. -Example for border radius +Example for border radius #### Colors palette -For consistency, we suggest to pick the colors from the color palette. +For consistency, we recommend choosing colors from our color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | @@ -50,7 +50,5 @@ For consistency, we suggest to pick the colors from the color palette. --- | Orange | Purple | -| -------- | -------- | -| Palette - Orange | Palette - Purple | - - +| -------- | -------- | +| Palette - Orange | Palette - Purple | diff --git a/doc/development/ux_guide/img/illustrations-palette-oragne.png b/doc/development/ux_guide/img/illustrations-palette-oragne.png index 58df4459c24..15f35912646 100755 Binary files a/doc/development/ux_guide/img/illustrations-palette-oragne.png and b/doc/development/ux_guide/img/illustrations-palette-oragne.png differ diff --git a/doc/development/ux_guide/img/illustrations-palette-purple.png b/doc/development/ux_guide/img/illustrations-palette-purple.png index da5c1e245c9..e0f5839705e 100755 Binary files a/doc/development/ux_guide/img/illustrations-palette-purple.png and b/doc/development/ux_guide/img/illustrations-palette-purple.png differ -- cgit v1.2.1 From 05ddd46c8646a82647a525933c59cf80887e8e4a Mon Sep 17 00:00:00 2001 From: Hazel Date: Wed, 9 Aug 2017 14:29:38 +0800 Subject: Add size part to the guideline --- doc/development/ux_guide/illustrations.md | 31 ++++++++++++++++++++- .../img/illustration-size-large-horizontal.png | Bin 0 -> 55272 bytes .../img/illustration-size-large-vertical.png | Bin 0 -> 59217 bytes .../ux_guide/img/illustration-size-medium.png | Bin 0 -> 20994 bytes .../ux_guide/img/illustration-size-small.png | Bin 0 -> 43536 bytes 5 files changed, 30 insertions(+), 1 deletion(-) create mode 100755 doc/development/ux_guide/img/illustration-size-large-horizontal.png create mode 100644 doc/development/ux_guide/img/illustration-size-large-vertical.png create mode 100755 doc/development/ux_guide/img/illustration-size-medium.png create mode 100644 doc/development/ux_guide/img/illustration-size-small.png (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index b9c98277120..818076900a6 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -31,13 +31,38 @@ The illustrations should always align with topics and goals in specific context. | -------- | -------- | | Do: caps and corner | Don't: caps and corner | - #### Radius - Standard corner radius: **10px** - Depending on the situation, corner radius can be changed to **5px**. For example, when the illustration size is small, an illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. Example for border radius +#### Size +Depends on the situation, the illustration size can be the 3 types below: + +**Large** +* Use case: Empty states, error pages(e.g. 404, 403) +* For vertical layout, the illustration should not larger than **430*300 px**. +* For horizontal layout, the illustration should not larger than **430*380 px** + +| Vertocal layout | Horizontal layout | +| --------------- | ----------------- | +| | + +**Medium** +* Use case: Banner +* The illustration should not larger than **240*160 px** +* The illustration should keep simple and clear. We recommend not including too many elements in the medium size illustration. + + + +**Small** +* Use case: Graphics for explanatory text, graphics for status +* The illustration should not larger than **160*90 px** +* The illustration should keep simple and clear. We recommend not including too many elements in the small size illustration. + + + #### Colors palette For consistency, we recommend choosing colors from our color palette. @@ -47,6 +72,10 @@ For consistency, we recommend choosing colors from our color palette. | Orange | Purple | Grey | | #FC6D26 | #6B4FBB | #EEEEEE | +#### Don't +- Don't include the typography in the illustration. +- Don't include tanuki in the illustration. If necessary, we recommend having tanuki monochromatic. + --- | Orange | Purple | diff --git a/doc/development/ux_guide/img/illustration-size-large-horizontal.png b/doc/development/ux_guide/img/illustration-size-large-horizontal.png new file mode 100755 index 00000000000..8aa835adccc Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-large-horizontal.png differ diff --git a/doc/development/ux_guide/img/illustration-size-large-vertical.png b/doc/development/ux_guide/img/illustration-size-large-vertical.png new file mode 100644 index 00000000000..813b6a065e5 Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-large-vertical.png differ diff --git a/doc/development/ux_guide/img/illustration-size-medium.png b/doc/development/ux_guide/img/illustration-size-medium.png new file mode 100755 index 00000000000..55cfe1dcb91 Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-medium.png differ diff --git a/doc/development/ux_guide/img/illustration-size-small.png b/doc/development/ux_guide/img/illustration-size-small.png new file mode 100644 index 00000000000..0124f58f48e Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-small.png differ -- cgit v1.2.1 From 8d84b7c439f719ca772f6b645d704f2568ac8652 Mon Sep 17 00:00:00 2001 From: Hazel Date: Wed, 16 Aug 2017 12:49:45 +0800 Subject: Add the situation of illustration on mobile --- doc/development/ux_guide/illustrations.md | 3 +++ 1 file changed, 3 insertions(+) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 818076900a6..65497e50d8a 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -63,6 +63,9 @@ Depends on the situation, the illustration size can be the 3 types below: +**Illustration on mobile** +- Keep the proportions in original ratio. + #### Colors palette For consistency, we recommend choosing colors from our color palette. -- cgit v1.2.1 From dc3450d311890dd3284528d3ce25bd9c5375bed2 Mon Sep 17 00:00:00 2001 From: Hazel Date: Mon, 21 Aug 2017 14:19:26 +0800 Subject: Fix typo errors --- doc/development/ux_guide/illustrations.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'doc/development') diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 65497e50d8a..7e16c300921 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -43,9 +43,9 @@ Depends on the situation, the illustration size can be the 3 types below: **Large** * Use case: Empty states, error pages(e.g. 404, 403) * For vertical layout, the illustration should not larger than **430*300 px**. -* For horizontal layout, the illustration should not larger than **430*380 px** +* For horizontal layout, the illustration should not larger than **430*380 px**. -| Vertocal layout | Horizontal layout | +| Vertical layout | Horizontal layout | | --------------- | ----------------- | | | @@ -57,8 +57,8 @@ Depends on the situation, the illustration size can be the 3 types below: **Small** -* Use case: Graphics for explanatory text, graphics for status -* The illustration should not larger than **160*90 px** +* Use case: Graphics for explanatory text, graphics for status. +* The illustration should not larger than **160*90 px**. * The illustration should keep simple and clear. We recommend not including too many elements in the small size illustration. -- cgit v1.2.1 From c5e6e45f11cd898ec1ff239b974278c0e4ecaa1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kim=20=22BKC=22=20Carlb=C3=A4cker?= Date: Mon, 25 Sep 2017 18:11:40 +0200 Subject: WTFPL is deamed unacceptable --- doc/development/licensing.md | 3 +++ 1 file changed, 3 insertions(+) (limited to 'doc/development') diff --git a/doc/development/licensing.md b/doc/development/licensing.md index 9a5811d8474..a75cdf22f40 100644 --- a/doc/development/licensing.md +++ b/doc/development/licensing.md @@ -65,6 +65,7 @@ Libraries with the following licenses are unacceptable for use: - [GNU AGPLv3][AGPLv3]: AGPL-licensed libraries cannot be linked to from non-GPL projects. - [Open Software License (OSL)][OSL]: is a copyleft license. In addition, the FSF [recommend against its use][OSL-GNU]. - [Facebook BSD + PATENTS][Facebook]: is a 3-clause BSD license with a patent grant that has been deemed [Category X][x-list] by the Apache foundation. +- [WTFPL][WTFPL]: is a public domain dedication [rejected by the OSI (3.2)][WTFPL-OSI]. Also has a strong language which is not in accordance with our diversity policy. ## Requesting Approval for Licenses @@ -108,3 +109,5 @@ Gems which are included only in the "development" or "test" groups by Bundler ar [x-list]: https://www.apache.org/legal/resolved.html#category-x [Acceptable-Licenses]: #acceptable-licenses [Unacceptable-Licenses]: #unacceptable-licenses +[WTFPL]: https://wtfpl.net +[WTFPL-OSI]: https://opensource.org/minutes20090304 -- cgit v1.2.1 From e16878bbef17385d126fe98eb7d14086df86ee25 Mon Sep 17 00:00:00 2001 From: ernstvn Date: Mon, 25 Sep 2017 17:56:52 -0700 Subject: Test for what should not be there as well --- doc/development/testing.md | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'doc/development') diff --git a/doc/development/testing.md b/doc/development/testing.md index 83269303005..386e8bef972 100644 --- a/doc/development/testing.md +++ b/doc/development/testing.md @@ -150,6 +150,16 @@ always in-sync with the codebase. [GitLab QA]: https://gitlab.com/gitlab-org/gitlab-qa [part of GitLab Rails]: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/qa +## Test for what should not be there + +This is particularly important for permission calls and might be called a +negative assertion: make sure only the bare minimum is returned and nothing else. + +See an issue about [leaking tokens] as an example of a vulnerability that is +captured by such a test. + +[leaking tokens]: https://gitlab.com/gitlab-org/gitlab-ce/issues/37948 + ## How to test at the correct level? As many things in life, deciding what to test at each level of testing is a -- cgit v1.2.1 From ec9003b2658f86134dea44b9d1f1d74866e87434 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Tue, 26 Sep 2017 15:22:13 -0700 Subject: Add illustration link to ux index page --- doc/development/ux_guide/index.md | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'doc/development') diff --git a/doc/development/ux_guide/index.md b/doc/development/ux_guide/index.md index 8a849f239dc..42bcf234e12 100644 --- a/doc/development/ux_guide/index.md +++ b/doc/development/ux_guide/index.md @@ -21,6 +21,11 @@ Guidance on the timing, curving and motion for GitLab. --- +### [Illustrations](illustrations.md) +Guidelines for principals and styles related to illustrations for GitLab. + +--- + ### [Copy](copy.md) Conventions on text and messaging within labels, buttons, and other components. -- cgit v1.2.1 From 147cbb95f5ffc0d70ab8f0fc573f0847fc90b3f3 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 27 Sep 2017 12:13:50 +0100 Subject: Removes section about big MRs --- doc/development/fe_guide/index.md | 28 ---------------------------- 1 file changed, 28 deletions(-) (limited to 'doc/development') diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md index d84801f91d4..031b12a8e91 100644 --- a/doc/development/fe_guide/index.md +++ b/doc/development/fe_guide/index.md @@ -29,34 +29,6 @@ For our currently-supported browsers, see our [requirements][requirements]. ## Development Process -When you are assigned an issue please follow the next steps: - -### Divide a big feature into small Merge Requests -1. Big Merge Request are painful to review. In order to make this process easier we -must break a big feature into smaller ones and create a Merge Request for each step. -1. First step is to create a branch from `master`, let's call it `new-feature`. This branch -will be the recipient of all the smaller Merge Requests. Only this one will be merged to master. -1. Don't do any work on this one, let's keep it synced with master. -1. Create a new branch from `new-feature`, let's call it `new-feature-step-1`. We advise you -to clearly identify which step the branch represents. -1. Do the first part of the modifications in this branch. The target branch of this Merge Request -should be `new-feature`. -1. Once `new-feature-step-1` gets merged into `new-feature` we can continue our work. Create a new -branch from `new-feature`, let's call it `new-feature-step-2` and repeat the process done before. - -```shell -master -└─ new-feature - ├─ new-feature-step-1 - ├─ new-feature-step-2 - └─ new-feature-step-3 -``` - -**Tips** -- Make sure `new-feature` branch is always synced with `master`: merge master frequently. -- Do the same for the feature branch you have opened. This can be accomplished by merging `master` into `new-feature` and `new-feature` into `new-feature-step-*` -- Avoid rewriting history. - ### Share your work early 1. Before writing code guarantee your vision of the architecture is aligned with GitLab's architecture. -- cgit v1.2.1 From 73f27db26407862c32d5776c60eb0c4c55261405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Coutable?= Date: Tue, 26 Sep 2017 12:50:54 +0200 Subject: Update CI parallelization description MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Rémy Coutable --- doc/development/testing.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'doc/development') diff --git a/doc/development/testing.md b/doc/development/testing.md index 83269303005..c9f14b5fb35 100644 --- a/doc/development/testing.md +++ b/doc/development/testing.md @@ -493,24 +493,24 @@ Here are some things to keep in mind regarding test performance: Our current CI parallelization setup is as follows: -1. The `knapsack` job in the prepare stage that is supposed to ensure we have a - `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` file: +1. The `retrieve-tests-metadata` job in the `prepare` stage ensures that we have + a `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` file: - The `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` file is fetched from S3, if it's not here we initialize the file with `{}`. -1. Each `rspec x y` job are run with `knapsack rspec` and should have an evenly - distributed share of tests: +1. Each `rspec-pg x y`/`rspec-mysql x y` job is run with `knapsack rspec` and + should have an evenly distributed share of tests: - It works because the jobs have access to the `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` since the "artifacts from all previous stages are passed by default". [^1] - - the jobs set their own report path to + - The jobs set their own report path to `KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json`. - - if knapsack is doing its job, test files that are run should be listed under + - If knapsack is doing its job, test files that are run should be listed under `Report specs`, not under `Leftover specs`. -1. The `update-knapsack` job takes all the +1. The `update-tests-metadata` job takes all the `knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json` - files from the `rspec x y` jobs and merge them all together into a single - `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` file that is then - uploaded to S3. + files from the `rspec-pg x y`/`rspec-mysql x y`jobs and merge them all together + into a single `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` file that + is then uploaded to S3. After that, the next pipeline will use the up-to-date `knapsack/${CI_PROJECT_NAME}/rspec_report-master.json` file. The same strategy -- cgit v1.2.1 From 0aef7d27e55e0a0e99b121ca84b41f4c86135725 Mon Sep 17 00:00:00 2001 From: Andrew Newdigate Date: Wed, 27 Sep 2017 14:59:51 +0000 Subject: Added some Gitaly docs to `docs/development` --- doc/development/README.md | 1 + doc/development/gitaly.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 doc/development/gitaly.md (limited to 'doc/development') diff --git a/doc/development/README.md b/doc/development/README.md index 3096d9f25f0..1448a4c0414 100644 --- a/doc/development/README.md +++ b/doc/development/README.md @@ -44,6 +44,7 @@ - [Building a package for testing purposes](build_test_package.md) - [Manage feature flags](feature_flags.md) - [View sent emails or preview mailers](emails.md) +- [Working with Gitaly](gitaly.md) ## Databases diff --git a/doc/development/gitaly.md b/doc/development/gitaly.md new file mode 100644 index 00000000000..f0be3a6b141 --- /dev/null +++ b/doc/development/gitaly.md @@ -0,0 +1,54 @@ +# GitLab Developers Guide to Working with Gitaly + +[Gitaly](https://gitlab.com/gitlab-org/gitaly) is a high-level Git RPC service used by GitLab CE/EE, +Workhorse and GitLab-Shell. All Rugged operations in GitLab CE/EE are currently being phased out to +be replaced by Gitaly API calls. + +Visit the [Gitaly Migration Board](https://gitlab.com/gitlab-org/gitaly/boards/331341) for current +status of the migration. + +## Feature Flags + +Gitaly makes heavy use of [feature flags](feature_flags.md). + +Each Rugged-to-Gitaly migration goes through a [series of phases](https://gitlab.com/gitlab-org/gitaly/blob/master/doc/MIGRATION_PROCESS.md): +* **Opt-In**: by default the Rugged implementation is used. + * Production instances can choose to enable the Gitaly endpoint by enabling the feature flag. + * For testing purposes, you may wish to enable all feature flags by default. This can be done by exporting the following + environment variable: `GITALY_FEATURE_DEFAULT_ON=1`. + * On developer instances (ie, when `Rails.env.development?` is true), the Gitaly endpoint + is enabled by default, but can be _disabled_ using feature flags. +* **Opt-Out**: by default, the Gitaly endpoint is used, but the feature can be explicitly disabled using the feature flag. +* **Madatory**: The migration is complete and cannot be disabled. The old codepath is removed. + +### Enabling and Disabling Feature + +In the Rails console, type: + +```ruby +Feature.enable(:gitaly_feature_name) +Feature.disable(:gitaly_feature_name) +``` + +Where `gitaly_feature_name` is the name of the Gitaly feature. This can be determined by finding the appropriate +`gitaly_migrate` code block, for example: + +```ruby +gitaly_migrate(:tag_names) do +... +end +``` + +Since Gitaly features are always prefixed with `gitaly_`, the name of the feature flag in this case would be `gitaly_tag_names`. + +## Gitaly-Related Test Failures + +If your test-suite is failing with Gitaly issues, as a first step, try running: + +```shell +rm -rf tmp/tests/gitaly +``` + +--- + +[Return to Development documentation](README.md) -- cgit v1.2.1 From f0ff0dd1ed5fd3ff047964c9ad8de81f21ce9014 Mon Sep 17 00:00:00 2001 From: Marcia Ramos Date: Thu, 28 Sep 2017 18:36:19 +0000 Subject: Docs: Feature overview and use cases --- doc/development/writing_documentation.md | 47 +++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) (limited to 'doc/development') diff --git a/doc/development/writing_documentation.md b/doc/development/writing_documentation.md index b1eb020a592..68ba3dd2da3 100644 --- a/doc/development/writing_documentation.md +++ b/doc/development/writing_documentation.md @@ -1,6 +1,6 @@ # Writing documentation - - **General Documentation**: written by the developers responsible by creating features. Should be submitted in the same merge request containing code. Feature proposals (by GitLab contributors) should also be accompanied by its respective documentation. They can be later improved by PMs and Technical Writers. + - **General Documentation**: written by the [developers responsible by creating features](#contributing-to-docs). Should be submitted in the same merge request containing code. Feature proposals (by GitLab contributors) should also be accompanied by its respective documentation. They can be later improved by PMs and Technical Writers. - **Technical Articles**: written by any [GitLab Team](https://about.gitlab.com/team/) member, GitLab contributors, or [Community Writers](https://about.gitlab.com/handbook/product/technical-writing/community-writers/). - **Indexes per topic**: initially prepared by the Technical Writing Team, and kept up-to-date by developers and PMs in the same merge request containing code. They gather all resources for that topic in a single page (user and admin documentation, articles, and third-party docs). @@ -69,6 +69,51 @@ Use the [writing method](https://about.gitlab.com/handbook/product/technical-wri All the docs follow the same [styleguide](doc_styleguide.md). +### Contributing to docs + +Whenever a feature is changed, updated, introduced, or deprecated, the merge +request introducing these changes must be accompanied by the documentation +(either updating existing ones or creating new ones). This is also valid when +changes are introduced to the UI. + +The one resposible for writing the first piece of documentation is the developer who +wrote the code. It's the job of the Product Manager to ensure all features are +shipped with its docs, whether is a small or big change. At the pace GitLab evolves, +this is the only way to keep the docs up-to-date. If you have any questions about it, +please ask a Technical Writer. Otherwise, when your content is ready, assign one of +them to review it for you. + +We use the [monthly release blog post](https://about.gitlab.com/handbook/marketing/blog/release-posts/#monthly-releases) as a changelog checklist to ensure everything +is documented. + +### Feature overview and use cases + +Every major feature (regardless if present in GitLab Community or Enterprise editions) +should present, at the beginning of the document, two main sections: **overview** and +**use cases**. Every GitLab EE-only feature should also contain these sections. + +**Overview**: at the name suggests, the goal here is to provide an overview of the feature. +Describe what is it, what it does, why it is important/cool/nice-to-have, +what problem it solves, and what you can do with this feature that you couldn't +do before. + +**Use cases**: provide at least two, ideally three, use cases for every major feature. +You should answer this question: what can you do with this feature/change? Use cases +are examples of how this feauture or change can be used in real life. + +Examples: +- CE and EE: [Issues](../user/project/issues/index.md#use-cases) +- CE and EE: [Merge Requests](../user/project/merge_requests/index.md#overview) +- EE-only: [Geo](https://docs.gitlab.com/ee/gitlab-geo/README.html#overview) +- EE-only: [Jenkins integration](https://docs.gitlab.com/ee/integration/jenkins.md#overview) + +Note that if you don't have anything to add between the doc title (`

`) and +the header `## Overview`, you can omit the header, but keep the content of the +overview there. + +> **Overview** and **use cases** are required to **every** Enterprise Edition feature, +and for every **major** feature present in Community Edition. + ### Markdown Currently GitLab docs use Redcarpet as [markdown](../user/markdown.md) engine, but there's an [open discussion](https://gitlab.com/gitlab-com/gitlab-docs/issues/50) for implementing Kramdown in the near future. -- cgit v1.2.1 From 2146d6253fadfec82e58d66e59b9ec50fdf3d761 Mon Sep 17 00:00:00 2001 From: Andrew Newdigate Date: Sat, 30 Sep 2017 16:26:23 +0000 Subject: Add environment variable to bypass n+1 --- doc/development/gitaly.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) (limited to 'doc/development') diff --git a/doc/development/gitaly.md b/doc/development/gitaly.md index f0be3a6b141..e41d258bec6 100644 --- a/doc/development/gitaly.md +++ b/doc/development/gitaly.md @@ -12,6 +12,7 @@ status of the migration. Gitaly makes heavy use of [feature flags](feature_flags.md). Each Rugged-to-Gitaly migration goes through a [series of phases](https://gitlab.com/gitlab-org/gitaly/blob/master/doc/MIGRATION_PROCESS.md): + * **Opt-In**: by default the Rugged implementation is used. * Production instances can choose to enable the Gitaly endpoint by enabling the feature flag. * For testing purposes, you may wish to enable all feature flags by default. This can be done by exporting the following @@ -19,7 +20,7 @@ Each Rugged-to-Gitaly migration goes through a [series of phases](https://gitlab * On developer instances (ie, when `Rails.env.development?` is true), the Gitaly endpoint is enabled by default, but can be _disabled_ using feature flags. * **Opt-Out**: by default, the Gitaly endpoint is used, but the feature can be explicitly disabled using the feature flag. -* **Madatory**: The migration is complete and cannot be disabled. The old codepath is removed. +* **Mandatory**: The migration is complete and cannot be disabled. The old codepath is removed. ### Enabling and Disabling Feature @@ -49,6 +50,35 @@ If your test-suite is failing with Gitaly issues, as a first step, try running: rm -rf tmp/tests/gitaly ``` +## `TooManyInvocationsError` errors + +During development and testing, you may experience `Gitlab::GitalyClient::TooManyInvocationsError` failures. +The `GitalyClient` will attempt to block against potential n+1 issues by raising this error +when Gitaly is called more than 30 times in a single Rails request or Sidekiq execution. + +As a temporary measure, export `GITALY_DISABLE_REQUEST_LIMITS=1` to suppress the error. This will disable the n+1 detection +in your development environment. + +Please raise an issue in the GitLab CE or EE repositories to report the issue. Include the labels ~Gitaly +~performance ~"technical debt". Please ensure that the issue contains the full stack trace and error message of the +`TooManyInvocationsError`. Also include any known failing tests if possible. + +Isolate the source of the n+1 problem. This will normally be a loop that results in Gitaly being called for each +element in an array. If you are unable to isolate the problem, please contact a member +of the [Gitaly Team](https://gitlab.com/groups/gl-gitaly/group_members) for assistance. + +Once the source has been found, wrap it in an `allow_n_plus_1_calls` block, as follows: + +```ruby +# n+1: link to n+1 issue +Gitlab::GitalyClient.allow_n_plus_1_calls do + # original code + commits.each { |commit| ... } +end +``` + +Once the code is wrapped in this block, this code-path will be excluded from n+1 detection. + --- [Return to Development documentation](README.md) -- cgit v1.2.1 From b509588a28d0a102f4ad4b97d91c5b5944946834 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Tue, 26 Sep 2017 11:46:59 +0200 Subject: Add basic sprintf implementation to JavaScript --- doc/development/i18n_guide.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'doc/development') diff --git a/doc/development/i18n_guide.md b/doc/development/i18n_guide.md index bd0ef39ca62..29c8941a8f7 100644 --- a/doc/development/i18n_guide.md +++ b/doc/development/i18n_guide.md @@ -183,13 +183,20 @@ aren't in the message with id `1 pipeline`. ### Interpolation -- In Ruby/HAML: +- In Ruby/HAML (see [sprintf]): ```ruby _("Hello %{name}") % { name: 'Joe' } ``` -- In JavaScript: Not supported at this moment. +- In JavaScript: Only named parameters are supported (see also [#37992]): + + ```javascript + __("Hello %{name}") % { name: 'Joe' } + ``` + +[sprintf]: http://ruby-doc.org/core/Kernel.html#method-i-sprintf +[#37992]: https://gitlab.com/gitlab-org/gitlab-ce/issues/37992 ### Plurals -- cgit v1.2.1 From fe3d966781a9224fe6382621ee5c6796f4cdce1c Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Tue, 3 Oct 2017 15:26:45 +0000 Subject: Added skeleton loading paradigm to UX guide --- doc/development/ux_guide/animation.md | 10 +++++++++- doc/development/ux_guide/components.md | 19 +++++++++++++++++++ doc/development/ux_guide/img/skeleton-loading.gif | Bin 0 -> 1093917 bytes 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 doc/development/ux_guide/img/skeleton-loading.gif (limited to 'doc/development') diff --git a/doc/development/ux_guide/animation.md b/doc/development/ux_guide/animation.md index 5dae4bcc905..d190ee1b0ff 100644 --- a/doc/development/ux_guide/animation.md +++ b/doc/development/ux_guide/animation.md @@ -39,6 +39,12 @@ When information is updating in place, a quick, subtle animation is needed. The ![Quick update animation](img/animation-quickupdate.gif) +### Skeleton loading + +Skeleton loading is explained in the [component section](components.html#skeleton-loading) of the UX guide. It includes a horizontally pulsating animation that shows motion as if it's growing. It's timing is a slower `linear 1s`. + +![Skeleton loading animation](img/skeleton-loading.gif) + ### Moving transitions When elements move on screen, there should be a quick animation so it is clear to users what moved where. The timing of this animation differs based on the amount of movement and change. Consider animations between `200ms` and `400ms`. @@ -51,7 +57,9 @@ View the [interactive example](http://codepen.io/awhildy/full/ALyKPE/) here. ![Reorder animation](img/animation-reorder.gif) #### Autoscroll the page + Another example of a moving transition is when you have to autoscroll the page to keep an active element visible. View the [interactive example](http://codepen.io/awhildy/full/PbxgVo/) here. -![Autoscroll animation](img/animation-autoscroll.gif) \ No newline at end of file + +![Autoscroll animation](img/animation-autoscroll.gif) diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index ac7c1b6207d..986b796437b 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -204,6 +204,25 @@ Cover blocks are generally used to create a heading element for a page, such as --- +## Skeleton loading + +Skeleton loading is a way to convey to the user what kind of content is currently being loaded. It's a paradigm with which content can independently and asynchronously be loaded, while still adhering to the structure and look of the completely loaded view. + +### Requirements + +* A skeleton should represent an organism in a recognisable way +* Atom elements within organisms (for reference see this article on [atomic design methodology](http://atomicdesign.bradfrost.com/chapter-2/)) may be represented in a maximum of 3 repetitions, if applicable. +* Skeletons should only be presented in grayscale using the HEX colors: `#fafafa` or `#ffffff` (except for shadows) +* Animate the grey atoms in a pulsating way to show motion, as if "loading". The pulse animation transitions colors horizontally from left to right, starting with `#f2f2f2` to `#fafafa`. + +![Skeleton loading animation](img/skeleton-loading.gif) + +### Usage + +Skeleton loading can replace any existing UI elements for the period in which they are loaded and should aim for maintaining a similar structure visually. + +--- + ## Panels > TODO: Catalog how we are currently using panels and rationalize how they relate to alerts diff --git a/doc/development/ux_guide/img/skeleton-loading.gif b/doc/development/ux_guide/img/skeleton-loading.gif new file mode 100644 index 00000000000..5877139171d Binary files /dev/null and b/doc/development/ux_guide/img/skeleton-loading.gif differ -- cgit v1.2.1 From 9ba04545531f0a7c19b1fe68845d9a8660558d7c Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Tue, 3 Oct 2017 19:47:07 +0000 Subject: Fix link to Vue.js style guide --- doc/development/fe_guide/vue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'doc/development') diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 2607353782a..277e0cd5f00 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -428,7 +428,7 @@ is a good example of this pattern. ## Style guide -Please refer to the Vue section of our [style guide](style_guide_js.md#vuejs) +Please refer to the Vue section of our [style guide](style_guide_js.md#vue-js) for best practices while writing your Vue components and templates. ## Testing Vue Components -- cgit v1.2.1 From b88f70606d2fd5b0a116f08f7925143ff40214fa Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 3 Oct 2017 19:07:41 -0500 Subject: Re-arrange + + + + // We don't use scoped styles but there are few instances of this + + ``` + +1. Properties in a Vue Component: 1. `name` 1. `props` 1. `mixins` @@ -490,6 +508,7 @@ On those a default key should not be provided. 1. `beforeDestroy` 1. `destroyed` + #### Vue and Bootstrap 1. Tooltips: Do not rely on `has-tooltip` class name for Vue components -- cgit v1.2.1 From 147e2b21be180d4b405c6ebe861971cb0dc9e6b2 Mon Sep 17 00:00:00 2001 From: Jacob Vosmaer Date: Fri, 29 Sep 2017 18:05:20 +0200 Subject: Let fetch_ref pull from Gitaly instead of from disk --- doc/development/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'doc/development') diff --git a/doc/development/testing.md b/doc/development/testing.md index d856b003353..4d5b90de6fc 100644 --- a/doc/development/testing.md +++ b/doc/development/testing.md @@ -302,7 +302,7 @@ range of inputs, might look like this: ```ruby describe "#==" do - using Rspec::Parameterized::TableSyntax + using RSpec::Parameterized::TableSyntax let(:project1) { create(:project) } let(:project2) { create(:project) } -- cgit v1.2.1 From f4e9af2b4be131e03d574b625cc5c78ecbf263f0 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Thu, 5 Oct 2017 19:11:13 +0000 Subject: Added popover paradigm to ux guide --- doc/development/ux_guide/components.md | 31 +++++++++++++++++++++ .../ux_guide/img/popover-placement-above.png | Bin 0 -> 68451 bytes .../ux_guide/img/popover-placement-below.png | Bin 0 -> 63368 bytes 3 files changed, 31 insertions(+) create mode 100644 doc/development/ux_guide/img/popover-placement-above.png create mode 100644 doc/development/ux_guide/img/popover-placement-below.png (limited to 'doc/development') diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 986b796437b..fa31c496b30 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -42,6 +42,37 @@ By default, tooltips should be placed below the referring element. However, if t --- +## Popovers + +Popovers provide additional, useful, unique information about the referring elements and can provide one or multiple actionable elements. They inform the user of additional information within the context of their original view, but without forcing the user to act upon it like a modal. Popovers are different from tooltips, which do not provide rich markup and actionable items. A popover can contain a header section with a different background color. + +Popovers are summoned: + +* Upon hover or touch on an element + +### Usage +A popover should be used: +* When you don't want to let the user lose context, but still want to provide additional useful unique information about referring elements +* When it isn’t critical for the user to act upon the information +* When you want to give a user a summary of extended information and the option to switch context if they want to dive in deeper. + +### Styling + +A popover can contain a header section with a different background color if that improves readability and separation of content within. + +![Popover usage](img/popover-placement-below.png) + +This example shows two sections, where each section includes an actionable element. The first section shows a summary of the content shown when clicking the "read more" link. With this information the user can decide to dive deeper or start their GitLab Enterprise Edition trial immediately. + +### Placement +By default, tooltips should be placed below the referring element. However, if there isn’t enough space in the viewport or it blocks related content, the tooltip should be moved to the side or above as needed. + +![Tooltip placement location](img/popover-placement-above.png) + +In this example we let the user know more about the setting they are deciding over, without loosing context. If they want to know even more they can do so, but with the expectation of opening that content in a new view. + +--- + ## Anchor links Anchor links are used for navigational actions and lone, secondary commands (such as 'Reset filters' on the Issues List) when deemed appropriate by the UX team. diff --git a/doc/development/ux_guide/img/popover-placement-above.png b/doc/development/ux_guide/img/popover-placement-above.png new file mode 100644 index 00000000000..1aa044bfc9c Binary files /dev/null and b/doc/development/ux_guide/img/popover-placement-above.png differ diff --git a/doc/development/ux_guide/img/popover-placement-below.png b/doc/development/ux_guide/img/popover-placement-below.png new file mode 100644 index 00000000000..2d6ab8a1618 Binary files /dev/null and b/doc/development/ux_guide/img/popover-placement-below.png differ -- cgit v1.2.1 From d13669716ab0c31ce9039ae9f7f073e33a4dc40f Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Tue, 19 Sep 2017 09:44:58 +0200 Subject: Create idea of read-only database In GitLab EE, a GitLab instance can be read-only (e.g. when it's a Geo secondary node). But in GitLab CE it also might be useful to have the "read-only" idea around. So port it back to GitLab CE. Also having the principle of read-only in GitLab CE would hopefully lead to less errors introduced, doing write operations when there aren't allowed for read-only calls. Closes gitlab-org/gitlab-ce#37534. --- doc/development/verifying_database_capabilities.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'doc/development') diff --git a/doc/development/verifying_database_capabilities.md b/doc/development/verifying_database_capabilities.md index cc6d62957e3..ffdeff47d4a 100644 --- a/doc/development/verifying_database_capabilities.md +++ b/doc/development/verifying_database_capabilities.md @@ -24,3 +24,15 @@ else run_query end ``` + +# Read-only database + +The database can be used in read-only mode. In this case we have to +make sure all GET requests don't attempt any write operations to the +database. If one of those requests wants to write to the database, it needs +to be wrapped in a `Gitlab::Database.read_only?` or `Gitlab::Database.read_write?` +guard, to make sure it doesn't for read-only databases. + +We have a Rails Middleware that filters any potentially writing +operations (the CUD operations of CRUD) and prevent the user from trying +to update the database and getting a 500 error (see `Gitlab::Middleware::ReadOnly`). -- cgit v1.2.1 From 1182fccd3ee894bf971c13a3f3ecf6eff774c1ea Mon Sep 17 00:00:00 2001 From: Stan Hu Date: Sat, 7 Oct 2017 12:10:46 -0700 Subject: Remove executable permissions on images to make docs lint happy [ci skip] --- .../ux_guide/img/illustration-size-large-horizontal.png | Bin doc/development/ux_guide/img/illustration-size-medium.png | Bin .../ux_guide/img/illustrations-border-radius.png | Bin doc/development/ux_guide/img/illustrations-caps-do.png | Bin doc/development/ux_guide/img/illustrations-caps-don't.png | Bin doc/development/ux_guide/img/illustrations-color-grey.png | Bin doc/development/ux_guide/img/illustrations-color-orange.png | Bin doc/development/ux_guide/img/illustrations-color-purple.png | Bin doc/development/ux_guide/img/illustrations-geometric.png | Bin .../ux_guide/img/illustrations-palette-oragne.png | Bin .../ux_guide/img/illustrations-palette-purple.png | Bin 11 files changed, 0 insertions(+), 0 deletions(-) mode change 100755 => 100644 doc/development/ux_guide/img/illustration-size-large-horizontal.png mode change 100755 => 100644 doc/development/ux_guide/img/illustration-size-medium.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-border-radius.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-caps-do.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-caps-don't.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-color-grey.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-color-orange.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-color-purple.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-geometric.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-palette-oragne.png mode change 100755 => 100644 doc/development/ux_guide/img/illustrations-palette-purple.png (limited to 'doc/development') diff --git a/doc/development/ux_guide/img/illustration-size-large-horizontal.png b/doc/development/ux_guide/img/illustration-size-large-horizontal.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustration-size-medium.png b/doc/development/ux_guide/img/illustration-size-medium.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-border-radius.png b/doc/development/ux_guide/img/illustrations-border-radius.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-caps-do.png b/doc/development/ux_guide/img/illustrations-caps-do.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-caps-don't.png b/doc/development/ux_guide/img/illustrations-caps-don't.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-color-grey.png b/doc/development/ux_guide/img/illustrations-color-grey.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-color-orange.png b/doc/development/ux_guide/img/illustrations-color-orange.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-color-purple.png b/doc/development/ux_guide/img/illustrations-color-purple.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-geometric.png b/doc/development/ux_guide/img/illustrations-geometric.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-palette-oragne.png b/doc/development/ux_guide/img/illustrations-palette-oragne.png old mode 100755 new mode 100644 diff --git a/doc/development/ux_guide/img/illustrations-palette-purple.png b/doc/development/ux_guide/img/illustrations-palette-purple.png old mode 100755 new mode 100644 -- cgit v1.2.1