Automatic Header height adjustment should be optional

Status changed to 'Confirmed' because the bug affects multiple users.

Adding a reference to the G+ post where the discussion has started.
https://plus.google.com/u/0/104470462565851394948/posts/58xHJVYUYmj

It has been required to provide some case for which the default behaviour is not suitable.

I'm working on a note-taking app which would like to make use of a "Flexible space header"[1][2]:
https://www.youtube.com/watch?v=elFUk7bY7Ho

Currently the documentation for the PageHeader claims the ability to set any custom Item as extension as long as they have an height, so I decided to implement the "flexible space" as header extension.[3]
While this works properly when using a PageStack, I got a completely different result with an AdaptivePageLayout:
https://www.youtube.com/watch?v=jigZVlCPCkk

[1] Android UI guidelines - http://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling
[2] The video is pretty old, sorry for the double header, but it was a fully custom implementation at the time.
[3] http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/staging/view/head:/src/Ubuntu/Components/1.3/PageHeader.qml#L214

Why has this been marked as incomplete?

Because I like to know what the designers think of this. Perhaps they propose the app to be different, or maybe the header heights should not be linked at all, or linking the header heights should be optional. The last option is probably the most cumbersome because then we have to decide on an API for that, so before doing that I wait for the solution from design.

I can think of a solution where the AdaptivePageLayout has a maximumHeaderHeight property that holds the maximum (implicit) height of the header in each of the columns. App developers can then set PageHeader { height: adaptivePageLayout.maximumHeaderHeight } to synchronize the header heights.

However, that means that app developers have to do an effort to synchronize the header heights, and most applications will not have the header heights synchronized between the columns.

@Stefano, for your use case, maybe it is better not to use the PageHeader in the page on the right side. You could set Page.header: Item { } to not show any header there, and then you add your own larger and more complicated header at the top of your page manually. If you want it to link to a flickable so that it hides/shows when scrolling, make the component inherit from the Header component.

@Tim could we add a property to the header Autoresize: and set that to true or false?

Any news on this?

Has there been any development or discussion on this bug?

This is fantastic news!!!

On 8 April 2016 at 13:17, Femma <email address hidden> wrote:

> ** Changed in: ubuntu-ux
> Status: Triaged => In Progress
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1540240
>
> Title:
> Automatic Header height adjustment should be optional
>
> Status in Ubuntu UX:
> In Progress
> Status in ubuntu-ui-toolkit package in Ubuntu:
> Incomplete
>
> Bug description:
> I am currently developing a convergence capable CAD App and i recently
> switched the UI to use AdaptivePageLayout and the new headers. I have
> noticed that the header automatically resizes across columns to match
> the column with the greatest header height.
>
> This doesn't suit my particular application as I would like to
> maintain maximum screen space for the drawing canvas.
>
> I have attached some screenshots (early development - dont judge me!!)
> of what I am seeing.
>
> It would be super cool if you could include a flag or option to
> disable the header adjustment for any particular page or column.
>
> UX Fix:
>
> A flag will be included in the header component to disable header
> adjustments, allowing developers to have different header heights for
> convergence apps.
> Ideally for full screen applications the header should be set to hidden.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-ux/+bug/1540240/+subscriptions
>

This bug was fixed in the package ubuntu-ui-toolkit - 1.3.2060+16.10.20160814

---------------
ubuntu-ui-toolkit (1.3.2060+16.10.20160814) yakkety; urgency=medium

  [ Zoltan Balogh ]
  * Fix OptionSelectorTestCase tests.
  * Fix more OptionSelector autopilot tests

  [ Timo Jyrinki ]
  * Disable documentation building for GLES builds. Fixes LP: #1606222.
  * Replace abs with qFabs due to GCC6 breakage. Fixes LP: #1610943.
  * Limit s390x dependencies more due to upstart/s390x problems and removed
    packages in archives. Fixes LP: #1610951

  [ Andrea Bernabei ]
  * ListItemLayout doc: add elide mode change example and add section about
    labels default properties values. Fixes LP: #1603450.
  * ListItemLayout doc: add explicit note about the need to bind ListItem's
    height to layout's height.
  * More Scrollbar optimizations: 20% faster creation time. Fixes LP: #1606451
  * Scrollbar: fix wrong thumb color on tap/mouse release and increase coverage
    of hover states unit tests. Fixes LP: #1608897

  [ Zsombor Egri ]
  * Fix null pointer property initializer used with 1.3 PageWrapper.
    Fixes LP: #1604780.
  * Fix BottomEdge content URL preloading. Fixes LP: #1604509.

  [Albert Astals Cid ]
  * UCUnits::resolveResource: Prefer image path if it exists. This saves
    searching the disk for @gu images, which is a big speedup. According to
    callgrind loading 100 images from a folder that contains 380 images goes
    from around 3 million instructions per UCUnits::resolveResource call down
    to around 10 thousand. This optimization is ok since it is not correct to
    ship both image.png and image@20.png. You either have to ship gu-enabled
    files or not, but mixing them is not allowed. Searched for cases in which
    that may be happening in my phone and found none. Fixes LP: #1604029.

  [ Tim Peeters ]
  * Configure colors of the buttons in the ActionBar and PageHeader through
    their Styles. Fixes LP: #1597774.
  * Fix assigning of constant values to a grouped property in StyleHints.
    Fixes LP: #1602836.
  * Fix list view keyboard navigation for RightToLeft and BottomToTop
    directions. Fixes LP: #1605634
  * Use external QML files instead of embedded QML strings for autopilot tests.
    Fixes LP: #1578319
  * Fix failing autopilot header tests.
  * Fix ActionSelectionPopover Autopilot CPO tests.

  [Christian Dywan ]
  * Include indexes in "offline" docs and filter out link errors.
    Fixes LP: #1603937.
  * Increase focus ring thickness from 1dp to 2dp. Fixes LP: #1602690.
  * Add a snippet about tests to the toplevel README
  * Enter/Return to trigger, Space to expand ComboButton. Fixes LP: #1523817.
  * Initialize engine variable before using it in the _engine case.
  * Use Qt.rgba instead of #0000 checking ListItem default color.
    Fixes LP: #1560004
  * Don't use a different .desktop file in the gallery tests.
    Fixes LP: #1578319
  * Update scaling docs, set QT_SCALE_FACTOR and unset GRID_UNIT_PX.
    Fixes LP: #1610208

  [ Florian Boucault ]
  * Sections: load Icons asynchronously.

 -- Zoltán Balogh <email address hidden> Sun, 14 Aug 2016 09:06:46 +0000