Index: sources/gui/qml/dialogs/NotificationDialog.qml =================================================================== diff -u -rf8e37a0cbb537edceebee7a7c5f2676f497d1e26 -r21041955990385205ec1aca17ef51fc1fd9a4b29 --- sources/gui/qml/dialogs/NotificationDialog.qml (.../NotificationDialog.qml) (revision f8e37a0cbb537edceebee7a7c5f2676f497d1e26) +++ sources/gui/qml/dialogs/NotificationDialog.qml (.../NotificationDialog.qml) (revision 21041955990385205ec1aca17ef51fc1fd9a4b29) @@ -15,6 +15,7 @@ // Qt import QtQuick 2.12 +import QtGraphicalEffects 1.12 // Project // Qml imports @@ -29,152 +30,341 @@ property alias titleText : _title.text property alias titlePixelSize : _title.font.pixelSize - property alias description : _desc.text - property alias descriptionPixelSize : _desc.font.pixelSize + property string description : "_desc.text" 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 + property string figureTextString : ("%1 %2.").arg(qsTr("Figure")).arg(_listView.currentIndex + 1) + property bool showFigureText : false + // 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 + width : Variables.alarmDialogWidth + height : Variables.alarmDialogHeight + /////////////// TODO: Update with actual instructions //////////////// + onDescriptionChanged: { + _model.set(0, { text: vAlarmStatus.title, image: "qrc:/images/iSplash" }) + _model.set(1, { text: vAlarmStatus.message, image: "qrc:/images/iBusy" }) + _model.set(2, { text: vAlarmStatus.text, image: "qrc:/images/iLock" }) + + _listView.currentIndex = 0 + figureImageSource = _model.get(_listView.currentIndex).image + } + + ListModel { id: _model + ListElement { text: "I am 1"; image: "qrc:/images/iSplash" } + ListElement { text: "I am 2"; image: "qrc:/images/iBusy" } + ListElement { text: "Step 3"; image: "qrc:/images/iLock" } + ListElement { text: "Step number 4. Ensure Airtraph hsd no gosm. zrnf ytrqw or znSL BLABLHABLHABABLHABLA BLAHHHH alb siogb wrb gou"; image: "qrc:/images/iHomeBackground" } + ListElement { text: "I am 5"; image: "qrc:/images/iRedCrossWCircle" } + ListElement { text: "Inspect dialyzer for clots. FOllow facility poicly to end treatment if clots are present :)"; image: "qrc:/images/iClock+" } + } + ///////////////////////////////////////////////////////////////// + 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 - // } - - Text { id: _title - color: Colors.textMain - font.pixelSize: Fonts.fontPixelTitle - text: qsTr("Notification") - - width: _titleBar.width - verticalAlignment : Text.AlignVCenter - horizontalAlignment : Text.AlignHCenter - anchors.centerIn: _titleBar + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: Qt.darker (_titleBar.color, 1.1) } + GradientStop { position: 0.5; color: Qt.lighter (_titleBar.color, 1.1) } + GradientStop { position: 0.9; color: Qt.darker (_titleBar.color, 1.1) } } + // TODO: disable doubleClicked later. this is only for diagnostic purpose when alarm dialog covers the entire screen. 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. + onDoubleClicked : { if ( ! _root.minVisible ) _sdcProgressItem.doubleClicked() } // call the sdcard.double click to pop the DiagnosticsDialog } - UpDownButton { id: _minimizeButton - backgroundColor: _titleBar.color - isUp : false - isList : ! _root.minVisible + Text { id: _title + color : Colors.textMain + font.pixelSize : Fonts.fontPixelTitle + text : qsTr("Notification") + font.weight : Font.DemiBold + width : _titleBar.width + anchors { - verticalCenter : _titleBar.verticalCenter - right : _titleBar.right - rightMargin : Variables.silenceIconMargin + left: parent.left + leftMargin: Variables.defaultMargin * 2 + verticalCenter: parent.verticalCenter + verticalCenterOffset: (_root.headerOverlap / 2) * -1 } - onClicked: _root.minimizeClicked() } - MuteButton { id: _muteButton - backgroundColor: _titleBar.color + AlarmButtonRow { id: _headerButtonGroup anchors { verticalCenter : _titleBar.verticalCenter - left : _titleBar.left - leftMargin : Variables.silenceIconMargin + verticalCenterOffset: (_root.headerOverlap / 2) * -1 + right : _titleBar.right + rightMargin : Variables.defaultMargin * 2 } - onClicked: _root.muteClicked() + + isMinButton : true + backgroundColor : _titleBar.color + minMaxVisible : _root.minVisible + + onMuteClicked : _root.muteClicked() + onMinMaxClicked : _root.minimizeClicked() + onListClicked : _root.listClicked() } + } - TimeText { id: _timeoutText - property int countDown : 0 - seconds : countDown * 60 + Rectangle { id: _descriptionRect + color : Colors.alarmDialog + clip : true - height: _titleBar.height + anchors { + top : _titleBar.bottom + topMargin: _root.headerOverlap * -1 + left: parent.left + right: parent.right + bottom: _timerRect.top + } + + Item { id: _infoItem anchors { - verticalCenter : _titleBar.verticalCenter - right : _minimizeButton.left - rightMargin : 15 + left : parent.left + leftMargin : Variables.defaultMargin * 2 + top :parent.top + topMargin : Variables.defaultMargin * 3 } - textPixelSize : 30 - textWeight : Font.Normal - secondsVisible : false - hourZero : false - minuteZero : true + height: 35 + width: parent.width / 2 + + NotificationBarSmall { id: _infoItem1 + 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 + } } + + Row { id: _alarmContentRow + anchors { + top: _infoItem.bottom + bottom: parent.bottom + left: parent.left + leftMargin: Variables.defaultMargin * 4 + right: parent.right + rightMargin: Variables.defaultMargin * 3 + margins: Variables.defaultMargin + + } + spacing: Variables.defaultMargin * 3 + width : _descriptionRect.width + + ListView {id: _listView + model : _model + height : _alarmContentRow.height + width : parent.width * 0.65 + currentIndex: 0 + interactive : false + clip : true + + delegate: Item { id: _delegateControl + width : parent.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 + rightMargin : _figureText.contentWidth + } + 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.text + wrapMode : Text.WordWrap + } + + Text { id: _figureText + anchors { + left: _delegateText.left + leftMargin: _delegateText.contentWidth + Variables.defaultMargin + verticalCenter: parent.verticalCenter + } + height : parent.height + font.pixelSize: 22 + font.italic : true + color : "#18559E" + text : ("(%1)").arg(_root.figureTextString) + visible : _delegateControl.ListView.isCurrentItem && _root.showFigureText + } + + 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 + } + + Text { id: _imageFigureText + anchors { + top: _figureImage.bottom + right: _figureImage.right + } + + font.pixelSize : 23 + font.weight : Font.Medium + color : Colors.alarmDialogGreyText + text : _root.figureTextString + visible : _root.showFigureText + } + } + } } - 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 : 30 + 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 +379,53 @@ 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.fontPixelAlarmTID } }