Index: sources/gui/qml/components/HeaderBar.qml =================================================================== diff -u -rcf4466dfa9b676d38cf535e2c1a23b14a83ea8b5 -r76e1360b5d2377d4f6d3310d524a902a04e64ff1 --- sources/gui/qml/components/HeaderBar.qml (.../HeaderBar.qml) (revision cf4466dfa9b676d38cf535e2c1a23b14a83ea8b5) +++ sources/gui/qml/components/HeaderBar.qml (.../HeaderBar.qml) (revision 76e1360b5d2377d4f6d3310d524a902a04e64ff1) @@ -7,18 +7,27 @@ Rectangle { id: _root property alias menuHidden : _headerMenu.hidden - property alias headerMenuIndex : _headerMenu.currentIndex - property alias headerMenuTitles : _headerMenu.titles - property alias headerMenuVisibleItems : _headerMenu.visibleItems + property alias headerMenuIndex : _headerMenu.index width : Variables.applicationWidth height : Variables.notificationHeight + clip : true - gradient: Gradient { //TODO:@LEAHI: make this a component. + gradient: Gradient { GradientStop { position: 0.2; color: Qt.lighter(Colors.backgroundMain, 1.2) } GradientStop { position: 0.8; color: Qt.darker (Colors.backgroundMain, 1.2) } } + onMenuHiddenChanged: { + if (menuHidden) { + headerMenuIndex = 0 + } + } + + function updateModel(list) { + _headerMenu.updateModel(list) + } + Item { id: _dateTimeItem width : Variables.headerBarDateTimeWidth anchors { @@ -99,6 +108,20 @@ font.pixelSize: 14 } + MainMenu { id: _headerMenu + anchors { + top : parent.top + left : _dateTimeItem.right + bottom : parent.bottom + } + height : parent.height + width : parent.width / 3 + hidden : true + titlePixelSize : 32 + backgroundColor : Colors.transparent + highlightHeight : 15 + } + SDCProgressItem { id: _sdcProgressItem // TODO: disable this later. this is only for diagnostic purpose. onDoubleClicked : { @@ -115,24 +138,6 @@ } } - MainMenu { id: _headerMenu - anchors { - top : parent.top - left : parent.left - leftMargin: Variables.defaultMargin - bottom : parent.bottom - } - height : parent.height - width : parent.width / 2 - position : MainMenu.Position.Top - hidden : true - visible : ! hidden - spacing : Variables.defaultMargin - partitionWidth : 80 * titles.length// Todo Important : max width should be the width for all bottons - titlePixelSize : 32 - backgroundColor : Colors.transparent - } - Row { id: _headerButtonRow height : parent.height spacing : Variables.defaultMargin * 2 @@ -150,14 +155,6 @@ onPressed: print("Prescription button pressed!") } - IconButton { id : _settingsButton - iconSize : Variables.headerIconDiameter - iconImageSource : "qrc:/images/iSettings" - extraSpace : Variables.defaultMargin * 2 - - onPressed: print("Settings button pressed!") - } - IconButton { id : _wifiButton iconSize : Variables.headerIconDiameter iconImageSource : "qrc:/images/iWifi" @@ -182,6 +179,7 @@ onPressed: print("CloudSync button pressed!") } + IconButton { id : _storageButton iconSize : Variables.headerIconDiameter iconImageSource : "qrc:/images/iStorage" @@ -190,6 +188,14 @@ onPressed: print("Storage button pressed!") } + IconButton { id : _settingsButton + iconSize : Variables.headerIconDiameter + iconImageSource : "qrc:/images/iSettings" + extraSpace : Variables.defaultMargin * 2 + + onPressed: print("Settings button pressed!") + } + IconButton { id : _informationButton iconSize : Variables.headerIconDiameter iconImageSource : "qrc:/images/iInformation" Index: sources/gui/qml/components/MainMenu.qml =================================================================== diff -u -rcf4466dfa9b676d38cf535e2c1a23b14a83ea8b5 -r76e1360b5d2377d4f6d3310d524a902a04e64ff1 --- sources/gui/qml/components/MainMenu.qml (.../MainMenu.qml) (revision cf4466dfa9b676d38cf535e2c1a23b14a83ea8b5) +++ sources/gui/qml/components/MainMenu.qml (.../MainMenu.qml) (revision 76e1360b5d2377d4f6d3310d524a902a04e64ff1) @@ -24,156 +24,96 @@ * \brief The MainMenu Component * which contains three [Treatment, Manager, Settings] */ -Item { id: _root - enum Position { - Top, - Bottom - } +Rectangle { id: _root - property var titles : [] - property var visibleItems : [] + property alias index : _listView.currentIndex property bool hidden : false - property int position : MainMenu.Position.Bottom - property bool hasRightText : false - property int rightTextGaps : 20 - property int currentIndex : 0 - property string currentTitle : titles[currentIndex] === undefined ? null : titles[currentIndex] property bool disable : false property int titlePixelSize : 40 property color backgroundColor : Colors.backgroundMainMenu + property int highlightHeight : 10 - /*! - * \brief Emits when a menu item pressed - * \param vIndex is the index of the pressed item - */ - signal itemPressed(int vIndex) - onItemPressed: { - currentIndex = vIndex - let itemAt = _repeater.itemAt(vIndex) - if (itemAt) - _highlightRect.x = itemAt.x - else { - _highlightRect.x = _rightTouchRect.x - } - } + width : parent.width + height : Variables.mainMenuHeight + color : _root.backgroundColor + clip : true - function isItemVisible ( vIndex ) { - return visibleItems [ vIndex ] !== false // used "!== false" to cover undefined as true. + gradient: Gradient { + GradientStop { position: 0.2; color: Qt.lighter(Colors.backgroundMain, 1.2) } + GradientStop { position: 0.8; color: Qt.darker (Colors.backgroundMain, 1.2) } } - function emit_itemPressed ( vIndex ) { - if ( isItemVisible ( vIndex ) ) - itemPressed ( vIndex ) + signal itemPressed(int vIndex) + + function updateModel(list) { + _model.clear() + _model.append(list) + _listView.currentIndex = 0 } - onCurrentIndexChanged: emit_itemPressed(currentIndex) + ListModel { id: _model } - /*! - * this section olds somkind of the private sections of the object - * this section is used as the calculation section whcih soppose not to be changed by user. - */ - QtObject { id: _private - readonly property var repeaterTitles: hasRightText ? titles.slice(0,titles.length - 1) : titles - readonly property string rightText : titles.length ? titles[titles.length - 1] : "" - readonly property int partitionWidth: _row.width / ( _private.repeaterTitles.length * 2 + 1) - } + ListView { id: _listView + property alias index : _listView.currentIndex - /*! type:int - * this property holds the width of each partition - * regarding to the menuitem count and menu width - */ - property int partitionWidth : _private.partitionWidth - property alias spacing : _row.spacing - property alias leftPdding : _row.leftPadding - property alias rightPdding : _row.rightPadding + anchors.fill : parent + anchors.leftMargin : 30 + anchors.rightMargin : anchors.leftMargin + model : _model + currentIndex : 0 + highlightFollowsCurrentItem : true + highlightMoveDuration : 750 + highlightMoveVelocity : -1 + orientation : ListView.Horizontal + interactive : false - clip: true - x: 0 - y: Variables.applicationHeight - Variables.mainMenuHeight - width: parent.width - height: Variables.mainMenuHeight + onCurrentIndexChanged: itemPressed(currentIndex) - Rectangle { id: _backgroundRect - anchors.fill: parent - color: _root.backgroundColor - gradient: Gradient { - GradientStop { position: 0.2; color: Qt.lighter(Colors.backgroundMain, 1.2) } - GradientStop { position: 0.8; color: Qt.darker (Colors.backgroundMain, 1.2) } + highlight: Rectangle { id: _highlightRectangle + objectName: "_highlightRectangle" + color: "transparent" + + Rectangle { + id: highlightedItem + objectName: "highlightedItem" + anchors { + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: -(height / 2) + } + height: _root.highlightHeight + width: parent.width / 2 + radius: 10 + color: Colors.backgroundButtonSelect + } } - } - MouseArea { id: _clickPropagationDisabler - anchors.fill: parent - } + delegate: Item { id: _delegateControl + objectName : "delegateControl" + width : ListView.view.count ? ListView.view.width / ListView.view.count : 0 + height : ListView.view.height + visible : model.visible - // normal texts with highlighter bottom ribon. - Row { id: _row - anchors.fill: parent - spacing : partitionWidth - leftPadding : partitionWidth - rightPadding: partitionWidth - - Repeater { id: _repeater - model: _private.repeaterTitles TouchRect { id : _touchRect - objectName: "_touchRect" + index //SquishQt testability + objectName: "_touchRect" + index animated : false - width : partitionWidth - height : parent.height - text.text : isItemVisible(index) ? modelData : "" // didn't change the visibility to preserve the button location and just didn't display the title and highlihgt bar. + anchors.fill: parent + text.text : model.text border.width: 0 - pixelSize : titlePixelSize //// ----- @LEAHIZED + pixelSize : titlePixelSize + onPressed: { - emit_itemPressed(index) + if (_listView.currentIndex !== index) { + _listView.currentIndex = index + } } } } } + Behavior on anchors.bottomMargin { PropertyAnimation { /*duration: 500; easing.type: Easing.OutBounce*/ } } - // the right outer most text with vertical line as a separator - Line { - visible: hasRightText && isItemVisible(_rightTouchRect.index) - orientation: Line.Orientation.Vertical - length: parent.height - rightTextGaps - anchors.right: _rightTouchRect.left - anchors.verticalCenter: parent.verticalCenter - } - TouchRect { id : _rightTouchRect - property int index: titles.length ? titles.length - 1 : -1 - animated : false - visible : hasRightText - width : partitionWidth + rightTextGaps - height : parent.height - text.text : isItemVisible(index) ? _private.rightText : "" // didn't change the visibility to preserve the button location and just didn't display the title and highlihgt bar. - border.width: 0 - onPressed: { - emit_itemPressed(index) - } - anchors.right: parent.right - anchors.rightMargin: parent.rightPdding - anchors.verticalCenter: parent.verticalCenter - } - - // normal text bottom highlighter - Rectangle { id : _highlightRect - color: Colors.backgroundButtonSelect - width: partitionWidth - x : leftPdding - height: 10 - radius: 10 - anchors.bottom: parent.bottom - anchors.bottomMargin: -(height / 2) - Behavior on x { PropertyAnimation { /*duration: 500; easing.type: Easing.OutBounce*/ } } - } - - // hidden animation to hide the menu nicely. - Behavior on y { PropertyAnimation { /*duration: 500; easing.type: Easing.OutBounce*/ } } onHiddenChanged: { let isHidden = hidden || disable - if ( position === MainMenu.Position.Top ) { - y = isHidden ? - Variables.mainMenuHeight : 0 - } else { - y = Variables.applicationHeight - (isHidden ? 0 : Variables.mainMenuHeight) - } + _root.anchors.bottomMargin = isHidden ? -120: 0 } } Index: sources/gui/qml/main.qml =================================================================== diff -u -r3ef1a4ff361ba1774ad1a6f6170dbb174cadbdd5 -r76e1360b5d2377d4f6d3310d524a902a04e64ff1 --- sources/gui/qml/main.qml (.../main.qml) (revision 3ef1a4ff361ba1774ad1a6f6170dbb174cadbdd5) +++ sources/gui/qml/main.qml (.../main.qml) (revision 76e1360b5d2377d4f6d3310d524a902a04e64ff1) @@ -277,15 +277,21 @@ // 3 - Footer MainMenu { id: _mainMenu + anchors.bottom: parent.bottom + function isTreatment () { _mainMenu.itemPressed(0) } function isManager () { _mainMenu.itemPressed(1) } function isSettings () { _mainMenu.itemPressed(2) } disable : _GuiView.manufactSetup || _GuiView.updateSetup hidden : true // it should be hidden by default since the landing screen changed to init and it does not have the main menu until the POST passes. - titles : [ qsTr("Treatment") , qsTr("Prescriptions") , qsTr("Settings") ] - visibleItems : [ true , true , true ] + width : Variables.applicationWidth + Component.onCompleted : { + _mainMenu.updateModel( [{ "text": qsTr("Treatment"), "visible": true }, + { "text": qsTr("Prescriptions"), "visible": true }, + { "text": qsTr("Settings"), "visible": true }]); + _settingsStack.visible = false _managerStack .visible = false _mainStack .visible = true Index: sources/gui/qml/pages/treatment/TreatmentHome.qml =================================================================== diff -u -r3ef1a4ff361ba1774ad1a6f6170dbb174cadbdd5 -r76e1360b5d2377d4f6d3310d524a902a04e64ff1 --- sources/gui/qml/pages/treatment/TreatmentHome.qml (.../TreatmentHome.qml) (revision 3ef1a4ff361ba1774ad1a6f6170dbb174cadbdd5) +++ sources/gui/qml/pages/treatment/TreatmentHome.qml (.../TreatmentHome.qml) (revision 76e1360b5d2377d4f6d3310d524a902a04e64ff1) @@ -147,8 +147,9 @@ onVisibleChanged: { if (visible) { _mainMenu.hidden = true - _headerBar.headerMenuTitles = [ qsTr("Treatment") , qsTr("Trends") , qsTr("Heparin") ] - _headerBar.headerMenuVisibleItems = [ true , false , false ] + _headerBar.updateModel([{ "text": qsTr("Treatment"), "visible": true }, + { "text": qsTr("Trends"), "visible": true }, + { "text": qsTr("Heparin"), "visible": true }]); _headerBar.menuHidden = false } } Index: sources/gui/qml/pages/treatment/TreatmentStack.qml =================================================================== diff -u -r6d9c4aac8f998f25825b18004350ce1217f70897 -r76e1360b5d2377d4f6d3310d524a902a04e64ff1 --- sources/gui/qml/pages/treatment/TreatmentStack.qml (.../TreatmentStack.qml) (revision 6d9c4aac8f998f25825b18004350ce1217f70897) +++ sources/gui/qml/pages/treatment/TreatmentStack.qml (.../TreatmentStack.qml) (revision 76e1360b5d2377d4f6d3310d524a902a04e64ff1) @@ -15,7 +15,6 @@ // Qt import QtQuick 2.12 -//import QtCharts 2.3 // Qml imports import "qrc:/globals" @@ -61,11 +60,11 @@ || _treatmentAdjustmentDuration .visible || _treatmentUltrafiltrationItem .visible - property int headerBarIndex: _headerBar.headerMenuIndex + property int headerMenuIndex: _headerBar.headerMenuIndex - onHeaderBarIndexChanged: { - if ( _root.headerBarIndex === 1) push(_treatmentTrends) - if ( _root.headerBarIndex === 0) pop() + onHeaderMenuIndexChanged: { + if ( _root.headerMenuIndex === 1) push(_treatmentTrends) + if ( _root.headerMenuIndex === 0) pop() } // Components