Files
pay/guis/mobile/PopupOverlay.qml
T
tomFlowee 58de1827e0 Improve display of tx-details
The popup showing details of a certain list-item had the down-side that
the list item we selected was made darker with the rest of the screen,
making it harder to understand the whole info.
This change repeats the clicked item inside the popup in a way that
makes it immediately clear which transaction we are showing details of.
2024-07-03 23:06:15 +02:00

130 lines
4.6 KiB
QML

/*
* This file is part of the Flowee project
* Copyright (C) 2022-2024 Tom Zander <tom@flowee.org>
*
* This program 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.
*
* This program 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 this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick
import QtQuick.Controls as QQC2
import "../Flowee" as Flowee
FocusScope {
id: root
anchors.fill: parent
enabled: thePopup.visible
property bool isOpen: false;
/**
* @param sourceComponent is a Component we set on the loader.
* @param target is the visual item we position next to (vertically).
* @param overlayComponent is a component that we place on top of the
* \a 'target' item, but inside of the popup to avoid dimming.
* @returns the item instance of the sourceComponent template
*/
function open(sourceComponent, target, overlayComponent) {
thePopup.palette = mainWindow.palette
thePopup.width = root.width - 18
thePopup.x = (width - thePopup.width) / 2
thePopup.sourceRect = root.mapFromItem(target, 0, 0, target.width, target.height);
overlayLoader.sourceComponent = overlayComponent;
loader.sourceComponent = sourceComponent; // last, as it starts the loading
return loader.item;
}
function close() {
thePopup.visible = false;
}
QQC2.Popup {
id: thePopup
width: parent.width
height: 100
modal: true
closePolicy: QQC2.Popup.CloseOnEscape + QQC2.Popup.CloseOnReleaseOutside
property rect sourceRect: Qt.rect(0, 0, 0, 0)
onVisibleChanged: {
if (!visible) { // closing
loader.sourceComponent = undefined;
}
root.isOpen = visible; // ensure listeners of that property get notified after we acted on visibility changes.
}
background: Rectangle {
color: palette.light
border.color: palette.midlight
border.width: 1
radius: 5
}
Loader {
id: loader
width: parent.width
onLoaded: {
// heightMonitor.target = item;
thePopup.visible = true;
root.forceActiveFocus();
}
onHeightChanged: {
if (item == null)
return;
var h = loader.item.implicitHeight
thePopup.height = h + 20; // 20 is the top and bottom inset of the popup
var rect = thePopup.sourceRect;
if (overlayLoader.item) { // the overlay is supposed to be at the same position as the sourceRect
var h2 = overlayLoader.height
thePopup.height += h2 + 10;
if (root.height - rect.bottom >= h) { // fits below
thePopup.y = rect.bottom - h2 - 22;
overlayLoader.y = 0
loader.y = h2 + 10;
}
else if (h < rect.y) { // fits above
thePopup.y = rect.y - h;
overlayLoader.y = h + 10;
loader.y = 0;
}
else {
thePopup.y = root.height - h; // make it bottom aligned, even if it overlaps
overlayLoader.y = 0 // item above
loader.y = h2 + 10;
}
return;
}
if (root.height - rect.bottom >= h) // fits below
thePopup.y = rect.bottom;
else if (h < rect.y) // fits above
thePopup.y = rect.y - h;
else
thePopup.y = root.height - h; // make it bottom aligned, even if it overlaps
}
}
Loader {
// use offsets to counter the popup insets
width: parent.width + 40
x: -20
id: overlayLoader
}
}
Keys.onPressed: (event)=> {
if (event.key === Qt.Key_Back || event.key === Qt.Key_Escape) {
event.accepted = true;
root.close();
}
}
}