Index: sources/gui/qml/components/ProgressRect.qml =================================================================== diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/ProgressRect.qml (.../ProgressRect.qml) (revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263) +++ sources/gui/qml/components/ProgressRect.qml (.../ProgressRect.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -27,7 +27,7 @@ */ RangeRect { id: _root property real value : 0 - property real margin : Variables.rangeRectMargin + property real margin : Variables.progressbarRectMargin QtObject { id: _private property int length: if ( value < minimum ) { Index: sources/gui/qml/components/RangeRect.qml =================================================================== diff -u -r828e0b187e2fa3f75d769938bede41ef34683493 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/RangeRect.qml (.../RangeRect.qml) (revision 828e0b187e2fa3f75d769938bede41ef34683493) +++ sources/gui/qml/components/RangeRect.qml (.../RangeRect.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -45,6 +45,7 @@ property real leftRightTouchMargin: 0 property bool isRoundedEnds : true property bool hasBorder : true + property color borderColor : Colors.sliderBorderInactive function adjustOverlap() { // Due to font size not being fixed and be different depending on text, @@ -70,7 +71,7 @@ radius : isRoundedEnds ? (height/2) : Variables.rangeRectRadius border.width: hasBorder ? Variables.rangeRectBorderWidth : 0 - border.color: Colors.rangeRectBorderColor + border.color: borderColor Text { id: _textMinimum visible : false Index: sources/gui/qml/components/RangeSlider.qml =================================================================== diff -u -r7b4219600ec64c2860113225ced0b5fc839b8ad2 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/RangeSlider.qml (.../RangeSlider.qml) (revision 7b4219600ec64c2860113225ced0b5fc839b8ad2) +++ sources/gui/qml/components/RangeSlider.qml (.../RangeSlider.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -90,6 +90,7 @@ isRoundedEnds : true hasBorder : true + borderColor : (_root.minAdjusted && _root.maxAdjusted) ? Colors.sliderBorderActive : Colors.sliderBorderInactive minimum : 0 maximum : 0 @@ -241,7 +242,7 @@ maxValue = vValue } - /// The main range rectangle bar + /// The main range rectangle bar - This is the "highlighted" area of the slider RangeRect { id: _rangeRect property alias lowerBound : _rangeRect.minimum property alias upperBound : _rangeRect.maximum @@ -255,6 +256,7 @@ decimal : _root.decimal isRoundedEnds : _root.isRoundedEnds hasBorder : _root.hasBorder + borderColor : (_root.minAdjusted && _root.maxAdjusted) ? Colors.sliderBorderActive : Colors.sliderBorderInactive minText { visible: false @@ -285,8 +287,10 @@ /// Tick mark on the slider regarding the defined step within minimum and maximum in the range Loader { id: _ticksLoader active : _root.ticks - anchors.fill : parent - sourceComponent : _root.showTickmarks ? _tickMarkFactory : undefined + width : _root.width + height : (_rangeRect.height - Variables.sliderDefaultRoundTickMarkDiameter) + anchors.bottom : _root.bottom + sourceComponent : _root.showTickmarks ? _tickMarkFactory : undefine } Component { id:_tickMarkFactory @@ -299,8 +303,8 @@ textColor : _root.color lineTickMarkHeight: _rangeRect.height isTickMarkRound : _root.isTickMarksRound - yDisplacement : _root.isTickMarksRound ? (-_rangeRect.height) : 0 - isDebugPrint: true + yDisplacement : _root.border.width/2 - 1 // had to subtract 1 to center on the _rangeRect + showEndMarks : false } } onDragged: { Index: sources/gui/qml/components/ScrollBar.qml =================================================================== diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/ScrollBar.qml (.../ScrollBar.qml) (revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263) +++ sources/gui/qml/components/ScrollBar.qml (.../ScrollBar.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -43,6 +43,6 @@ radius : Variables.dialogRadius y : ( flickable instanceof Flickable) ? flickable.height * flickable.visibleArea.yPosition : 0 height : ( flickable instanceof Flickable) ? flickable.height * flickable.visibleArea.heightRatio : 0 - color : "#80696969" // half transparent dimgray + color : Colors.scrollBarBgColor } } Index: sources/gui/qml/components/Slider.qml =================================================================== diff -u -r7b4219600ec64c2860113225ced0b5fc839b8ad2 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/Slider.qml (.../Slider.qml) (revision 7b4219600ec64c2860113225ced0b5fc839b8ad2) +++ sources/gui/qml/components/Slider.qml (.../Slider.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -118,6 +118,7 @@ height : Variables.progressbarHeight touchMargin : 25 leftRightTouchMargin: _handler.width/2 + borderColor : _root.isActive ? Colors.sliderBorderActive : Colors.sliderBorderInactive minimum : 0 maximum : 0 @@ -219,18 +220,21 @@ lineTickMarkHeight : _progressRect.height lineTickMarkThickness : _root.tickMarksThickness isTickMarkRound : _root.isRoundedEnds - yDisplacement : _root.isRoundedEnds ? (-_progressRect.height) : 0 + yDisplacement : _root.isRoundedEnds ? (-_handler.height/2 - _handler.border.width) : 0 } } + ProgressRect { id: _progressRect property real previousSliderValue: Number.NaN - color : Colors.transparent + color : Colors.sliderHighlightColor decimal : _root.decimal minimum : _root.minimum maximum : _root.maximum + leftRightTouchMargin: _handler.width/2 isRoundedEnds : _root.isRoundedEnds hasBorder : _root.hasBorder + borderColor : _root.isActive ? Colors.sliderBorderActive : Colors.sliderBorderInactive // propagation is not working on drag ! onDragged: { Index: sources/gui/qml/components/SliderArrows.qml =================================================================== diff -u -r828e0b187e2fa3f75d769938bede41ef34683493 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/SliderArrows.qml (.../SliderArrows.qml) (revision 828e0b187e2fa3f75d769938bede41ef34683493) +++ sources/gui/qml/components/SliderArrows.qml (.../SliderArrows.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -29,15 +29,17 @@ signal incrementValue() signal decrementValue() - width : 200 - height : parent.height + width : (Variables.sliderAdjustButtonDiameter * 2 + Variables.sliderAdjustButtonSpacing) // total width with 2 buttons and space in between + height : Variables.sliderAdjustButtonDiameter anchors.leftMargin : Variables.sliderAdjustButtonSpacing spacing : Variables.sliderAdjustButtonSpacing TouchRect { id: _decrementValueButton width: Variables.sliderAdjustButtonDiameter height: Variables.sliderAdjustButtonDiameter radius: Variables.sliderAdjustButtonDiameter + border.color: _adjustValueButtonsContainer.enabled ? Colors.sliderBorderActive : Colors.sliderBorderInactive + anchors.verticalCenter: parent.verticalCenter Image { id: _decrementArrowImage anchors.centerIn: parent @@ -59,6 +61,8 @@ width: Variables.sliderAdjustButtonDiameter height: Variables.sliderAdjustButtonDiameter radius: Variables.sliderAdjustButtonDiameter + border.color: _adjustValueButtonsContainer.enabled ? Colors.sliderBorderActive : Colors.sliderBorderInactive + anchors.verticalCenter: parent.verticalCenter Image { id: _incrementArrowImage anchors.centerIn: parent Index: sources/gui/qml/components/SliderCreateTreatment.qml =================================================================== diff -u -r7b4219600ec64c2860113225ced0b5fc839b8ad2 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/SliderCreateTreatment.qml (.../SliderCreateTreatment.qml) (revision 7b4219600ec64c2860113225ced0b5fc839b8ad2) +++ sources/gui/qml/components/SliderCreateTreatment.qml (.../SliderCreateTreatment.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -42,7 +42,7 @@ property bool active : false property bool valid : true - property alias showAdjustButtons : _sliderArrows.visible + property alias enableAdjustButtons : _sliderArrows.enabled property bool isUsingDisplayValue : true // indicate whether using the slider's actual value or displayedValue signal pressed () @@ -112,7 +112,7 @@ anchors.horizontalCenter: parent.horizontalCenter anchors.bottom : parent.bottom width : Variables.createTreatmentSliderWidth - height : Variables.sliderCreateTreatmentHeight + height : Variables.createTreatmentSliderBodyHeight diameter : Variables.sliderCircleDiameter touchMargin : Variables.createTreatmentSliderMargin handlerColor : Colors.createTreatmentInactive @@ -121,6 +121,7 @@ ticks : true isRoundedEnds : true hasBorder : true + borderColor : _root.active ? Colors.sliderBorderActive : Colors.sliderBorderInactive onDragged : { setInteractive(false) ; ; setActiveValid( );} onPressed : { setInteractive(false) ; _root.pressed ( ) ; } onReleased : { setInteractive(true ) ; _root.released( ) ; } @@ -129,6 +130,7 @@ SliderArrows{ id:_sliderArrows visible : true + enabled: _root.active anchors.verticalCenter : _slider.verticalCenter anchors.left : _slider.right anchors.leftMargin : Variables.sliderAdjustButtonLeftMargin Index: sources/gui/qml/components/TickMarks.qml =================================================================== diff -u -r7b4219600ec64c2860113225ced0b5fc839b8ad2 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/components/TickMarks.qml (.../TickMarks.qml) (revision 7b4219600ec64c2860113225ced0b5fc839b8ad2) +++ sources/gui/qml/components/TickMarks.qml (.../TickMarks.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -38,7 +38,7 @@ property bool isTickMarkRound : false property real roundTickMarkDiameter : Variables.sliderDefaultRoundTickMarkDiameter property real yDisplacement : 0 - property bool showFirstMark : true + property bool showEndMarks : true // For the case that the tickmark is a line property real lineTickMarkHeight : 20 @@ -47,22 +47,17 @@ property bool textVisible : false property color textColor : Colors.textMain - property bool isDebugPrint: false - anchors.fill: parent Repeater { id : _repeater - model: (maximum - minimum) / step + 1 + readonly property real totalTickCount: ((maximum - minimum) / step + 1) // added property for clarity - Rectangle { - property int gap : stepSnap ? - ( - (parent.width * (step - (minimum % step))) / (maximum - minimum) - ) : 0 + model: totalTickCount - visible : (index > 0) || (index === 0 && showFirstMark) - x : (((index * step) * (parent.width - parent.x)) / (maximum - minimum)) + gap - width/2 - y : _root.yDisplacement + Variables.rangeRectBorderWidth // adjusting the y of the line tick to account for the slider border + Rectangle { + visible : _repeater.isTickMarkVisible(index) + x : (((index * step) * (parent.width - parent.x)) / (maximum - minimum)) - width/2 - 2 // "-width/2 - 2" for moving tick mark to center on handle + y : _root.yDisplacement color : _root.color height : isTickMarkRound ? _root.roundTickMarkDiameter : _root.lineTickMarkHeight @@ -81,5 +76,17 @@ } } } + + function isTickMarkVisible(index) { + if (showEndMarks) { + return true // all marks shown + } else { + // Only the center marks are shown, ie: exclude the end marks + if ((index > 0) && (index < (_repeater.totalTickCount-1))) { + return true + } + } + return false + } } } Index: sources/gui/qml/globals/Colors.qml =================================================================== diff -u -r828e0b187e2fa3f75d769938bede41ef34683493 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/globals/Colors.qml (.../Colors.qml) (revision 828e0b187e2fa3f75d769938bede41ef34683493) +++ sources/gui/qml/globals/Colors.qml (.../Colors.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -121,8 +121,11 @@ readonly property color createTreatmentTextReady : white readonly property color createTreatmentInvalidParam : red - readonly property color rangeRectBorderColor : "white" + readonly property color sliderBorderActive : "white" + readonly property color sliderBorderInactive : createTreatmentTextNotReady + readonly property color scrollBarBgColor :"white" //"#80696969" // half transparent dimgray + // ---------- < PRS > Related Section ---------- // Alarm priority colors function alarmPriorityColors(vPriority) { Index: sources/gui/qml/globals/Variables.qml =================================================================== diff -u -r7b4219600ec64c2860113225ced0b5fc839b8ad2 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/globals/Variables.qml (.../Variables.qml) (revision 7b4219600ec64c2860113225ced0b5fc839b8ad2) +++ sources/gui/qml/globals/Variables.qml (.../Variables.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -64,11 +64,8 @@ readonly property int dialogMargin : mainMenuHeight * 2 readonly property int dialogWidth : applicationWidth - dialogMargin readonly property int dialogHeight : applicationHeight - dialogMargin - readonly property int dialogRadius : 5 + readonly property int dialogRadius : 10 - readonly property real sliderDefaultRoundTickMarkDiameter : 5 - readonly property real sliderCreateTreatmentHeight : 15 - readonly property int rangeRectMargin : 1 readonly property int rangeRectRadius : 2 readonly property int rangeRectTextMargin : 7 @@ -81,6 +78,7 @@ readonly property int progressbarHeight : 30 readonly property int progressbarHandler : 35 readonly property int progressbarHandlerBorderWidth : 4 + readonly property int progressbarRectMargin : 0 // default as 0 to avoid progressRect having a thicker border than slider body readonly property int progressbarFluidHeight : 5 readonly property int progressbarSmall : 5 @@ -119,9 +117,11 @@ readonly property int createTreatmentTableMargin : 20 readonly property int createTreatmentSubTableHeight : 50 readonly property int createTreatmentSubTableWidth : 500 - readonly property int createTreatmentSliderMargin : 40 + readonly property int createTreatmentSliderBodyHeight : 15 + readonly property int createTreatmentSliderMargin : createTreatmentSliderBodyHeight readonly property int createTreatmentSliderHeight : 65 readonly property int createTreatmentSliderWidth : 750 + readonly property int createTreatmentSwitchYDisplacement : 15 readonly property int ultrafiltrationProgressbarWidth : 880 readonly property int ultrafiltrationAdjustmtenOptionWidth : 520 @@ -175,6 +175,8 @@ readonly property int sliderAdjustButtonDiameter : 50 readonly property int sliderAdjustButtonLeftMargin : 30 + readonly property real sliderDefaultRoundTickMarkDiameter : 5 + readonly property int circleButtonDefaultDiameter : 45 Index: sources/gui/qml/pages/pretreatment/create/PreTreatmentCreate.qml =================================================================== diff -u -r828e0b187e2fa3f75d769938bede41ef34683493 -r8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53 --- sources/gui/qml/pages/pretreatment/create/PreTreatmentCreate.qml (.../PreTreatmentCreate.qml) (revision 828e0b187e2fa3f75d769938bede41ef34683493) +++ sources/gui/qml/pages/pretreatment/create/PreTreatmentCreate.qml (.../PreTreatmentCreate.qml) (revision 8d7f8d2ac6620e92ab3cd239d7d8641113ea3e53) @@ -173,9 +173,10 @@ onReleased : vTreatmentCreate.heparinDispensingRate = value adjustable : _heparinDispensingRateSwitch.checked inActiveZero: true - showAdjustButtons: _heparinDispensingRateSwitch.checked + enableAdjustButtons: _heparinDispensingRateSwitch.checked // ToDo: create a component for Switch, + // ToDo: Consider putting the new CheckBox component into the SliderCreateTreatment component and set via boolean property // This is a full implementation of a Switch Switch { id: _heparinDispensingRateSwitch property bool active: false @@ -190,7 +191,7 @@ } x : width * -1.5 - y : 5 // these values are set to align the switch with slider + y : Variables.createTreatmentSwitchYDisplacement // these values are set to align the switch with slider width : 75 // these values are set to align the switch with slider height : 85 // these values are set to align the switch with slider // DEBUG: background : Rectangle { color : "white" } @@ -244,9 +245,10 @@ onReleased : vTreatmentCreate.heparinBolusVolume = value adjustable : _heparinBolusVolumeSwitch.checked inActiveZero: true - showAdjustButtons: _heparinBolusVolumeSwitch.checked + enableAdjustButtons: _heparinBolusVolumeSwitch.checked // ToDo: create a component for this, + // ToDo: Consider putting the new CheckBox component into the SliderCreateTreatment component and set via boolean property // This is a full implementation of a CheckBox Switch { id: _heparinBolusVolumeSwitch property bool active: false @@ -261,7 +263,7 @@ } x : width * -1.5 - y : 5 // these values are set to align the switch with slider + y : Variables.createTreatmentSwitchYDisplacement // these values are set to align the switch with slider width : 75 // these values are set to align the switch with slider height : 85 // these values are set to align the switch with slider // DEBUG: background : Rectangle { color : "white" } @@ -312,7 +314,7 @@ onPressed : vTreatmentCreate.heparinStopTime = value onReleased : vTreatmentCreate.heparinStopTime = value enabled : false // this switch dipends on the heparin dispencing - showAdjustButtons: _heparinDispensingRateSwitch.checked + enableAdjustButtons: _heparinDispensingRateSwitch.checked } SliderCreateTreatment { id: _salineBolus @@ -415,7 +417,7 @@ RangeSlider { id: _arterialPressureLimits objectName : "_arterialPressureLimitsSlider" // dimension - height : Variables.sliderCreateTreatmentHeight + height : Variables.createTreatmentSliderBodyHeight width : Variables.createTreatmentSliderWidth diameter : Variables.sliderCircleDiameter anchors.horizontalCenter: parent.horizontalCenter @@ -506,7 +508,7 @@ RangeSlider { id: _venousPressureLimits objectName: "_venousPressureLimitsSlider" // dimension - height : Variables.sliderCreateTreatmentHeight + height : Variables.createTreatmentSliderBodyHeight width : Variables.createTreatmentSliderWidth diameter : Variables.sliderCircleDiameter anchors.horizontalCenter: parent.horizontalCenter @@ -576,9 +578,10 @@ onReleased : vTreatmentCreate.bloodPressureMeasureInterval = value adjustable : _bloodPressureIntervalSwitch.checked inActiveZero: true - showAdjustButtons: _bloodPressureIntervalSwitch.checked + enableAdjustButtons: _bloodPressureIntervalSwitch.checked // ToDo: create a component for this, + // ToDo: Consider putting the new CheckBox component into the SliderCreateTreatment component and set via boolean property // This is a full implementation of a CheckBox Switch { id: _bloodPressureIntervalSwitch property bool active: false @@ -594,7 +597,7 @@ } x : width * -1.5 - y : 5 // these values are set to align the switch with slider + y : Variables.createTreatmentSwitchYDisplacement // these values are set to align the switch with slider width : 75 // these values are set to align the switch with slider height : 85 // these values are set to align the switch with slider // DEBUG: background : Rectangle { color : "white" }