From c79c756a24af8dca1a5dd5bd05cb08092025d19a Mon Sep 17 00:00:00 2001 From: Emeric Date: Wed, 21 Sep 2022 12:15:23 +0200 Subject: [PATCH] Update UI components --- qml/components_generic/DataBarCompact.qml | 21 ++++++++++---------- qml/components_generic/ItemTag.qml | 7 +++---- qml/components_js/UtilsNumber.js | 6 +++++- qml/components_themed/MiddleSliderThemed.qml | 4 ++-- qml/components_themed/ProgressBarThemed.qml | 2 +- qml/components_themed/RangeSliderThemed.qml | 7 ++++--- qml/components_themed/SelectorMenuThemed.qml | 4 +++- qml/components_themed/SliderThemed.qml | 6 +++--- qml/components_themed/SpinBoxThemed.qml | 20 ++++++++++++++----- 9 files changed, 46 insertions(+), 31 deletions(-) diff --git a/qml/components_generic/DataBarCompact.qml b/qml/components_generic/DataBarCompact.qml index 8e74c8b..565093b 100644 --- a/qml/components_generic/DataBarCompact.qml +++ b/qml/components_generic/DataBarCompact.qml @@ -84,7 +84,7 @@ Item { } Rectangle { - id: item_data + id: rect_data width: { var res = UtilsNumber.normalize(value, valueMin, valueMax) * rect_bg.width @@ -145,13 +145,12 @@ Item { height: 15 y: -22 x: { - if (item_data.width < ((width / 2) + 8)) { // left + if (rect_data.width < ((textIndicator.width / 2) + 8)) { // left return 4 - } else if ((item_bg.width - item_data.width) < (width / 2)) { // right - return item_bg.width - width - 4 - } else { // whatever - return item_data.width - (width / 2) - 4 + } else if ((rect_bg.width - rect_data.width) < (textIndicator.width / 2)) { // right + return rect_bg.width - textIndicator.width - 4 } + return rect_data.width - (textIndicator.width / 2) - 4 } text: { @@ -190,14 +189,14 @@ Item { anchors.topMargin: -3 anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenterOffset: { - if (item_data.width < ((textIndicator.width / 2) + 8)) { // left - if (item_data.width > 12) { - return (item_data.width - ((textIndicator.width / 2) + 8)) + if (rect_data.width < ((textIndicator.width / 2) + 8)) { // left + if (rect_data.width > 12) { + return (rect_data.width - ((textIndicator.width / 2) + 8)) } else { return -((textIndicator.width / 2) - 4) } - } else if ((item_bg.width - item_data.width) < (textIndicator.width / 2)) { // right - return -((item_bg.width - item_data.width) - (textIndicator.width / 2)) - 4 + } else if ((rect_bg.width - rect_data.width) < (textIndicator.width / 2)) { // right + return -((rect_bg.width - rect_data.width) - (textIndicator.width / 2)) - 4 } return 0 } diff --git a/qml/components_generic/ItemTag.qml b/qml/components_generic/ItemTag.qml index f605891..0de50c2 100644 --- a/qml/components_generic/ItemTag.qml +++ b/qml/components_generic/ItemTag.qml @@ -10,13 +10,12 @@ Rectangle { width: contentText.contentWidth + 24 radius: Theme.componentRadius - color: backgroundColor + color: Theme.colorForeground property string text: "TAG" property string textColor: Theme.colorText property int textSize: Theme.fontSizeComponent - - property string backgroundColor: Theme.colorForeground + property int textCapitalization: Font.Normal // Font.AllUppercase Text { id: contentText @@ -28,6 +27,6 @@ Rectangle { color: control.textColor font.bold: true font.pixelSize: control.textSize - font.capitalization: Font.AllUppercase + font.capitalization: control.textCapitalization } } diff --git a/qml/components_js/UtilsNumber.js b/qml/components_js/UtilsNumber.js index 800212b..77808d7 100644 --- a/qml/components_js/UtilsNumber.js +++ b/qml/components_js/UtilsNumber.js @@ -1,5 +1,5 @@ // UtilsNumber.js -// Version 8 +// Version 9 .pragma library /* ************************************************************************** */ @@ -50,6 +50,10 @@ function mapNumber(n, a1, a2, b1, b2) { return (b1 + ((n-a1) * (b2-b1)) / (a2-a1)) } +function mapNumber_nocheck(n, a1, a2, b1, b2) { + return (b1 + ((n-a1) * (b2-b1)) / (a2-a1)) +} + /*! * Normalize n between min and max */ diff --git a/qml/components_themed/MiddleSliderThemed.qml b/qml/components_themed/MiddleSliderThemed.qml index fa7f1a2..9031ce1 100644 --- a/qml/components_themed/MiddleSliderThemed.qml +++ b/qml/components_themed/MiddleSliderThemed.qml @@ -18,7 +18,7 @@ T.Slider { width: control.availableWidth height: 4 radius: 2 - color: Theme.colorForeground + color: Theme.colorComponentBackground Rectangle { x: (handle.x < control.availableWidth / 2) ? handle.x : (control.width / 2) @@ -36,7 +36,7 @@ T.Slider { height: width radius: (width / 2) color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary - border.color: control.pressed ? Theme.colorPrimary : Theme.colorPrimary + border.color: Theme.colorPrimary MouseArea { anchors.fill: parent diff --git a/qml/components_themed/ProgressBarThemed.qml b/qml/components_themed/ProgressBarThemed.qml index 7566776..71466a4 100644 --- a/qml/components_themed/ProgressBarThemed.qml +++ b/qml/components_themed/ProgressBarThemed.qml @@ -11,7 +11,7 @@ T.ProgressBar { value: 0.5 - property var colorBackground: Theme.colorForeground + property var colorBackground: Theme.colorComponentBackground property var colorForeground: Theme.colorPrimary background: Rectangle { diff --git a/qml/components_themed/RangeSliderThemed.qml b/qml/components_themed/RangeSliderThemed.qml index 2b54b30..b8e7a74 100644 --- a/qml/components_themed/RangeSliderThemed.qml +++ b/qml/components_themed/RangeSliderThemed.qml @@ -8,6 +8,7 @@ T.RangeSlider { id: control implicitWidth: 200 implicitHeight: Theme.componentHeight + padding: 8 first.value: 0.25 second.value: 0.75 @@ -19,7 +20,7 @@ T.RangeSlider { width: control.availableWidth height: 4 radius: 2 - color: Theme.colorForeground + color: Theme.colorComponentBackground Rectangle { x: (control.first.visualPosition * parent.width) @@ -37,7 +38,7 @@ T.RangeSlider { height: width radius: (width / 2) color: first.pressed ? Theme.colorSecondary : Theme.colorPrimary - border.color: first.pressed ? Theme.colorSecondary : Theme.colorPrimary + border.color: Theme.colorPrimary MouseArea { anchors.fill: parent @@ -65,7 +66,7 @@ T.RangeSlider { height: width radius: (width / 2) color: second.pressed ? Theme.colorSecondary : Theme.colorPrimary - border.color: second.pressed ? Theme.colorSecondary : Theme.colorPrimary + border.color: Theme.colorPrimary MouseArea { anchors.fill: parent diff --git a/qml/components_themed/SelectorMenuThemed.qml b/qml/components_themed/SelectorMenuThemed.qml index 1d70258..48e756e 100644 --- a/qml/components_themed/SelectorMenuThemed.qml +++ b/qml/components_themed/SelectorMenuThemed.qml @@ -9,7 +9,9 @@ Item { id: selectorMenu implicitWidth: 128 implicitHeight: 32 + width: contentRow.width + opacity: enabled ? 1 : 0.4 signal menuSelected(var index) property int currentSelection: 1 @@ -23,7 +25,7 @@ Item { radius: Theme.componentRadius color: Theme.colorComponentBackground - border.width: 1 + border.width: Theme.componentBorderWidth border.color: Theme.colorComponentBorder layer.enabled: true diff --git a/qml/components_themed/SliderThemed.qml b/qml/components_themed/SliderThemed.qml index 3c5f381..0e6b677 100644 --- a/qml/components_themed/SliderThemed.qml +++ b/qml/components_themed/SliderThemed.qml @@ -8,7 +8,7 @@ T.Slider { id: control implicitWidth: 200 implicitHeight: Theme.componentHeight - padding: 4 + padding: 8 value: 0.5 @@ -18,7 +18,7 @@ T.Slider { width: control.availableWidth height: 4 radius: 2 - color: Theme.colorForeground + color: Theme.colorComponentBackground Rectangle { width: control.visualPosition * parent.width @@ -35,7 +35,7 @@ T.Slider { height: width radius: (width / 2) color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary - border.color: control.pressed ? Theme.colorPrimary : Theme.colorPrimary + border.color: Theme.colorPrimary MouseArea { anchors.fill: parent diff --git a/qml/components_themed/SpinBoxThemed.qml b/qml/components_themed/SpinBoxThemed.qml index 2aafa6c..8b1fe45 100644 --- a/qml/components_themed/SpinBoxThemed.qml +++ b/qml/components_themed/SpinBoxThemed.qml @@ -69,7 +69,7 @@ T.SpinBox { contentItem: Item { Row { anchors.centerIn: parent - spacing: -2 + spacing: 2 TextInput { height: control.height @@ -77,10 +77,11 @@ T.SpinBox { color: Theme.colorComponentText opacity: enabled ? 1.0 : 0.33 - selectionColor: Theme.colorText + selectionColor: Theme.colorPrimary selectedTextColor: "white" + selectByMouse: control.editable - text: control.textFromValue(control.value, control.locale) + text: control.value font: control.font horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter @@ -90,8 +91,17 @@ T.SpinBox { inputMethodHints: Qt.ImhFormattedNumbersOnly onEditingFinished: { - control.value = control.valueFromText(text, control.locale) + var v = parseInt(text) + if (text.length <= 0) v = control.from + if (isNaN(v)) v = control.from + if (v < control.from) v = control.from + if (v > control.to) v = control.to + + control.value = v + text = v + control.focus = false + control.valueModified() } } @@ -128,7 +138,7 @@ T.SpinBox { anchors.centerIn: parent width: UtilsNumber.round2(parent.height * 0.4) height: 2 - color: enabled ? Theme.colorComponentContent : Theme.colorSubText + color: Theme.colorComponentContent } Rectangle { anchors.centerIn: parent