mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2024-11-30 06:00:20 +00:00
Code Issues Projects Releases Packages Wiki Activity
subsurface/mobile-widgets/qml/MapWidgetContextMenu.qml

125 lines
3.7 KiB
QML
Raw Normal View History

mapwidgetcontextmenu: add placeholder QML This QML component will be used to provide a context menu for the QML map widget. Include the file in QRC and test it's creation in MapWidget.qml. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 13:58:21 +00:00
// SPDX-License-Identifier: GPL-2.0
import QtQuick 2.7
Item {
mapwidgetcontextmenu: add the actionSelected() signal The actionSelected() signal is now dispatched when the user selects an action from the menu (see the "actions" object). Then the declaration of the MapWidgetContextMenu object in mapwidget.qml can catch that signal in the onActionSelected() slot and obtain the action via switch() branching. The actions enumeration is kept in QML for now, with the idea that specific C++ methods from the mapwidgethelper class will be called directly (if marked as Q_INVOCABLE), instead of a generic onMapAction(action) C++ method in the helper. But if the actions are possible from QML (like copying to clipboard) and are also small and non-expensive, it might be better to keep them in mapwidget.qml. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 22:28:58 +00:00
id: container
signal actionSelected(int action)
readonly property var actions: {
mapwidgetcontextmenu: rearrange some of the QML declarations - move the readonly properties near the top of the root Item - move the rest of the properties bellow the readonly properties - make the ListView Timer as a child of the ListView - slight rename of the timer ID Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:55:13 +00:00
"OPEN_LOCATION_IN_GOOGLE_MAPS": 0,
"COPY_LOCATION_DECIMAL": 1,
mapwidget.qml: add menu action for selecting visible locations MapWidgetContextMenu now has a new action (SELECT_VISIBLE_LOCATIONS), that will invoke the MapWidgetHelper method selectVisibleLocations(). Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-08-07 00:02:16 +00:00
"COPY_LOCATION_SEXAGESIMAL": 2,
"SELECT_VISIBLE_LOCATIONS": 3
mapwidgetcontextmenu: rearrange some of the QML declarations - move the readonly properties near the top of the root Item - move the rest of the properties bellow the readonly properties - make the ListView Timer as a child of the ListView - slight rename of the timer ID Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:55:13 +00:00
}
readonly property var menuItemData: [
mapwidgetcontextmenu: add the actionSelected() signal The actionSelected() signal is now dispatched when the user selects an action from the menu (see the "actions" object). Then the declaration of the MapWidgetContextMenu object in mapwidget.qml can catch that signal in the onActionSelected() slot and obtain the action via switch() branching. The actions enumeration is kept in QML for now, with the idea that specific C++ methods from the mapwidgethelper class will be called directly (if marked as Q_INVOCABLE), instead of a generic onMapAction(action) C++ method in the helper. But if the actions are possible from QML (like copying to clipboard) and are also small and non-expensive, it might be better to keep them in mapwidget.qml. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 22:28:58 +00:00
{ idx: actions.OPEN_LOCATION_IN_GOOGLE_MAPS, itemText: qsTr("Open location in Google Maps") },
{ idx: actions.COPY_LOCATION_DECIMAL, itemText: qsTr("Copy location to clipboard (decimal)") },
mapwidget.qml: add menu action for selecting visible locations MapWidgetContextMenu now has a new action (SELECT_VISIBLE_LOCATIONS), that will invoke the MapWidgetHelper method selectVisibleLocations(). Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-08-07 00:02:16 +00:00
{ idx: actions.COPY_LOCATION_SEXAGESIMAL, itemText: qsTr("Copy location to clipboard (sexagesimal)") },
{ idx: actions.SELECT_VISIBLE_LOCATIONS, itemText: qsTr("Select visible dive locations") }
mapwidgetcontextmenu: rearrange some of the QML declarations - move the readonly properties near the top of the root Item - move the rest of the properties bellow the readonly properties - make the ListView Timer as a child of the ListView - slight rename of the timer ID Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:55:13 +00:00
]
readonly property real itemTextPadding: 10.0
mapwidgetcontextmenu: slight increase of element size Increase the font and element height a little to make it easier to click. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-25 20:54:16 +00:00
readonly property real itemHeight: 34.0
mapwidgetcontextmenu: rearrange some of the QML declarations - move the readonly properties near the top of the root Item - move the rest of the properties bellow the readonly properties - make the ListView Timer as a child of the ListView - slight rename of the timer ID Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:55:13 +00:00
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"
property int listViewIsVisible: -1
property real maxItemWidth: 0.0
mapwidgetcontextmenu: add an Image for the context menu toggle - add the PNG file into the QRC - add a simple scale animation for the Image on click Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 15:25:01 +00:00
Image {
id: contextMenuImage
mapwidgetcontextmenu: position the contextMenu on the map The anchor of the menu itself will be positioned near the edge of the map widget, while the menu contents will have negative coordinates. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 16:25:59 +00:00
x: -width
mapwidgetcontextmenu: add an Image for the context menu toggle - add the PNG file into the QRC - add a simple scale animation for the Image on click Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 15:25:01 +00:00
source: "qrc:///mapwidget-context-menu"
SequentialAnimation {
id:contextMenuImageAnimation
map: whitespace cleanup in QML and C++ files - remove ";"s - remove {} where not needed or move them to the same line Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-28 13:40:28 +00:00
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 }
mapwidgetcontextmenu: add an Image for the context menu toggle - add the PNG file into the QRC - add a simple scale animation for the Image on click Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 15:25:01 +00:00
}
MouseArea {
anchors.fill: parent
onClicked: {
contextMenuImageAnimation.restart()
mapwidgetcontextmenu: add a listViewIsVisible integer property This property would act like a state flag. If -1 (default) no QML State animation will be pefromed, otherwise the ListView will either fade in (1), or fade out (0) when the user clicks the context menu button (Image) or selects an item from the list. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:41:37 +00:00
listViewIsVisible = (listViewIsVisible !== 1) ? 1 : 0
mapwidgetcontextmenu: add an Image for the context menu toggle - add the PNG file into the QRC - add a simple scale animation for the Image on click Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 15:25:01 +00:00
}
}
mapwidgetcontextmenu: add placeholder QML This QML component will be used to provide a context menu for the QML map widget. Include the file in QRC and test it's creation in MapWidget.qml. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 13:58:21 +00:00
}
mapwidgetcontextmenu: create a ListModel for the context menu Menu item indexes are enumerated in the object menuItemIndex, while menuItemData, holds an array of objects which will define the number of items, with indexes (idx) and text (itemText). When the ListModel is created, it's dynamically populated from from menuItemData. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 16:30:34 +00:00
ListModel {
id: listModel
property int selectedIdx: -1
Component.onCompleted: {
for (var i = 0; i < menuItemData.length; i++)
append(menuItemData[i]);
}
}
mapwidgetcontextmenu: add a model delegate for the ListView The ListView delegate is a simple Component with a parent Rectangle. It contains a text field with the ListView action. This patch also defines some properties for the delegate animations and looks. The property maxItemWidth tracks the width of all item text, and makes the width of all items be of that value. The above prevents potential issues when a fixed width item is used and some translated language string cannot be fit inside of it. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:38:03 +00:00
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
mapwidgetcontextmenu: slight increase of element size Increase the font and element height a little to make it easier to click. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-25 20:54:16 +00:00
font.pointSize: 10.0
mapwidgetcontextmenu: add a model delegate for the ListView The ListView delegate is a simple Component with a parent Rectangle. It contains a text field with the ListView action. This patch also defines some properties for the delegate animations and looks. The property maxItemWidth tracks the width of all item text, and makes the width of all items be of that value. The above prevents potential issues when a fixed width item is used and some translated language string cannot be fit inside of it. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:38:03 +00:00
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 }}
}
}
mapwidgetcontextmenu: add a listViewIsVisible integer property This property would act like a state flag. If -1 (default) no QML State animation will be pefromed, otherwise the ListView will either fade in (1), or fade out (0) when the user clicks the context menu button (Image) or selects an item from the list. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:41:37 +00:00
mapwidgetcontextmenu: add the ListView component 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>
2017-07-20 21:49:31 +00:00
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
mapwidgetcontextmenu: rearrange some of the QML declarations - move the readonly properties near the top of the root Item - move the rest of the properties bellow the readonly properties - make the ListView Timer as a child of the ListView - slight rename of the timer ID Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:55:13 +00:00
Timer {
id: timerListViewVisible
running: false
repeat: false
interval: itemAnimationDuration + 50
onTriggered: listViewIsVisible = 0
}
mapwidgetcontextmenu: add the ListView component 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>
2017-07-20 21:49:31 +00:00
MouseArea {
anchors.fill: parent
onClicked: {
if (opacity < 1.0)
return;
mapwidgetcontextmenu: add the actionSelected() signal The actionSelected() signal is now dispatched when the user selects an action from the menu (see the "actions" object). Then the declaration of the MapWidgetContextMenu object in mapwidget.qml can catch that signal in the onActionSelected() slot and obtain the action via switch() branching. The actions enumeration is kept in QML for now, with the idea that specific C++ methods from the mapwidgethelper class will be called directly (if marked as Q_INVOCABLE), instead of a generic onMapAction(action) C++ method in the helper. But if the actions are possible from QML (like copying to clipboard) and are also small and non-expensive, it might be better to keep them in mapwidget.qml. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 22:28:58 +00:00
var idx = listView.indexAt(mouseX, mouseY)
listModel.selectedIdx = idx
container.actionSelected(idx)
mapwidgetcontextmenu: rearrange some of the QML declarations - move the readonly properties near the top of the root Item - move the rest of the properties bellow the readonly properties - make the ListView Timer as a child of the ListView - slight rename of the timer ID Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 21:55:13 +00:00
timerListViewVisible.restart()
mapwidgetcontextmenu: add the ListView component 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>
2017-07-20 21:49:31 +00:00
}
}
states: [
State { when: listViewIsVisible === 1; PropertyChanges { target: listView; opacity: 1.0 }},
State { when: listViewIsVisible === 0; PropertyChanges { target: listView; opacity: 0.0 }}
]
map: whitespace cleanup in QML and C++ files - remove ";"s - remove {} where not needed or move them to the same line Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-28 13:40:28 +00:00
transitions: Transition { NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad }}
mapwidgetcontextmenu: add the ListView component 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>
2017-07-20 21:49:31 +00:00
}
mapwidgetcontextmenu: add placeholder QML This QML component will be used to provide a context menu for the QML map widget. Include the file in QRC and test it's creation in MapWidget.qml. Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
2017-07-20 13:58:21 +00:00
}
Reference in a new issue Copy permalink