nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

controlcenter: collapsiblegroups animation and styling tweaked

Browse source
This commit is contained in:
ATMDA 2025-11-13 22:16:47 -05:00
parent 7dcfed3f0e
commit 78d032e946
3 changed files with 70 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/StateLayer.qml
View file

@ -6,6 +6,7 @@ MouseArea {
id: root
property bool disabled
property bool showHoverBackground: true
property color color: Colours.palette.m3onSurface
property real radius: parent?.radius ?? 0
property alias rect: hoverLayer
@ -75,7 +76,7 @@ MouseArea {
anchors.fill: parent
color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.12 : (root.showHoverBackground && root.containsMouse) ? 0.08 : 0)
radius: root.radius
StyledRect {

111
components/controls/CollapsibleSection.qml
View file

@ -15,71 +15,96 @@ ColumnLayout {
signal toggleRequested
spacing: Appearance.spacing.small / 2
spacing: 0
Layout.fillWidth: true
Item {
id: sectionHeaderItem
Layout.fillWidth: true
Layout.preferredHeight: sectionHeader.implicitHeight
Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
ColumnLayout {
id: sectionHeader
RowLayout {
id: titleRow
anchors.left: parent.left
anchors.right: parent.right
spacing: Appearance.spacing.small
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.padding.normal
anchors.rightMargin: Appearance.padding.normal
spacing: Appearance.spacing.normal
RowLayout {
StyledText {
text: root.title
font.pointSize: Appearance.font.size.normal
font.weight: 500
}
Item {
Layout.fillWidth: true
spacing: Appearance.spacing.small
}
StyledText {
Layout.topMargin: Appearance.spacing.large
text: root.title
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
Item {
Layout.fillWidth: true
}
MaterialIcon {
text: "expand_more"
rotation: root.expanded ? 180 : 0
color: Colours.palette.m3onSurface
Behavior on rotation {
Anim {}
MaterialIcon {
text: "expand_more"
rotation: root.expanded ? 180 : 0
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.normal
Behavior on rotation {
Anim {
duration: Appearance.anim.durations.short
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}
}
StateLayer {
anchors.fill: parent
anchors.leftMargin: -Appearance.padding.normal
anchors.rightMargin: -Appearance.padding.normal
function onClicked(): void {
root.toggleRequested();
root.expanded = !root.expanded;
}
}
StyledText {
visible: root.expanded && root.description !== ""
text: root.description
color: Colours.palette.m3outline
Layout.fillWidth: true
StateLayer {
anchors.fill: parent
color: Colours.palette.m3onSurface
radius: Appearance.rounding.normal
showHoverBackground: false
function onClicked(): void {
root.toggleRequested();
root.expanded = !root.expanded;
}
}
}
StyledText {
visible: root.expanded && root.description !== ""
Layout.fillWidth: true
Layout.leftMargin: Appearance.padding.normal
Layout.rightMargin: Appearance.padding.normal
Layout.topMargin: Appearance.spacing.smaller
Layout.bottomMargin: Appearance.spacing.small
text: root.description
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.small
}
default property alias content: contentColumn.data
ColumnLayout {
id: contentColumn
Item {
id: contentWrapper
Layout.fillWidth: true
visible: root.expanded
spacing: Appearance.spacing.small / 2
Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
clip: true
Behavior on Layout.preferredHeight {
Anim {
easing.bezierCurve: Appearance.anim.curves.standard
}
}
ColumnLayout {
id: contentColumn
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.leftMargin: Appearance.padding.normal
anchors.rightMargin: Appearance.padding.normal
anchors.topMargin: Appearance.spacing.small
anchors.bottomMargin: Appearance.spacing.small
spacing: Appearance.spacing.small
}
}
}

20
modules/controlcenter/appearance/AppearancePane.qml
View file

@ -284,10 +284,6 @@ RowLayout {
Layout.fillWidth: true
implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0
Behavior on implicitHeight {
Anim {}
}
model: M3Variants.list
spacing: Appearance.spacing.small / 2
clip: true
@ -379,10 +375,6 @@ RowLayout {
Layout.fillWidth: true
implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0
Behavior on implicitHeight {
Anim {}
}
model: Schemes.list
spacing: Appearance.spacing.small / 2
clip: true
@ -556,10 +548,6 @@ RowLayout {
Layout.fillWidth: true
implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
Behavior on implicitHeight {
Anim {}
}
model: Qt.fontFamilies()
spacing: Appearance.spacing.small / 2
clip: true
@ -633,10 +621,6 @@ RowLayout {
Layout.fillWidth: true
implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
Behavior on implicitHeight {
Anim {}
}
model: Qt.fontFamilies()
spacing: Appearance.spacing.small / 2
clip: true
@ -710,10 +694,6 @@ RowLayout {
Layout.fillWidth: true
implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
Behavior on implicitHeight {
Anim {}
}
model: Qt.fontFamilies()
spacing: Appearance.spacing.small / 2
clip: true