From 48d08b1f885c03784446445e5d43d9a89659bc7e Mon Sep 17 00:00:00 2001 From: Fabien Castan Date: Tue, 20 Aug 2024 23:44:34 +0200 Subject: [PATCH] [ui] GraphEditor: improve alignments Reduce usage of anchors (except centerIn/fill). Display of Next/Previous for IntSelector. --- meshroom/ui/qml/Controls/IntSelector.qml | 145 +++++++++----------- meshroom/ui/qml/GraphEditor/Edge.qml | 15 +- meshroom/ui/qml/GraphEditor/GraphEditor.qml | 12 +- meshroom/ui/qml/Viewer/SequencePlayer.qml | 2 + 4 files changed, 81 insertions(+), 93 deletions(-) diff --git a/meshroom/ui/qml/Controls/IntSelector.qml b/meshroom/ui/qml/Controls/IntSelector.qml index 3dc0f5e9..d61cba26 100644 --- a/meshroom/ui/qml/Controls/IntSelector.qml +++ b/meshroom/ui/qml/Controls/IntSelector.qml @@ -7,95 +7,86 @@ import QtQuick.Layouts 1.11 * IntSelector with arrows and a text input to select a number */ -Item { +Row { id: root + property string tooltipText: "" property int value: 0 property var range: { "min" : 0, "max" : 0 } - Layout.preferredWidth: previousIntButton.width + intMetrics.width + nextIntButton.width - Layout.preferredHeight: intInput.height + Layout.alignment: Qt.AlignVCenter - MouseArea { - id: mouseAreaIntLabel + spacing: 0 + property bool displayButtons: previousIntButton.hovered || intInputMouseArea.containsMouse || nextIntButton.hovered + property real buttonsOpacity: displayButtons ? 1.0 : 0.0 - anchors.fill: parent + MaterialToolButton { + id: previousIntButton - hoverEnabled: true + opacity: buttonsOpacity + width: 10 + text: MaterialIcons.navigate_before + ToolTip.text: "Previous" - onEntered: { - previousIntButton.opacity = 1 - nextIntButton.opacity = 1 - } - - onExited: { - previousIntButton.opacity = 0 - nextIntButton.opacity = 0 - } - - MaterialToolButton { - id: previousIntButton - - anchors.verticalCenter: mouseAreaIntLabel.verticalCenter - - opacity: 0 - width: 10 - text: MaterialIcons.navigate_before - ToolTip.text: "Previous Integer" - - onClicked: { - if (value > range.min) { - value -= 1 - } + onClicked: { + if (value > range.min) { + value -= 1 } } - - TextInput { - id: intInput - - anchors.horizontalCenter: mouseAreaIntLabel.horizontalCenter - anchors.verticalCenter: mouseAreaIntLabel.verticalCenter - Layout.preferredWidth: intMetrics.width - - color: palette.text - horizontalAlignment: Text.AlignHCenter - selectByMouse: true - - text: value - - onEditingFinished: { - // We first assign the frame to the entered text even if it is an invalid frame number. We do it for extreme cases, for example without doing it, if we are at 0, and put a negative number, value would be still 0 and nothing happens but we will still see the wrong number - value = parseInt(text) - value = Math.min(range.max, Math.max(range.min, parseInt(text))) - focus = false - } - } - - MaterialToolButton { - id: nextIntButton - - anchors.right: mouseAreaIntLabel.right - anchors.verticalCenter: mouseAreaIntLabel.verticalCenter - - width: 10 - opacity: 0 - text: MaterialIcons.navigate_next - ToolTip.text: "Next Integer" - - onClicked: { - if (value < range.max) { - value += 1 - } - } - } - - TextMetrics { - id: intMetrics - - font: intInput.font - text: "10000" - } } + TextInput { + id: intInput + + ToolTip.text: tooltipText + ToolTip.visible: tooltipText && intInputMouseArea.containsMouse + + width: intMetrics.width + height: previousIntButton.height + + color: palette.text + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + selectByMouse: true + + text: value + + onEditingFinished: { + // We first assign the frame to the entered text even if it is an invalid frame number. We do it for extreme cases, for example without doing it, if we are at 0, and put a negative number, value would be still 0 and nothing happens but we will still see the wrong number + value = parseInt(text) + value = Math.min(range.max, Math.max(range.min, parseInt(text))) + focus = false + } + + MouseArea { + id: intInputMouseArea + anchors.fill: parent + hoverEnabled: true + acceptedButtons: Qt.NoButton + propagateComposedEvents: true + } + } + + MaterialToolButton { + id: nextIntButton + + width: 10 + opacity: buttonsOpacity + text: MaterialIcons.navigate_next + ToolTip.text: "Next" + + onClicked: { + if (value < range.max) { + value += 1 + } + } + } + + TextMetrics { + id: intMetrics + + font: intInput.font + text: "10000" + } } \ No newline at end of file diff --git a/meshroom/ui/qml/GraphEditor/Edge.qml b/meshroom/ui/qml/GraphEditor/Edge.qml index 3b95392b..a7374222 100644 --- a/meshroom/ui/qml/GraphEditor/Edge.qml +++ b/meshroom/ui/qml/GraphEditor/Edge.qml @@ -78,21 +78,20 @@ Item { visible: root.isForLoop Rectangle { anchors.centerIn: parent - property int margin: 1 + property int margin: 2 width: childrenRect.width + 2 * margin height: childrenRect.height + 2 * margin radius: width color: path.strokeColor MaterialToolLabel { id: icon - x: parent.margin - y: parent.margin - iconText: MaterialIcons.loop - label: (root.iteration + 1) + "/" + root.loopSize + anchors.centerIn: parent - color: palette.base - - ToolTip.text: "This is a for loop" + iconText: MaterialIcons.loop + label: (root.iteration + 1) + "/" + root.loopSize + " " + + color: palette.base + ToolTip.text: "Foreach Loop" } } } diff --git a/meshroom/ui/qml/GraphEditor/GraphEditor.qml b/meshroom/ui/qml/GraphEditor/GraphEditor.qml index 5b929385..669f55f0 100755 --- a/meshroom/ui/qml/GraphEditor/GraphEditor.qml +++ b/meshroom/ui/qml/GraphEditor/GraphEditor.qml @@ -388,10 +388,8 @@ Item { expandButton.canExpand = uigraph.canExpandForLoop(edgeMenu.currentEdge) } - contentItem: GridLayout { - layoutDirection: Qt.LeftToRight - columns: 2 - columnSpacing: 20 + contentItem: Row { + spacing: 20 Column { id: listAttrColumn @@ -403,13 +401,11 @@ Item { text: "Iteration:" color: activePalette.text - bottomPadding: 15 } IntSelector { + tooltipText: "Iterations" width: listAttrColumn.width - anchors.top: listAttrMenuText.bottom - anchors.horizontalCenter: listAttrColumn.horizontalCenter visible: edgeMenu.currentEdge && edgeMenu.forLoop // We add 1 to the index because of human readable index (starting at 1) @@ -439,7 +435,7 @@ Item { color: activePalette.text } - RowLayout { + Row { MaterialToolButton { font.pointSize: 13 ToolTip.text: "Remove edge" diff --git a/meshroom/ui/qml/Viewer/SequencePlayer.qml b/meshroom/ui/qml/Viewer/SequencePlayer.qml index 71886ec6..54c435f8 100644 --- a/meshroom/ui/qml/Viewer/SequencePlayer.qml +++ b/meshroom/ui/qml/Viewer/SequencePlayer.qml @@ -147,6 +147,8 @@ FloatingPane { IntSelector { id: frameInput + tooltipText: "Frame" + value: m.frame range: frameRange