From 84adb9fe59d6adf7816336ec6ba2f8bb4326cf1f Mon Sep 17 00:00:00 2001 From: Nathan Byrd Date: Tue, 25 Jan 2022 12:28:58 -0600 Subject: [PATCH] Added documentation for other menu views --- docs/art/views/horizontal_menu_view.md | 91 +++++++++++++++ docs/art/views/spinner_menu_view.md | 98 ++++++++++++++++ docs/art/views/vertical_menu_view.md | 106 ++++++++++++++++++ .../images/horizontal_menu_view_example1.gif | Bin 0 -> 7832 bytes .../images/spinner_menu_view_example1.gif | Bin 0 -> 3982 bytes .../images/vertical_menu_view_example1.gif | Bin 0 -> 7198 bytes 6 files changed, 295 insertions(+) create mode 100644 docs/art/views/horizontal_menu_view.md create mode 100644 docs/art/views/spinner_menu_view.md create mode 100644 docs/art/views/vertical_menu_view.md create mode 100644 docs/assets/images/horizontal_menu_view_example1.gif create mode 100644 docs/assets/images/spinner_menu_view_example1.gif create mode 100644 docs/assets/images/vertical_menu_view_example1.gif diff --git a/docs/art/views/horizontal_menu_view.md b/docs/art/views/horizontal_menu_view.md new file mode 100644 index 00000000..d0b13144 --- /dev/null +++ b/docs/art/views/horizontal_menu_view.md @@ -0,0 +1,91 @@ +--- +layout: page +title: Horizontal Menu View +--- +## Horizontal Menu View +A horizontal menu view supports displaying a list of times on a screen horizontally (side to side, in a single row) similar to a lightbox. + +## General Information + +Items can be selected on a menu via the cursor keys, Page Up, Page Down, Home, and End, or by selecting them via a `hotKey` - see ***Hot Keys*** below. + +:information_source: A horizontal menu view is defined with a percent (%) and the characters HM, followed by the view number (if used.) For example: `%HM1` + +:information_source: See [Art](../general.md) for general information on how to use views and common configuration properties available for them. + +### Properties + +| Property | Description | +|-------------|--------------| +| `textStyle` | Sets the standard (non-focus) text style. See **Text Styles** in [Art](../general.md) | +| `focusTextStyle` | Sets focus text style. See **Text Styles** in [Art](../general.md)| +| `itemSpacing` | Used to separate items horizontally in the menu | +| `width` | Sets the width of a view to display one or more columns horizontally (default 15)| +| `focus` | If set to `true`, establishes initial focus | +| `submit` | If set to `true` any `accept` action upon this view will submit the encompassing **form** | +| `hotKeys` | Sets hot keys to activate specific items. See **Hot Keys** below | +| `hotKeySubmit` | Set to submit a form on hotkey selection | +| `argName` | Sets the argument name for this selection in the form | +| `justify` | Sets the justification of each item in the list. Options: left (default), right, center | +| `itemFormat` | Sets the format for a list entry. See **Entry Formatting** in [Art](../general.md) | +| `fillChar` | Specifies a character to fill extra space in the menu with. Defaults to an empty space | +| `items` | List of items to show in the menu. See **Items** below. +| `focusItemFormat` | Sets the format for a focused list entry. See **Entry Formatting** in [Art](../general.md) | + + +### Hot Keys + +A set of `hotKeys` are used to allow the user to press a character on the keyboard to select that item, and optionally submit the form. + +Example: + +``` +hotKeys: { A: 0, B: 1, C: 2, D: 3 } +hotKeySubmit: true +``` +This would select and submit the first item if `A` is typed, second if `B`, etc. + +### Items + +A horizontal menu, similar to other menus, take a list of items to display in the menu. For example: + + +``` +items: [ + { + text: First Item + data: first + } + { + text: Second Item + data: second + } +] +``` + +If the list is for display only (there is no form action associated with it) you can omit the data element, and include the items as a simple list: + +``` +["First item", "Second item", "Third Item"] +``` + +## Example + +![Example](../../assets/images/horizontal_menu_view_example1.gif "Horizontal menu") + +
+Configuration fragment (expand to view) +
+``` +HM2: { + focus: true + width: 60 // set as desired + submit: true + argName: navSelect + items: [ + "prev", "next", "details", "toggle queue", "rate", "help", "quit" + ] +} +``` +
+
diff --git a/docs/art/views/spinner_menu_view.md b/docs/art/views/spinner_menu_view.md new file mode 100644 index 00000000..81acb6ed --- /dev/null +++ b/docs/art/views/spinner_menu_view.md @@ -0,0 +1,98 @@ +--- +layout: page +title: Spinner Menu View +--- +## Spinner Menu View +A spinner menu view supports displaying a list of times on a screen as a list, with one item displayed at a time. This is generally used to pick one option from a list. Some examples could include selecting from a list of states, themes, etc. + +## General Information + +Items can be selected on a menu via the cursor keys or by selecting them via a `hotKey` - see ***Hot Keys*** below. + +:information_source: A spinner menu view is defined with a percent (%) and the characters SM, followed by the view number (if used.) For example: `%SM1` + +:information_source: See [Art](../general.md) for general information on how to use views and common configuration properties available for them. + +### Properties + +| Property | Description | +|-------------|--------------| +| `textStyle` | Sets the standard (non-focus) text style. See **Text Styles** in [Art](../general.md) | +| `focusTextStyle` | Sets focus text style. See **Text Styles** in [Art](../general.md)| +| `focus` | If set to `true`, establishes initial focus | +| `width` | Sets the width of a view on the display (default 15)| +| `submit` | If set to `true` any `accept` action upon this view will submit the encompassing **form** | +| `hotKeys` | Sets hot keys to activate specific items. See **Hot Keys** below | +| `hotKeySubmit` | Set to submit a form on hotkey selection | +| `argName` | Sets the argument name for this selection in the form | +| `justify` | Sets the justification of each item in the list. Options: left (default), right, center | +| `itemFormat` | Sets the format for a list entry. See **Entry Formatting** in [Art](../general.md) | +| `fillChar` | Specifies a character to fill extra space in the menu with. Defaults to an empty space | +| `items` | List of items to show in the menu. See **Items** below. +| `focusItemFormat` | Sets the format for a focused list entry. See **Entry Formatting** in [Art](../general.md) | + + +### Hot Keys + +A set of `hotKeys` are used to allow the user to press a character on the keyboard to select that item, and optionally submit the form. + +Example: + +``` +hotKeys: { A: 0, B: 1, C: 2, D: 3 } +hotKeySubmit: true +``` +This would select and submit the first item if `A` is typed, second if `B`, etc. + +### Items + +A full menu, similar to other menus, take a list of items to display in the menu. For example: + + +``` +items: [ + { + text: First Item + data: first + } + { + text: Second Item + data: second + } +] +``` + +## Example + +![Example](../../assets/images/spinner_menu_view_example1.gif "Spinner menu") + +
+Configuration fragment (expand to view) +
+``` +SM1: { + submit: true + argName: themeSelect + items: [ + { + text: Light + data: light + } + { + text: Dark + data: dark + } + { + text: Rainbow + data: rainbow + } + { + text: Gruvbox + data: gruvbox + } + ] +} + +``` +
+
diff --git a/docs/art/views/vertical_menu_view.md b/docs/art/views/vertical_menu_view.md new file mode 100644 index 00000000..61654746 --- /dev/null +++ b/docs/art/views/vertical_menu_view.md @@ -0,0 +1,106 @@ +--- +layout: page +title: Vertical Menu View +--- +## Vertical Menu View +A vertical menu view supports displaying a list of times on a screen vertically in a single column, similar to a lightbar. This type of control is often useful for lists of items or menu controls. + +## General Information + +Items can be selected on a menu via the cursor keys, Page Up, Page Down, Home, and End, or by selecting them via a `hotKey` - see ***Hot Keys*** below. + +:information_source: A vertical menu view is defined with a percent (%) and the characters VM, followed by the view number (if used.) For example: `%VM1`. + +:information_source: See [Art](../general.md) for general information on how to use views and common configuration properties available for them. + +### Properties + +| Property | Description | +|-------------|--------------| +| `textStyle` | Sets the standard (non-focus) text style. See **Text Styles** in [Art](../general.md) | +| `focusTextStyle` | Sets focus text style. See **Text Styles** in [Art](../general.md)| +| `itemSpacing` | Used to separate items vertically in the menu | +| `height` | Sets the height of views to display multiple items vertically (default 1) | +| `focus` | If set to `true`, establishes initial focus | +| `submit` | If set to `true` any `accept` action upon this view will submit the encompassing **form** | +| `hotKeys` | Sets hot keys to activate specific items. See **Hot Keys** below | +| `hotKeySubmit` | Set to submit a form on hotkey selection | +| `argName` | Sets the argument name for this selection in the form | +| `justify` | Sets the justification of each item in the list. Options: left (default), right, center | +| `itemFormat` | Sets the format for a list entry. See **Entry Formatting** in [Art](../general.md) | +| `fillChar` | Specifies a character to fill extra space in the menu with. Defaults to an empty space | +| `items` | List of items to show in the menu. See **Items** below. +| `focusItemFormat` | Sets the format for a focused list entry. See **Entry Formatting** in [Art](../general.md) | + + +### Hot Keys + +A set of `hotKeys` are used to allow the user to press a character on the keyboard to select that item, and optionally submit the form. + +Example: + +``` +hotKeys: { A: 0, B: 1, C: 2, D: 3 } +hotKeySubmit: true +``` +This would select and submit the first item if `A` is typed, second if `B`, etc. + +### Items + +A vertical menu, similar to other menus, take a list of items to display in the menu. For example: + + +``` +items: [ + { + text: First Item + data: first + } + { + text: Second Item + data: second + } +] +``` + +If the list is for display only (there is no form action associated with it) you can omit the data element, and include the items as a simple list: + +``` +["First item", "Second item", "Third Item"] +``` + + +## Example + +![Example](../../assets/images/vertical_menu_view_example1.gif "Vertical menu") + +
+Configuration fragment (expand to view) +
+``` +VM1: { + submit: true + argName: navSelect + items: [ + { + text: login + data: login + } + { + text: apply + data: new user + } + { + text: about + data: about + } + { + text: log off + data: logoff + } + ] +} + +``` +
+
diff --git a/docs/assets/images/horizontal_menu_view_example1.gif b/docs/assets/images/horizontal_menu_view_example1.gif new file mode 100644 index 0000000000000000000000000000000000000000..e02c60a44af7e108ac7c5834030d7bdccb0b4863 GIT binary patch literal 7832 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 literal 0 HcmV?d00001 diff --git a/docs/assets/images/spinner_menu_view_example1.gif b/docs/assets/images/spinner_menu_view_example1.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b7fb1a86030ce7706a51e1dfb578f355b7cc938 GIT binary patch literal 3982 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 B#RdQX literal 0 HcmV?d00001 diff --git a/docs/assets/images/vertical_menu_view_example1.gif b/docs/assets/images/vertical_menu_view_example1.gif new file mode 100644 index 0000000000000000000000000000000000000000..7366d8130dbada70680437908d58f1ad98b2c0aa GIT binary patch literal 7198 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 qQn