mirror of
https://github.com/celesrenata/end-4-flakes.git
synced 2026-06-06 10:49:26 -05:00
Celes Renata
93 lines
2.8 KiB
QML
93 lines
2.8 KiB
QML
import qs.modules.common
|
|
import qs.modules.common.functions
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
|
|
/**
|
|
* Material 3 styled SpinBox component.
|
|
*/
|
|
SpinBox {
|
|
id: root
|
|
|
|
property real baseHeight: 35
|
|
property real radius: Appearance.rounding.small
|
|
property real innerButtonRadius: Appearance.rounding.unsharpen
|
|
editable: true
|
|
|
|
background: Rectangle {
|
|
color: Appearance.colors.colLayer2
|
|
radius: root.radius
|
|
}
|
|
|
|
contentItem: Item {
|
|
implicitHeight: root.baseHeight
|
|
implicitWidth: Math.max(labelText.implicitWidth, 40)
|
|
|
|
StyledTextInput {
|
|
id: labelText
|
|
anchors.centerIn: parent
|
|
text: root.value // displayText would make the numbers weird like 1,000 instead of 1000
|
|
color: Appearance.colors.colOnLayer2
|
|
font.pixelSize: Appearance.font.pixelSize.small
|
|
validator: root.validator
|
|
onTextChanged: {
|
|
root.value = parseFloat(text);
|
|
}
|
|
}
|
|
}
|
|
|
|
down.indicator: Rectangle {
|
|
anchors {
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
}
|
|
implicitHeight: root.baseHeight
|
|
implicitWidth: root.baseHeight
|
|
topLeftRadius: root.radius
|
|
bottomLeftRadius: root.radius
|
|
topRightRadius: root.innerButtonRadius
|
|
bottomRightRadius: root.innerButtonRadius
|
|
|
|
color: root.down.pressed ? Appearance.colors.colLayer2Active :
|
|
root.down.hovered ? Appearance.colors.colLayer2Hover :
|
|
ColorUtils.transparentize(Appearance.colors.colLayer2)
|
|
Behavior on color {
|
|
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
|
}
|
|
|
|
MaterialSymbol {
|
|
anchors.centerIn: parent
|
|
text: "remove"
|
|
iconSize: 20
|
|
color: Appearance.colors.colOnLayer2
|
|
}
|
|
}
|
|
|
|
up.indicator: Rectangle {
|
|
anchors {
|
|
verticalCenter: parent.verticalCenter
|
|
right: parent.right
|
|
}
|
|
implicitHeight: root.baseHeight
|
|
implicitWidth: root.baseHeight
|
|
topRightRadius: root.radius
|
|
bottomRightRadius: root.radius
|
|
topLeftRadius: root.innerButtonRadius
|
|
bottomLeftRadius: root.innerButtonRadius
|
|
|
|
color: root.up.pressed ? Appearance.colors.colLayer2Active :
|
|
root.up.hovered ? Appearance.colors.colLayer2Hover :
|
|
ColorUtils.transparentize(Appearance.colors.colLayer2)
|
|
Behavior on color {
|
|
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
|
}
|
|
|
|
MaterialSymbol {
|
|
anchors.centerIn: parent
|
|
text: "add"
|
|
iconSize: 20
|
|
color: Appearance.colors.colOnLayer2
|
|
}
|
|
}
|
|
}
|