118 lines
3.1 KiB
QML
118 lines
3.1 KiB
QML
import QtQuick 2.5
|
|
import QtQuick.Controls 1.4
|
|
|
|
import "global"
|
|
|
|
Item {
|
|
id: baseItem
|
|
height: Utils.dp(70)
|
|
readonly property int _stepWidth: Utils.dp(60)
|
|
|
|
Rectangle {
|
|
id: rec1
|
|
anchors.horizontalCenter: baseItem.horizontalCenter
|
|
anchors.horizontalCenterOffset: _stepWidth
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 2 * _stepWidth
|
|
height: Utils.dp(2)
|
|
color: Constants.blue
|
|
}
|
|
|
|
Rectangle {
|
|
id: tCircle1
|
|
anchors.verticalCenter: rec1.verticalCenter
|
|
anchors.horizontalCenter: rec1.left
|
|
width: state === "active" ? Utils.dp(70) : Utils.dp(25) + border.width
|
|
height: width
|
|
radius: width / 2
|
|
color: Constants.background_color
|
|
border.color: "white"
|
|
border.width: state === "active" ? 2 : 0
|
|
|
|
state: "inactive"
|
|
states: [
|
|
State { name: "active"
|
|
PropertyChanges { target: innerDisc; width: Utils.dp(50) }
|
|
},
|
|
State { name: "inactive"
|
|
PropertyChanges { target: innerDisc; width: Utils.dp(25) }
|
|
}
|
|
]
|
|
|
|
transitions: [
|
|
Transition { to: "active"
|
|
PropertyAnimation { target: innerDisc; property: "width"; duration: 1500; easing.type: Easing.OutBounce }
|
|
}
|
|
]
|
|
|
|
Rectangle {
|
|
id: innerDisc
|
|
anchors.centerIn: parent
|
|
color: tCircle1.state === "active" ? Constants.blue : "white"
|
|
radius: width / 2
|
|
height: width
|
|
border.color: Constants.blue
|
|
border.width: 1
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: "1"
|
|
font.bold: true
|
|
font.pixelSize: parent.height / 3
|
|
color: tCircle1.state === "active" ? "white" : Constants.blue
|
|
}
|
|
}
|
|
}
|
|
|
|
TextCircle {
|
|
id: tCircle2
|
|
anchors.verticalCenter: rec1.verticalCenter
|
|
anchors.horizontalCenter: rec1.horizontalCenter
|
|
text: "2"
|
|
}
|
|
|
|
TextCircle {
|
|
id: tCircle3
|
|
anchors.verticalCenter: rec1.verticalCenter
|
|
anchors.horizontalCenter: rec1.right
|
|
text: "3"
|
|
}
|
|
|
|
state: "inactive"
|
|
states: [
|
|
State {
|
|
name: "inactive"
|
|
PropertyChanges { target: tCircle1; state: "inactive" }
|
|
PropertyChanges { target: tCircle2; state: "inactive" }
|
|
PropertyChanges { target: tCircle3; state: "inactive" }
|
|
PropertyChanges { target: rec1; anchors.horizontalCenterOffset: _stepWidth }
|
|
},
|
|
State {
|
|
name: "one"
|
|
PropertyChanges { target: tCircle1; state: "active" }
|
|
PropertyChanges { target: tCircle2; state: "inactive" }
|
|
PropertyChanges { target: tCircle3; state: "inactive" }
|
|
PropertyChanges { target: rec1; anchors.horizontalCenterOffset: _stepWidth }
|
|
},
|
|
State {
|
|
name: "two"
|
|
PropertyChanges { target: tCircle1; state: "inactive" }
|
|
PropertyChanges { target: tCircle2; state: "active" }
|
|
PropertyChanges { target: tCircle3; state: "inactive" }
|
|
PropertyChanges { target: rec1; anchors.horizontalCenterOffset: Utils.dp(0) }
|
|
},
|
|
State {
|
|
name: "three"
|
|
PropertyChanges { target: tCircle1; state: "inactive" }
|
|
PropertyChanges { target: tCircle2; state: "inactive" }
|
|
PropertyChanges { target: tCircle3; state: "active" }
|
|
PropertyChanges { target: rec1; anchors.horizontalCenterOffset: -_stepWidth }
|
|
}
|
|
]
|
|
|
|
transitions: [
|
|
Transition {
|
|
PropertyAnimation { target: rec1; property: "anchors.horizontalCenterOffset"; duration: 500; easing.type: Easing.InOutCubic }
|
|
}
|
|
]
|
|
}
|