feat(ProfileShowcase): Adds drop area in collapsed headers
- It adds an additional right component to `FoldableHeader.qml`. - It adds hidden button component in `hidden` foldable header. - It adds visibility buttons component in `in showcase` foldable header. Closes #13595
This commit is contained in:
parent
630da7caaa
commit
3425102990
|
@ -62,6 +62,9 @@ DoubleFlickableWithFolding {
|
||||||
|
|
||||||
property bool isAnyShowcaseDragActive: false
|
property bool isAnyShowcaseDragActive: false
|
||||||
property bool isAnyHiddenDragActive: false
|
property bool isAnyHiddenDragActive: false
|
||||||
|
|
||||||
|
property int additionalHeaderComponentWidth: 350 // by design
|
||||||
|
property int additionalHeaderComponentHeight: 40 // by design
|
||||||
}
|
}
|
||||||
|
|
||||||
clip: true
|
clip: true
|
||||||
|
@ -85,6 +88,17 @@ DoubleFlickableWithFolding {
|
||||||
width: ListView.view.width
|
width: ListView.view.width
|
||||||
title: qsTr("In showcase")
|
title: qsTr("In showcase")
|
||||||
folded: root.flickable1Folded
|
folded: root.flickable1Folded
|
||||||
|
rightAdditionalComponent: VisibilityDropAreaButtonsRow {
|
||||||
|
width: d.additionalHeaderComponentWidth
|
||||||
|
height: d.additionalHeaderComponentHeight
|
||||||
|
margins: 0
|
||||||
|
visible: root.flickable1Folded &&
|
||||||
|
(d.isAnyHiddenDragActive ||
|
||||||
|
parent.containsDrag ||
|
||||||
|
everyoneContainsDrag ||
|
||||||
|
contactsContainsDrag ||
|
||||||
|
verifiedContainsDrag)
|
||||||
|
}
|
||||||
|
|
||||||
onToggleFolding: root.flip1Folding()
|
onToggleFolding: root.flip1Folding()
|
||||||
}
|
}
|
||||||
|
@ -162,7 +176,6 @@ DoubleFlickableWithFolding {
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: ProfileUtils.defaultDelegateHeight
|
height: ProfileUtils.defaultDelegateHeight
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
|
|
||||||
visible: d.isAnyHiddenDragActive ||
|
visible: d.isAnyHiddenDragActive ||
|
||||||
parent.containsDrag ||
|
parent.containsDrag ||
|
||||||
everyoneContainsDrag ||
|
everyoneContainsDrag ||
|
||||||
|
@ -188,6 +201,19 @@ DoubleFlickableWithFolding {
|
||||||
width: ListView.view.width
|
width: ListView.view.width
|
||||||
title: qsTr("Hidden")
|
title: qsTr("Hidden")
|
||||||
folded: root.flickable2Folded
|
folded: root.flickable2Folded
|
||||||
|
rightAdditionalComponent: VisibilityDropAreaButton {
|
||||||
|
visible: root.flickable2Folded && (d.isAnyShowcaseDragActive || parent.containsDrag || containsDrag)
|
||||||
|
width: d.additionalHeaderComponentWidth
|
||||||
|
height: d.additionalHeaderComponentHeight
|
||||||
|
rightInset: 1
|
||||||
|
text: qsTr("Hide")
|
||||||
|
dropAreaKeys: d.dragShowcaseItemKey
|
||||||
|
|
||||||
|
onDropped: {
|
||||||
|
root.showcaseModel.setVisibilityByIndex(drop.source.visualIndex, visibility)
|
||||||
|
root.showcaseEntryChanged()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onToggleFolding: root.flip2Folding()
|
onToggleFolding: root.flip2Folding()
|
||||||
}
|
}
|
||||||
|
@ -337,6 +363,7 @@ DoubleFlickableWithFolding {
|
||||||
readonly property bool everyoneContainsDrag: dropAreaEveryone.containsDrag
|
readonly property bool everyoneContainsDrag: dropAreaEveryone.containsDrag
|
||||||
readonly property bool contactsContainsDrag: dropAreaContacts.containsDrag
|
readonly property bool contactsContainsDrag: dropAreaContacts.containsDrag
|
||||||
readonly property bool verifiedContainsDrag: dropAreaVerified.containsDrag
|
readonly property bool verifiedContainsDrag: dropAreaVerified.containsDrag
|
||||||
|
property int margins: Style.current.halfPadding
|
||||||
|
|
||||||
function dropped(drop, visibility) {
|
function dropped(drop, visibility) {
|
||||||
var showcaseObj = drop.source.showcaseObj
|
var showcaseObj = drop.source.showcaseObj
|
||||||
|
@ -355,7 +382,7 @@ DoubleFlickableWithFolding {
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: Style.current.halfPadding
|
anchors.margins: visibilityDropAreaRow.margins
|
||||||
spacing: Style.current.halfPadding
|
spacing: Style.current.halfPadding
|
||||||
|
|
||||||
VisibilityDropAreaButton {
|
VisibilityDropAreaButton {
|
||||||
|
|
|
@ -12,6 +12,7 @@ Rectangle {
|
||||||
property alias title: label.text
|
property alias title: label.text
|
||||||
property alias switchText: modeSwitch.text
|
property alias switchText: modeSwitch.text
|
||||||
property alias checked: modeSwitch.checked
|
property alias checked: modeSwitch.checked
|
||||||
|
property Component rightAdditionalComponent
|
||||||
|
|
||||||
signal toggleFolding
|
signal toggleFolding
|
||||||
signal toggleSwitch
|
signal toggleSwitch
|
||||||
|
@ -60,5 +61,8 @@ Rectangle {
|
||||||
font.pixelSize: 13
|
font.pixelSize: 13
|
||||||
onToggled: root.toggleSwitch()
|
onToggled: root.toggleSwitch()
|
||||||
}
|
}
|
||||||
|
Loader {
|
||||||
|
sourceComponent: root.rightAdditionalComponent
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue