[ui] GraphEditor: improve alignments

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

meshroom/ui/qml/Controls/IntSelector.qml

@@ -7,41 +7,26 @@ 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
-
-        hoverEnabled: true
-
-        onEntered: {
-            previousIntButton.opacity = 1
-            nextIntButton.opacity = 1
-        }
-
-        onExited: {
-            previousIntButton.opacity = 0
-            nextIntButton.opacity = 0
-        } 
 
     MaterialToolButton {
         id: previousIntButton
 
-            anchors.verticalCenter: mouseAreaIntLabel.verticalCenter
+        opacity: buttonsOpacity
-
-            opacity: 0
         width: 10
         text: MaterialIcons.navigate_before
-            ToolTip.text: "Previous Integer"
+        ToolTip.text: "Previous"
 
         onClicked: {
             if (value > range.min) {
@@ -53,12 +38,15 @@ Item {
     TextInput {
         id: intInput
 
-            anchors.horizontalCenter: mouseAreaIntLabel.horizontalCenter
+        ToolTip.text: tooltipText
-            anchors.verticalCenter: mouseAreaIntLabel.verticalCenter
+        ToolTip.visible: tooltipText && intInputMouseArea.containsMouse
-            Layout.preferredWidth: intMetrics.width
+
+        width: intMetrics.width
+        height: previousIntButton.height
 
         color: palette.text
         horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
         selectByMouse: true
 
         text: value
@@ -69,18 +57,23 @@ Item {
             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
 
-            anchors.right: mouseAreaIntLabel.right
-            anchors.verticalCenter: mouseAreaIntLabel.verticalCenter
-
         width: 10
-            opacity: 0
+        opacity: buttonsOpacity
         text: MaterialIcons.navigate_next
-            ToolTip.text: "Next Integer"
+        ToolTip.text: "Next"
 
         onClicked: {
             if (value < range.max) {
@@ -95,7 +88,5 @@ Item {
         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
+                label: (root.iteration + 1) + "/" + root.loopSize + " "
 
                 color: palette.base                
-                
+                ToolTip.text: "Foreach Loop"
-                ToolTip.text: "This is a for 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