52
edits
Calendar:Event in a Tab: Difference between revisions
→Design: Add mockups C to I and notes
(Add links about React) |
(→Design: Add mockups C to I and notes) |
||
| Line 19: | Line 19: | ||
== Design == | == Design == | ||
The following mockup images and notes are based on the GSoC proposal and are a starting point for | The following two mockup images (A and B) and notes are based on the GSoC proposal and are a starting point for further refinements of the design. See below for subsequent mockups and notes. | ||
<gallery> | <gallery> | ||
| Line 73: | Line 73: | ||
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 === | |||
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. | |||
These mockups only show the "Event in a Tab" design to simplify the discussion by focusing primarily on the tab design first, and then to consider the narrower dialog window design in light of the preferred tab design(s). | |||
<gallery> | |||
File:Event-in-tab-mockup-c.svg|Mockup C | |||
File:Event-in-tab-mockup-d.svg|Mockup D | |||
File:Event-in-tab-mockup-e.svg|Mockup E | |||
File:Event-in-tab-mockup-f.svg|Mockup F | |||
File:Event-in-tab-mockup-g.svg|Mockup G | |||
File:Event-in-tab-mockup-h.svg|Mockup H | |||
File:Event-in-tab-mockup-i.svg|Mockup I | |||
</gallery> | |||
Notes on Mockups C through I, grouped by similarity (C G H I) and (D E F): | |||
Mockup C | |||
* reminders in the right column in same row as timing info | |||
* attendees and attachments in the next row | |||
* description full width | |||
* privacy etc. below description | |||
* problem: calendar and category under location are asymmetrical | |||
Mockup G | |||
* like C but Calendar and Category are moved down into second row above Reminders to fix asymmetry with C. | |||
* problem: do Calendar and Category really fit in this row in terms of their function? | |||
Mockup H | |||
* like C but with Calendar and Category below Description with Privacy etc. | |||
* minimize horizontal space taken up by these 6 items below Description and fit them into their own "toolbar" to allow their own horizontal spacing (no longer aligning with the two main columns) | |||
Mockup I | |||
* like H but with Attendees and Attachments below Description | |||
* less need for horizontal lines to divide things, so removed | |||
Mockup D | |||
* like B but with full width Description and with Privacy etc. below description | |||
* problem: attachments and attendees can make right column taller than left column (above description) which is somewhat awkward | |||
Mockup E | |||
* like D but with Location, Calendar, and Category in left hand column below Reminders so Attachments and Attendees have more space | |||
* problem: seems unbalanced, too much in left column with a new event | |||
Mockup F | |||
* like E but with Reminders at top of right column | |||
* problem: right column is taller than left when things are added to it | |||
== Implementation == | == Implementation == | ||