Index: sources/gui/qml/components/TopMenuBarCreateTreatment.qml =================================================================== diff -u -r4fab8841b1040c8eaa406713ff9bdc8c65b7b6ac -rd94a2b9334b1b35739b637472e8c3054d7b9b804 --- sources/gui/qml/components/TopMenuBarCreateTreatment.qml (.../TopMenuBarCreateTreatment.qml) (revision 4fab8841b1040c8eaa406713ff9bdc8c65b7b6ac) +++ sources/gui/qml/components/TopMenuBarCreateTreatment.qml (.../TopMenuBarCreateTreatment.qml) (revision d94a2b9334b1b35739b637472e8c3054d7b9b804) @@ -22,20 +22,25 @@ import "qrc:/globals" import "qrc:/components" +/*! + * \brief TopMenuBarCreateTreatment - Contains a back button as well + * as the current progress in each of the pre-treatment steps. + */ Rectangle { id: _root height: Variables.topBarMenuHeight color: Colors.backgroundMainMenu property var step: "CREATE"; property int spacing: 5 - signal backClicked() + signal clickedBack() BackButton { id : _backButton + objectName: "_backButton" width: parent.width / 10 anchors.verticalCenter: parent.verticalCenter anchors.top: parent.top anchors.left: parent.left anchors.margins: _root.height / 4 - onClicked: backClicked() + onClicked: _root.clickedBack() } Rectangle { @@ -49,78 +54,123 @@ } - - RowLayout { + Row { anchors.centerIn: parent - Layout.alignment: Qt.AlignVCenter spacing: 5 CircleWithText { id: _create text: "CREATE" state: "active" } - Line { - length: 100 + Line { id: _confirm_line + length: 120 color: Colors.createTreatmentInactive + radius: 5 + anchors.verticalCenter: _create.verticalCenter + + states: [ + State { + name: "active" + PropertyChanges { target: _confirm_line; thickness: 3; color: Colors.createTreatmentActive; } + }, + State { + name: "inactive" + PropertyChanges { target: _confirm_line; thickness: 1; color: Colors.createTreatmentInactive; } + } + ] } CircleWithText { id: _confirm text: "CONFIRM" } - Line { - length: 100 + Line { id: _priming_line + length: 120 color: Colors.createTreatmentInactive + radius: 5 + anchors.verticalCenter: _create.verticalCenter + + states: [ + State { + name: "active" + PropertyChanges { target: _priming_line; thickness: 3; color: Colors.createTreatmentActive; } + }, + State { + name: "inactive" + PropertyChanges { target: _priming_line; thickness: 1; color: Colors.createTreatmentInactive; } + } + ] } CircleWithText { id: _prime text: "PRIME" - } - Line { - id: _prime_line - length: 100 + Line { id: _begin_line + length: 120 color: Colors.createTreatmentInactive + radius: 5 + anchors.verticalCenter: _create.verticalCenter + + states: [ + State { + name: "active" + PropertyChanges { target: _begin_line; thickness: 3; color: Colors.createTreatmentActive; } + }, + State { + name: "inactive" + PropertyChanges { target: _begin_line; thickness: 1; color: Colors.createTreatmentInactive; } + } + ] } CircleWithText { id: _begin text: "BEGIN" } - - } } states: [ State { name: "create" - PropertyChanges { target: _create; state: "active" } - PropertyChanges { target: _confirm; state: "inactive" } - PropertyChanges { target: _prime; state: "inactive" } - PropertyChanges { target: _begin; state: "inactive" } + PropertyChanges { target: _create; state: "active" } + PropertyChanges { target: _confirm; state: "inactive" } + PropertyChanges { target: _confirm_line; state: "inactive" } + PropertyChanges { target: _prime; state: "inactive" } + PropertyChanges { target: _priming_line; state: "inactive" } + PropertyChanges { target: _begin; state: "inactive" } + PropertyChanges { target: _begin_line; state: "inactive" } }, State { name: "confirm" - PropertyChanges { target: _create; state: "inactive" } - PropertyChanges { target: _confirm; state: "active" } - PropertyChanges { target: _prime; state: "inactive" } - PropertyChanges { target: _begin; state: "inactive" } + PropertyChanges { target: _create; state: "active" } + PropertyChanges { target: _confirm; state: "active" } + PropertyChanges { target: _confirm_line; state: "active" } + PropertyChanges { target: _prime; state: "inactive" } + PropertyChanges { target: _priming_line; state: "inactive" } + PropertyChanges { target: _begin; state: "inactive" } + PropertyChanges { target: _begin_line; state: "inactive" } }, State { name: "prime" - PropertyChanges { target: _create; state: "inactive" } - PropertyChanges { target: _confirm; state: "inactive" } - PropertyChanges { target: _prime; state: "active" } - PropertyChanges { target: _begin; state: "inactive" } + PropertyChanges { target: _create; state: "active" } + PropertyChanges { target: _confirm; state: "active" } + PropertyChanges { target: _confirm_line; state: "active" } + PropertyChanges { target: _prime; state: "active" } + PropertyChanges { target: _priming_line; state: "active" } + PropertyChanges { target: _begin; state: "inactive" } + PropertyChanges { target: _begin_line; state: "inactive" } }, State { name: "begin" - PropertyChanges { target: _create; state: "inactive" } - PropertyChanges { target: _confirm; state: "inactive" } - PropertyChanges { target: _prime; state: "inactive" } - PropertyChanges { target: _begin; state: "active" } + PropertyChanges { target: _create; state: "active" } + PropertyChanges { target: _confirm; state: "active" } + PropertyChanges { target: _confirm_line; state: "active" } + PropertyChanges { target: _prime; state: "active" } + PropertyChanges { target: _priming_line; state: "active" } + PropertyChanges { target: _begin; state: "active" } + PropertyChanges { target: _begin_line; state: "active" } } ]