[clock app] Scrollable lists on scrollable pages are unintuitive

[Andrew Starr-Bochicchio]

When you have more than a few World Clocks, timer presets, or stop watch laps the lists become scrollable. Having scrollable lists on scrollable pages seems unintuitive. I think a better behavior would be to have the list views extend and just scroll the page itself instead of having the list views' height being hardcoded at units.gu(21).

That would be pretty simple by doing:

=== modified file 'clock/ClockPage.qml'
--- clock/ClockPage.qml 2013-09-09 17:06:20 +0000
+++ clock/ClockPage.qml 2013-09-18 23:50:15 +0000
@@ -182,8 +182,9 @@
                 id: listWorldClocks

                 clip: true
+ interactive: false
                 anchors { left: parent.left; right: parent.right }
- height: units.gu(21)
+ height: worldModel.count * units.gu(6)
                 model: worldModel
                 currentIndex: -1

The problem is that these lists are all contained in the AnimationContainer which has the seemingly arbitrary property "contentHeight: units.gu(87)" So if the page exceeds that height, things are cut off from the bottom.

Hardcodding arbitrary heights seems bad. I'm also not sure I understand the purpose of the page scrolling animation.

This also affects LP: #1226128. Hiding the tab header when scrolling should be as simple as removing the "flickable: null" property from the relevant pages, but if you do so the animated scroll makes the tabs inaccessible.

[Nekhelesh Ramananthan (nik90)]

Thanks for your bug report. As you correctly pointed out, the hardcoding of values is affecting the functionality of the clock app. This is something I need to address asap but haven't got to doing yet. There are several things which are being hardcoded such as,

1. The height of the animation counter. -> I tried using page.height to make it dynamic, but then it displays an error message regarding binding loops.

2. Height of the stopwatch, clock, timer and upcoming alarm list.

Instead of hardcoding they should dynamically adjust based on the phone dimensions.

To answer your question about the page scrolling animation, basically every page has two states: the first being the state where the clock is fully visible. In this state the listview is hidden. The second state is the state where the clock face is partially visible while the list view is shown prominently. We do not allow any intermediate view points for the flickable. The animations are there to provide a smooth transistion between these states.

A fix for this would be highly appreciated :)

[Nekhelesh Ramananthan (nik90)]

On looking through the design documents, it seems this is the desired behavior. The reason we hardcoded the listheight to some random value units.gu(21) is to ensure that at all times, the listview shows only 3 items. Anything more than 3 items will require the user to scroll the listview. If you are wondering why the listview should show only 3 items, that's because when the user scroll the entire page, the clock face should end up like https://lh5.googleusercontent.com/e_O6xn6quRh81wFBPFPZK3Ani-M5w0FFY4IPH_QQ0aaezyPdPPNkJCg0OC-3kc__bdPU4cgAxw_WK1aABt2jqpl-Z-t-7iffKPJYIUPkVCS1LjNcm70pMjCY6g. For that layout it is not possible to let the listview size to be more than 3 since it will then push the clock face above.

However I do agree that static hardcoding of values is not recommended which results in some bugs that I noticed. As a result, I have a branch at https://code.launchpad.net/~nik90/ubuntu-clock-app/dynamic-positioning-part1, which removes all hardcoded values like this.

Thanks for bringing this to my attention.

I have nonetheless added the UX team to this so that they can make the decision to allow dynamic listview height so that the scrollable inside a scrollable page can be removed. I need design approval before I implement this.

[Andrew Starr-Bochicchio (andrewsomething)]

On Fri, Sep 20, 2013 at 4:59 AM, Nekhelesh Ramananthan
<email address hidden> wrote:
> If you are wondering why the listview should show only 3
> items, that's because when the user scroll the entire page, the clock
> face should end up like https://lh5.googleusercontent.com
> /e_O6xn6quRh81wFBPFPZK3Ani-M5w0FFY4IPH_QQ0aaezyPdPPNkJCg0OC-
> 3kc__bdPU4cgAxw_WK1aABt2jqpl-Z-t-7iffKPJYIUPkVCS1LjNcm70pMjCY6g. For
> that layout it is not possible to let the listview size to be more than
> 3 since it will then push the clock face above.

I suppose that makes sense, but it also explain part of what I found
confusing. On my Nexus 4, even with only one location, the clock face
scrolls off the screen. (See attached screenshot.)

@designers, I wonder if this is really a necessary behavior, as the
"Current location" item will also display the current time.

[Nekhelesh Ramananthan (nik90)]

> I suppose that makes sense, but it also explain part of what I found confusing. On my Nexus 4, even with only one location, the clock face scrolls off the screen. (See attached screenshot.)

It doesn't anymore. I think the update hasnt yet landed in the phone. If you try the latest trunk build on your desktop, you will see that now it is proper flickable (scrolling page) which allows you to stop anywhere. Previously (like in your screenshot), it was a custom flickable which allowed only two states. One state where if you scroll up even a tiny bit, it will move all the way to the top. And the other state is the default state that you see when you open the clock app. I have removed that state behavior completely.

> @designers, I wonder if this is really a necessary behavior, as the "Current location" item will also display the current time.

This I agree. It is redundant to have the analog face (with digital clock) and a listview showing the current location.

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

New design will fix the problem

[Nekhelesh Ramananthan (nik90)]

This has been fixed in the new clock app. The fix won't be backported to the old clock app since the old clock app will be replaced by the new one in a week or two.