Skip to content

Commit

Permalink
Update UI components
Browse files Browse the repository at this point in the history
  • Loading branch information
@emericg
emericg committed Sep 21, 2022
1 parent 4b5554b commit c79c756
Show file tree
Hide file tree
Showing 9 changed files with 46 additions and 31 deletions.
21 changes: 10 additions & 11 deletions qml/components_generic/DataBarCompact.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ Item {
}

Rectangle {
id: item_data
id: rect_data
width: {
var res = UtilsNumber.normalize(value, valueMin, valueMax) * rect_bg.width

Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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
}
Expand Down
7 changes: 3 additions & 4 deletions qml/components_generic/ItemTag.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -28,6 +27,6 @@ Rectangle {
color: control.textColor
font.bold: true
font.pixelSize: control.textSize
font.capitalization: Font.AllUppercase
font.capitalization: control.textCapitalization
}
}
6 changes: 5 additions & 1 deletion qml/components_js/UtilsNumber.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// UtilsNumber.js
// Version 8
// Version 9
.pragma library

/* ************************************************************************** */
Expand Down Expand Up @@ -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
*/
Expand Down
4 changes: 2 additions & 2 deletions qml/components_themed/MiddleSliderThemed.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion qml/components_themed/ProgressBarThemed.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 4 additions & 3 deletions qml/components_themed/RangeSliderThemed.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ T.RangeSlider {
id: control
implicitWidth: 200
implicitHeight: Theme.componentHeight
padding: 8

first.value: 0.25
second.value: 0.75
Expand All @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion qml/components_themed/SelectorMenuThemed.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions qml/components_themed/SliderThemed.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ T.Slider {
id: control
implicitWidth: 200
implicitHeight: Theme.componentHeight
padding: 4
padding: 8

value: 0.5

Expand All @@ -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
Expand All @@ -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
Expand Down
20 changes: 15 additions & 5 deletions qml/components_themed/SpinBoxThemed.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,18 +69,19 @@ T.SpinBox {
contentItem: Item {
Row {
anchors.centerIn: parent
spacing: -2
spacing: 2

TextInput {
height: control.height
anchors.verticalCenter: parent.verticalCenter

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
Expand All @@ -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()
}
}

Expand Down Expand Up @@ -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
Expand Down

0 comments on commit c79c756

Please sign in to comment.