From a632440fa91c750bb4a75ee430c3a34c6d98f51c Mon Sep 17 00:00:00 2001 From: Hazel Date: Mon, 16 Oct 2017 15:13:21 +0800 Subject: Draft a guide of modals in UX guide --- doc/development/ux_guide/components.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index fa31c496b30..20230a9bb2c 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -252,6 +252,35 @@ Skeleton loading is a way to convey to the user what kind of content is currentl 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. +--- + +## Dialog modals +Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until making an action. Using dialog modals sparingly as it is interruptive. + +### Usage + +* When the action is irreversible, we should provide the details and confirm with the user before they take an advanced action. +* When the action will affect privacy or authorization, we should provide the advanced information and confirm with the user. + +### Style +* Dialog modals contain the header title, content, and action bar. +* Having an affirmative action, a dismissive action, and an extra action in action bar. +* The order of actions in the action bar: Affirmative action → Extra action → Dismissive action (Right to left) +* Confirmations regarding labels should keep labeling styling. +* References to commits, branches, and tags should be **monospaced**. + +### Writing +* The header title is a question instead of a descriptive phrase. +* The content should not be ambiguous and unclear. It should provide specific information as a reference for the user to take an advanced action. + +### Placement +* Dialog modals should always be the center of the screen horizontally and have **72px** from the top of the screen. + +| Dialog with 2 actions | Dialog with 3 actions | Special confirmation | +| --------------------- | --------------------- | -------------------- | +| ![two-actions]() | ![three-actions]() | ![spcial-confirmation]() | + + --- ## Panels -- cgit v1.2.1 From aeeefe28fbc6f27b200c5c1b15c5f6b5d946f3e8 Mon Sep 17 00:00:00 2001 From: Hazel Date: Mon, 16 Oct 2017 15:54:48 +0800 Subject: Modified the copy --- doc/development/ux_guide/components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 20230a9bb2c..2bcee69201b 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -265,7 +265,7 @@ Dialog modals are only used for having a conversation and confirmation with the ### Style * Dialog modals contain the header title, content, and action bar. * Having an affirmative action, a dismissive action, and an extra action in action bar. -* The order of actions in the action bar: Affirmative action → Extra action → Dismissive action (Right to left) +* The order of actions in the action bar: (Right to left) Affirmative action → Extra action → Dismissive action * Confirmations regarding labels should keep labeling styling. * References to commits, branches, and tags should be **monospaced**. -- cgit v1.2.1 From 4a289e1168c239b03fd386b5c6ca1aa9963849ae Mon Sep 17 00:00:00 2001 From: Hazel Date: Tue, 17 Oct 2017 14:30:50 +0800 Subject: Updated the content and added the images --- doc/development/ux_guide/components.md | 23 +++++++++++---------- .../img/modals-general-confimation-dialog.png | Bin 0 -> 55006 bytes .../ux_guide/img/modals-layout-for-modals.png | Bin 0 -> 71731 bytes .../img/modals-special-confimation-dialog.png | Bin 0 -> 94366 bytes .../ux_guide/img/modals-three-buttons-special.png | Bin 0 -> 59942 bytes .../ux_guide/img/modals-three-buttons.png | Bin 0 -> 55863 bytes 6 files changed, 12 insertions(+), 11 deletions(-) create mode 100644 doc/development/ux_guide/img/modals-general-confimation-dialog.png create mode 100644 doc/development/ux_guide/img/modals-layout-for-modals.png create mode 100644 doc/development/ux_guide/img/modals-special-confimation-dialog.png create mode 100644 doc/development/ux_guide/img/modals-three-buttons-special.png create mode 100644 doc/development/ux_guide/img/modals-three-buttons.png diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 2bcee69201b..a31d8cfb443 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -10,6 +10,7 @@ * [Tables](#tables) * [Blocks](#blocks) * [Panels](#panels) +* [Dialog modals](#dialog-modals) * [Alerts](#alerts) * [Forms](#forms) * [Search box](#search-box) @@ -255,31 +256,31 @@ Skeleton loading can replace any existing UI elements for the period in which th --- ## Dialog modals -Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until making an action. Using dialog modals sparingly as it is interruptive. +Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until closing the modal. ### Usage -* When the action is irreversible, we should provide the details and confirm with the user before they take an advanced action. -* When the action will affect privacy or authorization, we should provide the advanced information and confirm with the user. +* When the action is irreversible, dialog modals provide the details and confirm with the user before they take an advanced action. +* When the action will affect privacy or authorization, dialog modals provide the advanced information and confirm with the user. ### Style -* Dialog modals contain the header title, content, and action bar. -* Having an affirmative action, a dismissive action, and an extra action in action bar. -* The order of actions in the action bar: (Right to left) Affirmative action → Extra action → Dismissive action + +* Dialog modals contain the header, body, and actions. + * **Actions:** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from right to left: Affirmative action → Extra action → Dismissive action + * **Header:** The header title is a question instead of a descriptive phrase. + * **Body:** The content in body should never be ambiguous and unclear. It provides specific information. * Confirmations regarding labels should keep labeling styling. * References to commits, branches, and tags should be **monospaced**. -### Writing -* The header title is a question instead of a descriptive phrase. -* The content should not be ambiguous and unclear. It should provide specific information as a reference for the user to take an advanced action. +![layout-modal](img/modals-layout-for-modals.png) ### Placement + * Dialog modals should always be the center of the screen horizontally and have **72px** from the top of the screen. | Dialog with 2 actions | Dialog with 3 actions | Special confirmation | | --------------------- | --------------------- | -------------------- | -| ![two-actions]() | ![three-actions]() | ![spcial-confirmation]() | - +| ![two-actions](img/modals-general-confimation-dialog.png) | ![three-actions](img/modals-three-buttons-special.png) | ![spcial-confirmation](img/modals-special-confimation-dialog.png) | --- diff --git a/doc/development/ux_guide/img/modals-general-confimation-dialog.png b/doc/development/ux_guide/img/modals-general-confimation-dialog.png new file mode 100644 index 00000000000..8e51cb70c48 Binary files /dev/null and b/doc/development/ux_guide/img/modals-general-confimation-dialog.png differ diff --git a/doc/development/ux_guide/img/modals-layout-for-modals.png b/doc/development/ux_guide/img/modals-layout-for-modals.png new file mode 100644 index 00000000000..71ea52be124 Binary files /dev/null and b/doc/development/ux_guide/img/modals-layout-for-modals.png differ diff --git a/doc/development/ux_guide/img/modals-special-confimation-dialog.png b/doc/development/ux_guide/img/modals-special-confimation-dialog.png new file mode 100644 index 00000000000..ebdcae25e76 Binary files /dev/null and b/doc/development/ux_guide/img/modals-special-confimation-dialog.png differ diff --git a/doc/development/ux_guide/img/modals-three-buttons-special.png b/doc/development/ux_guide/img/modals-three-buttons-special.png new file mode 100644 index 00000000000..d2d40167e4d Binary files /dev/null and b/doc/development/ux_guide/img/modals-three-buttons-special.png differ diff --git a/doc/development/ux_guide/img/modals-three-buttons.png b/doc/development/ux_guide/img/modals-three-buttons.png new file mode 100644 index 00000000000..3947902c021 Binary files /dev/null and b/doc/development/ux_guide/img/modals-three-buttons.png differ -- cgit v1.2.1 From 26abacf829187aaf566e759085c310f2dc4fa95f Mon Sep 17 00:00:00 2001 From: Hazel Date: Tue, 17 Oct 2017 14:35:06 +0800 Subject: Updated the sytle part - changed the order of header, body, and actions --- doc/development/ux_guide/components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index a31d8cfb443..20205d6b398 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -266,9 +266,9 @@ Dialog modals are only used for having a conversation and confirmation with the ### Style * Dialog modals contain the header, body, and actions. - * **Actions:** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from right to left: Affirmative action → Extra action → Dismissive action - * **Header:** The header title is a question instead of a descriptive phrase. - * **Body:** The content in body should never be ambiguous and unclear. It provides specific information. + * **Header(1):** The header title is a question instead of a descriptive phrase. + * **Body(2):** The content in body should never be ambiguous and unclear. It provides specific information. + * **Actions(3):** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from right to left: Affirmative action → Extra action → Dismissive action * Confirmations regarding labels should keep labeling styling. * References to commits, branches, and tags should be **monospaced**. -- cgit v1.2.1 From 35a4370ec873363400ead5e7d4e939f7793b68fa Mon Sep 17 00:00:00 2001 From: Hazel Date: Wed, 18 Oct 2017 14:56:18 +0800 Subject: Modified the font family in the images --- doc/development/ux_guide/components.md | 2 +- .../img/modals-general-confimation-dialog.png | Bin 55006 -> 51205 bytes .../ux_guide/img/modals-layout-for-modals.png | Bin 71731 -> 68203 bytes .../img/modals-special-confimation-dialog.png | Bin 94366 -> 89978 bytes .../ux_guide/img/modals-three-buttons-special.png | Bin 59942 -> 0 bytes .../ux_guide/img/modals-three-buttons.png | Bin 55863 -> 54927 bytes 6 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 doc/development/ux_guide/img/modals-three-buttons-special.png diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 20205d6b398..1d05d40bac0 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -280,7 +280,7 @@ Dialog modals are only used for having a conversation and confirmation with the | Dialog with 2 actions | Dialog with 3 actions | Special confirmation | | --------------------- | --------------------- | -------------------- | -| ![two-actions](img/modals-general-confimation-dialog.png) | ![three-actions](img/modals-three-buttons-special.png) | ![spcial-confirmation](img/modals-special-confimation-dialog.png) | +| ![two-actions](img/modals-general-confimation-dialog.png) | ![three-actions](img/modals-three-buttons.png) | ![spcial-confirmation](img/modals-special-confimation-dialog.png) | --- diff --git a/doc/development/ux_guide/img/modals-general-confimation-dialog.png b/doc/development/ux_guide/img/modals-general-confimation-dialog.png index 8e51cb70c48..00a17374a0b 100644 Binary files a/doc/development/ux_guide/img/modals-general-confimation-dialog.png and b/doc/development/ux_guide/img/modals-general-confimation-dialog.png differ diff --git a/doc/development/ux_guide/img/modals-layout-for-modals.png b/doc/development/ux_guide/img/modals-layout-for-modals.png index 71ea52be124..6c7bc09e750 100644 Binary files a/doc/development/ux_guide/img/modals-layout-for-modals.png and b/doc/development/ux_guide/img/modals-layout-for-modals.png differ diff --git a/doc/development/ux_guide/img/modals-special-confimation-dialog.png b/doc/development/ux_guide/img/modals-special-confimation-dialog.png index ebdcae25e76..bf1e56326c5 100644 Binary files a/doc/development/ux_guide/img/modals-special-confimation-dialog.png and b/doc/development/ux_guide/img/modals-special-confimation-dialog.png differ diff --git a/doc/development/ux_guide/img/modals-three-buttons-special.png b/doc/development/ux_guide/img/modals-three-buttons-special.png deleted file mode 100644 index d2d40167e4d..00000000000 Binary files a/doc/development/ux_guide/img/modals-three-buttons-special.png and /dev/null differ diff --git a/doc/development/ux_guide/img/modals-three-buttons.png b/doc/development/ux_guide/img/modals-three-buttons.png index 3947902c021..519439e64e4 100644 Binary files a/doc/development/ux_guide/img/modals-three-buttons.png and b/doc/development/ux_guide/img/modals-three-buttons.png differ -- cgit v1.2.1 From ad3853eba2ef3d6ccce7d75ff8ae543595c51735 Mon Sep 17 00:00:00 2001 From: Hazel Date: Thu, 2 Nov 2017 13:18:36 +0800 Subject: Modify the sentences and add Todo --- doc/development/ux_guide/components.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 1d05d40bac0..82168b18860 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -261,7 +261,7 @@ Dialog modals are only used for having a conversation and confirmation with the ### Usage * When the action is irreversible, dialog modals provide the details and confirm with the user before they take an advanced action. -* When the action will affect privacy or authorization, dialog modals provide the advanced information and confirm with the user. +* When the action will affect privacy or authorization, dialog modals provide advanced information and confirm with the user. ### Style @@ -276,12 +276,14 @@ Dialog modals are only used for having a conversation and confirmation with the ### Placement -* Dialog modals should always be the center of the screen horizontally and have **72px** from the top of the screen. +* Dialog modals should always be the center of the screen horizontally and be positioned **72px** from the top. | Dialog with 2 actions | Dialog with 3 actions | Special confirmation | | --------------------- | --------------------- | -------------------- | | ![two-actions](img/modals-general-confimation-dialog.png) | ![three-actions](img/modals-three-buttons.png) | ![spcial-confirmation](img/modals-special-confimation-dialog.png) | +> TODO: Special case for dialog modal. + --- ## Panels -- cgit v1.2.1 From 8efbba33852d57c08507cbe3a1654dd9de9dae73 Mon Sep 17 00:00:00 2001 From: Hazel Date: Mon, 6 Nov 2017 15:07:45 +0800 Subject: Changed the order of buttons from left to right --- doc/development/ux_guide/components.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 82168b18860..16a811dbc74 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -256,6 +256,7 @@ Skeleton loading can replace any existing UI elements for the period in which th --- ## Dialog modals + Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until closing the modal. ### Usage @@ -268,7 +269,7 @@ Dialog modals are only used for having a conversation and confirmation with the * Dialog modals contain the header, body, and actions. * **Header(1):** The header title is a question instead of a descriptive phrase. * **Body(2):** The content in body should never be ambiguous and unclear. It provides specific information. - * **Actions(3):** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from right to left: Affirmative action → Extra action → Dismissive action + * **Actions(3):** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from left to right: Dismissive action → Extra action → Affirmative action * Confirmations regarding labels should keep labeling styling. * References to commits, branches, and tags should be **monospaced**. -- cgit v1.2.1