Commit 606c6499 authored by George Vogiatzis's avatar George Vogiatzis

[KCM]Update Device item layout based on applet

Summary:
Remove device icon.
Remove separation line between devices and increase spacing.
Use radioboxes for default device selection.
Always allow port selection.
Fix mute tooltip.
Use small spacing instead of default.
Use plasma components 3 instead of qtquick controls 2.
Remove unused imports.

BUG: 417607
CCBUG: 417447
FIXED-IN: 5.19.0

Doesn't depend, but needs D27420 to activate an unavailable port.

Test Plan:
Before:
Was not possible to select an unavailable port.
Combobox could drive the default button out of the layout.
After:
Combobox row appears for devices that have at least two ports.

{F8106609}

Reviewers: #plasma, drosca, ngraham, #vdg

Reviewed By: ngraham, #vdg

Subscribers: davidedmundson, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D27422
parent 7152964d
......@@ -29,6 +29,7 @@ import "../code/icon.js" as Icon
ColumnLayout {
id: delegate
spacing: Kirigami.Units.smallSpacing * 2
width: parent.width
property bool isPlayback: type.substring(0, 4) == "sink"
......@@ -36,69 +37,81 @@ ColumnLayout {
readonly property var currentPort: Ports[ActivePortIndex]
RowLayout {
Kirigami.Icon {
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: delegateColumn.height * 0.75
Layout.preferredWidth: Layout.preferredHeight
source: Icon.formFactorIcon(FormFactor) || IconName || "audio-card"
spacing: Kirigami.Units.smallSpacing
Layout.minimumHeight: portbox.implicitHeight
RadioButton {
id: defaultButton
// Maximum width of the button need to match the text. Empty area must not change the default device.
Layout.maximumWidth: delegate.width - Layout.leftMargin - Layout.rightMargin
- (portbox.visible ? Kirigami.Units.gridUnit + portLabel.implicitWidth + Kirigami.Units.smallSpacing + portbox.implicitWidth : 0)
// Margins and spacing are set to center RadioButton with muteButton, and text with VolumeSlider.
Layout.leftMargin: LayoutMirroring.enabled ? 0 : Math.round((muteButton.width - defaultButton.indicator.width) / 2)
Layout.rightMargin: LayoutMirroring.enabled ? Math.round((muteButton.width - defaultButton.indicator.width) / 2) : 0
spacing: Kirigami.Units.smallSpacing + Math.round((muteButton.width - defaultButton.indicator.width) / 2)
checked: Default
visible: delegate.ListView.view.count > 1
onClicked: Default = true
text: !currentPort ? Description : i18ndc("kcm_pulseaudio", "label of device items", "%1 (%2)", currentPort.description, Description)
}
ColumnLayout {
id: delegateColumn
Label {
id: soloLabel
Layout.maximumWidth: delegate.width - (portbox.visible ? Kirigami.Units.gridUnit + portLabel.implicitWidth + Kirigami.Units.smallSpacing + portbox.implicitWidth : 0)
text: defaultButton.text
visible: delegate.ListView.view.count <= 1
elide: Text.ElideRight
}
Item {
Layout.fillWidth: true
visible: portbox.visible
}
RowLayout {
Label {
id: inputText
Layout.fillWidth: true
visible: !portbox.visible
elide: Text.ElideRight
text: !currentPort ? Description : i18ndc("kcm_pulseaudio", "label of device items", "%1 (%2)", currentPort.description, Description)
}
Label {
id: portLabel
visible: portbox.visible
text: i18nd("kcm_pulseaudio", "Port:")
}
ComboBox {
id: portbox
visible: portbox.count > 1
model: {
var items = [];
for (var i = 0; i < Ports.length; ++i) {
var port = Ports[i];
if (port.availability != Port.Unavailable) {
items.push(port.description);
}
ComboBox {
id: portbox
readonly property var ports: Ports
visible: portbox.count > 1 && delegate.width - Kirigami.Units.gridUnit * 8 > implicitWidth
onModelChanged: currentIndex = ActivePortIndex
currentIndex: ActivePortIndex
onActivated: ActivePortIndex = index
onPortsChanged: {
var items = [];
for (var i = 0; i < ports.length; ++i) {
var port = ports[i];
var text = port.description;
if (port.availability == Port.Unavailable) {
if (port.name == "analog-output-speaker" || port.name == "analog-input-microphone-internal") {
text += i18ndc("kcm_pulseaudio", "Port is unavailable", " (unavailable)");
} else {
text += i18ndc("kcm_pulseaudio", "Port is unplugged", " (unplugged)");
}
return items
}
currentIndex: ActivePortIndex
onActivated: ActivePortIndex = index
}
Item {
visible: portbox.visible
Layout.fillWidth: true
}
Button {
text: i18n("Default Device")
icon.name: Default ? "starred-symbolic" : "non-starred-symbolic"
visible: delegate.ListView.view.count > 1
checkable: true
checked: Default
onClicked: Default = true;
items.push(text);
}
}
RowLayout {
MuteButton {
Layout.topMargin: -(height - icon.height) / 2
muted: Muted
onCheckedChanged: Muted = checked
}
VolumeSlider {}
model = items;
}
}
}
ListItemSeperator { view: delegate.ListView.view }
RowLayout {
spacing: Kirigami.Units.smallSpacing
MuteButton {
id: muteButton
Layout.topMargin: -(height - icon.height) / 2
muted: Muted
onCheckedChanged: Muted = checked
toolTipText: !currentPort ? Description : currentPort.description
}
VolumeSlider {}
}
}
......@@ -23,6 +23,8 @@ import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.3
import org.kde.kirigami 2.5 as Kirigami
ScrollView {
id: scrollView
......@@ -49,9 +51,9 @@ ScrollView {
id: sinks
Layout.fillWidth: true
Layout.preferredHeight: contentHeight
Layout.margins: units.gridUnit / 2
Layout.margins: Kirigami.Units.gridUnit / 2
interactive: false
spacing: units.smallSpacing * 2
spacing: Kirigami.Units.gridUnit
model: sinkModel
delegate: DeviceListItem {
isPlayback: true
......@@ -69,8 +71,9 @@ ScrollView {
id: sources
Layout.fillWidth: true
Layout.preferredHeight: contentHeight
Layout.margins: units.gridUnit / 2
Layout.margins: Kirigami.Units.gridUnit / 2
interactive: false
spacing: Kirigami.Units.gridUnit
model: sourceModel
delegate: DeviceListItem {
isPlayback: false
......
......@@ -25,6 +25,7 @@ import "../code/icon.js" as Icon
QQC2.ToolButton {
property bool muted: true
property var toolTipText
icon.name: Icon.name(Volume, Muted, isPlayback ? "audio-volume" : "microphone-sensitivity")
checkable: true
......@@ -32,6 +33,6 @@ QQC2.ToolButton {
onMutedChanged: checked = muted
QQC2.ToolTip {
text: i18ndc("kcm_pulseaudio", "Mute audio stream", "Mute %1", inputText.text) // a little hacky
text: i18ndc("kcm_pulseaudio", "Mute audio stream", "Mute %1", toolTipText)
}
}
......@@ -79,6 +79,7 @@ ColumnLayout {
MuteButton {
muted: Muted
onCheckedChanged: Muted = checked
toolTipText: inputText.text
}
VolumeSlider {}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment