{"action":"created","issue":{"url":"https://api.github.com/repos/csaki/Hentoid/issues/38","labels_url":"https://api.github.com/repos/csaki/Hentoid/issues/38/labels{/name}","comments_url":"https://api.github.com/repos/csaki/Hentoid/issues/38/comments","events_url":"https://api.github.com/repos/csaki/Hentoid/issues/38/events","html_url":"https://github.com/csaki/Hentoid/issues/38","id":103160034,"number":38,"title":"webView redesign","user":{"login":"avluis","id":875593,"avatar_url":"https://avatars.githubusercontent.com/u/875593?v=3","gravatar_id":"","url":"https://api.github.com/users/avluis","html_url":"https://github.com/avluis","followers_url":"https://api.github.com/users/avluis/followers","following_url":"https://api.github.com/users/avluis/following{/other_user}","gists_url":"https://api.github.com/users/avluis/gists{/gist_id}","starred_url":"https://api.github.com/users/avluis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/avluis/subscriptions","organizations_url":"https://api.github.com/users/avluis/orgs","repos_url":"https://api.github.com/users/avluis/repos","events_url":"https://api.github.com/users/avluis/events{/privacy}","received_events_url":"https://api.github.com/users/avluis/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/csaki/Hentoid/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-08-26T02:54:58Z","updated_at":"2015-08-28T03:16:40Z","closed_at":null,"body":"The floating action buttons are a neat idea when the app is making use of a webView to show online content - but they get in the way.\r\nImplementing them following the [material design guidelines](https://www.google.com/design/spec/material-design/introduction.html#introduction-principles) should improve their current look and behavior.\r\n\r\n*Note: Any work and research under this issue must be considered a workaround until @csaki implements an alternative layout, as suggested by issue #34 and as suggested from previous releases of the FakkuDroid app.*\r\n\r\n## Prototype:\r\n### Default\r\n![1 regular loaded](https://cloud.githubusercontent.com/assets/2737347/9511953/df27b728-4cae-11e5-9a4c-c1ef9b7992bc.JPG)\r\nFrom top left to bottom right:\r\n- Toolbar\r\n  - Up button\r\n  - Refresh button\r\n- Page body\r\n- Disabled  download FAB\r\n\r\n### On a manga page\r\n![2 download loaded](https://cloud.githubusercontent.com/assets/2737347/9511977/42935c90-4caf-11e5-9290-1c1d8eb457c8.JPG)\r\n- On valid manga pages, the download FAB enables by animating to an opaque view\r\n\r\n### Refreshing\r\n![3 regular download loading](https://cloud.githubusercontent.com/assets/2737347/9511993/6813ef34-4caf-11e5-8224-5b541b8c318f.JPG)\r\nThe following behavior applies to all pages that is currently loading:\r\n- The Refresh button is replaced with a Stop button\r\n- A determinate progress bar appears into view underneath the Toolbar\r\n- The Download FAB becomes translucent and disabled.\r\n\r\n### On any of the three states above, the user can scroll down and doing so will hide the Toolbar.\r\n#### Default\r\n![4 regular scrolled loaded](https://cloud.githubusercontent.com/assets/2737347/9512049/de3331a2-4caf-11e5-8ce1-14be4a329265.JPG)\r\n#### Manga page\r\n![5 download loaded](https://cloud.githubusercontent.com/assets/2737347/9512050/dfbc459a-4caf-11e5-9833-20af03c6a983.JPG)\r\n#### Loading\r\n![6 regular scrolled loading](https://cloud.githubusercontent.com/assets/2737347/9512052/e3a40a44-4caf-11e5-93a6-7deac132e7e8.JPG)\r\n\r\n\r\n## Behavior:\r\n* The activity is a top level temporary activity that employs an \"**Up**\" button. Tapping the Up button will simply end the activity. Behavior based on [Android guidelines](http://developer.android.com/design/patterns/navigation.html).\r\n* No navigational back button is employed on screen. The device \"**Back**\" button will be used to navigate back.\r\n* The **Toolbar** shares space with the page body and does not block the page body.\r\n  * Scrolling downwards will animate **hide** the toolbar upwards.\r\n  * Scrolling upwards on any part of the page body will immediately animate **show** the toolbar downwards, blocking a small part of the page body until the page is completely scrolled up.\r\n* The **Refresh** button will only be available on fully loaded pages.\r\n* The **Stop** button replaces the Refresh button when the page is currently loading.\r\n* The **Progress bar** appears temporarily on loading pages and disappears briefly after. The progress bar is always anchored to top whether the toolbar is shown or not.\r\n* The **Download FAB** is always shown but translucent and disabled on invalid pages; opaque and enabled on valid manga pages. The **only time the FAB is hidden** is when the keyboard has been invoked. The FAB should also follow behavior defined [here](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button).\r\n* Animations are important in getting the users attention. As stated in the material guidelines, \"*Motion provides meaning*\".\r\n\r\n## Resources:\r\n* [Changing menu items at runtime](http://developer.android.com/guide/topics/ui/menus.html#ChangingTheMenu)\r\n* [FloatingActionButton library](https://github.com/Clans/FloatingActionButton)\r\n* To clarify, the behavior for the FAB and Toolbar is usually called a [Quick Return Pattern](http://lmgtfy.com/?q=Android+Quick+Return+Pattern): from my research, a Quick Return Pattern is not native to webView, and must be implemented."},"comment":{"url":"https://api.github.com/repos/csaki/Hentoid/issues/comments/135621963","html_url":"https://github.com/csaki/Hentoid/issues/38#issuecomment-135621963","issue_url":"https://api.github.com/repos/csaki/Hentoid/issues/38","id":135621963,"user":{"login":"neosubmarino","id":2737347,"avatar_url":"https://avatars.githubusercontent.com/u/2737347?v=3","gravatar_id":"","url":"https://api.github.com/users/neosubmarino","html_url":"https://github.com/neosubmarino","followers_url":"https://api.github.com/users/neosubmarino/followers","following_url":"https://api.github.com/users/neosubmarino/following{/other_user}","gists_url":"https://api.github.com/users/neosubmarino/gists{/gist_id}","starred_url":"https://api.github.com/users/neosubmarino/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/neosubmarino/subscriptions","organizations_url":"https://api.github.com/users/neosubmarino/orgs","repos_url":"https://api.github.com/users/neosubmarino/repos","events_url":"https://api.github.com/users/neosubmarino/events{/privacy}","received_events_url":"https://api.github.com/users/neosubmarino/received_events","type":"User","site_admin":false},"created_at":"2015-08-28T03:16:40Z","updated_at":"2015-08-28T03:16:40Z","body":"Is there anyway we can implement this using the latest design support library? This supports the quick return pattern and has a lighter less customizable FAB. Not to mention snackbars which we might be able to use in the future.\r\n\r\n[Android dev blog](http://android-developers.blogspot.com/2015/05/android-design-support-library.html)\r\n[Can I use Android floating action button using Android Official Library?](http://stackoverflow.com/questions/27166546/can-i-use-android-floating-action-button-using-android-official-library)"}}