never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NPanel: simplified screen/scaling management

Browse source
This commit is contained in:
LemmyCook 2025-09-10 18:48:01 -04:00
parent 6ea1e2b4c7
commit 82ac49ce85
28 changed files with 120 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Modules/Bar/Widgets/Bluetooth.qml
View file

@ -21,5 +21,5 @@ NIconButton {
icon: Settings.data.network.bluetoothEnabled ? "bluetooth" : "bluetooth-off"
tooltipText: "Bluetooth devices."
onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen, this)
onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
}

2
Modules/Bar/Widgets/Brightness.qml
View file

@ -107,7 +107,7 @@ Item {
onClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.Brightness
settingsPanel.open(screen)
settingsPanel.open()
}
}
}

2
Modules/Bar/Widgets/Clock.qml
View file

@ -85,7 +85,7 @@ Rectangle {
}
onClicked: {
tooltip.hide()
PanelService.getPanel("calendarPanel")?.toggle(screen, this)
PanelService.getPanel("calendarPanel")?.toggle(this)
}
}
}

2
Modules/Bar/Widgets/CustomButton.qml
View file

@ -70,7 +70,7 @@ NIconButton {
// No script was defined, open settings
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.Bar
settingsPanel.open(screen)
settingsPanel.open()
}
}

2
Modules/Bar/Widgets/Microphone.qml
View file

@ -111,7 +111,7 @@ Item {
onClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.Audio
settingsPanel.open(screen)
settingsPanel.open()
}
onRightClicked: {
AudioService.setInputMuted(!AudioService.inputMuted)

2
Modules/Bar/Widgets/NightLight.qml
View file

@ -37,6 +37,6 @@ NIconButton {
onRightClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.Brightness
settingsPanel.open(screen)
settingsPanel.open()
}
}

2
Modules/Bar/Widgets/NotificationHistory.qml
View file

@ -62,7 +62,7 @@ NIconButton {
onClicked: {
var panel = PanelService.getPanel("notificationHistoryPanel")
panel?.toggle(screen, this)
panel?.toggle(this)
Settings.data.notifications.lastSeenTs = Time.timestamp * 1000
}

5
Modules/Bar/Widgets/PowerToggle.qml
View file

@ -8,9 +8,6 @@ import qs.Widgets
NIconButton {
id: root
property ShellScreen screen
property real scaling: 1.0
sizeRatio: 0.8
icon: "power"
@ -19,5 +16,5 @@ NIconButton {
colorFg: Color.mError
colorBorder: Color.transparent
colorBorderHover: Color.transparent
onClicked: PanelService.getPanel("powerPanel")?.toggle(screen)
onClicked: PanelService.getPanel("powerPanel")?.toggle()
}

4
Modules/Bar/Widgets/SidePanelToggle.qml
View file

@ -43,8 +43,8 @@ NIconButton {
colorBorderHover: Color.transparent
anchors.verticalCenter: parent.verticalCenter
onClicked: PanelService.getPanel("sidePanel")?.toggle(screen, this)
onRightClicked: PanelService.getPanel("settingsPanel")?.toggle(screen)
onClicked: PanelService.getPanel("sidePanel")?.toggle(this)
onRightClicked: PanelService.getPanel("settingsPanel")?.toggle()
IconImage {
id: logo

2
Modules/Bar/Widgets/Volume.qml
View file

@ -96,7 +96,7 @@ Item {
onClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.Audio
settingsPanel.open(screen)
settingsPanel.open()
}
onRightClicked: {
AudioService.setMuted(!AudioService.muted)

2
Modules/Bar/Widgets/WiFi.qml
View file

@ -41,5 +41,5 @@ NIconButton {
}
}
tooltipText: "Manage Wi-Fi."
onClicked: PanelService.getPanel("wifiPanel")?.toggle(screen, this)
onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
}

4
Modules/BluetoothPanel/BluetoothPanel.qml
View file

@ -11,8 +11,8 @@ import qs.Widgets
NPanel {
id: root
panelWidth: 380 * scaling
panelHeight: 500 * scaling
preferredWidth: 380
preferredHeight: 500
panelContent: Rectangle {
color: Color.transparent

4
Modules/Calendar/Calendar.qml
View file

@ -10,8 +10,8 @@ import qs.Widgets
NPanel {
id: root
panelWidth: 340 * scaling
panelHeight: 320 * scaling
preferredWidth: 340
preferredHeight: 320
panelAnchorRight: true
// Main Column

25
Modules/IPC/IPCManager.qml
View file

@ -8,17 +8,6 @@ import qs.Services
Item {
id: root
// Using Wayland protocols to get focused window then determine which screen it's on.
function getActiveScreen() {
const activeWindow = ToplevelManager.activeToplevel
if (activeWindow && activeWindow.screens.length > 0) {
return activeWindow.screens[0]
}
// Fall back to the primary screen
return Quickshell.screens[0]
}
IpcHandler {
target: "screenRecorder"
function toggle() {
@ -31,14 +20,14 @@ Item {
IpcHandler {
target: "settings"
function toggle() {
settingsPanel.toggle(getActiveScreen())
settingsPanel.toggle()
}
}
IpcHandler {
target: "notifications"
function toggleHistory() {
notificationHistoryPanel.toggle(getActiveScreen())
notificationHistoryPanel.toggle()
}
function toggleDND() {
Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
@ -55,15 +44,15 @@ Item {
IpcHandler {
target: "launcher"
function toggle() {
launcherPanel.toggle(getActiveScreen())
launcherPanel.toggle()
}
function clipboard() {
launcherPanel.setSearchText(">clip ")
launcherPanel.toggle(getActiveScreen())
launcherPanel.toggle()
}
function calculator() {
launcherPanel.setSearchText(">calc ")
launcherPanel.toggle(getActiveScreen())
launcherPanel.toggle()
}
}
@ -122,14 +111,14 @@ Item {
IpcHandler {
target: "powerPanel"
function toggle() {
powerPanel.toggle(getActiveScreen())
powerPanel.toggle()
}
}
IpcHandler {
target: "sidePanel"
function toggle() {
sidePanel.toggle(getActiveScreen())
sidePanel.toggle()
}
}

14
Modules/Launcher/Launcher.qml
View file

@ -11,16 +11,10 @@ NPanel {
id: root
// Panel configuration
panelWidth: {
var w = Math.round(Math.max(screen?.width * 0.3, 500) * scaling)
w = Math.min(w, screen?.width - Style.marginL * 2)
return w
}
panelHeight: {
var h = Math.round(Math.max(screen?.height * 0.5, 600) * scaling)
h = Math.min(h, screen?.height - Style.barHeight * scaling - Style.marginL * 2)
return h
}
preferredWidth: 500
preferredWidthRatio: 0.3
preferredHeight: 600
preferredHeightRatio: 0.5
panelKeyboardFocus: true
panelBackgroundColor: Qt.alpha(Color.mSurface, Settings.data.appLauncher.backgroundOpacity)

4
Modules/Notification/NotificationHistoryPanel.qml
View file

@ -12,8 +12,8 @@ import qs.Widgets
NPanel {
id: root
panelWidth: 380 * scaling
panelHeight: 500 * scaling
preferredWidth: 380
preferredHeight: 500
panelAnchorRight: true
panelContent: Rectangle {

4
Modules/PowerPanel/PowerPanel.qml
View file

@ -13,8 +13,8 @@ import qs.Widgets
NPanel {
id: root
panelWidth: 440 * scaling
panelHeight: 380 * scaling
preferredWidth: 440
preferredHeight: 380
panelAnchorHorizontalCenter: true
panelAnchorVerticalCenter: true
panelKeyboardFocus: true

6
Modules/SettingsPanel/Bar/BarSectionEditor.qml
View file

@ -19,10 +19,8 @@ NBox {
signal reorderWidget(string section, int fromIndex, int toIndex)
signal updateWidgetSettings(string section, int index, var settings)
signal dragPotentialStarted
// Emitted when a widget is pressed (potential drag start)
signal dragPotentialEnded
// Emitted when interaction ends (drag or click)
color: Color.mSurface
Layout.fillWidth: true
Layout.minimumHeight: {
@ -147,12 +145,12 @@ NBox {
Behavior on opacity {
NumberAnimation {
duration: 150
duration: Style.animationFast
}
}
Behavior on scale {
NumberAnimation {
duration: 150
duration: Style.animationFast
}
}

6
Modules/SettingsPanel/Bar/WidgetSettings/CustomButtonSettings.qml
View file

@ -48,18 +48,16 @@ ColumnLayout {
Popup {
id: iconPicker
modal: true
property real panelWidth: {
width: {
var w = Math.round(Math.max(Screen.width * 0.35, 900) * scaling)
w = Math.min(w, Screen.width - Style.marginL * 2)
return w
}
property real panelHeight: {
height: {
var h = Math.round(Math.max(Screen.height * 0.65, 700) * scaling)
h = Math.min(h, Screen.height - Style.barHeight * scaling - Style.marginL * 2)
return h
}
width: panelWidth
height: panelHeight
anchors.centerIn: Overlay.overlay
padding: Style.marginXL * scaling

15
Modules/SettingsPanel/SettingsPanel.qml
View file

@ -11,16 +11,11 @@ import qs.Widgets
NPanel {
id: root
panelWidth: {
var w = Math.round(Math.max(screen?.width * 0.4, 1000) * scaling)
w = Math.min(w, screen?.width - Style.marginL * 2)
return w
}
panelHeight: {
var h = Math.round(Math.max(screen?.height * 0.75, 800) * scaling)
h = Math.min(h, screen?.height - Style.barHeight * scaling - Style.marginL * 2)
return h
}
preferredWidth: 1000
preferredHeight: 1000
preferredWidthRatio: 0.4
preferredHeightRatio: 0.75
panelAnchorHorizontalCenter: true
panelAnchorVerticalCenter: true

4
Modules/SettingsPanel/Tabs/DisplayTab.qml
View file

@ -44,12 +44,11 @@ ColumnLayout {
model: Quickshell.screens || []
delegate: Rectangle {
Layout.fillWidth: true
Layout.minimumWidth: 550 * scaling
implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
radius: Style.radiusM * scaling
color: Color.mSurface
border.color: Color.mOutline
border.width: Math.max(1, Style.borderS * scaling)
implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
property real localScaling: ScalingService.getScreenScale(modelData)
Connections {
@ -177,7 +176,6 @@ ColumnLayout {
value: localScaling
onPressedChanged: ScalingService.setScreenScale(modelData, value)
Layout.fillWidth: true
Layout.minimumWidth: 150 * scaling
}
NIconButton {

4
Modules/SidePanel/Cards/MediaCard.qml
View file

@ -10,12 +10,8 @@ import qs.Widgets
NBox {
id: root
Layout.fillWidth: true
Layout.fillHeight: true
ColumnLayout {
anchors.fill: parent
Layout.fillHeight: true
anchors.margins: Style.marginL * scaling
// No media player detected

4
Modules/SidePanel/Cards/ProfileCard.qml
View file

@ -63,7 +63,7 @@ NBox {
tooltipText: "Open settings."
onClicked: {
settingsPanel.requestedTab = SettingsPanel.Tab.General
settingsPanel.open(screen)
settingsPanel.open()
}
}
@ -72,7 +72,7 @@ NBox {
icon: "power"
tooltipText: "Power menu."
onClicked: {
powerPanel.open(screen)
powerPanel.open()
sidePanel.close()
}
}

1
Modules/SidePanel/Cards/SystemMonitorCard.qml
View file

@ -9,7 +9,6 @@ NBox {
id: root
Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling
implicitHeight: content.implicitHeight + Style.marginXS * 2 * scaling
ColumnLayout {
id: content

2
Modules/SidePanel/Cards/UtilitiesCard.qml
View file

@ -61,7 +61,7 @@ NBox {
onClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector
settingsPanel.open(screen)
settingsPanel.open()
}
onRightClicked: {
WallpaperService.setRandomWallpaper()

38
Modules/SidePanel/SidePanel.qml
View file

@ -10,32 +10,14 @@ import qs.Widgets
NPanel {
id: root
panelWidth: 460 * scaling
panelHeight: contentHeight
// Default height, will be modified via binding when the content is fully loaded
property real contentHeight: 720 * scaling
preferredWidth: 460
preferredHeight: 730
panelContent: Item {
id: content
property real cardSpacing: Style.marginL * scaling
width: root.panelWidth
implicitHeight: layout.implicitHeight + (2 * cardSpacing)
height: implicitHeight
// Update parent's contentHeight whenever our height changes
onHeightChanged: {
root.contentHeight = height
}
onImplicitHeightChanged: {
if (implicitHeight > 0) {
root.contentHeight = implicitHeight
}
}
// Layout content
ColumnLayout {
id: layout
@ -46,55 +28,45 @@ NPanel {
// Cards (consistent inter-card spacing via ColumnLayout spacing)
ProfileCard {
id: profileCard
Layout.fillWidth: true
}
WeatherCard {
id: weatherCard
Layout.fillWidth: true
}
// Middle section: media + stats column
RowLayout {
id: middleRow
Layout.fillWidth: true
Layout.minimumHeight: 280 * scaling
Layout.preferredHeight: Math.max(280 * scaling, statsCard.implicitHeight)
Layout.preferredHeight: Math.max(310 * scaling)
spacing: content.cardSpacing
// Media card
MediaCard {
id: mediaCard
Layout.fillWidth: true
Layout.fillHeight: true
}
// System monitors combined in one card
SystemMonitorCard {
id: statsCard
Layout.alignment: Qt.AlignTop
Layout.fillHeight: true
}
}
// Bottom actions (two grouped rows of round buttons)
RowLayout {
id: bottomRow
Layout.fillWidth: true
Layout.minimumHeight: 60 * scaling
Layout.preferredHeight: Math.max(60 * scaling, powerProfilesCard.implicitHeight, utilitiesCard.implicitHeight)
Layout.preferredHeight: Math.max(60 * scaling)
spacing: content.cardSpacing
// Power Profiles switcher
PowerProfilesCard {
id: powerProfilesCard
spacing: content.cardSpacing
Layout.fillWidth: true
}
// Utilities buttons
UtilitiesCard {
id: utilitiesCard
spacing: content.cardSpacing
Layout.fillWidth: true
}

4
Modules/WiFiPanel/WiFiPanel.qml
View file

@ -10,8 +10,8 @@ import qs.Widgets
NPanel {
id: root
panelWidth: 400 * scaling
panelHeight: 500 * scaling
preferredWidth: 400
preferredHeight: 500
panelKeyboardFocus: true
property string passwordSsid: ""

117
Widgets/NPanel.qml
View file

@ -7,24 +7,14 @@ import qs.Services
Loader {
id: root
active: false
asynchronous: true
property ShellScreen screen
property real scaling: ScalingService.getScreenScale(screen)
Connections {
target: ScalingService
function onScaleChanged(screenName, scale) {
if ((screen !== null) && (screenName === screen.name)) {
scaling = scale
}
}
}
property ShellScreen screen: undefined
property real scaling: 1.0
property Component panelContent: null
property int panelWidth: 1500
property int panelHeight: 400
property real preferredWidth: 700
property real preferredHeight: 900
property real preferredWidthRatio: undefined
property real preferredHeightRatio: undefined
property color panelBackgroundColor: Color.mSurface
property bool panelAnchorHorizontalCenter: false
@ -50,14 +40,13 @@ Loader {
property real opacityValue: originalOpacity
property alias isClosing: hideTimer.running
readonly property real barHeight: Math.round(Style.barHeight * scaling)
readonly property bool barAtBottom: Settings.data.bar.position === "bottom"
readonly property bool barIsVisible: (screen !== null) && (Settings.data.bar.monitors.includes(screen.name)
|| (Settings.data.bar.monitors.length === 0))
signal opened
signal closed
active: false
asynchronous: true
Component.onCompleted: {
PanelService.registerPanel(root)
}
@ -81,32 +70,16 @@ Loader {
}
// -----------------------------------------
function toggle(aScreen, buttonItem) {
// Don't toggle if screen is null or invalid
if (!aScreen || !aScreen.name) {
Logger.warn("NPanel", "Cannot toggle panel: invalid screen object")
return
}
function toggle(buttonItem) {
if (!active || isClosing) {
open(aScreen, buttonItem)
open(buttonItem)
} else {
close()
}
}
// -----------------------------------------
function open(aScreen, buttonItem) {
// Don't open if screen is null or invalid
if (!aScreen || !aScreen.name) {
Logger.warn("NPanel", "Cannot open panel: invalid screen object")
return
}
if (aScreen !== null) {
screen = aScreen
}
function open(buttonItem) {
// Get the button position if provided
if (buttonItem !== undefined && buttonItem !== null) {
useButtonPosition = true
@ -165,6 +138,34 @@ Loader {
PanelWindow {
id: panelWindow
// PanelWindow has its own screen property inherited of QsWindow
property real scaling: ScalingService.getScreenScale(screen)
readonly property real barHeight: Math.round(Style.barHeight * scaling)
readonly property bool barAtBottom: Settings.data.bar.position === "bottom"
readonly property bool barIsVisible: (screen !== null) && (Settings.data.bar.monitors.includes(screen.name)
|| (Settings.data.bar.monitors.length === 0))
Connections {
target: ScalingService
function onScaleChanged(screenName, scale) {
if ((screen !== null) && (screenName === screen.name)) {
root.scaling = scale
}
}
}
Connections {
target: panelWindow
function onScreenChanged() {
root.screen = screen
root.scaling = ScalingService.getScreenScale(screen)
// It's mandatory to force refresh the subloader to ensure the scaling is properly dispatched
panelContentLoader.active = false
panelContentLoader.active = true
}
}
visible: true
// Dim desktop if required
@ -209,8 +210,27 @@ Loader {
radius: Style.radiusL * scaling
border.color: Color.mOutline
border.width: Math.max(1, Style.borderS * scaling)
width: panelWidth
height: panelHeight
width: {
var w
if (preferredWidthRatio !== undefined) {
w = Math.round(Math.max(screen?.width * preferredWidthRatio, preferredWidth) * scaling)
} else {
w = preferredWidth * scaling
}
// Clamp width so it is never bigger than the screen
return Math.min(w, screen?.width - Style.marginL * 2)
}
height: {
var h
if (preferredHeightRatio !== undefined) {
h = Math.round(Math.max(screen?.height * preferredHeightRatio, preferredHeight) * scaling)
} else {
h = preferredHeight * scaling
}
// Clamp width so it is never bigger than the screen
return Math.min(h, screen?.height - Style.barHeight * scaling - Style.marginL * 2)
}
scale: root.scaleValue
opacity: root.opacityValue
@ -221,27 +241,27 @@ Loader {
property int calculatedX: {
if (root.useButtonPosition) {
// Position panel relative to button
var targetX = root.buttonPosition.x + (root.buttonWidth / 2) - (panelWidth / 2)
var targetX = root.buttonPosition.x + (root.buttonWidth / 2) - (preferredWidth / 2)
// Keep panel within screen bounds
var maxX = panelWindow.width - panelWidth - (Style.marginS * scaling)
var maxX = panelWindow.width - panelBackground.width - (Style.marginS * scaling)
var minX = Style.marginS * scaling
return Math.round(Math.max(minX, Math.min(targetX, maxX)))
} else if (!panelAnchorHorizontalCenter && panelAnchorLeft) {
return Math.round(Style.marginS * scaling)
} else if (!panelAnchorHorizontalCenter && panelAnchorRight) {
return Math.round(panelWindow.width - panelWidth - (Style.marginS * scaling))
return Math.round(panelWindow.width - panelBackground.width - (Style.marginS * scaling))
} else {
return Math.round((panelWindow.width - panelWidth) / 2)
return Math.round((panelWindow.width - panelBackground.width) / 2)
}
}
property int calculatedY: {
if (panelAnchorVerticalCenter) {
return Math.round((panelWindow.height - panelHeight) / 2)
return Math.round((panelWindow.height - panelBackground.height) / 2)
} else if (panelAnchorBottom) {
return Math.round(panelWindow.height - panelHeight - (Style.marginS * scaling))
return Math.round(panelWindow.height - panelBackground.height - (Style.marginS * scaling))
} else if (panelAnchorTop) {
return Math.round(Style.marginS * scaling)
} else if (!barAtBottom) {
@ -249,7 +269,7 @@ Loader {
return Math.round(Style.marginS * scaling)
} else {
// Above the bottom bar
return Math.round(panelWindow.height - panelHeight - (Style.marginS * scaling))
return Math.round(panelWindow.height - panelBackground.height - (Style.marginS * scaling))
}
}
@ -280,6 +300,7 @@ Loader {
}
Loader {
id: panelContentLoader
anchors.fill: parent
sourceComponent: root.panelContent
}