Screens

Reckoner is designed to be used on all of the common user devices. The user interface is customized for each device, but designed to be familiar across devices.

App Bar

The app bar is the top bar of the Reckoner application. The app bar always displays the name of the current screen the user is viewing.

Application Lock Icon Button

If a passphrase or biometric locking is enabled, you will have the ability to lock the application using this icon button. When locked, you need to provide biometric authentication or the application specific passphrase to access Reckoner.

Persistent Date Range Picker

Reckoner includes a persistent date range which is used as a common filter for loaded transactions. Some examples of how this is used is to determine the transactions to load in the transactions screen, determine the end date for account balances computations, or determine the data to load for a given report.

Date ranges persist across screens and restarts of Reckoner. However, the date ranges are a per-device setting and it is not saved in the database or synced using synchronization services.

The only difference between mobile and desktop views is the size and data displayed for the date range. Since space is limited in mobile views, the dates are not displayed in the title bar. Instead the calendar icon is displayed and the user can use it to change the date range.

Synchronization Service Icon Button

The main feature across most Reckoner screens is the navigation screen selector. This aspect of Reckoner changes the most in response to changes in the app size.

Desktop Widescreen Layout

In the widescreen layout, Reckoner displays the navigation entries in a vertical list on the left hand sidebar. Additionally, the top app bar will have the expand/collapse button which expands the sidebar to display the screen names or collapses it to only show icons. The user selection here is remembered by Reckoner on a per-device basis and is not synchronized across devices.

Desktop Narrow Layout

When the desktop application is narrow, then Reckoner hides the vertical navigation sidebar and shows a hamburger menu button in place of the expand/collapse button. Clicking this button pops out the vertical navigation sidebar on top of the current screen.

Mobile Layout

The mobile layout is unique in that the default phone layout of a tall narrow screen, the navigation entires are arranged horizontally on the bottom of the screen. This remains the case until the phone is oriented such that the display width is smaller than the height. If the width is larger than the height (think changing the phone orientation and autorotating the screen), then the desktop narrow layout is used.