Timesheet content

Worklist content

Worklist content

Worklist content

Timesheet content

Identification

Time record

Content

Timesheet

Worklist

Time Finder

Tracking bar

Identification

Time record

Content

Identification

Time record

Content

Identification

Time record

Content

Day - Timekeeper - D/W/M view

+ Add time

UI Framework

System messages window (Red - Green - Blue)

Global navigation

Sticky at the top

Expandable and floating - When the user scrolls up, the bar sticks at the top and collapses, just below the sticky navigation

Expandable and floating - When the user scrolls down, the bar anchors at the top, just below the sticky navigation

Sticks at the bottom when the user scrolls up

Expandable and floating - When the user scrolls down, the bar anchors at the top, just below the sticky navigation

Sticks at the bottom when the user scrolls up

Sticky at the bottom

Anchored floating

Timesheet

Worklist

Time Finder

Tracking bar

Global navigation

Timesheet content

Timesheet

Worklist

Time Finder

Tracking bar

Global navigation

Worklist content

User scrolls up, the Worklist collapses to make space to the Timesheet

User expands the worklist, the Timesheet panel is pushed down

Timesheet content

Timesheet

Worklist

Time Finder

Tracking bar

Global navigation

Worklist content

User down up, the Worklist expands again, if it was expanded befor the user scrolled up

Timesheet content

Timesheet

Worklist

Time Finder

Tracking bar

Global navigation

Denotes the visible part of the screen

In cases where the worklist's length exceeds the browser window,

The Timesheet header anchors at the bottom.

Timesheet content

Timesheet

Worklist

Time Finder

Tracking bar

Global navigation

When the user clicks on the TimeSheet header, the Timesheet panel is revealed, the Timesheet header anchors at the top and collapses the worklist

Principle: scroll and anchor

Examples

Timefinder

Timesheet

Worklist

Time Finder

Tracking bar

Global navigation

When the user clicks on the TimeFinder header, the TimeFinder panel goes to the top and collapses the worklist and the timesheet panel

Timefinder

Timefinder

Worklist content