harbour-fernschreiber/qml/components/settingsPage/AccordionItem.qml

116 lines
3.7 KiB
QML
Raw Normal View History

/*
Copyright (C) 2021 Sebastian J. Wolf and other contributors
This file is part of Fernschreiber.
Fernschreiber is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Fernschreiber is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.6
import Sailfish.Silica 1.0
Item {
id: area
width: parent.width
height: button.height + content.height
property alias icon: image
property alias text: label.text
property alias asynchronous: content.asynchronous
property bool expanded: false
default property alias els: content.sourceComponent
states: [
State {
when: area.expanded
PropertyChanges { target: image; rotation: 90 }
PropertyChanges { target: content; height: content.implicitHeight + Theme.paddingLarge; opacity: 1.0 }
}
]
transitions: Transition {
to: "*"
enabled: area.parent.animate
NumberAnimation { target: content; properties: "height, opacity"; duration: 200}
}
Connections {
target: area.parent
onSetActiveArea: {
var expand = (activeAreaTitle === area.text);
if(area.expanded && !expand && area.parent.scrollUpFlickable) {
area.parent.scrollUpFlickable(content.implicitHeight + Theme.paddingLarge);
}
area.expanded = expand;
}
}
BackgroundItem {
id: button
height: Theme.itemSizeMedium
onClicked: {
area.parent.animate = true;
area.parent.setActiveArea(area.expanded ? -1 : area.text)
}
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: Theme.rgba(Theme.highlightBackgroundColor, 0.15) }
GradientStop { position: 1.0; color: "transparent" }
}
}
Label {
id: label
anchors {
left: parent.left
right: image.left
verticalCenter: parent.verticalCenter
leftMargin: Theme.horizontalPageMargin + Theme.paddingLarge
rightMargin: Theme.paddingMedium
}
horizontalAlignment: Text.AlignRight
truncationMode: TruncationMode.Fade
font.pixelSize: Theme.fontSizeSmall
color: button.highlighted ? Theme.highlightColor : Theme.primaryColor
textFormat: Text.PlainText
}
HighlightImage {
id: image
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: Theme.horizontalPageMargin
}
width: visible ? Theme.iconSizeMedium : 0
highlighted: parent.highlighted
source: "image://theme/icon-m-right"
rotation: -90
}
}
Loader {
id: content
width: parent.width
height: 0
opacity: 0
anchors.top: button.bottom
asynchronous: true
clip: true
}
// Column {
// id: content
// width: parent.width
// anchors.top: button.bottom
// bottomPadding: Theme.paddingLarge
// height: 0
// opacity: 0
// clip: true
// }
}