Difference between revisions of "Design Team/Proposals/Journal"

From Sugar Labs
Jump to: navigation, search
(In additional)
 
(40 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<noinclude>{{TOCright}}<!-- START OF BLOCK -- 1. COPY & PASTE this BLOCK to below the END OF BLOCK line.
+
__TOC__
                                  2. PASTE it before any pre-existing proposal,
+
== [[Journal NewUI]] ==
                                  3. then OVERWRITE the place holders with your information,
+
== [[Design Team/Proposals/Journal#Datastore|Datastore]] ==
                                  4. and DELETE the START & END OF BLOCK instruction lines.
+
<noinclude>
                                  5. Click [Show preview] to check formatting, and adjust as necessary.
+
* See Sascha Silbe's [http://git.sugarlabs.org/projects/versionsupport-project/repos/mainline version support project] specifically [http://git.sugarlabs.org/projects/versionsupport-project/repos/mainline/blobs/master/datastore-redesign.html datastore-redesign] (click the raw blob data link at the top of the page to see the HTML rendered in your browser), and this [http://www.mail-archive.com/sugar-devel@lists.sugarlabs.org/msg06008.html mailing list thread], or this [http://docs.google.com/Doc?docid=0AbFyRSVE0dmOZGQ5emZjOTZfMzBoeG1qMjhqbg&hl=en compilation of the discussion] in context with the proposal document.
                                  6. Click [Save page] to complete the edit.
+
</noinclude>
                                                                                              -->
+
== [[Design Team/Proposals/Journal#Tags under titles|Tags under titles]] ==
===<Your proposal's pithy name here>=== <!-- Leave the === prefix and suffix ===
+
<noinclude>
                                                                                              -->
 
:'''Rationale:'''                    <!-- leave this line -->
 
:: <Your rationale here>
 
:'''Features:'''                    <!-- leave this line -->
 
:# <1st feature here>
 
:# <2nd feature here>
 
:'''Implementation Details:'''      <!-- leave this line -->
 
:: <Details here>
 
:'''Reviewer Comments:'''            <!-- leave this line -->
 
:: comments here                <!-- reviewers: leave the :: prefix and overwrite up to this signature code: --~~~~
 
END OF BLOCK line --></noinclude>
 
<!-- Pre-existing Proposal Block -->
 
===Tags under titles===
 
 
 
 
[[Image:journal_tag_mockup_frm_gary_v1.png|thumb|centre|640px|Example mock-up based on current Journal (0.84) using two lines for title and tags per each entry. Notes: Entries with no tags have their title vertically centred to keep visual balance; entries with more tags than can be displayed end with an ellipsis, this could just be indicative that there are more tags, or have hover hint function showing the remaining un-displayed tags. Clicking a tag should add it to the search field to allow drilling down into results.]]
 
[[Image:journal_tag_mockup_frm_gary_v1.png|thumb|centre|640px|Example mock-up based on current Journal (0.84) using two lines for title and tags per each entry. Notes: Entries with no tags have their title vertically centred to keep visual balance; entries with more tags than can be displayed end with an ellipsis, this could just be indicative that there are more tags, or have hover hint function showing the remaining un-displayed tags. Clicking a tag should add it to the search field to allow drilling down into results.]]
 +
</noinclude>
 +
CSA: If you incorporate ordered tags, based on filesystem paths, they could look like this:
 +
[[Image:journal_tag_dir_styles.jpg|center|Tag styles]]
  
=== Tollbar and palettes ===
+
== [[Design Team/Proposals/Journal/Toolbar and palettes | Toolbar and palettes]] ==
 
+
<noinclude>
TODO:
+
See Gary Martin's mockups, such as this:
* Mock-up of tag palette (before alstoot starts throwing heavy objects at me).
+
[[Image:journal_mockup_gary_tags_gradient_palette.png|centre|640px|link=Design Team/Proposals/Journal/Toolbar and palettes|Tag fill colour is graduated from white to grey based on the tag frequency. Not sure we want to introduce a new 'colour' language but thought a mock-up would be worth it (though it's certainly the most visually clear indication of frequency given the space). Also works with white text and grey to black fill.]]
* Add and mock-up an anytime/when palette.
+
</noinclude>
* Add and mock-up an anyone/who palette.
 
* Try and find better design for the anything/what filter/funnel icon.
 
* Show multi entry selection and applying actions to them
 
** shift key modifier and click to multi select (toggle, or could be block range)
 
** modified pop-up palette when interacting with multi selected items
 
 
 
==== #1 ====
 
[[Image:journal_mockup_gary_toolbar.png|thumb|centre|640px|Toolbar rework using standard button icons instead of text menus (the Activity filter icon is a temporary design placeholder, suggestions welcome!)]]
 
 
 
==== #2 ====
 
[[Image:journal_mockup_gary_filter_palette.png|thumb|centre|640px|Example using a palette with a grid layout to show many items on screen at once and reduce scrolling (Activity filter icon is a temporary design placeholder, suggestions welcome!) Clicking on an item will highlight it (as shown on the default 'Anything' icon) and place it's icon in the toolbar.]]
 
 
 
==== #3 ====
 
[[Image:journal_mockup_gary_grid_palette.png|thumb|centre|640px|Grid palette, not much here to see, other than to note that Grid view has been placed as a top level toolbar button as it's likely a frequent view to be switched to and from (grid view is inherently an object-view).]]
 
 
 
==== #4 ====
 
[[Image:journal_mockup_gary_list_palette.png|thumb|centre|640px|List palette, Journal Grid view and List view are (I think) the primary views users will switch between, so I've swapped around the design priority from Eben so that (potential future) action-view and object-view are secondary items for the List view. Once/if action-view is implemented/proven it would likely be the default List view.]]
 
 
 
=== In additional ===
 
 
 
==== Compact list view ====
 
 
 
The purpose is, if user has lots of objects it could be useful idea to show as much as possible objects on one screen.
 
 
 
Having several column/grid layouts for example its very useful for books to have columns for author, genre, date; so, user can see the whole valuable info at once and sort objects by these columns; and so separate layouts for video audio etc. files.
 
 
 
[[Image:-3.png|200px]]
 
 
 
==== Additional types of filters ====
 
 
 
For example Library [http://wiki.sugarlabs.org/go/File:-1.png has] several types to filter objects
 
 
 
* user tags
 
* object traits(additional columns from previous section) like author, genre, date for books
 
* activity creators(grouping by activity_id field)
 
* types of objects(like top section in filter palette)[3]
 
* filter by participants
 
* filter by sources(if we are in shared mode)
 
 
 
Its not clear that all of these modes are useful, but something could be(or another types).
 
 
 
[[Image:-7.png|200px]]
 
 
 
==== Several levels of chosen filters ====
 
 
 
In some cases it could be useful. For example user can filter all text/plane files and separate from them only objects that were made by Terminal activity. In that case there should UI element to show currently chosen filters(see bottom panel on below page).
 
 
 
[[Image:-4.png|200px]]
 
  
 +
== [[Design Team/Proposals/Journal#GMail-style tag view |GMail-style tag view]] ==
 
<noinclude>
 
<noinclude>
 +
Tags drag-and-drop-able from a left-side palette.
 +
[[Image:journal_mockup_cscott.png|thumb|center|640px|GMail-inspired Journal mockup.]]
 +
[[Image:journal_demo_cscott.png|thumb|center|640px|Journal2 demo]]
  
 
==Subpages==
 
==Subpages==
 
{{Special:PrefixIndex/{{PAGENAMEE}}/}}
 
{{Special:PrefixIndex/{{PAGENAMEE}}/}}
 
</noinclude>
 
</noinclude>

Latest revision as of 15:16, 27 October 2011

Journal NewUI

Datastore

Tags under titles

Example mock-up based on current Journal (0.84) using two lines for title and tags per each entry. Notes: Entries with no tags have their title vertically centred to keep visual balance; entries with more tags than can be displayed end with an ellipsis, this could just be indicative that there are more tags, or have hover hint function showing the remaining un-displayed tags. Clicking a tag should add it to the search field to allow drilling down into results.

CSA: If you incorporate ordered tags, based on filesystem paths, they could look like this:

Tag styles

Toolbar and palettes

See Gary Martin's mockups, such as this:

Tag fill colour is graduated from white to grey based on the tag frequency. Not sure we want to introduce a new 'colour' language but thought a mock-up would be worth it (though it's certainly the most visually clear indication of frequency given the space). Also works with white text and grey to black fill.


GMail-style tag view

Tags drag-and-drop-able from a left-side palette.

GMail-inspired Journal mockup.
Journal2 demo

Subpages