mirror of
https://github.com/logos-blockchain/lez-programs.git
synced 2026-07-03 13:39:38 +00:00
117 lines
4.6 KiB
QML
117 lines
4.6 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
|
|
import Logos.Theme
|
|
import Logos.Controls
|
|
|
|
// Vertical progress rail for the pool-creation flow (Uniswap-style): numbered
|
|
// steps connected by a line, with the active step highlighted and completed
|
|
// steps marked done. Read currentStep to drive which step is active. Clicking an
|
|
// already-reached step (index <= currentStep) emits stepClicked so the page can
|
|
// navigate back to it.
|
|
Item {
|
|
id: root
|
|
|
|
property int currentStep: 0
|
|
readonly property var steps: [
|
|
{ title: qsTr("Select token pair"), subtitle: qsTr("Pick the two tokens for the pool.") },
|
|
{ title: qsTr("Deposit amounts"), subtitle: qsTr("Set the initial liquidity.") }
|
|
]
|
|
|
|
signal stepClicked(int index)
|
|
|
|
implicitWidth: 240
|
|
implicitHeight: column.implicitHeight
|
|
|
|
ColumnLayout {
|
|
id: column
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
|
|
Repeater {
|
|
model: root.steps
|
|
|
|
delegate: Item {
|
|
id: stepItem
|
|
|
|
readonly property bool active: index === root.currentStep
|
|
readonly property bool done: index < root.currentStep
|
|
readonly property bool last: index === root.steps.length - 1
|
|
// Only steps already reached can be clicked (no jumping ahead).
|
|
readonly property bool reachable: index <= root.currentStep
|
|
|
|
Layout.fillWidth: true
|
|
implicitHeight: stepRow.implicitHeight
|
|
|
|
RowLayout {
|
|
id: stepRow
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
spacing: Theme.spacing.medium
|
|
|
|
// Indicator: numbered dot + connector line down to the next dot.
|
|
Item {
|
|
Layout.preferredWidth: 28
|
|
Layout.fillHeight: true
|
|
|
|
Rectangle {
|
|
id: dot
|
|
width: 28
|
|
height: 28
|
|
radius: 14
|
|
color: (stepItem.active || stepItem.done) ? Theme.palette.primary : Theme.palette.backgroundSecondary
|
|
border.width: 1
|
|
border.color: (stepItem.active || stepItem.done) ? Theme.palette.primary : Theme.palette.border
|
|
|
|
LogosText {
|
|
anchors.centerIn: parent
|
|
text: stepItem.done ? "✓" : (index + 1)
|
|
font.pixelSize: Theme.typography.secondaryText
|
|
font.bold: true
|
|
color: (stepItem.active || stepItem.done) ? Theme.palette.background : Theme.palette.textSecondary
|
|
}
|
|
}
|
|
Rectangle {
|
|
visible: !stepItem.last
|
|
width: 2
|
|
anchors.top: dot.bottom
|
|
anchors.bottom: parent.bottom
|
|
anchors.horizontalCenter: dot.horizontalCenter
|
|
color: stepItem.done ? Theme.palette.primary : Theme.palette.border
|
|
}
|
|
}
|
|
|
|
// Step text.
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
Layout.bottomMargin: stepItem.last ? 0 : Theme.spacing.xlarge
|
|
spacing: 2
|
|
|
|
LogosText {
|
|
text: modelData.title
|
|
font.pixelSize: Theme.typography.primaryText
|
|
font.bold: stepItem.active
|
|
color: (stepItem.active || stepItem.done) ? Theme.palette.text : Theme.palette.textSecondary
|
|
}
|
|
LogosText {
|
|
Layout.fillWidth: true
|
|
text: modelData.subtitle
|
|
wrapMode: Text.WordWrap
|
|
font.pixelSize: Theme.typography.secondaryText
|
|
color: Theme.palette.textSecondary
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
enabled: stepItem.reachable
|
|
cursorShape: stepItem.reachable ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
onClicked: root.stepClicked(index)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|