← Back to team overview

ubuntu-sdk-bugs team mailing list archive

[Bug 1560458] Re: Header should only change flickable content margins when its size is not null and it's visible property is true

 

** Also affects: ubuntu-ui-toolkit (Ubuntu RTM)
   Importance: Undecided
       Status: New

** Also affects: canonical-devices-system-image
   Importance: Undecided
       Status: New

** Changed in: canonical-devices-system-image
    Milestone: None => 11

-- 
You received this bug notification because you are a member of Ubuntu
SDK bug tracking, which is subscribed to ubuntu-ui-toolkit in Ubuntu.
https://bugs.launchpad.net/bugs/1560458

Title:
  Header should only change flickable content margins when its size is
  not null and it's visible property is true

Status in Canonical System Image:
  New
Status in ubuntu-ui-toolkit package in Ubuntu:
  In Progress
Status in ubuntu-ui-toolkit package in Ubuntu RTM:
  New

Bug description:
  r1886

  Header should not update (or it should stop updating) Flickable content margins in case either one (or both) of its sides has null size or it's !visible.
  This is to be consistent with how QtQuick layout components already behave -> they ignore children whose size is null or that are !visible.

  NOTE: opacity should not affect this logic. If opacity is 0, the items
  should NOT be ignored (this allows opacity animations).

  TestCase: you can verify that flickable.topMargin is equal to
  editHeader's height even when the header it's not visible and
  standardHeader is the visible one instead.

              MainView {
                  id: mainView_movingHeaderTest
                  width: units.gu(50)
                  height: units.gu(80)
                  clip: true

                  property alias page: pageItem
                  property alias standardHeader: standardHeaderItem
                  property alias editHeader: editHeaderItem

                  Page {
                      id: pageItem
                      header: standardHeaderItem

                      Flickable {
                          id: flickable_movingHeaderTest
                          anchors.fill: parent
                          //just make sure the scrollbar is scrollable
                          contentHeight: mainView_movingHeaderTest.height * 2
                          contentWidth: mainView_movingHeaderTest.width * 2
                          Label {
                              text: "Use the icons in the header."
                              visible: standardHeaderItem.visible
                          }
                      }
                      Scrollbar {
                          id: scrollbar_movingHeaderTest
                          flickableItem: flickable_movingHeaderTest
                      }

                      PageHeader {
                          id: standardHeaderItem
                          visible: pageItem.header === standardHeaderItem
                          title: "Default title"
                          flickable: flickable_movingHeaderTest
                          trailingActionBar.actions: [
                              Action {
                                  iconName: "edit"
                                  text: "Edit"
                                  onTriggered: pageItem.header = editHeaderItem
                              }
                          ]
                      }
                      PageHeader {
                          id: editHeaderItem
                          visible: pageItem.header === editHeaderItem
                          flickable:  flickable_movingHeaderTest
                          property Component delegate: Component {
                              AbstractButton {
                                  id: button
                                  action: modelData
                                  width: label.width + units.gu(4)
                                  height: parent.height
                                  Rectangle {
                                      color: UbuntuColors.slate
                                      opacity: 0.1
                                      anchors.fill: parent
                                      visible: button.pressed
                                  }
                                  Label {
                                      anchors.centerIn: parent
                                      id: label
                                      text: action.text
                                      font.weight: text === "Confirm"
                                                   ? Font.Normal
                                                   : Font.Light
                                  }
                              }
                          }
                          leadingActionBar {
                              anchors.leftMargin: 0
                              actions: Action {
                                  text: "Cancel"
                                  iconName: "close"
                                  onTriggered: pageItem.header = standardHeaderItem
                              }
                              delegate: editHeaderItem.delegate
                          }
                          trailingActionBar {
                              anchors.rightMargin: 0
                              actions: Action {
                                  text: "Confirm"
                                  iconName: "tick"
                                  onTriggered: pageItem.header = standardHeaderItem
                              }
                              delegate: editHeaderItem.delegate
                          }
                          extension: Toolbar {
                              anchors {
                                  left: parent.left
                                  right: parent.right
                                  bottom: parent.bottom
                              }
                              trailingActionBar.actions: [
                                  Action { iconName: "bookmark-new" },
                                  Action { iconName: "add" },
                                  Action { iconName: "edit-select-all" },
                                  Action { iconName: "edit-copy" },
                                  Action { iconName: "select" }
                              ]
                              leadingActionBar.actions: Action {
                                  iconName: "delete"
                                  text: "delete"
                                  onTriggered: print("Delete action triggered")
                              }
                          }
                      }
                  }
              }

To manage notifications about this bug go to:
https://bugs.launchpad.net/canonical-devices-system-image/+bug/1560458/+subscriptions


References