Index: sources/gui/qml/compounds/InstructionView.qml =================================================================== diff -u -ra5760947d3ed0d2748ba023a1c25e3c6aa0b1de1 -r41ba9331e6a540df0c8eced0c4d3b8684afa9afa --- sources/gui/qml/compounds/InstructionView.qml (.../InstructionView.qml) (revision a5760947d3ed0d2748ba023a1c25e3c6aa0b1de1) +++ sources/gui/qml/compounds/InstructionView.qml (.../InstructionView.qml) (revision 41ba9331e6a540df0c8eced0c4d3b8684afa9afa) @@ -15,178 +15,107 @@ // Qt import QtQuick 2.12 -import QtQuick.Controls 2.12 // swipeview // Project // Qml imports import "qrc:/globals" import "qrc:/components" -/*! - * \brief Contains a back button as well - * as the current progress in each of the steps. - */ Rectangle { id: _root - property string label : "" + property string title : "" + property var stepNames : [] + property var stepImages : [] + property int currentIndex : 0 + readonly property bool isEmpty : stepNames.length == 0 && stepImages.length == 0 - property string location : "" - property var stepNames : [] - property var stepImages : [] + color : Colors.offWhite + radius : Variables.alarmDialogRadius - property int fontPixelMessage : 25 - property int fontPixelLabel : 20 - - property alias currentStepIndex: _swipeview.currentIndex - - readonly property bool isEmpty : stepNames.length == 0 && stepImages.length == 0 - readonly property bool firstStep : isEmpty || _swipeview.currentIndex == 0 - readonly property bool lastStep : isEmpty || _swipeview.currentIndex == _swipeview.count - 1 - - readonly property int frameVGapTop : 65 - readonly property int frameVGapBottom : 45 - readonly property int frameHGap : 45 // * 1.5 - readonly property int chevronWidth : 25 - readonly property int chevronHeight : 35 - readonly property int chevronMargin : ( _root.frameHGap - _root.chevronWidth ) / 2 - readonly property int outerRadius : Variables.dialogRadius * 2 - readonly property int innerRadius : Variables.dialogRadius - - - signal leftClicked () - signal rightClicked() - - color : Colors.transparent - border.color : Colors.borderButton - radius : _root.outerRadius - - Rectangle { id: _innerFrame - color : Colors.transparent - border.color : Colors.line + Text { id: _title anchors { - fill : _root - leftMargin : _root.frameHGap - rightMargin : _root.frameHGap - topMargin : _root.frameVGapTop - bottomMargin: _root.frameVGapBottom + left : parent.left + leftMargin : Variables.defaultMargin * 3 + top : parent.top + topMargin : Variables.defaultMargin * 2 } - radius : _root.innerRadius - // DEBUG : This helps getting the final size of the available room for the instruction images. - // onWidthChanged : console.debug( " ----- ", "_innerFrame.width :" , label, width ) - // onHeightChanged : console.debug( " ----- ", "_innerFrame.height:" , label, height) + text : _root.title + color : Colors.backgroundMainMenu + font.pixelSize : Fonts.fontPixelInstructionTitle + font.weight : Font.Medium } - Item { id: _containerSwipeView - clip : true // it has to be clipped although not performace friendly, otherwise the other pages will be partially shown. + Item { id: _instructionContainer anchors { - right : _innerFrame.right - left : _innerFrame.left - top : _root.top + right : _root.right + left : _title.left + top : _title.bottom bottom : _root.bottom } - SwipeView { id: _swipeview - anchors.fill: parent - Repeater { + + Column { id: _contentColumn + anchors.top : parent.top + anchors.topMargin : Variables.defaultMargin * 2 + spacing : 5 + width : parent.width * 2/3 + + Repeater { id: _instrutionSteps model: _root.stepNames - Loader { id: _content - anchors.bottom: parent.bottom - active: SwipeView.isPreviousItem || SwipeView.isCurrentItem || SwipeView.isNextItem - sourceComponent: Item { - Text { id: _message - text : _root.stepNames.length ? _root.stepNames[index] : "" - color : Colors.textMain - width : parent.width - height : _root.frameVGapTop - horizontalAlignment : Text.AlignHCenter - verticalAlignment : Text.AlignVCenter - font.pixelSize : _root.fontPixelMessage + + delegate: Item { id: _delegate + width : _contentColumn.width + height : Variables.instructionHeight + + Rectangle { id: _stepRect + anchors.left : parent.left + anchors.verticalCenter : parent.verticalCenter + + height : 50 + width : height + radius : height + color : Colors.backgroundMainMenu + + Text { id: _stepNumberRect + anchors.centerIn: parent + text : index + 1 + color : Colors.white + font.pixelSize : 28 + font.weight : Font.Medium } - Image { id: _image - source: _root.stepImages.length && _root.stepImages[index] ? "file:" + _root.location + _root.stepImages[index] : "" - width : _innerFrame.width - height : _innerFrame.height - anchors.top : parent.top - anchors.topMargin : _root.frameVGapTop - anchors.horizontalCenter : parent.horizontalCenter - horizontalAlignment : Image.AlignHCenter - verticalAlignment : Image.AlignVCenter - fillMode : Image.PreserveAspectFit + } + + Text { id: _message + anchors { + left : _stepRect.right + leftMargin : Variables.defaultMargin * 2 + right : parent.right + verticalCenter : parent.verticalCenter } + text : _root.stepNames.length ? _root.stepNames[index] : "" + font.weight : index === _root.currentIndex ? Font.DemiBold : Font.Normal + color : index === _root.currentIndex ? "#18559E" : Colors.alarmDialogText + wrapMode : Text.WordWrap + font.pixelSize : Fonts.fontPixelInstructionStep } + + MouseArea { + anchors.fill: parent + onClicked: { + _root.currentIndex = index + } + } } } } - } - Item { - anchors.left : _innerFrame.left - anchors.right : _innerFrame.right - anchors.top : _innerFrame.bottom - anchors.bottom : _root.bottom - Text { id: _label - text : _root.label - color : Colors.textMain - width : parent.width - height : _root.frameVGapBottom - horizontalAlignment : Text.AlignLeft - verticalAlignment : Text.AlignVCenter - font.pixelSize : _root.fontPixelLabel - anchors.verticalCenter: parent.verticalCenter - anchors.left : parent.left + Image { id: _image + anchors { + right : parent.right + rightMargin : Variables.defaultMargin * 2 + } + source : _root.stepImages.length && _root.stepImages[_root.currentIndex] ? _root.stepImages[_root.currentIndex] : "" + width : parent.width / 3 + height : parent.height + fillMode : Image.PreserveAspectFit } - StepIndicator { id: _indicator - diameter : 10 - spacerLineLength: 25 - visible : _root.stepNames.length - currentComplete : true - hideLabels : true - stepNames : _root.stepNames - currentStepIndex: _swipeview.currentIndex - anchors.verticalCenter: parent.verticalCenter - anchors.right : parent.right - } } - - Image { id: _leftImage - visible : ! _root.firstStep - width : _root.chevronWidth - height : _root.chevronHeight - source : "qrc:/images/iArrowLeft" - anchors.left : _root.left - anchors.right : _innerFrame.left - anchors.verticalCenter: _root.verticalCenter - anchors.margins : _root.chevronMargin - } - Image { id: _rightImage - visible : ! _root.lastStep - width : _root.chevronWidth - height : _root.chevronHeight - source : "qrc:/images/iArrowRight" - anchors.right : _root.right - anchors.left : _innerFrame.right - anchors.verticalCenter: _root.verticalCenter - anchors.margins : _root.chevronMargin - } - - MouseArea { id: _mouseAreaLeft - enabled : ! _root.firstStep - width : _root.frameHGap * 2 // mouse area is intenrionally set twice the size of the visible area for user convenience - anchors.left : _root.left - anchors.top : _root.top - anchors.bottom : _root.bottom - onClicked : { - _swipeview.currentIndex-- - _root.leftClicked - } - } - MouseArea { id: _mouseAreaRight - enabled : ! _root.lastStep - width : _root.frameHGap * 2 // mouse area is intenrionally set twice the size of the visible area for user convenience - anchors.right : _root.right - anchors.top : _root.top - anchors.bottom : _root.bottom - onClicked : { - _swipeview.currentIndex++ - _root.rightClicked - } - } }