| 1 | # Android UI mock-up |
| 2 | |
| 3 | ## Concepts |
| 4 | |
| 5 | ### Story |
| 6 | |
| 7 | We have **Stories** in Fanfix, which represent a story (an "epub", ...) or a comics (a "CBZ" file, ...). |
| 8 | |
| 9 | A story is written by an author, comes from a source and is dentified by a LUID (Local Unique ID). |
| 10 | It can be a text story or an image story. |
| 11 | |
| 12 | The source can actually be changed by the user (this is the main sorting key). |
| 13 | |
| 14 | ### Book |
| 15 | |
| 16 | We also have **Books**. |
| 17 | |
| 18 | Books can be used to display: |
| 19 | |
| 20 | - All the sources present in the library |
| 21 | - All the authors known in the lbrary |
| 22 | - Stories sharing a source or an author |
| 23 | |
| 24 | ### All and Listing modes |
| 25 | |
| 26 | When representing sources or authors, books can be arranged in two modes: |
| 27 | |
| 28 | - "All" mode : all the sources/authors are represented by a book and displayed in the UI |
| 29 | - "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) |
| 30 | |
| 31 | Note: Listing mode can be left out of the Android version if needed (but the all mode is really needed). |
| 32 | |
| 33 | ### Destination |
| 34 | |
| 35 | What I call here a destination is a specific group of books. |
| 36 | |
| 37 | Examples : |
| 38 | |
| 39 | - All the sources |
| 40 | - All the books of author "Tulipe, F." |
| 41 | - A listing of all the authors and their stories |
| 42 | |
| 43 | ## Core |
| 44 | |
| 45 | ### Library (main screen) |
| 46 | |
| 47 | [image] |
| 48 | |
| 49 | #### Header |
| 50 | |
| 51 | The header has a title, a navigation icon on the left and a search icon. |
| 52 | |
| 53 | Title can vary upon the current displayed books: |
| 54 | |
| 55 | - All sources |
| 56 | - Sources listing |
| 57 | - Source: xxx |
| 58 | - All authors |
| 59 | - Authors listing |
| 60 | - Author: xxx |
| 61 | |
| 62 | The navigation icon open the Navigation drawer. |
| 63 | |
| 64 | 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). |
| 65 | |
| 66 | #### List |
| 67 | |
| 68 | This list will hold books. Each item will be represented by : |
| 69 | |
| 70 | - a cover image (which is provided by fanfix.jar) |
| 71 | - a main info, which can be: |
| 72 | - for stories, the story title |
| 73 | - for source books, the source name |
| 74 | - for author books, the author name |
| 75 | - a secondary info, which can vary via a setting (see the Options page) between: |
| 76 | - author name (for a book representing an author, it is left blank) |
| 77 | - a count (a word count for text stories, an image count for images stories, a stories count for sources and authors books) |
| 78 | |
| 79 | #### UI |
| 80 | |
| 81 | Material.IO: |
| 82 | |
| 83 | - Title, navigation icon, search icon : Header |
| 84 | - List : TODO: List? AdaptiveList? (I forgot the full name...) |
| 85 | |
| 86 | A tap will open the target book. |
| 87 | |
| 88 | 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. |
| 89 | |
| 90 | ### Navigation drawer |
| 91 | |
| 92 | [Image] |
| 93 | |
| 94 | The navigation drawer will list 4 destinations: |
| 95 | |
| 96 | - All the sources |
| 97 | - Listing of the sources |
| 98 | - All the authors |
| 99 | - Listing of the authors |
| 100 | - By source |
| 101 | |
| 102 | ...and 2 foldable "panels" with more destinations: |
| 103 | |
| 104 | - By source |
| 105 | - By author |
| 106 | |
| 107 | Those subpanels will either contain the sources/authors **or** sub-subpanels with sources/authors. |
| 108 | See fanfix.jar (BasicLibrary.getSourcesGrouped() and BasicLibrary.getAuthorsGrouped()). |
| 109 | |
| 110 | #### UI |
| 111 | |
| 112 | Material.IO: |
| 113 | |
| 114 | - Navigation drawer: navigation drawer |
| 115 | |
| 116 | TODO: is it ok to have 3 levels of drawers? |
| 117 | |
| 118 | ### Context menu |
| 119 | |
| 120 | [image] |
| 121 | |
| 122 | The context menu options are as follow for stories: |
| 123 | |
| 124 | - Open : open the book (= internal or external reader) |
| 125 | - Rename... : ask the user for a new title for the story (default is current name) |
| 126 | - 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) |
| 127 | - * |
| 128 | - [new source...] |
| 129 | - [A-H] |
| 130 | - Anima |
| 131 | - Fanfiction.NET |
| 132 | - [I-Z] |
| 133 | - MangaFox |
| 134 | - 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) |
| 135 | - * |
| 136 | - [new author...] |
| 137 | - [0-9] |
| 138 | - 5-stars |
| 139 | - [A-H] |
| 140 | - Albert |
| 141 | - BĂ©atrice |
| 142 | - Hakan |
| 143 | - [I-Z] |
| 144 | - Irma |
| 145 | - Zoul |
| 146 | - Delete : delete the story |
| 147 | - Redownload : redownload the story (will **not** delete the original) |
| 148 | - Properties : open the properties page |
| 149 | |
| 150 | For other books (sources and authors): |
| 151 | |
| 152 | - Open: open the book (= go to the selected destination) |
| 153 | |
| 154 | #### UI |
| 155 | |
| 156 | Material.IO: |
| 157 | |
| 158 | - menu: menu |
| 159 | |
| 160 | ### Description page |
| 161 | |
| 162 | [image-portrait] |
| 163 | |
| 164 | [image-landscape] |
| 165 | |
| 166 | #### Header |
| 167 | |
| 168 | Use the same cover image as the books, and the description key/values comes from BasicLibrary.getDescription(). |
| 169 | |
| 170 | #### Description |
| 171 | |
| 172 | Simply display Story.getMeta().getResume(), without adding the chapter number (it is always 0 for description). |
| 173 | |
| 174 | An example can be seen in be.nikiroo.fanfix.ui.GuiReaderViewerTextOutput.java. |
| 175 | |
| 176 | ### Options page |
| 177 | |
| 178 | It consists of a "Remote Library" panel: |
| 179 | |
| 180 | - enable : an option to enable/disable the remote library (if disabled, use the local library instead) |
| 181 | - server : (only enabled if the remote library is) the remote server host |
| 182 | - port : (only enabled if the remote library is) the remote server port |
| 183 | - key : (only enabled if the remote library is) the remote server secret key |
| 184 | |
| 185 | ...and 5 other options: |
| 186 | |
| 187 | - Open CBZ files internally : open CBZ files with the internal viewer |
| 188 | - Open epub files internally : open EPUB files with the internal viewer |
| 189 | - Show handles on image viewer : can hide the handles used as cues in the image viewer to know where to click |
| 190 | - Startup screen : select the destination to show on application startup |
| 191 | - Language : select the language to use |
| 192 | |
| 193 | #### Startup screen |
| 194 | |
| 195 | Can be: |
| 196 | |
| 197 | - Sources |
| 198 | - All |
| 199 | - Listing |
| 200 | - Authors |
| 201 | - All |
| 202 | - Listing |
| 203 | |
| 204 | ...but will have to be presented in a better way to the user (i.e., better names). |
| 205 | |
| 206 | #### UI |
| 207 | |
| 208 | Material.IO: |
| 209 | |
| 210 | - the page itself : Temporary UI Region |
| 211 | - the options : Switch |
| 212 | - the languages : Exposed Dropdown Menu |
| 213 | - the text fields : the default for text fields |
| 214 | - the scret key field : the default for passwords (with * * *) |
| 215 | |
| 216 | |