--- a/components/timezoneselector/GeoJsonDelegate.qml +++ b/components/timezoneselector/GeoJsonDelegate.qml @@ -68,7 +68,7 @@ property bool thisItemSelected: root.selectedTimeZone == modelData?.properties?.tzid onThisItemSelectedChanged: { - if (!thisItemSelected) return; + if (!thisItemSelected || root.selectingZoneOnMap) return; view.animateCenterTo(delegateChooser.centerOf(rect)) delegateChooser.animateZoomLevel(delegateChooser.suggestedZoomOf(rect)) } @@ -77,7 +77,7 @@ property bool tzidselected: root.selectedTimeZone == tzid geoShape: modelData.data - opacity: tzidselected ? selectedOpacity : (tzidhover ? delegateChooser.hoveredOpacity : delegateChooser.defaultOpacity) + opacity: 0 color: delegateChooser.defaultColor border { width: 2 @@ -88,11 +88,16 @@ TapHandler { onTapped: { + const mapPosition = view.map.mapFromItem(mapPolygon, point.position) + root.selectedMapMarker = {timeZone: tzid, coordinate: view.map.toCoordinate(mapPosition)} + root.selectingZoneOnMap = true root.selectedTimeZone = tzid + root.selectingZoneOnMap = false } } HoverHandler { + cursorShape: Qt.PointingHandCursor enabled: !!tzid onHoveredChanged: { if (hovered) { @@ -130,7 +135,7 @@ property bool thisItemSelected: root.selectedTimeZone === tzid onThisItemSelectedChanged: { - if (!thisItemSelected) return; + if (!thisItemSelected || root.selectingZoneOnMap) return; view.animateCenterTo(delegateChooser.centerOf(rect)) delegateChooser.animateZoomLevel(delegateChooser.suggestedZoomOf(rect)) } @@ -140,7 +145,7 @@ DelegateChoice { roleValue: "FeatureCollection" delegate: MapItemView { - model: modelData.data + model: modelData.data.filter(feature => !root.excludedTimeZones.includes(feature?.properties?.tzid)) delegate: delegateChooser } } --- a/components/timezoneselector/TimezoneSelector.qml +++ b/components/timezoneselector/TimezoneSelector.qml @@ -24,6 +24,43 @@ Item { id: root + component TimezoneMarker: MapQuickItem { + id: marker + property string timezoneName + autoFadeIn: false + anchorPoint: Qt.point(sourceItem.width / 2, sourceItem.height) + + sourceItem: Column { + enabled: false + spacing: Kirigami.Units.smallSpacing / 2 + + QQC2.Label { + text: marker.timezoneName + color: "white" + font.bold: true + padding: Kirigami.Units.smallSpacing + + background: Rectangle { + color: "#202124" + radius: Kirigami.Units.smallSpacing + } + } + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + width: Kirigami.Units.iconSizes.small + height: width + radius: width / 2 + color: Kirigami.Theme.highlightColor + border.color: Kirigami.Theme.textColor + border.width: 2 + } + } + } + + property var selectedMapMarker: ({coordinate: QtPositioning.coordinate()}) + property bool selectingZoneOnMap: false + implicitHeight: Kirigami.Settings.isMobile ? mobileFormCard.implicitHeight : 0 //BEGIN properties @@ -45,7 +82,11 @@ property string hoveredTimeZone: "" //END properties - property var availableMapTimeZones: geoDatabase.model[0].data.map(zone => zone?.properties?.tzid) + readonly property var excludedTimeZones: [ + "Europe/Simferopol" + ] + property var availableMapTimeZones: geoDatabase.model[0].data + .map(zone => zone?.properties?.tzid).filter(tzid => !root.excludedTimeZones.includes(tzid)) GeoJsonData { id: geoDatabase @@ -62,7 +101,7 @@ availableTimeZones.forEach(str => { let tzid = String(str) - if (tzid.includes('/')) { + if (tzid.includes('/') && !root.excludedTimeZones.includes(tzid)) { let [prefix, suffix] = root.split(tzid) @@ -193,6 +232,7 @@ running: false } function animateCenterTo(coordinate) { + root.selectedMapMarker = {timeZone: root.selectedTimeZone, coordinate} coordAnimation.to = coordinate coordAnimation.running = true } @@ -233,6 +273,24 @@ delegate: GeoJsonDelegate {} } + HoverHandler { + id: mapHoverHandler + } + + TimezoneMarker { + parent: view.map + visible: !!root.hoveredTimeZone && mapHoverHandler.hovered && root.hoveredTimeZone !== root.selectedTimeZone + coordinate: view.map.toCoordinate(view.map.mapFromItem(view, mapHoverHandler.point.position)) + timezoneName: root.understandable(root.hoveredTimeZone) + } + + TimezoneMarker { + parent: view.map + visible: root.selectedMapMarker.timeZone === root.selectedTimeZone + coordinate: root.selectedMapMarker.coordinate + timezoneName: root.understandable(root.selectedTimeZone) + } + RowLayout { spacing: Kirigami.Units.smallSpacing anchors {