Phone form factor support

[bertob]

This app almost works on phone form factors, but there are a few things that prevent if from being fully mobile-ready:

• The minimum window width is a bit wider than 360px (the recommended minimum width for mobile support). The progress bar might need to be reshuffled to work at very narrow sizes
• The context menu popover is a bit too wide
• The view settings popover is a bit too wide
• The preferences dialog is too wide (Libhandy's HdyPreferencesWindow might help with that)
• The headerbar is a bit cramped at small sizes. One possible solution culd be moving some of the buttons to the primary menu and having the popovers be sub-views of that.

[johnfactotum]

I think the ToC, annotations, and bookmarks should be merged into one popover, using a stack switcher, like in the sidebar mode. The search button will be moved to the primary menu.

The progress slider can probably be hidden when the window is narrow, showing only the percentage label, otherwise it would have to have its own row.

The view settings popover can be made narrower by using drop-down menus instead of radio buttons (#92).

[bertob]

Sounds good :+1:

The view settings popover can be made narrower by using drop-down menus instead of radio buttons

Seeing as there are only a handful of options I think something like a stack switcher or the elementary color dots (for the view colors) would probably be nicer here.

[johnfactotum]

The current state of the master branch:

• The action bar has been replaced with overlaid controls, which can be toggled by tapping the viewing area
• A new location popover, showing time estimates, which was previously only available in a tooltip
• A new main menu that combines the old view settings popover
• Theme submenu
• The new OSD popover uses GtkStack to handle overflow, which is a common pattern for this kind of menu

[bertob]

Just built master and gave it a quick spin, this looks great!

One thing that could be cool to have at some point is swipe gestures to move between pages (maybe HdyPaginator could be used for that?). I'm not sure how that would mesh with text selection though.

[johnfactotum]

Swipe to turn pages should be easy to do by handling touch events in the WebView. It might interfere with the current click events, but it shouldn't be too hard to solve. I'm unsure about how text selection would work on a touch device, though. Is there a build-in text selection menu? Selection handles? Would they work with the popover? Edit: it seems that GTK's text selection widgets for touch screens are not available in WebKit WebViews? At least not when I turn on "simulate touchscreen" in the inspector. How does Epiphany handle this?

Another thing is the on screen keyboard. The guide currently says that

The on screen keyboard may take some space too. Its design not being finalized yet, it is uncertain how it would affect applications.

Will there be a way to request the keyboard to not resize the application? Reflowing the book should be avoided if possible.

[alice-mkh]

HdyPaginator can only work here if you're willing to have a webkit view per page. So not really. There's a builtin back/forward gesture in WebKit, but unless you're reading from the very first page, it won't really work here either.

How does Epiphany handle this?

I think it doesn't. At least it definitely doesn't handle "simulate touchscreen" at all, no idea about text selection in particular on an actual touchscreen. @bertob do you know?

[dcz-purism]

Will there be a way to request the keyboard to not resize the application? Reflowing the book should be avoided if possible.

We're considering that, but no solution yet. If you filed your concerns as an issue in phoc https://source.puri.sm/Librem5/phoc/issues , that would help us come to some conclusion, because I don't think we have a good grasp of the problem right now.

[bertob]

@johnfactotum About the keyboard: I've opened an issue upstream to discuss this more broadly. Feel free to chime in with your perspective about what the ideal behavior would be https://source.puri.sm/Librem5/phoc/issues/94

I'm unsure about how text selection would work on a touch device, though. Is there a build-in text selection menu? Selection handles? Would they work with the popover?

Good question. I did a quick test in Epiphany on my phone devkit, and it didn't work there (long pressing and dragging on text only opens the context menu, but doesn't select the text). Perhaps something to ask the WebKitGTK developers about?

[johnfactotum]

@bertob Thanks for opening the issue.

Regarding swipe gestures, I think if the page is to turn nicely following the exact movement of the finger, that would be difficult to implement, requiring patching Epub.js. A much simpler alternative would be to use taps to turn pages, like the Kindle:

Some e-readers, like the Kobo, allow the user to configure the tap zones:

[bertob]

@johnfactotum Kindle-style tap areas sounds good as first step :+1:

[johnfactotum]

Closing as all the points has been address and released in v2.0. Touchscreen problems are tracked in #207 and #224.