MozillaWiki

Calendar:Improving the Calendar Views: Difference between revisions

Calendar Discussion

Calendar:Improving the Calendar Views (view source)

Revision as of 08:56, 21 February 2007

5,662 bytes removed ,  21 February 2007
no edit summary
No edit summary
No edit summary
Line 3: Line 3:
* [http://cjansen.com/lightning-demo/accordion.htm Tab-box UI Prototype]
* [http://cjansen.com/lightning-demo/accordion.htm Tab-box UI Prototype]
* {{bug|327783}}
* {{bug|327783}}
* [[Calendar:Improving_the_Calendar_Views-Archive Archive]]
* [[Calendar:Improving_the_Calendar_Views-Archive Archive, (Old Designs)]]
== Current Issues (Lightning 0.3)==  
== Current Issues (Lightning 0.3)==  


Line 13: Line 13:
# I can't drag an event from one calendar into another.
# I can't drag an event from one calendar into another.
# All the different colors in the week view are confusing me. Especially same things are highlighted differentially.
# All the different colors in the week view are confusing me. Especially same things are highlighted differentially.
# The three buttons (New../Edit../Delete) are somehowe strange. I think these buttons are good for creating/chageng/deleting events.
# The three buttons (New../Edit../Delete) are somehow strange. I think these buttons are good for creating/changed/deleting events.
# I want to switch between E-Mail and Calendar easily.
# I want to switch between E-Mail and Calendar easily.
# Why am I seeing the mail tree when I'm working in the Calendar?
# Why am I seeing the mail tree when I'm working in the Calendar?
Line 75: Line 75:
== Improved Views ==
== Improved Views ==


Idea 1 to 3 document the design iteratiation I went through before comming up with my prefered concept which is shown below:
Idea 1 to 3 document the design iteration I went through before coming up with my preferred concept which is shown below:




=== Mail ===
=== Mail ===
<nowiki>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| M A I L -- T O O L B A R                                    |
|--------------------------------------------------------------|
| M A I L    < > ||________________________________||Agenda  X|
|`````````````````||                                ||`````````|
| - Account      || Hello      xyz@abc.com        ||        |
|  - Inbox        || ...                            ||        |
|  - Sent        ||                                ||        |
|  - Junk        ||--------------------------------||        |
|  + ....        || From: xyz@abc.com              ||        |
|                ||                                ||        |
|                ||--------------------------------||---------|
|                || Hi there!                      ||Todo    x|
|                || cxcds  dfdf dfvdvf            ||`````````|
|                || dfldkf fff                    ||        |
|                ||                                ||        |
|                ||                                ||        |
|                ||                                ||        |
|________________ ||                                ||        |
| C A L E N D A R ||                                ||        |
|-----------------||                                ||        |
| T A S K S      ||                                ||        |
|-----------------||________________________________||_________|
+--------------------------------------------------------------+
</nowiki>


=== Calendar ===
== Initial View ==


  <nowiki>
  <nowiki>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| C A L E N D A R - - T O O L B A R                           |
| M A I L -- T O O L B A R + Today button          [Search ] |
|---------------------------____________-----------------------|
| Calendar    < > ||___Day__|Work WEEK |_Month______||Agenda  X|
|`````````````````||  |Mon | Tue | Wed | Thu | Fri ||```````` |
| Work            ||---|----|-----|-----|-----|-----||        |
| Private        || 8 | // |    |    |    |    ||        |
| NFL            ||---|-//-|-----|-----|-----|-----||        |
| Team            || 9 | // |    |    |    |    ||        |
| Birthdays      ||---|----|-///-|-----|-----|-----||        |
|                || 10|    | /// |    |    |    ||        |
|                ||---|----|-----|-----|-----|-----||---------|
|-----------------|| 11|    |    |    |    |    ||Todo    X|
|  October 2006  ||---|----|-----|-----|-----|-----||`````````|
|  X X X X X X  || 12|    |    | /// |    |    ||        |
| X X X X X X X  ||---|----|-----|-///-|-----|-----||        |
| X X X X X X X  || 1 |    |    |    |    |    ||        |
| X X X X        ||---|----|-----|-----|-----|-----||        |
|________________ || 2 |    |    |    |    |    ||        |
| M A I L        ||---|----|-----|-----|-----|-----||        |
|-----------------|| 3 |    |    |    |    |    ||        |
| T A S K S      ||---|----|-----|-----|-----|-----||        |
|-----------------||________________________________||_________|
+--------------------------------------------------------------+
  </nowiki>
 
=== Tasks ===
 
  <nowiki>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| T A S K S - - T O O L B A R                                  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
| T A S K S  < > ||___________________________________________|
| All Folders < > || Hello      xyz@abc.com                  |
|`````````````````||                                          |
|`````````````````|| ...                                      |
| 0 This Week    ||  [-] Do Car Wash                          |
| - Account      || Hello      xyz@abc.com                  |
| 0 My Tasks      ||     sdnsdsd fcfdf ffdf dfdf             |
|  - Inbox        || ...                                      |
| O Next Seven Da ||     ds fcfdf hhj wew                    |
|  - Sent        ||                                          |
| - Junk        ||-------------------------------------------|
|  + ....        || From: xyz@abc.com                        |
|                ||                                          |
|                ||-------------------------------------------|
|                 || Hi there!                                |
|                || cxcds  dfdf dfvdvf                        |
|                || dfldkf fff                                |
|                ||                                          |
|                 ||                                           |
|                ||                                          |
|                ||                                          |
|                ||                                          |
|                ||  [+] Do Project Planning                  |
|                ||                                          |
|                ||                                          |
|                ||  [+] GUI Planning XYZ                    |
|-----------------||                                          |
|-----------------||                                          |
| October 2006  ||                                          |
| [Mail] Cal Task ||                                          |
|  X X X X X X  ||                                          |
| X X X X X X X  ||                                          |
| X X X X X X X  ||                                          |
| X X X X        ||                                          |
|________________ ||                                          |
| M A I L        ||                                          |
|-----------------||                                          |
| C A L E N D A R ||                                          |
|-----------------||___________________________________________|
|-----------------||___________________________________________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
  </nowiki>
  </nowiki>


=== Design Iterations ===


== Today Pane Switched On ==


'''IDEA #1: Vertical Tabs '''
<nowiki>
The main idea here is to have tabs located on the left hand side of the left pane.
 
''''Pros:''''
* Tabs need not too much horizontal space.
* Switching views would happen nearby the views
 
''''Cons:''''
* Vertical Labels are hard to read.
* More than 3 tabs would look to cluttered
* An icon-only solution would be too small.
<pre>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| M A I L -- T O O L B A R                                     |
| M A I L -- T O O L B A R + Today button          [Search  ]  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
|   - Account    ||________________________________||Agenda X|
| All Folders < > ||________________________________|| Today X|
|     - Inbox    ||                                ||`````````|
|`````````````````||                                ||`````````|
|     - Sent      || Hello      xyz@abc.com        ||         |
| - Account      || Hello      xyz@abc.com        || Date    |
|     - Junk      || ...                            ||         |
| - Inbox        || ...                            ||`````````|
|--+  + ....      ||                                ||         |
| - Sent        ||                                || Event  |
|  |              ||--------------------------------||         |
|  - Junk        ||--------------------------------|| Event  |
|  |              || From: xyz@abc.com              ||        |
|  + ....        || From: xyz@abc.com              ||        |
| |              ||                                ||         |
|                 ||                                ||     +  |
| |              ||--------------------------------||---------|
|                 ||--------------------------------||---------|
| |              || Hi there!                      ||Todo   x|
|                 || Hi there!                      ||Tasks   |
|--|              || cxcds  dfdf dfvdvf            ||`````````|
|                 || cxcds  dfdf dfvdvf            ||         |
| |              || dfldkf fff                    ||         |
|                 || dfldkf fff                    || Task    |
| |              ||                                ||         |
|                 ||                                || Task    |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|                 ||                                ||        |
| |              ||                                ||        |
|-----------------||                                ||        |
| |              ||                                ||         |
| [Mail] Cal Task ||                                || New Task|
| |--------------||________________________________||_________|
|-----------------||________________________________||_________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
</pre>
</nowiki>


=== Calendar ===


'''IDEA #2: Horizontal Tabs '''
The tabs are now located on top of the left pane.
''''Pros:''''
* Good readability
* Switching views would happen nearby the views/context
''''Cons:''''
* Labeled Tabs need much space
* An icon-only solution would be appropriate.
* Two sets of tabs.
** One for switching between Calendar/Mail
** One set for switching between Day/Week/Month
== Simon's (sipaq) approach ==
=== Mail ===
  <nowiki>
  <nowiki>
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| M A I L -- T O O L B A R                                     |
| C A L E N D A R - - T O O L B A R               [Search  ]  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
| M A I L    < > ||___________________________________________|
| Calendar    < > ||   < > February 26 - March 02, 2007    CW 9|
|`````````````````||                                           |
|`````````````````||   |Mon |Tue | Wed | Thu | Fri | Sat | Sun |
| - Account      || Hello      xyz@abc.com                  |
| February 2007  ||---|----|----|-----|-----|-----|-----|-----|
| - Inbox        || ...                                      |
| X X X X X X    || 8 | // |    |    |    |    |     |     |
| - Sent        ||                                           |
| X X X X X X X  ||---|-//-|----|-----|-----|-----|-----|-----|
| - Junk        ||-------------------------------------------|
| X X X X X X X  || 9 | // |    |    |    |    |    |    |
| + ....        || From: xyz@abc.com                        |
| X X X X        ||---|----|///-|-----|-----|-----|-----|-----|
|                 ||                                           |
|                 || 10|    |/// |     |     |     |     |     |
|                ||-------------------------------------------|
|                ||---|----|----|-----|-----|-----|-----|-----|
|                 || Hi there!                                |
|-----------------|| 11|    |    |    |    |    |    |    |
|                 || cxcds  dfdf dfvdvf                        |
| [X] Work        ||---|----|----|-----|-----|-----|-----|-----|
|                 || dfldkf fff                                |
| [ ] Private    || 12|    |    | /// |    |    |     |     |
|                 ||                                           |
| [X] NFL        ||---|----|----|-///-|-----|-----|-----|-----|
|                 ||                                           |
| [ ] Team        || 1 |    |    |    |    |    |     |     |
|                ||                                           |
| [ ] Birthdays  ||---|----|----|-----|-----|-----|-----|-----|
|________________ ||                                           |
|                || 2 |    |    |    |    |    |    |    |
| C A L E N D A R ||                                           |
|                 ||---|----|----|-----|-----|-----|-----|-----|
|-----------------||                                           |
|-----------------|| 3 |    |    |    |    |    |    |    |
| T A S K S      ||                                           |
| Mail [Cal] Task ||---|----|----|-----|-----|-----|-----|-----|
|-----------------||___________________________________________|
|-----------------||___________________________________________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
</nowiki>
=== Calendar ===
<nowiki>
+---------------------------------------------------------+
+---------------------------------------------------------+
| C A L E N D A R - - T O O L B A R                      |
|---------------------------------------------------------|
| Calendar    < > ||  | Mon  | Tue  | Wed  | Thu  | Fri  |
|`````````````````||  |      |      |      |      |      |
| Work            ||---|------|------|------|------|------|
| Private        || 8 | //// |      |      |      |      |
| NFL            ||---|-////-|------|------|------|------|
| Team            || 9 | //// |      |      |      |      |
| Birthdays      ||---|------|-////-|------|------|------|
|                || 10|      | //// |      |      |      |
|                ||---|------|------|------|------|------|
|-----------------|| 11|      |      |      |      |      |
|  October 2006  ||---|------|------|------|------|------|
|  X X X X X X  || 12|      |      |      |      |      |
| X X X X X X X  ||---|------|------|------|------|------|
| X X X X X X X  || 1 |      |      |      |      |      |
| X X X X        ||---|------|------|------|------|------|
|________________ || 2 |      |      |      |      |      |
| M A I L        ||---|------|------|------|------|------|
|-----------------|| 3 |      |      |      |      |      |
| T A S K S      ||---|------|------|------|------|------|
|-----------------||________________________________|___________|
+---------------------------------------------------------------+
  </nowiki>
  </nowiki>


Line 290: Line 176:
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| T A S K S - - T O O L B A R                                 |
| T A S K S - - T O O L B A R                     [Search  ]  |
|--------------------------------------------------------------|
|--------------------------------------------------------------|
| T A S K S  < > ||___________________________________________|
| Calendar    < > ||                                           |
|`````````````````||                                          |
|`````````````````||  [-] Do Car Wash                          |
| 0 This Week    ||  [-] Do Car Wash                          |
| February 2007  ||      sdnsdsd fcfdf ffdf dfdf              |
| 0 My Tasks      ||      sdnsdsd fcfdf ffdf dfdf              |
| X X X X X X    ||      ds fcfdf hhj wew                    |
| O Next Seven Da ||      ds fcfdf hhj wew                    |
| X X X X X X X  ||                                          |
| X X X X X X X  ||  [+] Do Project Planning                  |
| X X X X        ||                                          |
|                ||                                          |
|-----------------||  [+] GUI Planning                        |
| 0 This Week    ||                                          |
| 0 My Tasks      ||                                          |
| O Next Seven Da ||                                          |
|                ||                                          |
|                ||                                          |
|                ||                                          |
|                ||                                          |
|                ||  [+] Do Project Planning                  |
|                ||                                          |
|                ||                                          |
|                ||  [+] GUI Planning XYZ                    |
|-----------------||                                          |
|  October 2006  ||                                          |
|  X X X X X X  ||                                          |
| X X X X X X X  ||                                          |
| X X X X X X X  ||                                          |
| X X X X        ||                                          |
|________________ ||                                          |
| M A I L        ||                                          |
|-----------------||                                          |
|-----------------||                                          |
| C A L E N D A R ||                                          |
| Mail Cal [Task] ||                                          |
|-----------------||___________________________________________|
|-----------------||___________________________________________|
+--------------------------------------------------------------+
+--------------------------------------------------------------+
  </nowiki>
  </nowiki>
Chris281
595

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/49677"