ControlCenter: toggle to hide/show volume sliders + getting ready for more modularity soon

This commit is contained in:
ItsLemmy
2025-10-13 10:04:47 -04:00
parent 962811db0e
commit a0907a5b96
19 changed files with 186 additions and 381 deletions
+42 -32
View File
@@ -10,9 +10,17 @@ import qs.Widgets
NPanel {
id: root
preferredWidth: Math.round(460 * Style.uiScaleRatio)
preferredHeight: (profileHeight + weatherHeight + mediaSysMonHeight + audioHeight + bottomHeight) + 6 * Style.marginL
panelKeyboardFocus: true
preferredWidth: Math.round(460 * Style.uiScaleRatio)
preferredHeight: {
let height = profileHeight + weatherHeight + mediaSysMonHeight + utilsHeight
let count = 4
if (Settings.data.controlCenter.audioControlsEnabled) {
count++
height += audioHeight
}
return height + (count + 1) * Style.marginL
}
// Positioning
readonly property string controlCenterPosition: Settings.data.controlCenter.position
@@ -27,7 +35,7 @@ NPanel {
readonly property int weatherHeight: Math.round(190 * Style.uiScaleRatio)
readonly property int mediaSysMonHeight: Math.round(260 * Style.uiScaleRatio)
readonly property int audioHeight: Math.round(120 * Style.uiScaleRatio)
readonly property int bottomHeight: Math.round(52 * Style.uiScaleRatio)
readonly property int utilsHeight: Math.round(52 * Style.uiScaleRatio)
panelContent: Item {
id: content
@@ -40,18 +48,47 @@ NPanel {
width: parent.width - (Style.marginL * 2)
spacing: Style.marginL
// Cards (consistent inter-card spacing via ColumnLayout spacing)
// Profile
ProfileCard {
Layout.fillWidth: true
Layout.preferredHeight: profileHeight
}
// Utils
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: utilsHeight
spacing: Style.marginL
// Power Profiles switcher
PowerProfilesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
// Utilities buttons
UtilitiesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
}
// Audio controls
AudioCard {
visible: Settings.data.controlCenter.audioControlsEnabled
Layout.fillWidth: true
Layout.preferredHeight: audioHeight
}
// Weather
WeatherCard {
Layout.fillWidth: true
Layout.preferredHeight: weatherHeight
}
// Middle section: media + stats column
// Media + SysMon
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: mediaSysMonHeight
@@ -69,33 +106,6 @@ NPanel {
Layout.fillHeight: true
}
}
// Audio card below media and system monitor
AudioCard {
Layout.fillWidth: true
Layout.preferredHeight: audioHeight
}
// Bottom actions (two grouped rows of round buttons)
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: bottomHeight
spacing: Style.marginL
// Power Profiles switcher
PowerProfilesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
// Utilities buttons
UtilitiesCard {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: Style.marginL
}
}
}
}
}
@@ -7,9 +7,7 @@ import qs.Widgets
NQuickSetting {
property ShellScreen screen
text: I18n.tr("quickSettings.bluetooth.label.enabled")
icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
tooltipText: I18n.tr("quickSettings.bluetooth.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
}
@@ -7,11 +7,8 @@ import qs.Widgets
NQuickSetting {
property ShellScreen screen
text: I18n.tr("quickSettings.keepAwake.label.enabled")
icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
hot: IdleInhibitorService.isInhibited
tooltipText: I18n.tr("quickSettings.keepAwake.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: IdleInhibitorService.manualToggle()
}
@@ -8,10 +8,8 @@ NQuickSetting {
property ShellScreen screen
enabled: ProgramCheckerService.wlsunsetAvailable
text: I18n.tr("quickSettings.nightLight.label.enabled")
icon: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? "nightlight-forced" : "nightlight-on") : "nightlight-off"
hot: !Settings.data.nightLight.enabled || Settings.data.nightLight.forced
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
tooltipText: I18n.tr("quickSettings.nightLight.tooltip.action")
onClicked: {
@@ -7,12 +7,9 @@ import qs.Widgets
NQuickSetting {
property ShellScreen screen
text: Settings.data.notifications.doNotDisturb ? I18n.tr("quickSettings.notifications.label.disabled") : I18n.tr("quickSettings.notifications.label.enabled")
icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
hot: Settings.data.notifications.doNotDisturb
tooltipText: I18n.tr("quickSettings.notifications.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: PanelService.getPanel("notificationHistoryPanel")?.toggle(this)
onRightClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
}
@@ -12,12 +12,9 @@ NQuickSetting {
readonly property bool hasPP: PowerProfileService.available
enabled: hasPP
text: hasPP ? PowerProfileService.getName() : I18n.tr("quickSettings.powerProfile.label.unavailable")
icon: PowerProfileService.getIcon()
hot: !PowerProfileService.isDefault()
tooltipText: I18n.tr("quickSettings.powerProfile.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: {
PowerProfileService.cycleProfile()
}
@@ -9,10 +9,8 @@ NQuickSetting {
enabled: ProgramCheckerService.gpuScreenRecorderAvailable
icon: "camera-video"
text: ScreenRecorderService.isRecording ? I18n.tr("quickSettings.screenRecorder.label.recording") : I18n.tr("quickSettings.screenRecorder.label.stopped")
hot: ScreenRecorderService.isRecording
tooltipText: I18n.tr("quickSettings.screenRecorder.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
// Force hover state when recording to get hover colors
property bool originalHovered: hovered
@@ -9,10 +9,7 @@ NQuickSetting {
enabled: Settings.data.wallpaper.enabled
icon: "wallpaper-selector"
text: I18n.tr("quickSettings.wallpaperSelector.label")
tooltipText: I18n.tr("quickSettings.wallpaperSelector.tooltip.action")
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
onClicked: PanelService.getPanel("wallpaperPanel")?.toggle(this)
onRightClicked: WallpaperService.setRandomWallpaper()
}
-15
View File
@@ -28,21 +28,6 @@ NQuickSetting {
}
}
text: {
if (NetworkService.ethernetConnected) {
return I18n.tr("quickSettings.wifi.label.ethernet")
}
let connected = false
for (const net in NetworkService.networks) {
if (NetworkService.networks[net].connected) {
connected = true
break
}
}
return connected ? I18n.tr("quickSettings.wifi.label.wifi") : I18n.tr("quickSettings.wifi.label.disconnected")
}
style: Settings.data.controlCenter.quickSettingsStyle || "modern"
tooltipText: I18n.tr("quickSettings.wifi.tooltip.action")
onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
}
+12 -12
View File
@@ -33,14 +33,14 @@ NBox {
Layout.minimumHeight: {
var widgetCount = widgetModel.length
if (widgetCount === 0)
return 140
return 140 * Style.uiScaleRatio
var availableWidth = parent.width
var avgWidgetWidth = 150
var avgWidgetWidth = 150 * Style.uiScaleRatio
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
var rows = Math.ceil(widgetCount / widgetsPerRow)
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20)
return ((50 + 20 + (rows * 48)) * Style.uiScaleRatio + ((rows - 1) * Style.marginS) + 20 * Style.uiScaleRatio)
}
// Generate widget color from name checksum
@@ -73,7 +73,7 @@ NBox {
Layout.fillWidth: true
NText {
text: sectionName + " Section"
text: sectionName
pointSize: Style.fontSizeL
font.weight: Style.fontWeightBold
color: Color.mOnSurface
@@ -131,7 +131,7 @@ NBox {
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 65
Layout.minimumHeight: 65 * Style.uiScaleRatio
clip: false // Don't clip children so ghost can move freely
Flow {
@@ -180,7 +180,7 @@ NBox {
NContextMenu {
id: contextMenu
parent: Overlay.overlay
width: 240
width: 240 * Style.uiScaleRatio
model: [{
"label": I18n.tr("tooltips.move-to-left-section"),
"action": "left",
@@ -227,16 +227,16 @@ NBox {
NText {
text: modelData.id
pointSize: Style.fontSizeS
pointSize: Style.fontSizeXS
color: root.getWidgetColor(modelData)[1]
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
Layout.preferredWidth: 80
Layout.preferredWidth: 60 * Style.uiScaleRatio
}
RowLayout {
spacing: 0
Layout.preferredWidth: buttonsCount * buttonsWidth
Layout.preferredWidth: buttonsCount * buttonsWidth * Style.uiScaleRatio
Loader {
active: root.widgetRegistry && root.widgetRegistry.widgetHasUserSettings(modelData.id)
@@ -261,19 +261,19 @@ NBox {
if (dialog) {
dialog.open()
} else {
Logger.error("WidgetSectionEditor", "Failed to create settings dialog instance")
Logger.error("SectionEditor", "Failed to create settings dialog instance")
}
}
if (component.status === Component.Ready) {
instantiateAndOpen()
} else if (component.status === Component.Error) {
Logger.error("WidgetSectionEditor", component.errorString())
Logger.error("SectionEditor", component.errorString())
} else {
component.statusChanged.connect(function () {
if (component.status === Component.Ready) {
instantiateAndOpen()
} else if (component.status === Component.Error) {
Logger.error("WidgetSectionEditor", component.errorString())
Logger.error("SectionEditor", component.errorString())
}
})
}
+31 -39
View File
@@ -70,44 +70,19 @@ ColumnLayout {
}
}
NToggle {
label: I18n.tr("settings.control-center.audio-controls.label")
description: I18n.tr("settings.control-center.audio-controls.description")
checked: Settings.data.controlCenter.audioControlsEnabled
onToggled: checked => Settings.data.controlCenter.audioControlsEnabled = checked
}
NDivider {
Layout.fillWidth: true
Layout.topMargin: Style.marginXL
Layout.bottomMargin: Style.marginXL
}
// // Quick Settings Style Section
// ColumnLayout {
// spacing: Style.marginL
// Layout.fillWidth: true
// NHeader {
// label: I18n.tr("settings.control-center.quickSettingsStyle.section.label")
// description: I18n.tr("settings.control-center.quickSettingsStyle.section.description")
// }
// NComboBox {
// id: quickSettingsStyle
// label: I18n.tr("settings.control-center.quickSettingsStyle.style.label")
// description: I18n.tr("settings.control-center.quickSettingsStyle.style.description")
// Layout.fillWidth: true
// model: [{
// "key": "compact",
// "name": I18n.tr("options.control-center.quickSettingsStyle.compact")
// }, {
// "key": "classic",
// "name": I18n.tr("options.control-center.quickSettingsStyle.classic")
// }, {
// "key": "modern",
// "name": I18n.tr("options.control-center.quickSettingsStyle.modern")
// }]
// currentKey: Settings.data.controlCenter.quickSettingsStyle || "compact"
// onSelected: function (key) {
// Settings.data.controlCenter.quickSettingsStyle = key
// }
// }
// }
// NDivider {
// Layout.fillWidth: true
// Layout.topMargin: Style.marginXL
@@ -120,24 +95,41 @@ ColumnLayout {
// Layout.fillWidth: true
// NHeader {
// label: I18n.tr("settings.control-center.widgets.section.label")
// description: I18n.tr("settings.control-center.widgets.section.description")
// label: I18n.tr("settings.control-center.quickSettings.section.label")
// description: I18n.tr("settings.control-center.quickSettings.section.description")
// }
// // Bar Sections
// // Sections
// ColumnLayout {
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.topMargin: Style.marginM
// spacing: Style.marginM
// // Quick Settings
// // Left
// SectionEditor {
// sectionName: I18n.tr("settings.control-center.quickSettings.sectionName")
// sectionId: "quickSettings"
// sectionName: I18n.tr("settings.control-center.quickSettings.sectionLeft")
// sectionId: "left"
// settingsDialogComponent: ""
// widgetRegistry: ControlCenterWidgetRegistry
// widgetModel: Settings.data.controlCenter.widgets["quickSettings"]
// widgetModel: Settings.data.controlCenter.widgets["left"]
// availableWidgets: availableWidgets
// enableMoveBetweenSections: false
// onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
// onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
// onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
// onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
// onDragPotentialStarted: root.handleDragStart()
// onDragPotentialEnded: root.handleDragEnd()
// }
// // Right
// SectionEditor {
// sectionName: I18n.tr("settings.control-center.quickSettings.sectionRight")
// sectionId: "right"
// settingsDialogComponent: ""
// widgetRegistry: ControlCenterWidgetRegistry
// widgetModel: Settings.data.controlCenter.widgets["right"]
// availableWidgets: availableWidgets
// enableMoveBetweenSections: false
// onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)