52
edits
Calendar:Event in a Tab: Difference between revisions
Jump to navigation
Jump to search
Add project plan section
(Add svg images) |
(Add project plan section) |
||
| Line 6: | Line 6: | ||
Currently, events and tasks are created and edited in a dialog window. This project will add the option to create and edit them in a tab instead, providing more room and flexibility for the UI design. A supplemental goal is to explore implementing this feature in HTML/CSS/JavaScript rather than XUL. By using a responsive design, an HTML-based implementation could fully replace the current XUL-based event dialog. The UI could change depending on the width of the viewport, providing either a wider (tab) view or a narrower (dialog window) view. | Currently, events and tasks are created and edited in a dialog window. This project will add the option to create and edit them in a tab instead, providing more room and flexibility for the UI design. A supplemental goal is to explore implementing this feature in HTML/CSS/JavaScript rather than XUL. By using a responsive design, an HTML-based implementation could fully replace the current XUL-based event dialog. The UI could change depending on the width of the viewport, providing either a wider (tab) view or a narrower (dialog window) view. | ||
== Project Plan == | |||
# Get the current event and task UI working from a tab, as another option alongside the current dialog window. At this stage keep the UI the same, just port it to a tab without any changes. | |||
# Explore implementation options, particularly the feasibility of using HTML rather than XUL. Consider XUL, plain "vanilla" HTML, HTML with [https://developer.mozilla.org/en-US/docs/Web/Web_Components web components], and HTML with [https://facebook.github.io/react/ React]. Decide on the path to take in 4. | |||
# Finalize the new UI design for the tab and dialog window for both events and tasks. Incorporate UI/UX feedback including accessibility considerations. | |||
# Depending on the feasibility of an HTML implementation either implement the new UI: (A) in XUL, (B) in HTML, or (C) first in XUL and then in HTML if time allows. | |||
# Integrate with automated testing (time permitting). | |||
Notes: 1, 2, and 3 can be worked on concurrently. The goal is to finish at least 1 and 2 before the midterm evaluation period (June 20-27). | |||
== Design == | == Design == | ||
| Line 68: | Line 78: | ||
Possibilities to explore: | Possibilities to explore: | ||
* XUL/XBL | * XUL/XBL | ||
* HTML ( | * HTML (plain "vanilla" HTML) | ||
* HTML with [https://developer.mozilla.org/en-US/docs/Web/Web_Components web components] | * HTML with [https://developer.mozilla.org/en-US/docs/Web/Web_Components web components] | ||
* HTML with [https://facebook.github.io/react/ React] | * HTML with [https://facebook.github.io/react/ React] | ||