Evernight & Caelestia
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import Caelestia.Internal
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
|
||||
BusyIndicator {
|
||||
id: root
|
||||
|
||||
enum AnimType {
|
||||
Advance = 0,
|
||||
Retreat
|
||||
}
|
||||
|
||||
enum AnimState {
|
||||
Stopped,
|
||||
Running,
|
||||
Completing
|
||||
}
|
||||
|
||||
property real implicitSize: Appearance.font.size.normal * 3
|
||||
property real strokeWidth: Appearance.padding.small * 0.8
|
||||
property color fgColour: Colours.palette.m3primary
|
||||
property color bgColour: Colours.palette.m3secondaryContainer
|
||||
|
||||
property alias type: manager.indeterminateAnimationType
|
||||
readonly property alias progress: manager.progress
|
||||
|
||||
property real internalStrokeWidth: strokeWidth
|
||||
property int animState
|
||||
|
||||
padding: 0
|
||||
implicitWidth: implicitSize
|
||||
implicitHeight: implicitSize
|
||||
|
||||
Component.onCompleted: {
|
||||
if (running) {
|
||||
running = false;
|
||||
running = true;
|
||||
}
|
||||
}
|
||||
|
||||
onRunningChanged: {
|
||||
if (running) {
|
||||
manager.completeEndProgress = 0;
|
||||
animState = CircularIndicator.Running;
|
||||
} else {
|
||||
if (animState == CircularIndicator.Running)
|
||||
animState = CircularIndicator.Completing;
|
||||
}
|
||||
}
|
||||
|
||||
states: State {
|
||||
name: "stopped"
|
||||
when: !root.running
|
||||
|
||||
PropertyChanges {
|
||||
root.opacity: 0
|
||||
root.internalStrokeWidth: root.strokeWidth / 3
|
||||
}
|
||||
}
|
||||
|
||||
transitions: Transition {
|
||||
Anim {
|
||||
properties: "opacity,internalStrokeWidth"
|
||||
duration: manager.completeEndDuration * Appearance.anim.durations.scale
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: CircularProgress {
|
||||
anchors.fill: parent
|
||||
strokeWidth: root.internalStrokeWidth
|
||||
fgColour: root.fgColour
|
||||
bgColour: root.bgColour
|
||||
padding: root.padding
|
||||
rotation: manager.rotation
|
||||
startAngle: manager.startFraction * 360
|
||||
value: manager.endFraction - manager.startFraction
|
||||
}
|
||||
|
||||
CircularIndicatorManager {
|
||||
id: manager
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
running: root.animState !== CircularIndicator.Stopped
|
||||
loops: Animation.Infinite
|
||||
target: manager
|
||||
property: "progress"
|
||||
from: 0
|
||||
to: 1
|
||||
duration: manager.duration * Appearance.anim.durations.scale
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
running: root.animState === CircularIndicator.Completing
|
||||
target: manager
|
||||
property: "completeEndProgress"
|
||||
from: 0
|
||||
to: 1
|
||||
duration: manager.completeEndDuration * Appearance.anim.durations.scale
|
||||
onFinished: {
|
||||
if (root.animState === CircularIndicator.Completing)
|
||||
root.animState = CircularIndicator.Stopped;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
Shape {
|
||||
id: root
|
||||
|
||||
property real value
|
||||
property int startAngle: -90
|
||||
property int strokeWidth: Appearance.padding.smaller
|
||||
property int padding: 0
|
||||
property int spacing: Appearance.spacing.small
|
||||
property color fgColour: Colours.palette.m3primary
|
||||
property color bgColour: Colours.palette.m3secondaryContainer
|
||||
|
||||
readonly property real size: Math.min(width, height)
|
||||
readonly property real arcRadius: (size - padding - strokeWidth) / 2
|
||||
readonly property real vValue: value || 1 / 360
|
||||
readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
|
||||
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
asynchronous: true
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: root.bgColour
|
||||
strokeWidth: root.strokeWidth
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
|
||||
PathAngleArc {
|
||||
startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
|
||||
sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
|
||||
radiusX: root.arcRadius
|
||||
radiusY: root.arcRadius
|
||||
centerX: root.size / 2
|
||||
centerY: root.size / 2
|
||||
}
|
||||
|
||||
Behavior on strokeColor {
|
||||
CAnim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: root.fgColour
|
||||
strokeWidth: root.strokeWidth
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
|
||||
PathAngleArc {
|
||||
startAngle: root.startAngle
|
||||
sweepAngle: 360 * root.vValue
|
||||
radiusX: root.arcRadius
|
||||
radiusY: root.arcRadius
|
||||
centerX: root.size / 2
|
||||
centerY: root.size / 2
|
||||
}
|
||||
|
||||
Behavior on strokeColor {
|
||||
CAnim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import QtQuick
|
||||
|
||||
MouseArea {
|
||||
property int scrollAccumulatedY: 0
|
||||
|
||||
function onWheel(event: WheelEvent): void {
|
||||
}
|
||||
|
||||
onWheel: event => {
|
||||
// Update accumulated scroll
|
||||
if (Math.sign(event.angleDelta.y) !== Math.sign(scrollAccumulatedY))
|
||||
scrollAccumulatedY = 0;
|
||||
scrollAccumulatedY += event.angleDelta.y;
|
||||
|
||||
// Trigger handler and reset if above threshold
|
||||
if (Math.abs(scrollAccumulatedY) >= 120) {
|
||||
onWheel(event);
|
||||
scrollAccumulatedY = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
RowLayout {
|
||||
id: root
|
||||
|
||||
property int value
|
||||
property real max: Infinity
|
||||
property real min: -Infinity
|
||||
property alias repeatRate: timer.interval
|
||||
|
||||
signal valueModified(value: int)
|
||||
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledTextField {
|
||||
inputMethodHints: Qt.ImhFormattedNumbersOnly
|
||||
text: root.value
|
||||
onAccepted: root.valueModified(text)
|
||||
|
||||
padding: Appearance.padding.small
|
||||
leftPadding: Appearance.padding.normal
|
||||
rightPadding: Appearance.padding.normal
|
||||
|
||||
background: StyledRect {
|
||||
implicitWidth: 100
|
||||
radius: Appearance.rounding.small
|
||||
color: Colours.tPalette.m3surfaceContainerHigh
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
radius: Appearance.rounding.small
|
||||
color: Colours.palette.m3primary
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
|
||||
|
||||
StateLayer {
|
||||
id: upState
|
||||
|
||||
color: Colours.palette.m3onPrimary
|
||||
|
||||
onPressAndHold: timer.start()
|
||||
onReleased: timer.stop()
|
||||
|
||||
function onClicked(): void {
|
||||
root.valueModified(Math.min(root.max, root.value + 1));
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: upIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "keyboard_arrow_up"
|
||||
color: Colours.palette.m3onPrimary
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
radius: Appearance.rounding.small
|
||||
color: Colours.palette.m3primary
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
|
||||
|
||||
StateLayer {
|
||||
id: downState
|
||||
|
||||
color: Colours.palette.m3onPrimary
|
||||
|
||||
onPressAndHold: timer.start()
|
||||
onReleased: timer.stop()
|
||||
|
||||
function onClicked(): void {
|
||||
root.valueModified(Math.max(root.min, root.value - 1));
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: downIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "keyboard_arrow_down"
|
||||
color: Colours.palette.m3onPrimary
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: timer
|
||||
|
||||
interval: 100
|
||||
repeat: true
|
||||
triggeredOnStart: true
|
||||
onTriggered: {
|
||||
if (upState.pressed)
|
||||
upState.onClicked();
|
||||
else if (downState.pressed)
|
||||
downState.onClicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import ".."
|
||||
import "../effects"
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
|
||||
Slider {
|
||||
id: root
|
||||
|
||||
required property string icon
|
||||
property real oldValue
|
||||
property bool initialized
|
||||
|
||||
orientation: Qt.Vertical
|
||||
|
||||
background: StyledRect {
|
||||
color: Colours.tPalette.m3surfaceContainer
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
StyledRect {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
y: root.handle.y
|
||||
implicitHeight: parent.height - y
|
||||
|
||||
color: Colours.palette.m3secondary
|
||||
radius: parent.radius
|
||||
}
|
||||
}
|
||||
|
||||
handle: Item {
|
||||
id: handle
|
||||
|
||||
property alias moving: icon.moving
|
||||
|
||||
y: root.visualPosition * (root.availableHeight - height)
|
||||
implicitWidth: root.width
|
||||
implicitHeight: root.width
|
||||
|
||||
Elevation {
|
||||
anchors.fill: parent
|
||||
radius: rect.radius
|
||||
level: handleInteraction.containsMouse ? 2 : 1
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
id: rect
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
color: Colours.palette.m3inverseSurface
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
MouseArea {
|
||||
id: handleInteraction
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.NoButton
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
property bool moving
|
||||
|
||||
function update(): void {
|
||||
animate = !moving;
|
||||
binding.when = moving;
|
||||
font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
|
||||
font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
|
||||
}
|
||||
|
||||
text: root.icon
|
||||
color: Colours.palette.m3inverseOnSurface
|
||||
anchors.centerIn: parent
|
||||
|
||||
onMovingChanged: anim.restart()
|
||||
|
||||
Binding {
|
||||
id: binding
|
||||
|
||||
target: icon
|
||||
property: "text"
|
||||
value: Math.round(root.value * 100)
|
||||
when: false
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: anim
|
||||
|
||||
Anim {
|
||||
target: icon
|
||||
property: "scale"
|
||||
to: 0
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.bezierCurve: Appearance.anim.curves.standardAccel
|
||||
}
|
||||
ScriptAction {
|
||||
script: icon.update()
|
||||
}
|
||||
Anim {
|
||||
target: icon
|
||||
property: "scale"
|
||||
to: 1
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.bezierCurve: Appearance.anim.curves.standardDecel
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPressedChanged: handle.moving = pressed
|
||||
|
||||
onValueChanged: {
|
||||
if (!initialized) {
|
||||
initialized = true;
|
||||
return;
|
||||
}
|
||||
if (Math.abs(value - oldValue) < 0.01)
|
||||
return;
|
||||
oldValue = value;
|
||||
handle.moving = true;
|
||||
stateChangeDelay.restart();
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: stateChangeDelay
|
||||
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (!root.pressed)
|
||||
handle.moving = false;
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
enum Type {
|
||||
Filled,
|
||||
Tonal,
|
||||
Text
|
||||
}
|
||||
|
||||
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 alias font: label.font
|
||||
property int type: IconButton.Filled
|
||||
property bool disabled
|
||||
|
||||
property alias stateLayer: stateLayer
|
||||
property alias label: label
|
||||
property alias radiusAnim: radiusAnim
|
||||
|
||||
property bool internalChecked
|
||||
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.tPalette.m3surfaceContainer : Colours.palette.m3secondaryContainer;
|
||||
}
|
||||
property color activeOnColour: type === IconButton.Filled ? Colours.palette.m3onPrimary : type === IconButton.Tonal ? Colours.palette.m3onSecondary : Colours.palette.m3primary
|
||||
property color inactiveOnColour: {
|
||||
if (!toggle && type === IconButton.Filled)
|
||||
return Colours.palette.m3onPrimary;
|
||||
return type === IconButton.Tonal ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurfaceVariant;
|
||||
}
|
||||
property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
|
||||
property color disabledOnColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
|
||||
|
||||
signal clicked
|
||||
|
||||
onCheckedChanged: internalChecked = checked
|
||||
|
||||
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
|
||||
color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: label.implicitHeight + padding * 2
|
||||
|
||||
StateLayer {
|
||||
id: stateLayer
|
||||
|
||||
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
disabled: root.disabled
|
||||
|
||||
function onClicked(): void {
|
||||
if (root.toggle)
|
||||
root.internalChecked = !root.internalChecked;
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: label
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
fill: !root.toggle || root.internalChecked ? 1 : 0
|
||||
|
||||
Behavior on fill {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on radius {
|
||||
Anim {
|
||||
id: radiusAnim
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
enum Type {
|
||||
Filled,
|
||||
Tonal,
|
||||
Text
|
||||
}
|
||||
|
||||
property alias icon: iconLabel.text
|
||||
property alias text: label.text
|
||||
property bool checked
|
||||
property bool toggle
|
||||
property real horizontalPadding: Appearance.padding.normal
|
||||
property real verticalPadding: Appearance.padding.smaller
|
||||
property alias font: label.font
|
||||
property int type: IconTextButton.Filled
|
||||
|
||||
property alias stateLayer: stateLayer
|
||||
property alias iconLabel: iconLabel
|
||||
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.tPalette.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
|
||||
|
||||
signal clicked
|
||||
|
||||
onCheckedChanged: internalChecked = checked
|
||||
|
||||
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
|
||||
color: type === IconTextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
|
||||
|
||||
implicitWidth: row.implicitWidth + horizontalPadding * 2
|
||||
implicitHeight: row.implicitHeight + verticalPadding * 2
|
||||
|
||||
StateLayer {
|
||||
id: stateLayer
|
||||
|
||||
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
|
||||
function onClicked(): void {
|
||||
if (root.toggle)
|
||||
root.internalChecked = !root.internalChecked;
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: row
|
||||
|
||||
anchors.centerIn: parent
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
MaterialIcon {
|
||||
id: iconLabel
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
fill: root.internalChecked ? 1 : 0
|
||||
|
||||
Behavior on fill {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: label
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on radius {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import "../effects"
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
Elevation {
|
||||
id: root
|
||||
|
||||
property list<MenuItem> items
|
||||
property MenuItem active: items[0] ?? null
|
||||
property bool expanded
|
||||
|
||||
signal itemSelected(item: MenuItem)
|
||||
|
||||
radius: Appearance.rounding.small / 2
|
||||
level: 2
|
||||
|
||||
implicitWidth: Math.max(200, column.implicitWidth)
|
||||
implicitHeight: root.expanded ? column.implicitHeight : 0
|
||||
opacity: root.expanded ? 1 : 0
|
||||
|
||||
StyledClippingRect {
|
||||
anchors.fill: parent
|
||||
radius: parent.radius
|
||||
color: Colours.palette.m3surfaceContainer
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
spacing: 0
|
||||
|
||||
Repeater {
|
||||
model: root.items
|
||||
|
||||
StyledRect {
|
||||
id: item
|
||||
|
||||
required property int index
|
||||
required property MenuItem modelData
|
||||
readonly property bool active: modelData === root.active
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
|
||||
implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
|
||||
|
||||
color: Qt.alpha(Colours.palette.m3secondaryContainer, active ? 1 : 0)
|
||||
|
||||
StateLayer {
|
||||
color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
disabled: !root.expanded
|
||||
|
||||
function onClicked(): void {
|
||||
root.itemSelected(item.modelData);
|
||||
root.active = item.modelData;
|
||||
root.expanded = false;
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: menuOptionRow
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.normal
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: item.modelData.icon
|
||||
color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurfaceVariant
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.fillWidth: true
|
||||
text: item.modelData.text
|
||||
color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
active: item.modelData.trailingIcon.length > 0
|
||||
visible: active
|
||||
|
||||
sourceComponent: MaterialIcon {
|
||||
text: item.modelData.trailingIcon
|
||||
color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import QtQuick
|
||||
|
||||
QtObject {
|
||||
required property string text
|
||||
property string icon
|
||||
property string trailingIcon
|
||||
property string activeIcon: icon
|
||||
property string activeText: text
|
||||
|
||||
signal clicked
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
Row {
|
||||
id: root
|
||||
|
||||
enum Type {
|
||||
Filled,
|
||||
Tonal
|
||||
}
|
||||
|
||||
property real horizontalPadding: Appearance.padding.normal
|
||||
property real verticalPadding: Appearance.padding.smaller
|
||||
property int type: SplitButton.Filled
|
||||
property bool disabled
|
||||
property bool menuOnTop
|
||||
property string fallbackIcon
|
||||
property string fallbackText
|
||||
|
||||
property alias menuItems: menu.items
|
||||
property alias active: menu.active
|
||||
property alias expanded: menu.expanded
|
||||
property alias menu: menu
|
||||
property alias iconLabel: iconLabel
|
||||
property alias label: label
|
||||
property alias stateLayer: stateLayer
|
||||
|
||||
property color colour: type == SplitButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondaryContainer
|
||||
property color textColour: type == SplitButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondaryContainer
|
||||
property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
|
||||
property color disabledTextColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
|
||||
|
||||
spacing: Math.floor(Appearance.spacing.small / 2)
|
||||
|
||||
StyledRect {
|
||||
radius: implicitHeight / 2
|
||||
topRightRadius: Appearance.rounding.small / 2
|
||||
bottomRightRadius: Appearance.rounding.small / 2
|
||||
color: root.disabled ? root.disabledColour : root.colour
|
||||
|
||||
implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
|
||||
implicitHeight: expandBtn.implicitHeight
|
||||
|
||||
StateLayer {
|
||||
id: stateLayer
|
||||
|
||||
rect.topRightRadius: parent.topRightRadius
|
||||
rect.bottomRightRadius: parent.bottomRightRadius
|
||||
color: root.textColour
|
||||
disabled: root.disabled
|
||||
|
||||
function onClicked(): void {
|
||||
root.active?.clicked();
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: textRow
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
MaterialIcon {
|
||||
id: iconLabel
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
animate: true
|
||||
text: root.active?.activeIcon ?? root.fallbackIcon
|
||||
color: root.disabled ? root.disabledTextColour : root.textColour
|
||||
fill: 1
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: label
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.preferredWidth: implicitWidth
|
||||
animate: true
|
||||
text: root.active?.activeText ?? root.fallbackText
|
||||
color: root.disabled ? root.disabledTextColour : root.textColour
|
||||
clip: true
|
||||
|
||||
Behavior on Layout.preferredWidth {
|
||||
Anim {
|
||||
easing.bezierCurve: Appearance.anim.curves.emphasized
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
id: expandBtn
|
||||
|
||||
property real rad: root.expanded ? implicitHeight / 2 : Appearance.rounding.small / 2
|
||||
|
||||
radius: implicitHeight / 2
|
||||
topLeftRadius: rad
|
||||
bottomLeftRadius: rad
|
||||
color: root.disabled ? root.disabledColour : root.colour
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
|
||||
|
||||
StateLayer {
|
||||
id: expandStateLayer
|
||||
|
||||
rect.topLeftRadius: parent.topLeftRadius
|
||||
rect.bottomLeftRadius: parent.bottomLeftRadius
|
||||
color: root.textColour
|
||||
disabled: root.disabled
|
||||
|
||||
function onClicked(): void {
|
||||
root.expanded = !root.expanded;
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: expandIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
|
||||
|
||||
text: "expand_more"
|
||||
color: root.disabled ? root.disabledTextColour : root.textColour
|
||||
rotation: root.expanded ? 180 : 0
|
||||
|
||||
Behavior on anchors.horizontalCenterOffset {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on rotation {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on rad {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Menu {
|
||||
id: menu
|
||||
|
||||
states: State {
|
||||
when: root.menuOnTop
|
||||
|
||||
AnchorChanges {
|
||||
target: menu
|
||||
anchors.top: undefined
|
||||
anchors.bottom: expandBtn.top
|
||||
}
|
||||
}
|
||||
|
||||
anchors.top: parent.bottom
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: Appearance.spacing.small
|
||||
anchors.bottomMargin: Appearance.spacing.small
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import qs.components
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
|
||||
RadioButton {
|
||||
id: root
|
||||
|
||||
font.pointSize: Appearance.font.size.smaller
|
||||
|
||||
implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
|
||||
implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
|
||||
|
||||
indicator: Rectangle {
|
||||
id: outerCircle
|
||||
|
||||
implicitWidth: 20
|
||||
implicitHeight: 20
|
||||
radius: Appearance.rounding.full
|
||||
color: "transparent"
|
||||
border.color: root.checked ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
|
||||
border.width: 2
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
StateLayer {
|
||||
anchors.margins: -Appearance.padding.smaller
|
||||
color: root.checked ? Colours.palette.m3onSurface : Colours.palette.m3primary
|
||||
z: -1
|
||||
|
||||
function onClicked(): void {
|
||||
root.click();
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: 8
|
||||
implicitHeight: 8
|
||||
|
||||
radius: Appearance.rounding.full
|
||||
color: Qt.alpha(Colours.palette.m3primary, root.checked ? 1 : 0)
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
CAnim {}
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: StyledText {
|
||||
text: root.text
|
||||
font.pointSize: root.font.pointSize
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: outerCircle.right
|
||||
anchors.leftMargin: Appearance.spacing.smaller
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
|
||||
ScrollBar {
|
||||
id: root
|
||||
|
||||
required property Flickable flickable
|
||||
property bool shouldBeActive
|
||||
property real nonAnimPosition
|
||||
property bool animating
|
||||
|
||||
onHoveredChanged: {
|
||||
if (hovered)
|
||||
shouldBeActive = true;
|
||||
else
|
||||
shouldBeActive = flickable.moving;
|
||||
}
|
||||
|
||||
onPositionChanged: {
|
||||
if (position === nonAnimPosition)
|
||||
animating = false;
|
||||
else if (!animating)
|
||||
nonAnimPosition = position;
|
||||
}
|
||||
|
||||
position: nonAnimPosition
|
||||
implicitWidth: Appearance.padding.small
|
||||
|
||||
contentItem: StyledRect {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
opacity: {
|
||||
if (root.size === 1)
|
||||
return 0;
|
||||
if (fullMouse.pressed)
|
||||
return 1;
|
||||
if (mouse.containsMouse)
|
||||
return 0.8;
|
||||
if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
|
||||
return 0.6;
|
||||
return 0;
|
||||
}
|
||||
radius: Appearance.rounding.full
|
||||
color: Colours.palette.m3secondary
|
||||
|
||||
MouseArea {
|
||||
id: mouse
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.NoButton
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: root.flickable
|
||||
|
||||
function onMovingChanged(): void {
|
||||
if (root.flickable.moving)
|
||||
root.shouldBeActive = true;
|
||||
else
|
||||
hideDelay.restart();
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: hideDelay
|
||||
|
||||
interval: 600
|
||||
onTriggered: root.shouldBeActive = root.flickable.moving || root.hovered
|
||||
}
|
||||
|
||||
CustomMouseArea {
|
||||
id: fullMouse
|
||||
|
||||
anchors.fill: parent
|
||||
preventStealing: true
|
||||
|
||||
onPressed: event => {
|
||||
root.animating = true;
|
||||
root.nonAnimPosition = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
|
||||
}
|
||||
|
||||
onPositionChanged: event => root.nonAnimPosition = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2))
|
||||
|
||||
function onWheel(event: WheelEvent): void {
|
||||
root.animating = true;
|
||||
if (event.angleDelta.y > 0)
|
||||
root.nonAnimPosition = Math.max(0, root.nonAnimPosition - 0.1);
|
||||
else if (event.angleDelta.y < 0)
|
||||
root.nonAnimPosition = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on position {
|
||||
enabled: !fullMouse.pressed
|
||||
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import qs.components
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
|
||||
Slider {
|
||||
id: root
|
||||
|
||||
background: Item {
|
||||
StyledRect {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.topMargin: root.implicitHeight / 3
|
||||
anchors.bottomMargin: root.implicitHeight / 3
|
||||
|
||||
implicitWidth: root.handle.x - root.implicitHeight / 6
|
||||
|
||||
color: Colours.palette.m3primary
|
||||
radius: Appearance.rounding.full
|
||||
topRightRadius: root.implicitHeight / 15
|
||||
bottomRightRadius: root.implicitHeight / 15
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: root.implicitHeight / 3
|
||||
anchors.bottomMargin: root.implicitHeight / 3
|
||||
|
||||
implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
|
||||
|
||||
color: Colours.tPalette.m3surfaceContainer
|
||||
radius: Appearance.rounding.full
|
||||
topLeftRadius: root.implicitHeight / 15
|
||||
bottomLeftRadius: root.implicitHeight / 15
|
||||
}
|
||||
}
|
||||
|
||||
handle: StyledRect {
|
||||
x: root.visualPosition * root.availableWidth - implicitWidth / 2
|
||||
|
||||
implicitWidth: root.implicitHeight / 4.5
|
||||
implicitHeight: root.implicitHeight
|
||||
|
||||
color: Colours.palette.m3primary
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.NoButton
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
import QtQuick.Shapes
|
||||
|
||||
Switch {
|
||||
id: root
|
||||
|
||||
property int cLayer: 1
|
||||
|
||||
implicitWidth: implicitIndicatorWidth
|
||||
implicitHeight: implicitIndicatorHeight
|
||||
|
||||
indicator: StyledRect {
|
||||
radius: Appearance.rounding.full
|
||||
color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer)
|
||||
|
||||
implicitWidth: implicitHeight * 1.7
|
||||
implicitHeight: Appearance.font.size.normal + Appearance.padding.smaller * 2
|
||||
|
||||
StyledRect {
|
||||
readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
|
||||
|
||||
radius: Appearance.rounding.full
|
||||
color: root.checked ? Colours.palette.m3onPrimary : Colours.layer(Colours.palette.m3outline, root.cLayer + 1)
|
||||
|
||||
x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.small / 2 : Appearance.padding.small / 2
|
||||
implicitWidth: nonAnimWidth
|
||||
implicitHeight: parent.implicitHeight - Appearance.padding.small
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
StyledRect {
|
||||
anchors.fill: parent
|
||||
radius: parent.radius
|
||||
|
||||
color: root.checked ? Colours.palette.m3primary : Colours.palette.m3onSurface
|
||||
opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
Shape {
|
||||
id: icon
|
||||
|
||||
property point start1: {
|
||||
if (root.pressed)
|
||||
return Qt.point(width * 0.2, height / 2);
|
||||
if (root.checked)
|
||||
return Qt.point(width * 0.15, height / 2);
|
||||
return Qt.point(width * 0.15, height * 0.15);
|
||||
}
|
||||
property point end1: {
|
||||
if (root.pressed) {
|
||||
if (root.checked)
|
||||
return Qt.point(width * 0.4, height / 2);
|
||||
return Qt.point(width * 0.8, height / 2);
|
||||
}
|
||||
if (root.checked)
|
||||
return Qt.point(width * 0.4, height * 0.7);
|
||||
return Qt.point(width * 0.85, height * 0.85);
|
||||
}
|
||||
property point start2: {
|
||||
if (root.pressed) {
|
||||
if (root.checked)
|
||||
return Qt.point(width * 0.4, height / 2);
|
||||
return Qt.point(width * 0.2, height / 2);
|
||||
}
|
||||
if (root.checked)
|
||||
return Qt.point(width * 0.4, height * 0.7);
|
||||
return Qt.point(width * 0.15, height * 0.85);
|
||||
}
|
||||
property point end2: {
|
||||
if (root.pressed)
|
||||
return Qt.point(width * 0.8, height / 2);
|
||||
if (root.checked)
|
||||
return Qt.point(width * 0.85, height * 0.2);
|
||||
return Qt.point(width * 0.85, height * 0.15);
|
||||
}
|
||||
|
||||
anchors.centerIn: parent
|
||||
width: height
|
||||
height: parent.implicitHeight - Appearance.padding.small * 2
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
asynchronous: true
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: Appearance.font.size.larger * 0.15
|
||||
strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
|
||||
fillColor: "transparent"
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
|
||||
startX: icon.start1.x
|
||||
startY: icon.start1.y
|
||||
|
||||
PathLine {
|
||||
x: icon.end1.x
|
||||
y: icon.end1.y
|
||||
}
|
||||
PathMove {
|
||||
x: icon.start2.x
|
||||
y: icon.start2.y
|
||||
}
|
||||
PathLine {
|
||||
x: icon.end2.x
|
||||
y: icon.end2.y
|
||||
}
|
||||
|
||||
Behavior on strokeColor {
|
||||
CAnim {}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on start1 {
|
||||
PropAnim {}
|
||||
}
|
||||
Behavior on end1 {
|
||||
PropAnim {}
|
||||
}
|
||||
Behavior on start2 {
|
||||
PropAnim {}
|
||||
}
|
||||
Behavior on end2 {
|
||||
PropAnim {}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: false
|
||||
}
|
||||
|
||||
component PropAnim: PropertyAnimation {
|
||||
duration: Appearance.anim.durations.normal
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
|
||||
TextField {
|
||||
id: root
|
||||
|
||||
color: Colours.palette.m3onSurface
|
||||
placeholderTextColor: Colours.palette.m3outline
|
||||
font.family: Appearance.font.family.sans
|
||||
font.pointSize: Appearance.font.size.smaller
|
||||
renderType: TextField.NativeRendering
|
||||
cursorVisible: !readOnly
|
||||
|
||||
background: null
|
||||
|
||||
cursorDelegate: StyledRect {
|
||||
id: cursor
|
||||
|
||||
property bool disableBlink
|
||||
|
||||
implicitWidth: 2
|
||||
color: Colours.palette.m3primary
|
||||
radius: Appearance.rounding.normal
|
||||
|
||||
Connections {
|
||||
target: root
|
||||
|
||||
function onCursorPositionChanged(): void {
|
||||
if (root.activeFocus && root.cursorVisible) {
|
||||
cursor.opacity = 1;
|
||||
cursor.disableBlink = true;
|
||||
enableBlink.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: enableBlink
|
||||
|
||||
interval: 100
|
||||
onTriggered: cursor.disableBlink = false
|
||||
}
|
||||
|
||||
Timer {
|
||||
running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
|
||||
repeat: true
|
||||
triggeredOnStart: true
|
||||
interval: 500
|
||||
onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
|
||||
}
|
||||
|
||||
Binding {
|
||||
when: !root.activeFocus || !root.cursorVisible
|
||||
cursor.opacity: 0
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.small
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
CAnim {}
|
||||
}
|
||||
|
||||
Behavior on placeholderTextColor {
|
||||
CAnim {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import ".."
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
enum Type {
|
||||
Filled,
|
||||
Tonal,
|
||||
Text
|
||||
}
|
||||
|
||||
property alias text: label.text
|
||||
property bool checked
|
||||
property bool toggle
|
||||
property real horizontalPadding: Appearance.padding.normal
|
||||
property real verticalPadding: Appearance.padding.smaller
|
||||
property alias font: label.font
|
||||
property int type: TextButton.Filled
|
||||
|
||||
property alias stateLayer: stateLayer
|
||||
property alias label: label
|
||||
|
||||
property bool internalChecked
|
||||
property color activeColour: type === TextButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
|
||||
property color inactiveColour: {
|
||||
if (!toggle && type === TextButton.Filled)
|
||||
return Colours.palette.m3primary;
|
||||
return type === TextButton.Filled ? Colours.tPalette.m3surfaceContainer : Colours.palette.m3secondaryContainer;
|
||||
}
|
||||
property color activeOnColour: {
|
||||
if (type === TextButton.Text)
|
||||
return Colours.palette.m3primary;
|
||||
return type === TextButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary;
|
||||
}
|
||||
property color inactiveOnColour: {
|
||||
if (!toggle && type === TextButton.Filled)
|
||||
return Colours.palette.m3onPrimary;
|
||||
if (type === TextButton.Text)
|
||||
return Colours.palette.m3primary;
|
||||
return type === TextButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer;
|
||||
}
|
||||
|
||||
signal clicked
|
||||
|
||||
onCheckedChanged: internalChecked = checked
|
||||
|
||||
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
|
||||
color: type === TextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
|
||||
|
||||
implicitWidth: label.implicitWidth + horizontalPadding * 2
|
||||
implicitHeight: label.implicitHeight + verticalPadding * 2
|
||||
|
||||
StateLayer {
|
||||
id: stateLayer
|
||||
|
||||
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
|
||||
function onClicked(): void {
|
||||
if (root.toggle)
|
||||
root.internalChecked = !root.internalChecked;
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: label
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
|
||||
}
|
||||
|
||||
Behavior on radius {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user