controlcenter: minor adjustments of accordion menu
This commit is contained in:
ATMDA
parent
9cdc30058a
commit
5994c77dea
2 changed files with 169 additions and 126 deletions
|
|
@ -24,166 +24,195 @@ RowLayout {
|
||||||
Layout.minimumWidth: 420
|
Layout.minimumWidth: 420
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
|
|
||||||
ColumnLayout {
|
StyledFlickable {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: Appearance.padding.large + Appearance.padding.normal
|
anchors.margins: Appearance.padding.large + Appearance.padding.normal
|
||||||
anchors.leftMargin: Appearance.padding.large
|
anchors.leftMargin: Appearance.padding.large
|
||||||
anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
|
anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
|
||||||
|
flickableDirection: Flickable.VerticalFlick
|
||||||
|
contentHeight: leftContent.height
|
||||||
|
|
||||||
spacing: Appearance.spacing.small
|
ColumnLayout {
|
||||||
|
id: leftContent
|
||||||
|
|
||||||
RowLayout {
|
anchors.left: parent.left
|
||||||
spacing: Appearance.spacing.smaller
|
anchors.right: parent.right
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
StyledText {
|
// Settings header above the collapsible sections
|
||||||
text: qsTr("Settings")
|
RowLayout {
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
font.weight: 500
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
}
|
spacing: Appearance.spacing.smaller
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
text: qsTr("Output devices (%1)").arg(Audio.sinks.length)
|
text: qsTr("Settings")
|
||||||
font.pointSize: Appearance.font.size.normal
|
font.pointSize: Appearance.font.size.large
|
||||||
font.weight: 500
|
font.weight: 500
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: qsTr("All available output devices")
|
|
||||||
color: Colours.palette.m3outline
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledListView {
|
|
||||||
id: outputView
|
|
||||||
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
|
|
||||||
model: Audio.sinks
|
|
||||||
spacing: Appearance.spacing.small / 2
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
StyledScrollBar.vertical: StyledScrollBar {
|
|
||||||
flickable: outputView
|
|
||||||
}
|
|
||||||
|
|
||||||
delegate: StyledRect {
|
|
||||||
required property var modelData
|
|
||||||
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
|
|
||||||
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.sink?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
border.width: Audio.sink?.id === modelData.id ? 1 : 0
|
|
||||||
border.color: Colours.palette.m3primary
|
|
||||||
|
|
||||||
StateLayer {
|
|
||||||
function onClicked(): void {
|
|
||||||
Audio.setAudioSink(modelData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RowLayout {
|
Item {
|
||||||
id: outputRowLayout
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
anchors.left: parent.left
|
CollapsibleSection {
|
||||||
anchors.right: parent.right
|
id: outputDevicesSection
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.normal
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.normal
|
Layout.fillWidth: true
|
||||||
|
title: qsTr("Output devices")
|
||||||
|
expanded: true
|
||||||
|
|
||||||
MaterialIcon {
|
ColumnLayout {
|
||||||
text: Audio.sink?.id === modelData.id ? "speaker" : "speaker_group"
|
Layout.fillWidth: true
|
||||||
font.pointSize: Appearance.font.size.large
|
spacing: Appearance.spacing.small
|
||||||
fill: Audio.sink?.id === modelData.id ? 1 : 0
|
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Devices (%1)").arg(Audio.sinks.length)
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
font.weight: 500
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("All available output devices")
|
||||||
|
color: Colours.palette.m3outline
|
||||||
|
}
|
||||||
|
|
||||||
text: modelData.description || qsTr("Unknown")
|
Repeater {
|
||||||
font.weight: Audio.sink?.id === modelData.id ? 500 : 400
|
Layout.fillWidth: true
|
||||||
|
model: Audio.sinks
|
||||||
|
|
||||||
|
delegate: StyledRect {
|
||||||
|
required property var modelData
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.sink?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
border.width: Audio.sink?.id === modelData.id ? 1 : 0
|
||||||
|
border.color: Colours.palette.m3primary
|
||||||
|
|
||||||
|
StateLayer {
|
||||||
|
function onClicked(): void {
|
||||||
|
Audio.setAudioSink(modelData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: outputRowLayout
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.normal
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: Audio.sink?.id === modelData.id ? "speaker" : "speaker_group"
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
fill: Audio.sink?.id === modelData.id ? 1 : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
elide: Text.ElideRight
|
||||||
|
maximumLineCount: 1
|
||||||
|
|
||||||
|
text: modelData.description || qsTr("Unknown")
|
||||||
|
font.weight: Audio.sink?.id === modelData.id ? 500 : 400
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitHeight: outputRowLayout.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
implicitHeight: outputRowLayout.implicitHeight + Appearance.padding.normal * 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.topMargin: Appearance.spacing.large
|
|
||||||
text: qsTr("Input devices (%1)").arg(Audio.sources.length)
|
|
||||||
font.pointSize: Appearance.font.size.normal
|
|
||||||
font.weight: 500
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: qsTr("All available input devices")
|
|
||||||
color: Colours.palette.m3outline
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledListView {
|
|
||||||
id: inputView
|
|
||||||
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
|
|
||||||
model: Audio.sources
|
|
||||||
spacing: Appearance.spacing.small / 2
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
StyledScrollBar.vertical: StyledScrollBar {
|
|
||||||
flickable: inputView
|
|
||||||
}
|
}
|
||||||
|
|
||||||
delegate: StyledRect {
|
CollapsibleSection {
|
||||||
required property var modelData
|
id: inputDevicesSection
|
||||||
|
|
||||||
anchors.left: parent.left
|
Layout.fillWidth: true
|
||||||
anchors.right: parent.right
|
title: qsTr("Input devices")
|
||||||
|
expanded: true
|
||||||
|
|
||||||
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.source?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
|
ColumnLayout {
|
||||||
radius: Appearance.rounding.normal
|
Layout.fillWidth: true
|
||||||
border.width: Audio.source?.id === modelData.id ? 1 : 0
|
spacing: Appearance.spacing.small
|
||||||
border.color: Colours.palette.m3primary
|
|
||||||
|
|
||||||
StateLayer {
|
RowLayout {
|
||||||
function onClicked(): void {
|
Layout.fillWidth: true
|
||||||
Audio.setAudioSource(modelData);
|
spacing: Appearance.spacing.small
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
StyledText {
|
||||||
id: inputRowLayout
|
text: qsTr("Devices (%1)").arg(Audio.sources.length)
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
anchors.left: parent.left
|
font.weight: 500
|
||||||
anchors.right: parent.right
|
}
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.normal
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
text: Audio.source?.id === modelData.id ? "mic" : "mic_external_on"
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
fill: Audio.source?.id === modelData.id ? 1 : 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("All available input devices")
|
||||||
|
color: Colours.palette.m3outline
|
||||||
|
}
|
||||||
|
|
||||||
text: modelData.description || qsTr("Unknown")
|
Repeater {
|
||||||
font.weight: Audio.source?.id === modelData.id ? 500 : 400
|
Layout.fillWidth: true
|
||||||
|
model: Audio.sources
|
||||||
|
|
||||||
|
delegate: StyledRect {
|
||||||
|
required property var modelData
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.source?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
border.width: Audio.source?.id === modelData.id ? 1 : 0
|
||||||
|
border.color: Colours.palette.m3primary
|
||||||
|
|
||||||
|
StateLayer {
|
||||||
|
function onClicked(): void {
|
||||||
|
Audio.setAudioSource(modelData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: inputRowLayout
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.normal
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: "mic"
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
fill: Audio.source?.id === modelData.id ? 1 : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
elide: Text.ElideRight
|
||||||
|
maximumLineCount: 1
|
||||||
|
|
||||||
|
text: modelData.description || qsTr("Unknown")
|
||||||
|
font.weight: Audio.source?.id === modelData.id ? 500 : 400
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitHeight: inputRowLayout.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
implicitHeight: inputRowLayout.implicitHeight + Appearance.padding.normal * 2
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,6 +106,13 @@ RowLayout {
|
||||||
title: qsTr("Ethernet")
|
title: qsTr("Ethernet")
|
||||||
expanded: true
|
expanded: true
|
||||||
|
|
||||||
|
onToggleRequested: {
|
||||||
|
if (!expanded) {
|
||||||
|
// Opening ethernet, close wireless
|
||||||
|
wirelessListSection.expanded = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
spacing: Appearance.spacing.small
|
spacing: Appearance.spacing.small
|
||||||
|
|
@ -233,6 +240,13 @@ RowLayout {
|
||||||
title: qsTr("Wireless")
|
title: qsTr("Wireless")
|
||||||
expanded: true
|
expanded: true
|
||||||
|
|
||||||
|
onToggleRequested: {
|
||||||
|
if (!expanded) {
|
||||||
|
// Opening wireless, close ethernet
|
||||||
|
ethernetListSection.expanded = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
spacing: Appearance.spacing.small
|
spacing: Appearance.spacing.small
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue