[ui] GraphEditor: improve alignments

Reduce usage of anchors (except centerIn/fill).
Display of Next/Previous for IntSelector.
This commit is contained in:
Fabien Castan 2024-08-20 23:44:34 +02:00 committed by Aurore LAFAURIE
parent ff86a5182e
commit 48d08b1f88
4 changed files with 81 additions and 93 deletions

View file

@ -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"
}
}

View file

@ -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"
}
}
}

View file

@ -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: "<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"

View file

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