Index: sources/gui/qml/compounds/InstructionView.qml =================================================================== diff -u -ra5760947d3ed0d2748ba023a1c25e3c6aa0b1de1 -rb59827b661a423b2b1ad2ca7b8611c2c0be7bd6a --- sources/gui/qml/compounds/InstructionView.qml (.../InstructionView.qml) (revision a5760947d3ed0d2748ba023a1c25e3c6aa0b1de1) +++ sources/gui/qml/compounds/InstructionView.qml (.../InstructionView.qml) (revision b59827b661a423b2b1ad2ca7b8611c2c0be7bd6a) @@ -27,166 +27,72 @@ * as the current progress in each of the steps. */ Rectangle { id: _root - property string label : "" - property string location : "" + property string title : "" property var stepNames : [] property var stepImages : [] property int fontPixelMessage : 25 - property int fontPixelLabel : 20 + property int fontPixelTitle : 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 + color : Colors.offWhite 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 + top : parent.top } - 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 : 20 + 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. anchors { - right : _innerFrame.right - left : _innerFrame.left + right : _root.right + left : _root.left top : _root.top bottom : _root.bottom } - SwipeView { id: _swipeview - anchors.fill: parent - Repeater { - 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 - } - 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 - } + + Repeater { + 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 : 65 + horizontalAlignment : Text.AlignHCenter + verticalAlignment : Text.AlignVCenter + font.pixelSize : _root.fontPixelMessage } + Image { id: _image + source: _root.stepImages.length && _root.stepImages[index] ? _root.stepImages[index] : "" +// width : _innerFrame.width +// height : _innerFrame.height + anchors.top : parent.top + anchors.topMargin : 65 + anchors.horizontalCenter : parent.horizontalCenter + horizontalAlignment : Image.AlignHCenter + verticalAlignment : Image.AlignVCenter + fillMode : Image.PreserveAspectFit + } } } } } - 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 - } - 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 - } - } }