City-of-Helsinki / servicemap

UI components for the Service Map of the Helsinki Metropolitan Area
GNU Affero General Public License v3.0
32 stars 18 forks source link

More animations to sidebar #149

Open lraivio opened 10 years ago

lraivio commented 10 years ago

Currently the sidebar supports animations for moving new and old content left or right. At least animations for sliding up or down for revealing or hiding content should be added.

The challenge comes from deducing which animation to use as the sidebar has a lot of states and transitions between those states. Below I have listed all the views than can be visible in the sidebar and all the view actions that can change the sidebar view. After each action there is the animation that could be used.

Based on the list below we would need to know at least the old view and the new view (these we already know) but also how we are getting from the old view to the new one.

Sidebar states and transitions

Sidebar closed

Click search header -> slide down search

Click browse header -> slide down service tree

Click marker on the map -> slide down details view

Search view

Click service point -> slide left details view

Click service category -> ?? (Currently closes the search and shows service markers on map)

Click close -> slide up search view

Click browse header -> slide up search view + slide down service tree

Click marker on the map -> slide left details view

Search typeahead suggestions

Click service point -> slide down details view

Click service category -> ?? (Currently closes the search and shows service markers on map)

Service tree

Click to move forward -> slide left to the next service tree view

Click back -> slide right to the previous service tree view

Click marker on the map -> slide left details view

Click close -> slide up service tree

click seach header -> slide up service tree

Click browse header -> ?? -> Probably should slide up current service tree + slide down root service tree

Details view

Click back to search -> slide right search view

Click back to services -> slide right service tree

Click close in header (if search or browse header is open) -> slide up details

click seach header -> slide up details

Click browse header -> slide up details + slide down service tree (from root)

Click an event -> slide left event view

Event view

Click back to service details -> slide right details view

Click close in header (if search or browse header is open) -> slide up event view

click seach header -> slide up event view

Click browse header -> slide up event view + slide down service tree (from root)

kaljarv commented 10 years ago

Hi! A few comments:

Search view/Search typeahead suggestions > Click service category

The current behaviour of closing the search and just showing stuff on the map (and in the legend) is consistent, when we always close the ST when a category is selected (there is an issue for this). So let's keep this the way it is.

If, however, autoclosing the ST proves not to work, we could change that to autoclose only when the map is clicked. Then consistent behaviour for selecting a service from the search results would be to open that category in the ST (with all its subcategories selected).

Service tree > Click browse header

Since we are adding the breadcrumbs to the title bar and the root can be accessed from there, I'd suggest that clicking on the header only minimizes the ST (i.e. it slides up) without changing our current location in the tree. (This also raises the question whether the details and event views should be collapsible i.e. have a title bar with that functionality…)

The location in the tree should only be reset to the root when: – the close icon on the header is clicked – a text search is performed or one of the typeahead suggestions is selected – the root segment in the breadcrumbs is clicked.

Details view/Event view > Click browse header

As for which part of the ST to show, see above.

lraivio commented 10 years ago

@kallelongjuhani thanks for the comments! Didn't know some of these. The functionality and logic you described sounds good.