menu switch
This commit is contained in:
Zacharias-Brohn
@@ -0,0 +1,169 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
|
||||
Row {
|
||||
id: root
|
||||
|
||||
enum Type {
|
||||
Filled,
|
||||
Tonal
|
||||
}
|
||||
|
||||
property alias active: menu.active
|
||||
property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
|
||||
property bool disabled
|
||||
property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
|
||||
property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
|
||||
property alias expanded: menu.expanded
|
||||
property string fallbackIcon
|
||||
property string fallbackText
|
||||
property real horizontalPadding: Appearance.padding.normal
|
||||
property alias iconLabel: iconLabel
|
||||
property alias label: label
|
||||
property alias menu: menu
|
||||
property alias menuItems: menu.items
|
||||
property bool menuOnTop
|
||||
property alias stateLayer: stateLayer
|
||||
property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
|
||||
property int type: CustomSplitButton.Filled
|
||||
property real verticalPadding: Appearance.padding.smaller
|
||||
|
||||
spacing: Math.floor(Appearance.spacing.small / 2)
|
||||
|
||||
CustomRect {
|
||||
bottomRightRadius: Appearance.rounding.small / 2
|
||||
color: root.disabled ? root.disabledColor : root.color
|
||||
implicitHeight: expandBtn.implicitHeight
|
||||
implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
|
||||
radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
|
||||
topRightRadius: Appearance.rounding.small / 2
|
||||
|
||||
StateLayer {
|
||||
id: stateLayer
|
||||
|
||||
function onClicked(): void {
|
||||
root.active?.clicked();
|
||||
}
|
||||
|
||||
color: root.textColor
|
||||
disabled: root.disabled
|
||||
rect.bottomRightRadius: parent.bottomRightRadius
|
||||
rect.topRightRadius: parent.topRightRadius
|
||||
}
|
||||
|
||||
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
|
||||
color: root.disabled ? root.disabledTextColor : root.textColor
|
||||
fill: 1
|
||||
text: root.active?.activeIcon ?? root.fallbackIcon
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: label
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.preferredWidth: implicitWidth
|
||||
animate: true
|
||||
clip: true
|
||||
color: root.disabled ? root.disabledTextColor : root.textColor
|
||||
text: root.active?.activeText ?? root.fallbackText
|
||||
|
||||
Behavior on Layout.preferredWidth {
|
||||
Anim {
|
||||
easing.bezierCurve: Appearance.anim.curves.emphasized
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: expandBtn
|
||||
|
||||
property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
|
||||
|
||||
bottomLeftRadius: rad
|
||||
color: root.disabled ? root.disabledColor : root.color
|
||||
implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
|
||||
implicitWidth: implicitHeight
|
||||
radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
|
||||
topLeftRadius: rad
|
||||
|
||||
Behavior on rad {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
id: expandStateLayer
|
||||
|
||||
function onClicked(): void {
|
||||
root.expanded = !root.expanded;
|
||||
}
|
||||
|
||||
color: root.textColor
|
||||
disabled: root.disabled
|
||||
rect.bottomLeftRadius: parent.bottomLeftRadius
|
||||
rect.topLeftRadius: parent.topLeftRadius
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: expandIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
|
||||
color: root.disabled ? root.disabledTextColor : root.textColor
|
||||
rotation: root.expanded ? 180 : 0
|
||||
text: "expand_more"
|
||||
|
||||
Behavior on anchors.horizontalCenterOffset {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on rotation {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Menu {
|
||||
id: menu
|
||||
|
||||
anchors.bottomMargin: Appearance.spacing.small
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.bottom
|
||||
anchors.topMargin: Appearance.spacing.small
|
||||
|
||||
states: State {
|
||||
when: root.menuOnTop
|
||||
|
||||
AnchorChanges {
|
||||
anchors.bottom: expandBtn.top
|
||||
anchors.top: undefined
|
||||
target: menu
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
|
||||
CustomRect {
|
||||
id: root
|
||||
|
||||
property alias active: splitButton.active
|
||||
property bool enabled: true
|
||||
property alias expanded: splitButton.expanded
|
||||
property int expandedZ: 100
|
||||
required property string label
|
||||
property alias menuItems: splitButton.menuItems
|
||||
property alias type: splitButton.type
|
||||
|
||||
signal selected(item: MenuItem)
|
||||
|
||||
Layout.fillWidth: true
|
||||
clip: false
|
||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
|
||||
implicitHeight: row.implicitHeight + Appearance.padding.large * 2
|
||||
opacity: enabled ? 1.0 : 0.5
|
||||
radius: Appearance.rounding.normal
|
||||
z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
|
||||
|
||||
RowLayout {
|
||||
id: row
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
|
||||
text: root.label
|
||||
}
|
||||
|
||||
CustomSplitButton {
|
||||
id: splitButton
|
||||
|
||||
enabled: root.enabled
|
||||
menu.z: 1
|
||||
type: CustomSplitButton.Filled
|
||||
|
||||
menu.onItemSelected: item => {
|
||||
root.selected(item);
|
||||
}
|
||||
stateLayer.onClicked: {
|
||||
splitButton.expanded = !splitButton.expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+20
-12
@@ -13,11 +13,11 @@ Elevation {
|
||||
|
||||
signal itemSelected(item: MenuItem)
|
||||
|
||||
implicitHeight: root.expanded ? column.implicitHeight : 0
|
||||
implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
|
||||
implicitWidth: Math.max(200, column.implicitWidth)
|
||||
level: 2
|
||||
opacity: root.expanded ? 1 : 0
|
||||
radius: Appearance.rounding.small / 2
|
||||
radius: Appearance.rounding.normal
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
@@ -41,7 +41,8 @@ Elevation {
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
spacing: 0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 5
|
||||
|
||||
Repeater {
|
||||
model: root.items
|
||||
@@ -54,19 +55,26 @@ Elevation {
|
||||
required property MenuItem modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
|
||||
implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
|
||||
implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
|
||||
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
root.itemSelected(item.modelData);
|
||||
root.active = item.modelData;
|
||||
root.expanded = false;
|
||||
}
|
||||
CustomRect {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.small
|
||||
anchors.rightMargin: Appearance.padding.small
|
||||
color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
|
||||
radius: Appearance.rounding.normal - Appearance.padding.small
|
||||
|
||||
color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
|
||||
disabled: !root.expanded
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
root.itemSelected(item.modelData);
|
||||
root.active = item.modelData;
|
||||
root.expanded = false;
|
||||
}
|
||||
|
||||
color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
|
||||
disabled: !root.expanded
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
|
||||
Reference in New Issue
Block a user