chore: cleanup more unused files/imports, use new buttonrow for polkit
This commit is contained in:
@@ -1,135 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
default property alias content: contentColumn.data
|
||||
property string description: ""
|
||||
property bool expanded: false
|
||||
property bool nested: false
|
||||
property bool showBackground: false
|
||||
required property string title
|
||||
|
||||
signal toggleRequested
|
||||
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
Item {
|
||||
id: sectionHeaderItem
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
|
||||
|
||||
RowLayout {
|
||||
id: titleRow
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.normal
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
CustomText {
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
font.weight: 500
|
||||
text: root.title
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
rotation: root.expanded ? 180 : 0
|
||||
text: "expand_more"
|
||||
|
||||
Behavior on rotation {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.small
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
anchors.fill: parent
|
||||
color: DynamicColors.palette.m3onSurface
|
||||
radius: Appearance.rounding.normal
|
||||
showHoverBackground: false
|
||||
|
||||
onClicked: {
|
||||
root.toggleRequested();
|
||||
root.expanded = !root.expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: contentWrapper
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
|
||||
clip: true
|
||||
|
||||
Behavior on Layout.preferredHeight {
|
||||
Anim {
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: backgroundRect
|
||||
|
||||
anchors.fill: parent
|
||||
color: DynamicColors.transparency.enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? DynamicColors.palette.m3surfaceContainerHigh : DynamicColors.palette.m3surfaceContainer)
|
||||
opacity: root.showBackground && root.expanded ? 1.0 : 0.0
|
||||
radius: Appearance.rounding.normal
|
||||
visible: root.showBackground
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: contentColumn
|
||||
|
||||
anchors.bottomMargin: Appearance.spacing.small
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.normal
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.normal
|
||||
opacity: root.expanded ? 1.0 : 0.0
|
||||
spacing: Appearance.spacing.small
|
||||
y: Appearance.spacing.small
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: descriptionText
|
||||
|
||||
Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.small
|
||||
text: root.description
|
||||
visible: root.description !== ""
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
import qs.Config
|
||||
|
||||
Slider {
|
||||
id: root
|
||||
|
||||
property color nonPeakColor: DynamicColors.tPalette.m3primary
|
||||
required property real peak
|
||||
property color peakColor: DynamicColors.palette.m3primary
|
||||
|
||||
background: Item {
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: root.implicitHeight / 3
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: root.implicitHeight / 3
|
||||
bottomRightRadius: root.implicitHeight / 15
|
||||
color: root.nonPeakColor
|
||||
implicitWidth: root.handle.x - root.implicitHeight
|
||||
radius: Appearance.rounding.full
|
||||
topRightRadius: root.implicitHeight / 15
|
||||
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
bottomRightRadius: root.implicitHeight / 15
|
||||
color: root.peakColor
|
||||
implicitWidth: parent.width * root.peak
|
||||
radius: Appearance.rounding.full
|
||||
topRightRadius: root.implicitHeight / 15
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {
|
||||
duration: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: root.implicitHeight / 3
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: root.implicitHeight / 3
|
||||
bottomLeftRadius: root.implicitHeight / 15
|
||||
color: DynamicColors.tPalette.m3surfaceContainer
|
||||
implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
|
||||
radius: Appearance.rounding.full
|
||||
topLeftRadius: root.implicitHeight / 15
|
||||
}
|
||||
}
|
||||
handle: CustomRect {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: DynamicColors.palette.m3primary
|
||||
implicitHeight: 15
|
||||
implicitWidth: 5
|
||||
radius: Appearance.rounding.full
|
||||
x: root.visualPosition * root.availableWidth - implicitWidth / 2
|
||||
|
||||
MouseArea {
|
||||
acceptedButtons: Qt.NoButton
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls.Basic
|
||||
|
||||
BusyIndicator {
|
||||
id: control
|
||||
|
||||
property int busySize: 64
|
||||
property color color: delegate.color
|
||||
|
||||
contentItem: Item {
|
||||
implicitHeight: control.busySize
|
||||
implicitWidth: control.busySize
|
||||
|
||||
Item {
|
||||
id: item
|
||||
|
||||
height: control.busySize
|
||||
opacity: control.running ? 1 : 0
|
||||
width: control.busySize
|
||||
x: parent.width / 2 - (control.busySize / 2)
|
||||
y: parent.height / 2 - (control.busySize / 2)
|
||||
|
||||
Behavior on opacity {
|
||||
OpacityAnimator {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
|
||||
RotationAnimator {
|
||||
duration: 1250
|
||||
from: 0
|
||||
loops: Animation.Infinite
|
||||
running: control.visible && control.running
|
||||
target: item
|
||||
to: 360
|
||||
}
|
||||
|
||||
Repeater {
|
||||
id: repeater
|
||||
|
||||
model: 6
|
||||
|
||||
CustomRect {
|
||||
id: delegate
|
||||
|
||||
required property int index
|
||||
|
||||
color: control.color
|
||||
implicitHeight: 10
|
||||
implicitWidth: 10
|
||||
radius: 5
|
||||
x: item.width / 2 - width / 2
|
||||
y: item.height / 2 - height / 2
|
||||
|
||||
transform: [
|
||||
Translate {
|
||||
y: -Math.min(item.width, item.height) * 0.5 + 5
|
||||
},
|
||||
Rotation {
|
||||
angle: delegate.index / repeater.count * 360
|
||||
origin.x: 5
|
||||
origin.y: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import qs.Config
|
||||
|
||||
Button {
|
||||
id: control
|
||||
|
||||
property color bgColor: DynamicColors.palette.m3primary
|
||||
property int radius: Appearance.rounding.smallest / 2
|
||||
property color textColor: DynamicColors.palette.m3onPrimary
|
||||
|
||||
background: CustomRect {
|
||||
color: control.bgColor
|
||||
opacity: control.enabled ? 1.0 : 0.5
|
||||
radius: control.radius
|
||||
}
|
||||
contentItem: CustomText {
|
||||
color: control.textColor
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
opacity: control.enabled ? 1.0 : 0.5
|
||||
text: control.text
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
radius: control.radius
|
||||
|
||||
onClicked: {
|
||||
control.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import qs.Config
|
||||
|
||||
ComboBox {
|
||||
id: root
|
||||
|
||||
property int cornerRadius: Appearance.rounding.normal
|
||||
property int fieldHeight: 42
|
||||
property bool filled: true
|
||||
property real focusRingOpacity: 0.70
|
||||
property int hPadding: 16
|
||||
property int menuCornerRadius: 16
|
||||
property int menuRowHeight: 46
|
||||
property int menuVisibleRows: 7
|
||||
property bool preferPopupWindow: false
|
||||
|
||||
hoverEnabled: true
|
||||
implicitHeight: fieldHeight
|
||||
implicitWidth: 240
|
||||
spacing: 8
|
||||
|
||||
// ---------- Field background (filled/outlined + state layers + focus ring) ----------
|
||||
background: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
CustomRect {
|
||||
id: container
|
||||
|
||||
anchors.fill: parent
|
||||
color: DynamicColors.palette.m3surfaceVariant
|
||||
radius: root.cornerRadius
|
||||
|
||||
StateLayer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Content ----------
|
||||
contentItem: RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: root.hPadding
|
||||
anchors.rightMargin: root.hPadding
|
||||
spacing: 12
|
||||
|
||||
// Display text
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: 16
|
||||
font.weight: Font.Medium
|
||||
text: root.currentText
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
// Indicator chevron (simple, replace with your icon system)
|
||||
CustomText {
|
||||
color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurfaceVariant
|
||||
rotation: root.popup.visible ? 180 : 0
|
||||
text: "▾"
|
||||
transformOrigin: Item.Center
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
Behavior on rotation {
|
||||
NumberAnimation {
|
||||
duration: 140
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
popup: Popup {
|
||||
id: p
|
||||
|
||||
implicitHeight: list.contentItem.height + Appearance.padding.small * 2
|
||||
implicitWidth: root.width
|
||||
modal: true
|
||||
popupType: root.preferPopupWindow ? Popup.Window : Popup.Item
|
||||
y: -list.currentIndex * (root.menuRowHeight + Appearance.spacing.small) - Appearance.padding.small
|
||||
|
||||
background: CustomRect {
|
||||
color: DynamicColors.palette.m3surface
|
||||
radius: root.menuCornerRadius
|
||||
}
|
||||
contentItem: ListView {
|
||||
id: list
|
||||
|
||||
anchors.bottomMargin: Appearance.padding.small
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Appearance.padding.small
|
||||
clip: true
|
||||
currentIndex: root.currentIndex
|
||||
model: root.delegateModel
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
delegate: CustomRect {
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: (index === root.currentIndex) ? DynamicColors.palette.m3primary : "transparent"
|
||||
implicitHeight: root.menuRowHeight
|
||||
implicitWidth: p.implicitWidth - Appearance.padding.small * 2
|
||||
radius: Appearance.rounding.normal - Appearance.padding.small
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 10
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
color: DynamicColors.palette.m3onSurface
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: 15
|
||||
text: modelData
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
CustomText {
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
text: "✓"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: index === root.currentIndex
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
onClicked: {
|
||||
root.currentIndex = index;
|
||||
p.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expressive-ish open/close motion: subtle scale+fade (tune to taste). :contentReference[oaicite:5]{index=5}
|
||||
enter: Transition {
|
||||
Anim {
|
||||
from: 0
|
||||
property: "opacity"
|
||||
to: 1
|
||||
}
|
||||
|
||||
Anim {
|
||||
from: 0.98
|
||||
property: "scale"
|
||||
to: 1.0
|
||||
}
|
||||
}
|
||||
exit: Transition {
|
||||
Anim {
|
||||
from: 1
|
||||
property: "opacity"
|
||||
to: 0
|
||||
}
|
||||
}
|
||||
|
||||
Elevation {
|
||||
anchors.fill: parent
|
||||
level: 2
|
||||
radius: root.menuCornerRadius
|
||||
z: -1
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import qs.Components
|
||||
|
||||
ToolTip {
|
||||
id: root
|
||||
|
||||
property bool alternativeVisibleCondition: false
|
||||
property bool extraVisibleCondition: true
|
||||
readonly property bool internalVisibleCondition: (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
|
||||
|
||||
background: null
|
||||
horizontalPadding: 10
|
||||
verticalPadding: 5
|
||||
visible: internalVisibleCondition
|
||||
|
||||
contentItem: CustomTooltipContent {
|
||||
id: contentItem
|
||||
|
||||
horizontalPadding: root.horizontalPadding
|
||||
shown: root.internalVisibleCondition
|
||||
text: root.text
|
||||
verticalPadding: root.verticalPadding
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import QtQuick
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property real horizontalPadding: 10
|
||||
property bool isVisible: backgroundRectangle.implicitHeight > 0
|
||||
property bool shown: false
|
||||
required property string text
|
||||
property real verticalPadding: 5
|
||||
|
||||
implicitHeight: tooltipTextObject.implicitHeight + 2 * root.verticalPadding
|
||||
implicitWidth: tooltipTextObject.implicitWidth + 2 * root.horizontalPadding
|
||||
|
||||
Rectangle {
|
||||
id: backgroundRectangle
|
||||
|
||||
clip: true
|
||||
color: DynamicColors.tPalette.m3inverseSurface ?? "#3C4043"
|
||||
implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
|
||||
implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
|
||||
opacity: shown ? 1 : 0
|
||||
radius: Appearance.rounding.smallest
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on implicitWidth {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
anchors {
|
||||
bottom: root.bottom
|
||||
horizontalCenter: root.horizontalCenter
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: tooltipTextObject
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: DynamicColors.palette.m3inverseOnSurface ?? "#FFFFFF"
|
||||
text: root.text
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import qs.Config
|
||||
import QtQuick
|
||||
|
||||
CustomRect {
|
||||
required property int extra
|
||||
|
||||
anchors.margins: 8
|
||||
anchors.right: parent.right
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
implicitHeight: count.implicitHeight + 4 * 2
|
||||
implicitWidth: count.implicitWidth + 8 * 2
|
||||
opacity: extra > 0 ? 1 : 0
|
||||
radius: Appearance.rounding.smallest
|
||||
scale: extra > 0 ? 1 : 0.5
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
}
|
||||
}
|
||||
Behavior on scale {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
|
||||
Elevation {
|
||||
anchors.fill: parent
|
||||
level: 2
|
||||
opacity: parent.opacity
|
||||
radius: parent.radius
|
||||
z: -1
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: count
|
||||
|
||||
anchors.centerIn: parent
|
||||
animate: parent.opacity > 0
|
||||
color: DynamicColors.palette.m3onTertiary
|
||||
text: qsTr("+%1").arg(parent.extra)
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import qs.Config
|
||||
|
||||
IconButton {
|
||||
id: root
|
||||
|
||||
required property bool shouldBeVisible
|
||||
|
||||
opacity: 0
|
||||
scale: 0
|
||||
visible: root.scale > 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.small
|
||||
}
|
||||
}
|
||||
Behavior on scale {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
onShouldBeVisibleChanged: {
|
||||
if (root.shouldBeVisible) {
|
||||
root.opacity = 1;
|
||||
root.scale = 1;
|
||||
} else {
|
||||
root.opacity = 0;
|
||||
root.scale = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,309 +0,0 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
enum Variant {
|
||||
Outlined,
|
||||
Filled
|
||||
}
|
||||
|
||||
readonly property color accent: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : (focused ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline))
|
||||
readonly property real disabledOpacity: 0.38
|
||||
readonly property string effectiveTrailingIcon: root.trailingIcon.length > 0 ? root.trailingIcon : (root.password ? (field.echoMode === TextInput.Password ? "visibility" : "visibility_off") : (root.isError ? "error" : ""))
|
||||
property string errorText: ""
|
||||
readonly property alias field: field
|
||||
readonly property bool floating: focused || hasContent || prefixText.length > 0
|
||||
readonly property bool focused: field.activeFocus
|
||||
readonly property bool hasContent: field.text.length > 0
|
||||
readonly property color iconColor: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : (focused ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant))
|
||||
property int inputMethodHints: Qt.ImhNone
|
||||
property bool isError: false
|
||||
property string label: ""
|
||||
readonly property color labelColor: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : (focused ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant))
|
||||
property string leadingIcon: ""
|
||||
property int maxLength: 0
|
||||
property color notchColor: DynamicColors.palette.m3surface
|
||||
readonly property bool outlined: variant === M3TextField.Variant.Outlined
|
||||
property bool password: false
|
||||
property string placeholder: ""
|
||||
property string prefixText: ""
|
||||
property string suffixText: ""
|
||||
readonly property color supportColor: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurfaceVariant)
|
||||
property string supportingText: ""
|
||||
property alias text: field.text
|
||||
property string trailingIcon: ""
|
||||
readonly property bool trailingInteractive: root.password && root.trailingIcon.length === 0
|
||||
property var validator: null
|
||||
property int variant: M3TextField.Variant.Outlined
|
||||
|
||||
signal accepted
|
||||
|
||||
function forceFieldFocus(): void {
|
||||
field.forceActiveFocus();
|
||||
}
|
||||
|
||||
implicitHeight: 56 + (supportRow.visible ? supportRow.implicitHeight + Appearance.spacing.extraSmall : 0)
|
||||
implicitWidth: 240
|
||||
|
||||
CustomRect {
|
||||
id: filledBg
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
color: root.enabled ? (root.focused ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1) : DynamicColors.palette.m3surfaceContainerHigh) : DynamicColors.palette.m3onSurface
|
||||
implicitHeight: 56
|
||||
opacity: root.enabled ? 1 : 0.04 // M3 filled disabled container @ 4%
|
||||
|
||||
topLeftRadius: Appearance.rounding.small
|
||||
topRightRadius: Appearance.rounding.small
|
||||
visible: !root.outlined
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
anchors.fill: parent
|
||||
color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
|
||||
enabled: root.enabled
|
||||
topLeftRadius: Appearance.rounding.small
|
||||
topRightRadius: Appearance.rounding.small
|
||||
|
||||
onClicked: field.forceActiveFocus()
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
color: root.accent
|
||||
implicitHeight: root.focused || root.isError ? 2 : 1
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
type: Anim.StandardSmall
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: outline
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
border.color: root.accent
|
||||
border.width: root.focused || root.isError ? 2 : 1
|
||||
color: "transparent"
|
||||
implicitHeight: 56
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
radius: Appearance.rounding.small
|
||||
visible: root.outlined
|
||||
|
||||
Behavior on border.color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
Behavior on border.width {
|
||||
Anim {
|
||||
type: Anim.StandardSmall
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
anchors.fill: parent
|
||||
anchors.margins: outline.border.width
|
||||
color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
|
||||
enabled: root.enabled
|
||||
radius: Appearance.rounding.small
|
||||
|
||||
onClicked: field.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: root.notchColor
|
||||
height: outline.border.width
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
visible: root.outlined && root.floating && root.label.length > 0
|
||||
width: labelText.width + Appearance.spacing.extraSmall
|
||||
x: labelText.x - Appearance.spacing.extraSmall / 2
|
||||
y: 0
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: labelText
|
||||
|
||||
color: root.labelColor
|
||||
font.pointSize: root.floating ? Appearance.font.size.small : Appearance.font.size.medium
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: root.label
|
||||
visible: root.label.length > 0
|
||||
x: root.floating ? (Appearance.padding.larger + Appearance.spacing.extraSmall / 2) : (leading.visible ? leading.x + leading.width + Appearance.spacing.small : Appearance.padding.larger)
|
||||
y: root.floating ? (root.outlined ? -height / 2 : Appearance.padding.extraSmall) : (56 - height) / 2
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
Behavior on x {
|
||||
Anim {
|
||||
type: Anim.StandardSmall
|
||||
}
|
||||
}
|
||||
Behavior on y {
|
||||
Anim {
|
||||
type: Anim.StandardSmall
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: leading
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: (56 - height) / 2
|
||||
color: root.iconColor
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: root.leadingIcon
|
||||
visible: root.leadingIcon.length > 0
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: trailing
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: (56 - height) / 2
|
||||
color: root.isError ? DynamicColors.palette.m3error : (root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurface)
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: root.effectiveTrailingIcon
|
||||
visible: root.effectiveTrailingIcon.length > 0
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
anchors.margins: -Appearance.padding.small
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
enabled: root.trailingInteractive && root.enabled
|
||||
|
||||
onClicked: field.echoMode = field.echoMode === TextInput.Password ? TextInput.Normal : TextInput.Password
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: prefix
|
||||
|
||||
anchors.left: leading.visible ? leading.right : parent.left
|
||||
anchors.leftMargin: leading.visible ? Appearance.spacing.small : Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: root.floating && !root.outlined ? Appearance.font.size.small + Appearance.padding.extraSmall : 0
|
||||
color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurface
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
height: 56
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: root.prefixText
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: root.prefixText.length > 0 && root.floating
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: suffix
|
||||
|
||||
anchors.right: trailing.visible ? trailing.left : parent.right
|
||||
anchors.rightMargin: trailing.visible ? Appearance.spacing.small : Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: root.floating && !root.outlined ? Appearance.font.size.small + Appearance.padding.extraSmall : 0
|
||||
color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurface
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
height: 56
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: root.suffixText
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: root.suffixText.length > 0 && root.floating
|
||||
}
|
||||
|
||||
CustomTextField {
|
||||
id: field
|
||||
|
||||
anchors.left: prefix.visible ? prefix.right : (leading.visible ? leading.right : parent.left)
|
||||
anchors.leftMargin: prefix.visible ? Appearance.spacing.extraSmall : (leading.visible ? Appearance.spacing.small : Appearance.padding.larger)
|
||||
anchors.right: suffix.visible ? suffix.left : (trailing.visible ? trailing.left : parent.right)
|
||||
anchors.rightMargin: suffix.visible ? Appearance.spacing.extraSmall : (trailing.visible ? Appearance.spacing.small : Appearance.padding.larger)
|
||||
anchors.top: parent.top
|
||||
color: DynamicColors.palette.m3onSurface
|
||||
echoMode: root.password ? TextInput.Password : TextInput.Normal
|
||||
enabled: root.enabled
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
height: 56
|
||||
inputMethodHints: root.inputMethodHints
|
||||
maximumLength: root.maxLength > 0 ? root.maxLength : 32767
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
placeholderText: root.focused ? root.placeholder : ""
|
||||
topPadding: root.floating && !root.outlined ? Appearance.font.size.small + Appearance.padding.extraSmall : 0
|
||||
validator: root.validator
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
onAccepted: root.accepted()
|
||||
onTextEdited: if (root.isError)
|
||||
root.isError = false
|
||||
}
|
||||
|
||||
Item {
|
||||
id: supportRow
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 56 + Appearance.spacing.extraSmall
|
||||
implicitHeight: Math.max(supportText.implicitHeight, counter.implicitHeight)
|
||||
visible: (root.isError && root.errorText.length > 0) || root.supportingText.length > 0 || root.maxLength > 0
|
||||
|
||||
CustomText {
|
||||
id: supportText
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.right: counter.visible ? counter.left : parent.right
|
||||
anchors.rightMargin: Appearance.spacing.small
|
||||
color: root.supportColor
|
||||
font.pointSize: Appearance.font.size.small
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: root.isError && root.errorText.length > 0 ? root.errorText : root.supportingText
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: counter
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.larger
|
||||
color: root.supportColor
|
||||
font.pointSize: Appearance.font.size.small
|
||||
opacity: root.enabled ? 1 : root.disabledOpacity
|
||||
text: `${root.text.length}/${root.maxLength}`
|
||||
visible: root.maxLength > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import QtQuick
|
||||
|
||||
Path {
|
||||
id: root
|
||||
|
||||
required property real viewHeight
|
||||
required property real viewWidth
|
||||
|
||||
startX: root.viewWidth / 2
|
||||
startY: 0
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 0.25
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.viewWidth / 2
|
||||
y: root.viewHeight * (1 / 6)
|
||||
}
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 0.45
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.viewWidth / 2
|
||||
y: root.viewHeight * (2 / 6)
|
||||
}
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 0.70
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.viewWidth / 2
|
||||
y: root.viewHeight * (3 / 6)
|
||||
}
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 1.00
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.viewWidth / 2
|
||||
y: root.viewHeight * (4 / 6)
|
||||
}
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 0.70
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.viewWidth / 2
|
||||
y: root.viewHeight * (5 / 6)
|
||||
}
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 0.45
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.viewWidth / 2
|
||||
y: root.viewHeight
|
||||
}
|
||||
|
||||
PathAttribute {
|
||||
name: "itemOpacity"
|
||||
value: 0.25
|
||||
}
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import qs.Config
|
||||
|
||||
Elevation {
|
||||
id: root
|
||||
|
||||
required property int currentIndex
|
||||
property bool expanded
|
||||
required property int from
|
||||
property color insideTextColor: DynamicColors.palette.m3onPrimary
|
||||
property int itemHeight
|
||||
property int listHeight: 200
|
||||
property color outsideTextColor: DynamicColors.palette.m3onSurfaceVariant
|
||||
readonly property var spinnerModel: root.range(root.from, root.to)
|
||||
required property int to
|
||||
property Item triggerItem
|
||||
|
||||
signal itemSelected(item: int)
|
||||
|
||||
function range(first, last) {
|
||||
let out = [];
|
||||
for (let i = first; i <= last; ++i)
|
||||
out.push(i);
|
||||
return out;
|
||||
}
|
||||
|
||||
implicitHeight: root.expanded ? view.implicitHeight : 0
|
||||
level: root.expanded ? 2 : 0
|
||||
radius: itemHeight / 2
|
||||
visible: implicitHeight > 0
|
||||
z: root.expanded ? 100 : 0
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
onExpandedChanged: {
|
||||
if (!root.expanded)
|
||||
root.itemSelected(view.currentIndex + 1);
|
||||
}
|
||||
|
||||
Component {
|
||||
id: spinnerDelegate
|
||||
|
||||
Item {
|
||||
id: wrapper
|
||||
|
||||
readonly property color delegateTextColor: wrapper.PathView.view ? wrapper.PathView.view.delegateTextColor : "white"
|
||||
required property var modelData
|
||||
|
||||
height: root.itemHeight
|
||||
opacity: wrapper.PathView.itemOpacity
|
||||
visible: wrapper.PathView.onPath
|
||||
width: wrapper.PathView.view ? wrapper.PathView.view.width : 0
|
||||
z: wrapper.PathView.isCurrentItem ? 100 : Math.round(wrapper.PathView.itemScale * 100)
|
||||
|
||||
CustomText {
|
||||
anchors.centerIn: parent
|
||||
color: wrapper.delegateTextColor
|
||||
font.pointSize: Appearance.font.size.large
|
||||
text: wrapper.modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomClippingRect {
|
||||
anchors.fill: parent
|
||||
color: DynamicColors.palette.m3surfaceContainer
|
||||
radius: parent.radius
|
||||
z: root.z
|
||||
|
||||
// Main visible spinner: normal/outside text color
|
||||
PathView {
|
||||
id: view
|
||||
|
||||
property color delegateTextColor: root.outsideTextColor
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
clip: true
|
||||
currentIndex: root.currentIndex - 1
|
||||
delegate: spinnerDelegate
|
||||
dragMargin: width
|
||||
highlightRangeMode: PathView.StrictlyEnforceRange
|
||||
implicitHeight: root.listHeight
|
||||
model: root.spinnerModel
|
||||
pathItemCount: 7
|
||||
preferredHighlightBegin: 0.5
|
||||
preferredHighlightEnd: 0.5
|
||||
snapMode: PathView.SnapToItem
|
||||
|
||||
path: PathMenu {
|
||||
viewHeight: view.height
|
||||
viewWidth: view.width
|
||||
}
|
||||
}
|
||||
|
||||
// The selection rectangle itself
|
||||
CustomRect {
|
||||
id: selectionRect
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: DynamicColors.palette.m3primary
|
||||
height: root.itemHeight
|
||||
radius: root.itemHeight / 2
|
||||
width: parent.width
|
||||
z: 2
|
||||
}
|
||||
|
||||
// Hidden source: same PathView, but with the "inside selection" text color
|
||||
Item {
|
||||
id: selectedTextSource
|
||||
|
||||
anchors.fill: parent
|
||||
layer.enabled: true
|
||||
visible: false
|
||||
|
||||
PathView {
|
||||
id: selectedTextView
|
||||
|
||||
property color delegateTextColor: root.insideTextColor
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
clip: true
|
||||
currentIndex: view.currentIndex
|
||||
delegate: spinnerDelegate
|
||||
dragMargin: view.dragMargin
|
||||
highlightRangeMode: view.highlightRangeMode
|
||||
implicitHeight: root.listHeight
|
||||
interactive: false
|
||||
model: view.model
|
||||
|
||||
// Keep this PathView visually locked to the real one
|
||||
offset: view.offset
|
||||
pathItemCount: view.pathItemCount
|
||||
preferredHighlightBegin: view.preferredHighlightBegin
|
||||
preferredHighlightEnd: view.preferredHighlightEnd
|
||||
snapMode: view.snapMode
|
||||
|
||||
path: PathMenu {
|
||||
viewHeight: selectedTextView.height
|
||||
viewWidth: selectedTextView.width
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mask matching the selection rectangle
|
||||
Item {
|
||||
id: selectionMask
|
||||
|
||||
anchors.fill: parent
|
||||
layer.enabled: true
|
||||
visible: false
|
||||
|
||||
CustomRect {
|
||||
color: "white"
|
||||
height: selectionRect.height
|
||||
radius: selectionRect.radius
|
||||
width: selectionRect.width
|
||||
x: selectionRect.x
|
||||
y: selectionRect.y
|
||||
}
|
||||
}
|
||||
|
||||
// Only show the "inside selection" text where the mask exists
|
||||
MultiEffect {
|
||||
anchors.fill: selectedTextSource
|
||||
maskEnabled: true
|
||||
maskInverted: false
|
||||
maskSource: selectionMask
|
||||
source: selectedTextSource
|
||||
z: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
|
||||
CustomRect {
|
||||
id: root
|
||||
|
||||
required property string label
|
||||
required property real max
|
||||
required property real min
|
||||
property var onValueModified: function (value) {}
|
||||
property real step: 1
|
||||
required property real value
|
||||
|
||||
Layout.fillWidth: true
|
||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
|
||||
implicitHeight: row.implicitHeight + Appearance.padding.large * 2
|
||||
radius: Appearance.rounding.normal
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: row
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.margins: Appearance.padding.large
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: root.label
|
||||
}
|
||||
|
||||
CustomSpinBox {
|
||||
max: root.max
|
||||
min: root.min
|
||||
step: root.step
|
||||
value: root.value
|
||||
|
||||
onValueModified: value => {
|
||||
root.onValueModified(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user