[ui] GraphEditor: improve alignments

Reduce usage of anchors (except centerIn/fill).
Display of Next/Previous for IntSelector.

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.alignment: Qt.AlignVCenter
-    Layout.preferredHeight: intInput.height
 
-    MouseArea {
+    spacing: 0
-        id: mouseAreaIntLabel
+    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: {
+        onClicked: {
-            previousIntButton.opacity = 1
+            if (value > range.min) {
-            nextIntButton.opacity = 1
+                value -= 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
-                }
             }
         }
-
-        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"
+    }
 
 }

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
+                anchors.centerIn: parent
-                y: parent.margin
-                iconText: MaterialIcons.loop
-                label: (root.iteration + 1) + "/" + root.loopSize
 
-                color: palette.base
+                iconText: MaterialIcons.loop
-                
+                label: (root.iteration + 1) + "/" + root.loopSize + " "
-                ToolTip.text: "This is a for loop"
+
+                color: palette.base                
+                ToolTip.text: "Foreach Loop"
             }
         }
     }

meshroom/ui/qml/GraphEditor/GraphEditor.qml

@@ -388,10 +388,8 @@ Item {
                     expandButton.canExpand = uigraph.canExpandForLoop(edgeMenu.currentEdge)
                 }
 
-                contentItem: GridLayout {
+                contentItem: Row {
-                    layoutDirection: Qt.LeftToRight
+                    spacing: 20
-                    columns: 2
-                    columnSpacing: 20
 
                     Column {
                         id: listAttrColumn
@@ -403,13 +401,11 @@ Item {
                             text: "<b>Iteration:</b>"
 
                             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"

meshroom/ui/qml/Viewer/SequencePlayer.qml

@@ -147,6 +147,8 @@ FloatingPane {
         IntSelector {
             id: frameInput
 
+            tooltipText: "Frame"
+
             value: m.frame
             range: frameRange