linphone-desktop/tests/ui/modules/Common/Collapse.qml

97 lines
2.3 KiB
QML

import QtQuick 2.7
import Common 1.0
import Common.Styles 1.0
import Utils 1.0
// =============================================================================
// A simple component to build collapsed item.
// =============================================================================
Item {
id: collapse
// ---------------------------------------------------------------------------
property var target
property int targetHeight
property bool _collapsed: false
property var _savedHeight
// ---------------------------------------------------------------------------
signal collapsed (bool collapsed)
// ---------------------------------------------------------------------------
function setCollapsed (status) {
if (_collapsed === status) {
return
}
_collapsed = status
// Warning: Unable to use `PropertyChanges` because the change order is unknown.
// It exists a bug on Ubuntu if the `height` property is changed before `minimumHeight`.
if (_collapsed) {
_savedHeight = Utils.extractProperties(target, [
'height',
'maximumHeight',
'minimumHeight'
])
target.minimumHeight = collapse.targetHeight
target.maximumHeight = Constants.sizeMax
target.height = collapse.targetHeight
} else {
target.minimumHeight = _savedHeight.minimumHeight
target.maximumHeight = _savedHeight.maximumHeight
target.height = _savedHeight.height
}
}
// ---------------------------------------------------------------------------
implicitHeight: button.iconSize
implicitWidth: button.iconSize
property int savedHeight
ActionButton {
id: button
anchors.centerIn: parent
icon: 'collapse'
iconSize: CollapseStyle.iconSize
useStates: false
onClicked: setCollapsed(!_collapsed)
}
// ---------------------------------------------------------------------------
states: State {
when: _collapsed
PropertyChanges {
rotation: 180
target: button
}
}
transitions: Transition {
SequentialAnimation {
RotationAnimation {
direction: RotationAnimation.Clockwise
duration: CollapseStyle.animationDuration
property: 'rotation'
target: button
}
ScriptAction {
script: collapsed(_collapsed)
}
}
}
}