audio popout changes, slider inset icons added
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import Quickshell
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import qs.Modules.Settings.Controls
|
||||
import qs.Config
|
||||
import qs.Components
|
||||
@@ -238,6 +239,162 @@ SettingsPage {
|
||||
shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
|
||||
}
|
||||
|
||||
// Item {
|
||||
// id: timeInput
|
||||
//
|
||||
// readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
|
||||
// property string name
|
||||
// property var object
|
||||
// property list<string> settings
|
||||
// property bool shouldBeActive: true
|
||||
//
|
||||
// function commitChoice(choice: int, setting: string): void {
|
||||
// timeInput.object[setting] = choice;
|
||||
// Config.save();
|
||||
// }
|
||||
//
|
||||
// function formattedValue(setting: string): string {
|
||||
// const value = timeInput.object[setting];
|
||||
//
|
||||
// if (value === null || value === undefined)
|
||||
// return "";
|
||||
//
|
||||
// return String(value);
|
||||
// }
|
||||
//
|
||||
// function hourToAmPm(hour) {
|
||||
// var h = Number(hour) % 24;
|
||||
// var d = new Date(2000, 0, 1, h, 0, 0);
|
||||
// return Qt.formatTime(d, "h AP");
|
||||
// }
|
||||
//
|
||||
// anchors.left: parent.left
|
||||
// anchors.right: parent.right
|
||||
// implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
|
||||
// opacity: shouldBeActive ? 1 : 0
|
||||
// scale: shouldBeActive ? 1 : 0.8
|
||||
// visible: opacity > 0
|
||||
//
|
||||
// Behavior on opacity {
|
||||
// Anim {
|
||||
// }
|
||||
// }
|
||||
// Behavior on scale {
|
||||
// Anim {
|
||||
// }
|
||||
// }
|
||||
// Behavior on y {
|
||||
// Anim {
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// Rectangle {
|
||||
// anchors.fill: parent
|
||||
// anchors.margins: -Appearance.padding.smaller
|
||||
// color: DynamicColors.palette.m3primaryContainer
|
||||
// opacity: timeInput.highlighted ? 0.5 : 0
|
||||
// radius: Appearance.rounding.small
|
||||
//
|
||||
// Behavior on opacity {
|
||||
// Anim {
|
||||
// duration: Appearance.anim.durations.normal
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// RowLayout {
|
||||
// id: row
|
||||
//
|
||||
// anchors.left: parent.left
|
||||
// anchors.margins: Appearance.padding.small
|
||||
// anchors.right: parent.right
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
//
|
||||
// ColumnLayout {
|
||||
// Layout.fillHeight: true
|
||||
// Layout.fillWidth: true
|
||||
//
|
||||
// CustomText {
|
||||
// id: text
|
||||
//
|
||||
// Layout.alignment: Qt.AlignLeft
|
||||
// Layout.fillWidth: true
|
||||
// font.pointSize: Appearance.font.size.larger
|
||||
// text: timeInput.name
|
||||
// }
|
||||
//
|
||||
// CustomText {
|
||||
// Layout.alignment: Qt.AlignLeft
|
||||
// color: DynamicColors.palette.m3onSurfaceVariant
|
||||
// font.pointSize: Appearance.font.size.normal
|
||||
// text: qsTr("Dark mode will turn on at %1, and turn off at %2.").arg(timeInput.hourToAmPm(timeInput.object[timeInput.settings[0]])).arg(timeInput.hourToAmPm(timeInput.object[timeInput.settings[1]]))
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ColumnLayout {
|
||||
// id: optionLayout
|
||||
//
|
||||
// Layout.fillHeight: true
|
||||
// Layout.preferredWidth: 100
|
||||
//
|
||||
// RowLayout {
|
||||
// Layout.preferredWidth: optionLayout.width
|
||||
//
|
||||
// CustomText {
|
||||
// Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
|
||||
// Layout.fillWidth: true
|
||||
// text: qsTr("Enabled: ")
|
||||
// }
|
||||
//
|
||||
// CustomSwitch {
|
||||
// id: enabledSwitch
|
||||
//
|
||||
// Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
|
||||
// checked: timeInput.object[timeInput.settings[2]]
|
||||
//
|
||||
// onToggled: {
|
||||
// timeInput.object[timeInput.settings[2]] = checked;
|
||||
// Config.save();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// RowLayout {
|
||||
// Layout.preferredWidth: optionLayout.width
|
||||
//
|
||||
// CustomText {
|
||||
// Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
|
||||
// Layout.fillWidth: true
|
||||
// text: qsTr("Start: ")
|
||||
// }
|
||||
//
|
||||
// CustomRect {
|
||||
// Layout.preferredHeight: 72
|
||||
// Layout.preferredWidth: 96
|
||||
// color: startHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainer
|
||||
//
|
||||
// CustomTextField {
|
||||
// id: startHourField
|
||||
//
|
||||
// function convertHour(timeValue: int): int {
|
||||
// return Math.floor(timeValue / 60);
|
||||
// }
|
||||
//
|
||||
// function convertMinute(timeValue: int): int {
|
||||
// return timeValue % 60;
|
||||
// }
|
||||
//
|
||||
// anchors.fill: parent
|
||||
// font.family: "Roboto"
|
||||
// font.pixelSize: 57
|
||||
// text: convertHour(Config.general.color.scheduleDarkStart)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
Separator {
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ Item {
|
||||
required property var wrapper
|
||||
|
||||
implicitHeight: vol.implicitHeight + Appearance.padding.small * 2
|
||||
implicitWidth: 600 + Appearance.padding.small * 2
|
||||
implicitWidth: 500 + Appearance.padding.small * 2
|
||||
|
||||
CustomRect {
|
||||
anchors.left: parent.left
|
||||
@@ -57,51 +57,11 @@ Item {
|
||||
color: DynamicColors.tPalette.m3surfaceContainer
|
||||
radius: root.rounding
|
||||
|
||||
Item {
|
||||
id: sinkIcon
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
implicitWidth: childrenRect.width
|
||||
|
||||
CustomRect {
|
||||
anchors.centerIn: parent
|
||||
color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: 54
|
||||
implicitWidth: 54
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
MaterialIcon {
|
||||
anchors.alignWhenCentered: false
|
||||
anchors.centerIn: parent
|
||||
animate: true
|
||||
color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
text: Audio.muted ? "volume_off" : "volume_up"
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
||||
|
||||
onClicked: {
|
||||
const audio = Audio.sink?.audio;
|
||||
if (audio)
|
||||
audio.muted = !audio.muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: Appearance.padding.smallest
|
||||
anchors.left: sinkIcon.right
|
||||
anchors.leftMargin: Appearance.spacing.larger
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.large
|
||||
anchors.top: parent.top
|
||||
anchors.bottomMargin: Appearance.padding.smaller
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.rightMargin: Appearance.padding.larger
|
||||
anchors.topMargin: Appearance.padding.smaller
|
||||
|
||||
RowLayout {
|
||||
@@ -111,34 +71,53 @@ Item {
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.fillWidth: true
|
||||
text: "Output Volume"
|
||||
text: "Output volume"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
||||
color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
|
||||
font.bold: true
|
||||
text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
|
||||
}
|
||||
}
|
||||
|
||||
CustomMouseArea {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
RowLayout {
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
CustomSlider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.height
|
||||
value: Audio.volume
|
||||
CustomMouseArea {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
CustomSlider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
bgColor: Audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
|
||||
fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.height
|
||||
insetColor: Audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
|
||||
insetIcon: Audio.muted || Audio.volume < 0.001 ? "volume_off" : "volume_up"
|
||||
value: Audio.volume
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onInteraction: value => Audio.setVolume(value)
|
||||
onInteraction: value => Audio.setVolume(value)
|
||||
}
|
||||
}
|
||||
|
||||
CustomSwitch {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
checked: !Audio.muted
|
||||
|
||||
onToggled: {
|
||||
const audio = Audio.sink?.audio;
|
||||
if (audio)
|
||||
audio.muted = !audio.muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -173,51 +152,11 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: sourceIcon
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
implicitWidth: childrenRect.width
|
||||
|
||||
CustomRect {
|
||||
anchors.centerIn: parent
|
||||
color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: 54
|
||||
implicitWidth: 54
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
MaterialIcon {
|
||||
anchors.alignWhenCentered: false
|
||||
anchors.centerIn: parent
|
||||
animate: true
|
||||
color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
text: Audio.sourceMuted ? "mic_off" : "mic"
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
||||
|
||||
onClicked: {
|
||||
const audio = Audio.source?.audio;
|
||||
if (audio)
|
||||
audio.muted = !audio.muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: Appearance.padding.smallest
|
||||
anchors.left: sourceIcon.right
|
||||
anchors.leftMargin: Appearance.spacing.larger
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.large
|
||||
anchors.top: parent.top
|
||||
anchors.bottomMargin: Appearance.padding.smaller
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.rightMargin: Appearance.padding.larger
|
||||
anchors.topMargin: Appearance.padding.smaller
|
||||
|
||||
RowLayout {
|
||||
@@ -227,34 +166,53 @@ Item {
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.fillWidth: true
|
||||
text: "Input Volume"
|
||||
text: "Input volume"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
||||
color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
|
||||
font.bold: true
|
||||
text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
|
||||
}
|
||||
}
|
||||
|
||||
CustomMouseArea {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
RowLayout {
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
CustomSlider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.height
|
||||
value: Audio.sourceVolume
|
||||
CustomMouseArea {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
CustomSlider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
bgColor: Audio.sourceMuted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
|
||||
fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.height
|
||||
insetColor: Audio.sourceMuted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
|
||||
insetIcon: Audio.sourceMuted || Audio.sourceVolume < 0.001 ? "mic_off" : "mic"
|
||||
value: Audio.sourceVolume
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onInteraction: value => Audio.setSourceVolume(value)
|
||||
onInteraction: value => Audio.setSourceVolume(value)
|
||||
}
|
||||
}
|
||||
|
||||
CustomSwitch {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
checked: !Audio.sourceMuted
|
||||
|
||||
onToggled: {
|
||||
const audio = Audio.source?.audio;
|
||||
if (audio)
|
||||
audio.muted = !audio.muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -307,43 +265,6 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: appBoxIcon
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.top: parent.top
|
||||
implicitWidth: childrenRect.width
|
||||
|
||||
CustomRect {
|
||||
anchors.centerIn: parent
|
||||
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: 54
|
||||
implicitWidth: 54
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.centerIn: parent
|
||||
animate: true
|
||||
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
text: appBox.modelData.audio.muted ? "volume_off" : "volume_up"
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
onClicked: {
|
||||
appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TextMetrics {
|
||||
id: metrics
|
||||
|
||||
@@ -353,13 +274,10 @@ Item {
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: Appearance.padding.smallest
|
||||
anchors.left: appBoxIcon.right
|
||||
anchors.leftMargin: Appearance.spacing.larger
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.large
|
||||
anchors.top: parent.top
|
||||
anchors.bottomMargin: Appearance.padding.smaller
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.larger
|
||||
anchors.rightMargin: Appearance.padding.larger
|
||||
anchors.topMargin: Appearance.padding.smaller
|
||||
|
||||
RowLayout {
|
||||
@@ -375,25 +293,45 @@ Item {
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
||||
color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
|
||||
font.bold: true
|
||||
text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
|
||||
}
|
||||
}
|
||||
|
||||
CustomMouseArea {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
RowLayout {
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
CustomSlider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.height
|
||||
value: appBox.modelData.audio.volume
|
||||
CustomMouseArea {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
|
||||
onInteraction: value => {
|
||||
Audio.setStreamVolume(appBox.modelData, value);
|
||||
CustomSlider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
bgColor: appBox.modelData.audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
|
||||
fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.height
|
||||
insetColor: appBox.modelData.audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
|
||||
insetIcon: appBox.modelData.audio.muted || appBox.modelData.audio.volume < 0.001 ? "volume_off" : "volume_up"
|
||||
value: appBox.modelData.audio.volume
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
onInteraction: value => Audio.setStreamVolume(appBox.modelData, value)
|
||||
}
|
||||
}
|
||||
|
||||
CustomSwitch {
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
checked: !appBox.modelData.audio.muted
|
||||
|
||||
onToggled: {
|
||||
appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user