summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/controls/IconButton.qml27
-rw-r--r--components/controls/IconTextButton.qml15
-rw-r--r--components/controls/SplitButton.qml15
-rw-r--r--components/controls/TextButton.qml15
4 files changed, 41 insertions, 31 deletions
diff --git a/components/controls/IconButton.qml b/components/controls/IconButton.qml
index 0b39d97..6e55064 100644
--- a/components/controls/IconButton.qml
+++ b/components/controls/IconButton.qml
@@ -15,7 +15,7 @@ StyledRect {
property alias icon: label.text
property bool checked
property bool toggle
- property real padding: type == IconButton.Text ? Appearance.padding.small / 2 : Appearance.padding.smaller
+ property real padding: type === IconButton.Text ? Appearance.padding.small / 2 : Appearance.padding.smaller
property alias font: label.font
property int type: IconButton.Filled
@@ -23,18 +23,25 @@ StyledRect {
property alias label: label
property bool internalChecked
- property color activeColour: type == IconButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
- property color inactiveColour: type == IconButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer
- property color activeOnColour: type == IconButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary
- property color inactiveOnColour: type == IconButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
-
- function onClicked(): void {
+ property color activeColour: type === IconButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
+ property color inactiveColour: {
+ if (!toggle && type === IconButton.Filled)
+ return Colours.palette.m3primary;
+ return type === IconButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer;
+ }
+ property color activeOnColour: type === IconButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary
+ property color inactiveOnColour: {
+ if (!toggle && type === IconButton.Filled)
+ return Colours.palette.m3onPrimary;
+ return type === IconButton.Filled ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSecondaryContainer;
}
+ signal clicked
+
onCheckedChanged: internalChecked = checked
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
- color: type == IconButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
+ color: type === IconButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
implicitWidth: implicitHeight
implicitHeight: label.implicitHeight + padding * 2
@@ -47,7 +54,7 @@ StyledRect {
function onClicked(): void {
if (root.toggle)
root.internalChecked = !root.internalChecked;
- root.onClicked();
+ root.clicked();
}
}
@@ -56,7 +63,7 @@ StyledRect {
anchors.centerIn: parent
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
- fill: root.internalChecked ? 1 : 0
+ fill: !root.toggle || root.internalChecked ? 1 : 0
Behavior on fill {
Anim {}
diff --git a/components/controls/IconTextButton.qml b/components/controls/IconTextButton.qml
index ba60f3b..c776401 100644
--- a/components/controls/IconTextButton.qml
+++ b/components/controls/IconTextButton.qml
@@ -26,18 +26,17 @@ StyledRect {
property alias label: label
property bool internalChecked
- property color activeColour: type == IconTextButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
- property color inactiveColour: type == IconTextButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer
- property color activeOnColour: type == IconTextButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary
- property color inactiveOnColour: type == IconTextButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
+ property color activeColour: type === IconTextButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
+ property color inactiveColour: type === IconTextButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer
+ property color activeOnColour: type === IconTextButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary
+ property color inactiveOnColour: type === IconTextButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
- function onClicked(): void {
- }
+ signal clicked
onCheckedChanged: internalChecked = checked
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
- color: type == IconTextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
+ color: type === IconTextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
implicitWidth: row.implicitWidth + horizontalPadding * 2
implicitHeight: row.implicitHeight + verticalPadding * 2
@@ -50,7 +49,7 @@ StyledRect {
function onClicked(): void {
if (root.toggle)
root.internalChecked = !root.internalChecked;
- root.onClicked();
+ root.clicked();
}
}
diff --git a/components/controls/SplitButton.qml b/components/controls/SplitButton.qml
index 6c92285..a61a536 100644
--- a/components/controls/SplitButton.qml
+++ b/components/controls/SplitButton.qml
@@ -15,6 +15,7 @@ Row {
property real horizontalPadding: Appearance.padding.normal
property real verticalPadding: Appearance.padding.smaller
property int type: SplitButton.Filled
+ property bool disabled
property alias menuItems: menu.items
property alias active: menu.active
property alias expanded: menu.expanded
@@ -22,6 +23,8 @@ Row {
property color colour: type == SplitButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondaryContainer
property color textColour: type == SplitButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondaryContainer
+ readonly property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
+ readonly property color disabledTextColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
spacing: Math.floor(Appearance.spacing.small / 2)
@@ -29,7 +32,7 @@ Row {
radius: implicitHeight / 2
topRightRadius: Appearance.rounding.small / 2
bottomRightRadius: Appearance.rounding.small / 2
- color: root.colour
+ color: root.disabled ? root.disabledColour : root.colour
implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
implicitHeight: expandBtn.implicitHeight
@@ -40,6 +43,7 @@ Row {
rect.topRightRadius: parent.topRightRadius
rect.bottomRightRadius: parent.bottomRightRadius
color: root.textColour
+ disabled: root.disabled
function onClicked(): void {
root.active?.clicked();
@@ -59,7 +63,7 @@ Row {
Layout.alignment: Qt.AlignVCenter
animate: true
text: root.active?.activeIcon ?? ""
- color: root.textColour
+ color: root.disabled ? root.disabledTextColour : root.textColour
fill: 1
}
@@ -70,7 +74,7 @@ Row {
Layout.preferredWidth: implicitWidth
animate: true
text: root.active?.activeText ?? ""
- color: root.textColour
+ color: root.disabled ? root.disabledTextColour : root.textColour
clip: true
Behavior on Layout.preferredWidth {
@@ -90,7 +94,7 @@ Row {
radius: implicitHeight / 2
topLeftRadius: rad
bottomLeftRadius: rad
- color: root.colour
+ color: root.disabled ? root.disabledColour : root.colour
implicitWidth: implicitHeight
implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
@@ -101,6 +105,7 @@ Row {
rect.topRightRadius: parent.topRightRadius
rect.bottomRightRadius: parent.bottomRightRadius
color: root.textColour
+ disabled: root.disabled
function onClicked(): void {
root.expanded = !root.expanded;
@@ -114,7 +119,7 @@ Row {
anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
text: "expand_more"
- color: root.textColour
+ color: root.disabled ? root.disabledTextColour : root.textColour
rotation: root.expanded ? 180 : 0
Behavior on anchors.horizontalCenterOffset {
diff --git a/components/controls/TextButton.qml b/components/controls/TextButton.qml
index a4c8666..65e9f09 100644
--- a/components/controls/TextButton.qml
+++ b/components/controls/TextButton.qml
@@ -24,18 +24,17 @@ StyledRect {
property alias label: label
property bool internalChecked
- property color activeColour: type == TextButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
- property color inactiveColour: type == TextButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer
- property color activeOnColour: type == TextButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary
- property color inactiveOnColour: type == TextButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
+ property color activeColour: type === TextButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
+ property color inactiveColour: type === TextButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer
+ property color activeOnColour: type === TextButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary
+ property color inactiveOnColour: type === TextButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer
- function onClicked(): void {
- }
+ signal clicked
onCheckedChanged: internalChecked = checked
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
- color: type == TextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
+ color: type === TextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
implicitWidth: label.implicitWidth + horizontalPadding * 2
implicitHeight: label.implicitHeight + verticalPadding * 2
@@ -48,7 +47,7 @@ StyledRect {
function onClicked(): void {
if (root.toggle)
root.internalChecked = !root.internalChecked;
- root.onClicked();
+ root.clicked();
}
}