52
edits
Calendar:Event in a Tab: Difference between revisions
Jump to navigation
Jump to search
→Design: Add mockups J,K,L
(→Design: Add mockups C to I and notes) |
(→Design: Add mockups J,K,L) |
||
| Line 74: | Line 74: | ||
As shown, the two-column layout rearranges the elements somewhat. This rearrangement is kept to a minimum for more consistency between the window and tab views. | As shown, the two-column layout rearranges the elements somewhat. This rearrangement is kept to a minimum for more consistency between the window and tab views. | ||
=== Additional Mockups === | === Additional Mockups C - I === | ||
Mockups C through I are based on feedback from Richard Marti who suggested a full-width Description box, moving the Privacy etc. items below the Description, and rearranging Attachments, Attendees, and Reminders. | Mockups C through I are based on feedback from Richard Marti who suggested a full-width Description box, moving the Privacy etc. items below the Description, and rearranging Attachments, Attendees, and Reminders. | ||
| Line 124: | Line 124: | ||
* like E but with Reminders at top of right column | * like E but with Reminders at top of right column | ||
* problem: right column is taller than left when things are added to it | * problem: right column is taller than left when things are added to it | ||
=== Mockups J, K, and L === | |||
<gallery> | |||
File:Event-in-tab-mockup-j.svg|Mockup J | |||
File:Event-in-tab-mockup-k.svg|Mockup K | |||
File:Event-in-tab-mockup-l.svg|Mockup L | |||
</gallery> | |||
Mockup J | |||
* Like G but with 2-column (divided) horizontal divider lines. | |||
* Categories has a "tag cloud" design, and is moved to its own line. Categories and "Add Category" button/link wrap to new line when they won't all fit on previous line. | |||
* Color swatches added to calendar and categories. | |||
* Reminders are in a box that will become scrollable when many are added. | |||
* Question: Should categories get a scrollable box too or push everything down as it grows? | |||
* Removed the "Remove All" links/buttons to simplify things a bit. These are probably rare operations so maybe best to leave them in context menus. | |||
Mockup K | |||
* Categories, Calendar, and no "Remove All" links/buttons like J. | |||
* The Description is the whole right hand column. The reasoning is that it is arguably more useful as a tall "portrait" shape rather than a wide "landscape" shape because it is often used for lists of things and text blocks are easier to read when they are not too wide (e.g. columns of text in newspapers). Also the left hand column can have a fixed or max width, allowing the description to expand to the right and use the rest of the horizontal space on screen, taking better advantage of wider monitors. | |||
* Reminders, Attendees, Attachments, and Categories (the "collections" of variable height) are in the left hand column. Rather than being contained in individual boxes that are (or become) scrollable at a set height, they are allowed to grow as tall as their content requires without adversely affecting the overall layout. Triangle handles on the left appear that allow these sections to be collapsed and expanded. If the left hand column becomes taller than the viewport then the whole "page" becomes scrollable. | |||
* The triangle handles could appear immediately when adding items or later, possibly when the page becomes scrollable. An advantage of this approach is that it makes it possible to see all the contents of a collection (e.g. Attendees) at once, even when there are many of them. | |||
* When the description contains more content than it can show, we would decide on one of two possibilities: (1) it can become scrollable, (2) like the left hand column it can expand vertically with the whole page becoming scrollable. | |||
Mockup L | |||
* Like K but location and calendar (fixed height elements) are moved to top of left hand column, providing more space for the left hand column (and its variable height elements). | |||
Note: The basic layout of K or L could also be used with fixed-height individually scrollable boxes for Reminders, Attachments, etc. (i.e. instead of having the expand/collapse triangles and letting the page become scrollable). (The disadvantage would be that there would not be a way to see all items at once when they become too many to fit in their box.) | |||
== Implementation == | == Implementation == | ||