diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/controls/IconButton.qml | 27 | ||||
| -rw-r--r-- | components/controls/IconTextButton.qml | 15 | ||||
| -rw-r--r-- | components/controls/SplitButton.qml | 15 | ||||
| -rw-r--r-- | components/controls/TextButton.qml | 15 |
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(); } } |