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 the sources present in the library
- All the authors known in the lbrary
- Stories sharing a source or an author
All and Listing modes
When representing sources or authors, books can be arranged in two modes:
- “All” mode : all the sources/authors are represented by a book and displayed in the UI
- “Listing” mode : for each source/author, a group of books representing the corresponding story is present with the name of the source/author to group them (for instance, a JLabel on top of the group)
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 :
- All the sources
- All the books of author “Tulipe, F.”
- A listing of all the authors and their stories
Core
Library (main screen)
[image]
Header
The header has a title, a navigation icon on the left and a search icon.
Title can vary upon the current displayed books:
- All sources
- Sources listing
- Source: xxx
- All authors
- Authors listing
- Author: xxx
The navigation icon open the Navigation drawer.
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 :
- a cover image (which is provided by fanfix.jar)
- a main info, which can be:
- for stories, the story title
- for source books, the source name
- for author books, the author name
- a secondary info, which can vary via a setting (see the Options page) between:
- author name (for a book representing an author, it is left blank)
- a count (a word count for text stories, an image count for images stories, a stories count for sources and authors books)
UI
Material.IO:
- Title, navigation icon, search icon : Header
- List : TODO: List? AdaptiveList? (I forgot the full name…)
A tap will open the target book.
A long press will first “select” the book (visually alter it so the user know which book is the target) then open the context menu.
Navigation drawer
[Image]
The navigation drawer will list 4 destinations:
- All the sources
- Listing of the sources
- All the authors
- Listing of the authors
- By source
…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()).
UI
Material.IO:
- Navigation drawer: navigation drawer
TODO: is it ok to have 3 levels of drawers?
Context menu
[image]
The context menu options are as follow for stories:
- Open : open the book (= internal or external reader)
- Rename… : ask the user for a new title for the story (default is current name)
- Move to >> : show a “new source…” option as well as the current ones fo quick select (BasicLibrary.getSourcesGrouped() will return all the sources on only one level if their number is small enough)
- Change author to >> : show a “new author…” option as well as the current ones fo quick select (BasicLibrary.getAuthorsGrouped() will return all the authors on only one level if their number is small enough)
- Delete : delete the story
- Redownload : redownload the story (will not delete the original)
- Properties : open the properties page
For other books (sources and authors):
- Open: open the book (= go to the selected destination)
UI
Material.IO:
Description page
[image-portrait]
[image-landscape]
Header
Use the same cover image as the books, and the description key/values comes from BasicLibrary.getDescription().
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
It consists of a “Remote Library” panel:
- enable : an option to enable/disable the remote library (if disabled, use the local library instead)
- server : (only enabled if the remote library is) the remote server host
- port : (only enabled if the remote library is) the remote server port
- key : (only enabled if the remote library is) the remote server secret key
…and 5 other options:
- Open CBZ files internally : open CBZ files with the internal viewer
- Open epub files internally : open EPUB files with the internal viewer
- Show handles on image viewer : can hide the handles used as cues in the image viewer to know where to click
- Startup screen : select the destination to show on application startup
- Language : select the language to use
Startup screen
Can be:
…but will have to be presented in a better way to the user (i.e., better names).
UI
Material.IO:
- the page itself : Temporary UI Region
- the options : Switch
- the languages : Exposed Dropdown Menu
- the text fields : the default for text fields
- the scret key field : the default for passwords (with * * *)