User:Sam Hemelryk/Render library element planning: Difference between revisions
Sam Hemelryk (talk | contribs) |
Sam Hemelryk (talk | contribs) No edit summary |
||
| Line 2: | Line 2: | ||
==Action== | ==Action== | ||
An action in this sense is a collection of data that all pertains to one action that can be taken by the user. | |||
The action, once populated with data can be rendered as is required for the job it is going to fulfil, usually with some relation to the frontend framework in use. | |||
In this way the action could be a link, or a button; it could even be interpreted into a more complex structure. | |||
An action has the following properties: | |||
; content [string]: text content for the link or button. | |||
; url [moodle_url] : the url for the action to take when the user interacts with this action. | |||
; description : a description of the action. Typically used within a title or alt attribute. | |||
; active : True if this is the action the user is current performing. | |||
; enabled : True if the action is possible, false if it is not possible and should be shown as disabled. | |||
; dimmed : True if the action should be shown as dimmed, usually used to the action is hidden to other users. | |||
; method : The preferred method of submitting this action, typically GET but can be set to POST. | |||
It is also possible to add JavaScript actions (component_action objects) to an action. These attach a JS listener to the action that gets executed when the user interacts with the action. | |||
Attached JavaScript actions get initialised when the properties for the action are retrieved so any events must be attached BEFORE the action is rendered, and all renderers must ensure they use the get_attributes() call. | |||
==Grids== | ==Grids== | ||
We need to come up with some way to include grids in core, it is desirable to keep it framework agnostic so perhaps a grid object that allows for items to be added and a "width" specified when that occurs. The width would be either a fixed number or a percentage. Steps of 12 seems pretty common. | |||
==Core elements and components== | ==Core elements and components== | ||
Revision as of 23:24, 17 June 2014
This page documents the proposed core elements, variations of them, what we expect they will contain, and the core_renderer block.
Action
An action in this sense is a collection of data that all pertains to one action that can be taken by the user. The action, once populated with data can be rendered as is required for the job it is going to fulfil, usually with some relation to the frontend framework in use. In this way the action could be a link, or a button; it could even be interpreted into a more complex structure.
An action has the following properties:
- content [string]
- text content for the link or button.
- url [moodle_url]
- the url for the action to take when the user interacts with this action.
- description
- a description of the action. Typically used within a title or alt attribute.
- active
- True if this is the action the user is current performing.
- enabled
- True if the action is possible, false if it is not possible and should be shown as disabled.
- dimmed
- True if the action should be shown as dimmed, usually used to the action is hidden to other users.
- method
- The preferred method of submitting this action, typically GET but can be set to POST.
It is also possible to add JavaScript actions (component_action objects) to an action. These attach a JS listener to the action that gets executed when the user interacts with the action. Attached JavaScript actions get initialised when the properties for the action are retrieved so any events must be attached BEFORE the action is rendered, and all renderers must ensure they use the get_attributes() call.
Grids
We need to come up with some way to include grids in core, it is desirable to keep it framework agnostic so perhaps a grid object that allows for items to be added and a "width" specified when that occurs. The width would be either a fixed number or a percentage. Steps of 12 seems pretty common.
Core elements and components
Block
Block region
Breadcrumb
Buttons
Calendar
Collapsible region
Confirmation
Continue
Choice
Not sure about this one quite yet. A description with 2 or more actions allowing the user to select the next step. Think of it like when editing a module you get: Cancel, Save and return to course, Save and display
Dropdowns
- From button
- From link
- From icon
Headings
- h1 - h6
- Optional icon
- Optional help icon
Icons
- Standard icons
- Help icon (popup, tooltip)
- Loading icon (really regular icon but worth showing)
Links
Lists
- Ordered list
- Unordered list
- Presentation list (currently our unlist)
Logo
Menu
- Orientation (Horizontal, Vertical)
- Nesting
Search
- Text input + button.
- Optional collapsible region with more content.
Existing renderables and what they will become
| Existing renderable | Description | Future renderable | Convenience method (if different) |
|---|---|---|---|
| action_menu | UI component for a drop down edit menu | menu | |
| action_menu_link | UI component for a menu item in an action menu | action | |
| action_menu_filler | UI component for a filler menu item in an action menu | action | |
| action_menu_link_primary | UI component for a primary menu item in an action menu | action | |
| action_menu_link_secondary | UI component for a secondary menu item in an action menu | action | |
| action_link | Link with alt text, and an icon | action | |
| single_button | A form with a single button | button (action with post method) | |
| confirm | A form with a message and cancel/confirm buttons | confirmation | |
| single_select | A form with a single drop down list that submits on change | ||
| url_select | A navigation element consisting of a single drop down list of urls that navigates on change | ||
| doc_link | A link to the Moodle docs | ||
| pix_icon | A small icon | icon | |
| emoticon_icon | A small emoticon | ||
| heading_with_help | A page heading with a link to help docs | heading | |
| help_icon | A help icon that opens a help popup when clicked | icon_help | |
| help_icon_scale | A help icon that opens a help popup when clicked | ||
| user_picture | A user profile picture which links to their profile | ||
| container | A block level element used to surround something. Can have a class to allow specific targeting with CSS. | ||
| error_text | An error to show to the user. | ||
| notification | A message for the user | ||
| continue_button | A message and a button to continue to the next page | ||
| paging_bar | A list of next previous and specific page links | ||
| skip_link_to | A link to a section on the page | ||
| skip_link_target | A target for a matching skip_link_to call | ||
| heading | A page heading | heading | |
| box | A page section with a border | ||
| rarrow | A right arrow | ||
| larrow | A left arrow | ||
| tabtree | A list of tabs | menu | |
| tabobject | A single tab panel | action |
