Index: sources/gui/qml/components/RangeRect.qml =================================================================== diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r839893734937449efb6e7c31787d2c44515b69af --- sources/gui/qml/components/RangeRect.qml (.../RangeRect.qml) (revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263) +++ sources/gui/qml/components/RangeRect.qml (.../RangeRect.qml) (revision 839893734937449efb6e7c31787d2c44515b69af) @@ -42,13 +42,15 @@ property string unit : "" property real touchMargin: 0 + property bool isRoundedEnds : false + property bool hasBorder : false - width : parent.width - height : parent.height - color : Colors.backgroundRangeRect - radius : Variables.rangeRectRadius + radius : isRoundedEnds ? Variables.rangeRectRadiusRounded : Variables.rangeRectRadius + border.width: hasBorder ? Variables.rangeRectBorderWidth : 0 + border.color: Colors.rangeRectBorderColor + Text { id: _textMinimum visible : false Index: sources/gui/qml/components/Slider.qml =================================================================== diff -u -raf8d98b36b427e2b5f4d6659fcf3b58ee79eab6a -r839893734937449efb6e7c31787d2c44515b69af --- sources/gui/qml/components/Slider.qml (.../Slider.qml) (revision af8d98b36b427e2b5f4d6659fcf3b58ee79eab6a) +++ sources/gui/qml/components/Slider.qml (.../Slider.qml) (revision 839893734937449efb6e7c31787d2c44515b69af) @@ -31,6 +31,7 @@ property bool ticks : false + // TODO suggest to BN that we should rename color to progressBarBgColor because slider's rangeRect has a color property also property alias color : _progressRect.color property alias bgColor : _root.color @@ -53,10 +54,8 @@ function setActive(active) { if (active) { - color = Colors.createTreatmentActive handlerColor = Colors.createTreatmentActive } else { - color = Colors.createTreatmentInactive handlerColor = Colors.createTreatmentInactive } @@ -149,33 +148,10 @@ } } - ProgressRect { id: _progressRect - color : Colors.highlightProgressBar - decimal : _root.decimal - minimum : _root.minimum - maximum : _root.maximum - height: 5 - // propagation is not working on drag ! - onDragged: { - setValue(vMouseEvent.x) - progressRectDragged() - } - onClicked: { - setValue(vMouseEvent.x) - progressRectClicked() - } - onPressed: { - setValue(vMouseEvent.x) - _root.pressed(vMouseEvent) - } - onReleased: { - setValue(vMouseEvent.x) - _root.released(vMouseEvent) - } - onWidthChanged: { - // TODO: DEN-5603 : Still has some issues on high resolution sliders [ handler jumps to the 0 ]. - // setHandlerPosition() - } + Rectangle { id: _progressRectBackground + anchors.fill : _progressRect + color : _root.isActive ? Colors.sliderHighlightColor : Colors.createTreatmentInactive + radius : _root.isRoundedEnds ? (height/2) : 0 } // used loader for performance since it may not always be required. @@ -191,9 +167,33 @@ step : _root.step stepSnap : _root.stepSnap textColor : _root.color + length : _progressRect.height + isTickMarkRound : _root.isRoundedEnds + yDisplacement : _root.isRoundedEnds ? (-_progressRect.height) : 0 } } + ProgressRect { id: _progressRect + property real previousSliderValue: Number.NaN + color : Colors.transparent + decimal : _root.decimal + minimum : _root.minimum + maximum : _root.maximum + isRoundedEnds : _root.isRoundedEnds + hasBorder : _root.hasBorder + + // propagation is not working on drag ! + onDragged: { + _root.dragged(vMouseEvent) + } + onPressed: { + _root.pressed(vMouseEvent) + } + onReleased: { + _root.released(vMouseEvent) + } + } + onDragged: { setValue(vMouseEvent.x) } Index: sources/gui/qml/components/SliderCreateTreatment.qml =================================================================== diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r839893734937449efb6e7c31787d2c44515b69af --- sources/gui/qml/components/SliderCreateTreatment.qml (.../SliderCreateTreatment.qml) (revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263) +++ sources/gui/qml/components/SliderCreateTreatment.qml (.../SliderCreateTreatment.qml) (revision 839893734937449efb6e7c31787d2c44515b69af) @@ -109,14 +109,15 @@ anchors.horizontalCenter: parent.horizontalCenter anchors.bottom : parent.bottom width : Variables.createTreatmentSliderWidth + height : Variables.sliderCreateTreatmentHeight diameter : Variables.sliderCircleDiameter touchMargin : Variables.createTreatmentSliderMargin - color : Colors.createTreatmentInactive handlerColor : Colors.createTreatmentInactive handlerVisible : _root.adjustable - height : Variables.progressbarFluidHeight isActive : _root.active ticks : true + isRoundedEnds : true + hasBorder : true onPressed : { setInteractive(false) ; _root.pressed ( ) ; setActiveValid( ) } onDragged : { setInteractive(false) ; ; setActiveValid( ) } onReleased : { setInteractive(true ) ; _root.released( ) ; } Index: sources/gui/qml/components/TickMarks.qml =================================================================== diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r839893734937449efb6e7c31787d2c44515b69af --- sources/gui/qml/components/TickMarks.qml (.../TickMarks.qml) (revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263) +++ sources/gui/qml/components/TickMarks.qml (.../TickMarks.qml) (revision 839893734937449efb6e7c31787d2c44515b69af) @@ -39,35 +39,89 @@ property int length : parent.height property int thickness : 1 + property bool isTickMarkRound : false + property real roundTickMarkDiameter : Variables.sliderDefaultRoundTickMarkDiameter + property real yDisplacement : 0 + property bool showFirstMark : false + property bool textVisible : false property color textColor : Colors.textMain anchors.fill: parent Repeater { id : _repeater + model: (maximum - minimum) / step // + 1 - Line { id: _line + + // TODO determine if using loader is ideal or prefer to use a single Rectangle that can be transformed into line or circle + Loader { property int gap : stepSnap ? - ( - (parent.width * (step - (minimum % step))) / (maximum - minimum) - ) : 0 + ( + (parent.width * (step - (minimum % step))) / (maximum - minimum) + ) : 0 + + property real componentX : (((index * step) * (parent.width - parent.x)) / (maximum - minimum)) + gap + property real componentY : _root.yDisplacement + + property int repeaterIndex: index + + sourceComponent: isTickMarkRound ? _roundTickMarkFactory : _lineTickMarkFactory + } + } + + Component { + id: _roundTickMarkFactory + // The round style tick marks + + // TODO need to determine if pre-existing "Circle.qml" component can be used here in place + Rectangle{ + visible : (repeaterIndex > 0) || (repeaterIndex === 0 && showFirstMark) + x : componentX - width/2 + y : componentY + color : _root.color + height : _root.roundTickMarkDiameter + width : _root.roundTickMarkDiameter + radius : _root.roundTickMarkDiameter + + Loader{ + readonly property int tickIndex: repeaterIndex + sourceComponent: textVisible ? _tickLabelFactory : undefined + } + } + } + + Component { + id: _lineTickMarkFactory + // The Line style tick marks + Line { + visible : (repeaterIndex > 0) || (repeaterIndex === 0 && showFirstMark) + x : componentX - width/2 + y : componentY + Variables.rangeRectBorderWidth // adjusting the y of the line tick to account for the slider border + color : _root.color orientation : _root.orientation thickness : _root.thickness - color : _root.color - length : _root.length - x: (((index * step) * (parent.width - parent.x)) / (maximum - minimum)) + gap - y: 0 - Text { id : _text - visible: textVisible - color: _root.textColor - font.pixelSize: 10 - text: ((index * step) + minimum).toFixed(decimal) - anchors { - top: parent.bottom - topMargin: 5 - horizontalCenter: parent.horizontalCenter - } + length : _root.length - (Variables.rangeRectBorderWidth * 2) + + Loader{ + readonly property int tickIndex: repeaterIndex + sourceComponent: textVisible ? _tickLabelFactory : undefined } } } + + Component { + id: _tickLabelFactory + // The value labels underneath the tick marks + Text { id : _text + visible: true + color: _root.textColor + font.pixelSize: 10 + text: ((tickIndex * step) + minimum).toFixed(decimal) + anchors { + top: parent.bottom + topMargin: 5 + horizontalCenter: parent.horizontalCenter + } + } + } } Index: sources/gui/qml/globals/Colors.qml =================================================================== diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r839893734937449efb6e7c31787d2c44515b69af --- sources/gui/qml/globals/Colors.qml (.../Colors.qml) (revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263) +++ sources/gui/qml/globals/Colors.qml (.../Colors.qml) (revision 839893734937449efb6e7c31787d2c44515b69af) @@ -42,6 +42,8 @@ readonly property color backgroundDottedMenu : "#64809D" readonly property color backgroundSlider : "#195187" + readonly property color sliderHighlightColor : "orange" + readonly property color backgroundUltrafiltrationButton : "#31568F" readonly property color textValueUltrafiltrationButtonFg: "#98aec2" @@ -119,6 +121,8 @@ readonly property color createTreatmentTextReady : white readonly property color createTreatmentInvalidParam : red + readonly property color rangeRectBorderColor : "white" + // ---------- < PRS > Related Section ---------- // Alarm priority colors function alarmPriorityColors(vPriority) { Index: sources/gui/qml/globals/Variables.qml =================================================================== diff -u -ra6586ea871f21a08e7d50552983360fb5e344b3a -r839893734937449efb6e7c31787d2c44515b69af --- sources/gui/qml/globals/Variables.qml (.../Variables.qml) (revision a6586ea871f21a08e7d50552983360fb5e344b3a) +++ sources/gui/qml/globals/Variables.qml (.../Variables.qml) (revision 839893734937449efb6e7c31787d2c44515b69af) @@ -66,9 +66,14 @@ readonly property int dialogHeight : applicationHeight - dialogMargin readonly property int dialogRadius : 5 + readonly property real sliderDefaultRoundTickMarkDiameter : 5 + readonly property real sliderCreateTreatmentHeight : 15 + readonly property int rangeRectMargin : 1 readonly property int rangeRectRadius : 2 + readonly property int rangeRectRadiusRounded : sliderCreateTreatmentHeight/2 readonly property int rangeRectTextMargin : 7 + readonly property int rangeRectBorderWidth : 2 readonly property int rangeMarkerHeight : 60 readonly property int rangeMarkerHeightMidle : 40 readonly property int rangeMarkerHeightShort : 20 @@ -98,7 +103,6 @@ readonly property int checkListViewItemWidth : 350 readonly property int checkListViewItemHeight : 60 - readonly property int pauseIconDiameter : 60 readonly property int topBarMenuHeight : 100 readonly property int sliderCircleDiameter : 30 @@ -117,7 +121,7 @@ readonly property int createTreatmentSubTableHeight : 50 readonly property int createTreatmentSubTableWidth : 500 readonly property int createTreatmentSliderMargin : 40 - readonly property int createTreatmentSliderHeight : 50 + readonly property int createTreatmentSliderHeight : 65 readonly property int createTreatmentSliderWidth : 750 readonly property int ultrafiltrationProgressbarWidth : 880