Index: sources/gui/qml/dialogs/NotificationDialog.qml =================================================================== diff -u -rf8e37a0cbb537edceebee7a7c5f2676f497d1e26 -rf06b3645936db64dff09721cf625a6a8530e3f0a --- sources/gui/qml/dialogs/NotificationDialog.qml (.../NotificationDialog.qml) (revision f8e37a0cbb537edceebee7a7c5f2676f497d1e26) +++ sources/gui/qml/dialogs/NotificationDialog.qml (.../NotificationDialog.qml) (revision f06b3645936db64dff09721cf625a6a8530e3f0a) @@ -15,6 +15,7 @@ // Qt import QtQuick 2.12 +import QtGraphicalEffects 1.12 // Project // Qml imports @@ -29,152 +30,279 @@ property alias titleText : _title.text property alias titlePixelSize : _title.font.pixelSize - property alias description : _desc.text - property alias descriptionPixelSize : _desc.font.pixelSize + property alias instructionModel : _listView.model property alias titleBarForeground : _title.color property alias titleBarBackground : _titleBar.color - property alias isSilenced : _muteButton.isSilenced - property alias timeout : _muteButton.timeout + property alias isSilenced : _headerButtonGroup.isSilenced + property alias timeout : _headerButtonGroup.timeout property int alarmID : -1 - property alias countDown : _timeoutText.countDown - property alias countDownVisible : _timeoutText.visible + property alias countDown : _timerRect.countDown + property alias countDownVisible : _timerRect.visible + property alias figureImageSource : _figureImage.source - property bool resumeVisible : false property bool rinsebackVisible : false property bool endVisible : false property bool okVisible : false property bool minVisible : true - property bool titleFading : false - Fader { - fadingProperyTarget : _root - fadingProperyRunning: titleFading - fadingProperyName : "titleBarBackground" - fadingProperyValue : titleBarBackground - } + property int headerOverlap : 30 // Look for this tag: #First_Time_Message_Sent_With_Silenced // the isSilenced is helping not to show this dialog maximized and // then if the silence is set minimize it immediately // this behaviour does not look nice on the screen and it bounces - visible : description && ! isSilenced - radius : Variables.dialogRadius + radius : Variables.alarmDialogRadius signal muteClicked() signal minimizeClicked() + signal listClicked() signal resumeClicked() signal rinsebackClicked() signal endClicked() signal okClicked() Rectangle { id: _titleBar - height : Variables.mainMenuHeight + height : Variables.alarmDialogHeaderHeight + _root.headerOverlap width : _root.width radius : _root.radius clip : true // the mute button expands so we need to clip the outside unwanted area. - // Image { id: _icon - // source: "qrc:/images/iAlarm" - // anchors.horizontalCenter: _title.horizontalCenter - // anchors.verticalCenter: _title.verticalCenter - // anchors.horizontalCenterOffset: -_title.width + Variables.dialogIconHorizontalOffset; - // height : Variables.alarmListIconDiameter - // width : Variables.alarmListIconDiameter - // } + // TODO: disable doubleClicked later. this is only for diagnostic purpose when alarm dialog covers the entire screen. + MouseArea { id: _minimizeArea + anchors.fill : parent + onDoubleClicked : { if ( ! _root.minVisible ) _sdcProgressItem.doubleClicked() } // call the sdcard.double click to pop the DiagnosticsDialog + } Text { id: _title - color: Colors.textMain - font.pixelSize: Fonts.fontPixelTitle - text: qsTr("Notification") + color : Colors.textMain + font.pixelSize : Fonts.fontPixelTitle + text : qsTr("Notification") + font.weight : Font.DemiBold + width : _titleBar.width - width: _titleBar.width - verticalAlignment : Text.AlignVCenter - horizontalAlignment : Text.AlignHCenter - anchors.centerIn: _titleBar + anchors { + left: parent.left + leftMargin: Variables.defaultMargin * 2 + verticalCenter: parent.verticalCenter + verticalCenterOffset: (_root.headerOverlap / 2) * -1 + } } - MouseArea { id: _minimizeArea - // this object is not exposed so cannot be missused by the child component, so here it can be enabled and being handled by the minVisible property - // enabled : _root.minVisible - anchors.fill : parent - onClicked : { if ( _root.minVisible ) _root.minimizeClicked() } // if can be minimized (minVisible = true ), call the minimizeClinked signal (norma behavior) - onDoubleClicked : { if ( ! _root.minVisible ) _sdcProgressItem.doubleClicked() } // if can NOT be minimized (minVisible = false), call the sdcard.double click to pop the DiagnosticsDialog - // TODO: disable doubleClicked later. this is only for diagnostic purpose when alarm dialog covers the entire screen. - } - - UpDownButton { id: _minimizeButton - backgroundColor: _titleBar.color - isUp : false - isList : ! _root.minVisible + AlarmButtonRow { id: _headerButtonGroup anchors { verticalCenter : _titleBar.verticalCenter + verticalCenterOffset: (_root.headerOverlap / 2) * -1 right : _titleBar.right - rightMargin : Variables.silenceIconMargin + rightMargin : Variables.defaultMargin * 2 } - onClicked: _root.minimizeClicked() + + isMinButton : true + backgroundColor : _titleBar.color + minMaxVisible : _root.minVisible + + onMuteClicked : _root.muteClicked() + onMinMaxClicked : _root.minimizeClicked() + onListClicked : _root.listClicked() } + } - MuteButton { id: _muteButton - backgroundColor: _titleBar.color + Rectangle { id: _descriptionRect + color : Colors.alarmDialog + clip : true + + anchors { + top : _titleBar.bottom + topMargin : _root.headerOverlap * -1 + left : parent.left + right : parent.right + bottom : _timerRect.top + } + + Item { id: _infoItem anchors { - verticalCenter : _titleBar.verticalCenter - left : _titleBar.left - leftMargin : Variables.silenceIconMargin + left : parent.left + leftMargin : Variables.defaultMargin * 2 + top : parent.top + topMargin : Variables.defaultMargin * 3 } - onClicked: _root.muteClicked() + height : 35 + width : parent.width / 2 + + NotificationBarSmall { id: _infoNotificationBar + color : "transparent" + imageSource : "qrc:/images/iHelp" + imageVisible : true + text : qsTr("TAP THE STEP NUMBER TO VIEW THE CORRESPONDING IMAGES") + textColor : "#595959" + imageDiameter : 25 + imageTopMargin : 3 + } } - TimeText { id: _timeoutText - property int countDown : 0 - seconds : countDown * 60 - - height: _titleBar.height + Row { id: _alarmContentRow anchors { - verticalCenter : _titleBar.verticalCenter - right : _minimizeButton.left - rightMargin : 15 + top : _infoItem.bottom + bottom : parent.bottom + left : parent.left + leftMargin : Variables.defaultMargin * 4 + right : parent.right + rightMargin : Variables.defaultMargin * 3 + margins : Variables.defaultMargin + } - textPixelSize : 30 - textWeight : Font.Normal - secondsVisible : false - hourZero : false - minuteZero : true + spacing : Variables.defaultMargin * 3 + width : _descriptionRect.width + + ListView {id: _listView + height : _alarmContentRow.height + width : parent.width * 0.65 + currentIndex: 0 + interactive : false + clip : true + + delegate: Item { id: _delegateControl + width : _listView.width + height : 73 + clip : true + + Rectangle { id: _stepRect + height : 40 + width : height + radius : height + color : Colors.backgroundMainMenu + + Text { id: _stepNumberRect + anchors.centerIn: parent + text : index + 1 + color : Colors.white + font.pixelSize : 20 + font.weight : Font.Medium + } + + layer.enabled : true + layer.effect : DropShadow { id: _dropShadow + horizontalOffset: 0 + verticalOffset : 3 + radius : 3.0 + samples : 7 + color : "#50000000" + source : _stepRect + anchors.fill : _stepRect + } + } + + Text { id: _delegateText + anchors { + left : _stepRect.right + leftMargin : Variables.defaultMargin + right : _delegateControl.right + } + height : parent.height + width : parent.width + font.pixelSize : 23 + font.weight : _delegateControl.ListView.isCurrentItem ? Font.DemiBold : Font.Normal + color : _delegateControl.ListView.isCurrentItem ? "#18559E" : Colors.alarmDialogText + text : model.instruction + wrapMode : Text.WordWrap + } + + MouseArea { + anchors.fill: parent + onClicked: { + if (_listView.currentIndex !== index) { + _listView.currentIndex = index + _root.figureImageSource = model.image + } + } + } + } + } + + Item { id: _imageContainer + width: parent.width * 0.30 + height: _alarmContentRow.height - Variables.defaultMargin + anchors.verticalCenter: parent.verticalCenter + + Image { id: _figureImage + width: parent.width + height: parent.height + fillMode: Image.PreserveAspectFit + } + } } } - Rectangle { id: _descReect - color: Colors.transparent - clip : true + Rectangle { id: _timerRect + property int countDown : 0 + + height: 70 + width: parent.width / 3 + anchors { - fill : parent - topMargin : _titleBar .height + 2 - bottomMargin : _buttonGroup .height + bottom : _alarmID.top + bottomMargin : Variables.defaultMargin * 2 + left : parent.left + leftMargin : Variables.defaultMargin * 4 } - Text { id: _desc - objectName: "_NotificationDialog_Description" - color: Colors.textMain - font.pixelSize: Fonts.fontPixelButton + color : "#FFECEC" + radius : 10 + + Text { id: _astrix anchors { - horizontalCenter: parent.horizontalCenter + left: parent.left + leftMargin: Variables.defaultMargin + top: _timerDescription.top + } + + color : "#AB352E" + text : "*" + font.pixelSize : 25 + font.weight : Font.Medium + } + + Text { id: _timerDescription + anchors { + verticalCenter: parent.verticalCenter + left: _astrix.right + } + + color : "black" + text : qsTr("Rinseback will not be allowed in:") + font.pixelSize : 25 + font.weight : Font.Medium + + } + + TimeText { id: _timeoutText + seconds : countDown * 60 + anchors { verticalCenter : parent.verticalCenter + left: _timerDescription.right } + height: _titleBar.height + textPixelSize : 35 + textWeight : Font.Bold + secondsVisible : false + hourZero : false + minuteZero : true + textColor : "#AB352E" } } Row { id: _buttonGroup - property int buttonsWidth : 300 + property int buttonsWidth : 250 spacing: 50 anchors { bottom : parent.bottom horizontalCenter: parent.horizontalCenter rightMargin : spacing leftMargin : spacing - bottomMargin : spacing / 2 // give the content more space. + bottomMargin : Variables.defaultMargin * 2 } // IMPORTANT NOTE : Alarm Dialog buttons @@ -189,46 +317,62 @@ onPressed : resumeClicked() text.text : qsTr("RESUME") width : _buttonGroup.buttonsWidth - borderColor : Colors.white - selectColor : Qt.darker(_root.backgroundColor, 1.15) + isDefault : true + backgroundColor: Colors.white + fgColor : isPressed ? Colors.white : borderColor + selectColor : Qt.darker(borderColor, 1.15) } TouchRect { id : _rinsebackTouchRect visible : rinsebackVisible onPressed : rinsebackClicked() text.text : qsTr("RINSEBACK") width : _buttonGroup.buttonsWidth - borderColor : Colors.white - selectColor : Qt.darker(_root.backgroundColor, 1.15) + backgroundColor: Colors.white + fgColor : isPressed ? Colors.white : borderColor + selectColor : Qt.darker(borderColor, 1.15) } TouchRect { id : _endTouchRect visible : endVisible onPressed : endClicked() text.text : qsTr("END TREATMENT") width : _buttonGroup.buttonsWidth - borderColor : Colors.white - selectColor : Qt.darker(_root.backgroundColor, 1.15) + backgroundColor: Colors.white + fgColor : isPressed ? Colors.white : borderColor + selectColor : Qt.darker(borderColor, 1.15) } + TouchRect { id : _okTouchRect visible : okVisible onPressed : okClicked() text.text : qsTr("OK") width : _buttonGroup.buttonsWidth - borderColor : Colors.white - selectColor : Qt.darker(_root.backgroundColor, 1.15) + backgroundColor: Colors.white + fgColor : isPressed ? Colors.white : borderColor + selectColor : Qt.darker(borderColor, 1.15) } } Text { id: _alarmID - text : qsTr("ID") + ":" + _root.alarmID + text : ("[%1:%2]") .arg(qsTr("ID")) + .arg(_root.alarmID) anchors { left : parent.left bottom : parent.bottom - leftMargin : 5 - bottomMargin: 5 + leftMargin : Variables.defaultMargin * 3 + bottomMargin: Variables.defaultMargin * 4 } - color : Colors.textMain - font.pixelSize : Fonts.fontPixelDialogText + color : Colors.alarmDialogGreyText + font.pixelSize : Fonts.fontPixelAlarmID } + + Connections { target: vAlarmStatus + function onDidAlarmRaise ( ) { + // image is out of sync when a new alarm is appears so on new alarm go to step 1 image + if ( _root.instructionModel.rowCount() > 0) { + figureImageSource = _root.instructionModel.get(0).image + } + } + } }