Merge branch 'subtree'
[fanfix.git] / docs / android / android.md

Android UI mock-up

Concepts

Story

We have Stories in Fanfix, which represent a story (an “epub”, …) or a comics (a “CBZ” file, …).

A story is written by an author, comes from a source and is dentified by a LUID (Local Unique ID). It can be a text story or an image story.

The source can actually be changed by the user (this is the main sorting key).

Book

We also have Books.

Books can be used to display:

All and Listing modes

When representing sources or authors, books can be arranged in two modes:

Note: Listing mode can be left out of the Android version if needed (but the all mode is really needed).

Destination

What I call here a destination is a specific group of books.

Examples :

Core

Library (main screen)

Main library

Header

The header has a title, a navigation icon on the left and a search icon.

Title can vary upon the current displayed books:

The navigation icon open the Navigation drawer.

Search

Search/Filter

The search icon is actually a filter: it will hide all the books that don’t contain the given text (search on LUID, title and author).

List

This list will hold books. Each item will be represented by :

UI

Material.IO:

A tap will open the target book in full-screen mode (i.e., the details about the card).

On the detailed card, you will see the description (see Description Page) and 3 buttons :

Navigation drawer

Navigation Drawer

The navigation drawer will list 4 destinations:

…and 2 foldable “panels” with more destinations:

Those subpanels will either contain the sources/authors or sub-subpanels with sources/authors. See fanfix.jar (BasicLibrary.getSourcesGrouped() and BasicLibrary.getAuthorsGrouped()).

Note: if those last two cause problems, they can be removed; the first four options would be enough to cover the main use cases.

UI

Material.IO:

Context menu

Context Menu

The context menu options are as follow for stories:

For other books (sources and authors):

UI

Material.IO:

The menu will NOT use sublevels but link to a list instead.

Description page

Description Page

Header

Use the same cover image as the books, and the description key/values comes from BasicReader.getMetaDesc(MetaData).

Description

Simply display Story.getMeta().getResume(), without adding the chapter number (it is always 0 for description).

An example can be seen in be.nikiroo.fanfix.ui.GuiReaderViewerTextOutput.java.

Options page

Options Page

It consists of a “Remote Library” panel:

…and 5 other options:

Startup screen

Can be:

…but will have to be presented in a better way to the user (i.e., better names).

UI

Material.IO:

Internal viewer

The program will have an internal viewer that will be able to display the 2 kinds of stories (images and text).

Base viewer

This is common to both of the viewer (this is not an architectural directives, I only speak about the concept here).

Base Viewer

Header

The title is the title of the story, shortened with “…” if too long.

Content

This area will host the text viewer or the image viewer.

Navigator

It contains 4 action buttons (first, previous, next and last chapter) and the title of the current chapter:

UI

Matrial.IO:

Text viewer

Text Viewer

It will contain the content of the current chapter (Story.getChapters().get(index - 1)).

Same layout as the Properties page uses for the resume, with just a small difference: the chapter name is now prefixed by “Chaper X: ”.

Image viewer

Image Viewer

Image

Auto-zoom and fit (keep aspect ratio).

Image counter

Just display “Image X/Y”

Handles

This is a simple cue to show the user where to click.

It can be hidden via the option “Show handles on image viewer” from the Options page.

UI

Pinch & Zoom should be allowed.

Drag-to-pan should be allowed.