mirror of
https://github.com/subsurface/subsurface.git
synced 2025-02-19 22:16:15 +00:00
18d910f6a7
NOTES: - the ListView object uses lsitItemDelagate to display all elements from the model listModel - onCountChanged() is used to adjust the x position based on the maxItemWidth property which is calculated when the items are populated with text - onVisibleChanged() is used to deselect the last selected item by calling listModel.selectedIdx = -1 - onOpacityChanged() i sued to make sure that the View is hidden if the opacity becomes 0.0 - inside the View there is a MouseAre which obtains the selected item via indexAt(x,y) - there is a Timer with id listViewVisibleTimer, which is called each time the user selects an item from the list and the timer performs a "delayed hide" - a couple of State and a Transition objects are used to preform smooth fade-in / out animation when the ListView is hidden or becomes visible Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
125 lines
3.5 KiB
QML
125 lines
3.5 KiB
QML
// SPDX-License-Identifier: GPL-2.0
|
|
import QtQuick 2.7
|
|
|
|
Item {
|
|
Image {
|
|
id: contextMenuImage
|
|
x: -width
|
|
source: "qrc:///mapwidget-context-menu"
|
|
|
|
SequentialAnimation {
|
|
id:contextMenuImageAnimation
|
|
PropertyAnimation {
|
|
target: contextMenuImage; property: "scale"; from: 1.0; to: 0.8; duration: 80;
|
|
}
|
|
PropertyAnimation {
|
|
target: contextMenuImage; property: "scale"; from: 0.8; to: 1.0; duration: 60;
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
contextMenuImageAnimation.restart()
|
|
listViewIsVisible = (listViewIsVisible !== 1) ? 1 : 0
|
|
}
|
|
}
|
|
}
|
|
|
|
readonly property var menuItemIndex: {
|
|
"OPEN_LOCATION_IN_GOOGLE_MAPS": 0,
|
|
"COPY_LOCATION_DECIMAL": 1,
|
|
"COPY_LOCATION_SEXAGESIMAL": 2
|
|
}
|
|
|
|
readonly property var menuItemData: [
|
|
{ idx: menuItemIndex.OPEN_LOCATION_IN_GOOGLE_MAPS, itemText: qsTr("Open location in Google Maps") },
|
|
{ idx: menuItemIndex.COPY_LOCATION_DECIMAL, itemText: qsTr("Copy location to clipboard (decimal)") },
|
|
{ idx: menuItemIndex.COPY_LOCATION_SEXAGESIMAL, itemText: qsTr("Copy location to clipboard (sexagesimal)") }
|
|
]
|
|
|
|
ListModel {
|
|
id: listModel
|
|
property int selectedIdx: -1
|
|
Component.onCompleted: {
|
|
for (var i = 0; i < menuItemData.length; i++)
|
|
append(menuItemData[i]);
|
|
}
|
|
}
|
|
|
|
property real maxItemWidth: 0.0
|
|
readonly property real itemTextPadding: 10.0
|
|
readonly property real itemHeight: 30.0
|
|
readonly property int itemAnimationDuration: 100
|
|
readonly property color colorItemBackground: "#dedede"
|
|
readonly property color colorItemBackgroundSelected: "grey"
|
|
readonly property color colorItemText: "black"
|
|
readonly property color colorItemTextSelected: "#dedede"
|
|
readonly property color colorItemBorder: "black"
|
|
|
|
Component {
|
|
id: listItemDelegate
|
|
Rectangle {
|
|
color: model.idx === listModel.selectedIdx ? colorItemBackgroundSelected : colorItemBackground
|
|
width: maxItemWidth
|
|
height: itemHeight
|
|
border.color: colorItemBorder
|
|
Text {
|
|
x: itemTextPadding
|
|
height: itemHeight
|
|
verticalAlignment: Text.AlignVCenter
|
|
text: model.itemText
|
|
color: model.idx === listModel.selectedIdx ? colorItemTextSelected : colorItemText
|
|
onWidthChanged: {
|
|
if (width + itemTextPadding * 2.0 > maxItemWidth)
|
|
maxItemWidth = width + itemTextPadding * 2.0
|
|
}
|
|
Behavior on color { ColorAnimation { duration: itemAnimationDuration }}
|
|
}
|
|
Behavior on color { ColorAnimation { duration: itemAnimationDuration }}
|
|
}
|
|
}
|
|
|
|
property int listViewIsVisible: -1
|
|
|
|
ListView {
|
|
id: listView
|
|
y: contextMenuImage.y + contextMenuImage.height + 10;
|
|
width: maxItemWidth;
|
|
height: listModel.count * itemHeight
|
|
visible: false
|
|
opacity: 0.0
|
|
interactive: false
|
|
model: listModel
|
|
delegate: listItemDelegate
|
|
|
|
onCountChanged: x = -maxItemWidth
|
|
onVisibleChanged: listModel.selectedIdx = -1
|
|
onOpacityChanged: visible = opacity != 0.0
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
if (opacity < 1.0)
|
|
return;
|
|
listModel.selectedIdx = listView.indexAt(mouseX, mouseY)
|
|
listViewVisibleTimer.restart()
|
|
}
|
|
}
|
|
states: [
|
|
State { when: listViewIsVisible === 1; PropertyChanges { target: listView; opacity: 1.0 }},
|
|
State { when: listViewIsVisible === 0; PropertyChanges { target: listView; opacity: 0.0 }}
|
|
]
|
|
transitions: Transition {
|
|
NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad }
|
|
}
|
|
}
|
|
|
|
Timer {
|
|
id: listViewVisibleTimer
|
|
running: false
|
|
repeat: false
|
|
interval: itemAnimationDuration + 50
|
|
onTriggered: listViewIsVisible = 0
|
|
}
|
|
}
|