ubuntu-sdk-bugs team mailing list archive
-
ubuntu-sdk-bugs team
-
Mailing list archive
-
Message #06010
[Bug 1560458] [NEW] Header should only change flickable content margins when its size is not null and it's visible property is true
Public bug reported:
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")
}
}
}
}
}
** Affects: ubuntu-ui-toolkit (Ubuntu)
Importance: Undecided
Assignee: Tim Peeters (tpeeters)
Status: New
** Changed in: ubuntu-ui-toolkit (Ubuntu)
Assignee: (unassigned) => Tim Peeters (tpeeters)
** Description changed:
r1886
- Header should not update (or stop updating) Flickable content margins in case either one of its sides have null size or it's !visible.
+ Header should not update (or it should stop updating) Flickable content margins in case either one of its sides have 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
+ 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
+ property alias page: pageItem
+ property alias standardHeader: standardHeaderItem
+ property alias editHeader: editHeaderItem
- Page {
- id: pageItem
- header: standardHeaderItem
+ 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
- }
+ 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")
- }
- }
- }
- }
- }
+ 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")
+ }
+ }
+ }
+ }
+ }
** Description changed:
r1886
- Header should not update (or it should stop updating) Flickable content margins in case either one of its sides have null size or it's !visible.
+ 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")
}
}
}
}
}
--
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 ubuntu-ui-toolkit package in Ubuntu:
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/ubuntu/+source/ubuntu-ui-toolkit/+bug/1560458/+subscriptions
Follow ups
