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 00000000..e02c60a4 Binary files /dev/null and b/docs/assets/images/horizontal_menu_view_example1.gif differ 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 00000000..8b7fb1a8 Binary files /dev/null and b/docs/assets/images/spinner_menu_view_example1.gif differ 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 00000000..7366d813 Binary files /dev/null and b/docs/assets/images/vertical_menu_view_example1.gif differ