From 71be8bdeec05a96c049276b26a4a777de1207d3a Mon Sep 17 00:00:00 2001 From: purian23 Date: Thu, 24 Jul 2025 14:01:22 -0400 Subject: [PATCH] Update focused app & media control screen response --- Modules/TopBar/FocusedApp.qml | 67 ++++++++++++++++++++++++++++++++--- Modules/TopBar/Media.qml | 53 +++++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 5 deletions(-) diff --git a/Modules/TopBar/FocusedApp.qml b/Modules/TopBar/FocusedApp.qml index 71d3c929..7f7a8cb6 100644 --- a/Modules/TopBar/FocusedApp.qml +++ b/Modules/TopBar/FocusedApp.qml @@ -5,7 +5,64 @@ import qs.Services Rectangle { id: root - width: Math.max(contentRow.implicitWidth + Theme.spacingS * 2, 60) + // Dynamic screen detection for laptop vs desktop monitor + readonly property bool isSmallScreen: { + // Walk up the parent chain to find the TopBar PanelWindow + let current = root.parent + while (current && !current.screen) { + current = current.parent + } + + if (!current || !current.screen) { + return true // Default to small if we can't detect + } + + const s = current.screen + + // Multi-method detection for laptop/small screens: + + // Method 1: Check screen name for laptop indicators + const screenName = (s.name || "").toLowerCase() + if (screenName.includes("edp") || screenName.includes("lvds")) { + return true + } + + // Method 2: Check pixel density if available + try { + if (s.pixelDensity && s.pixelDensity > 1.5) { + return true + } + } catch (e) { /* ignore */ } + + // Method 3: Check device pixel ratio if available + try { + if (s.devicePixelRatio && s.devicePixelRatio > 1.25) { + return true + } + } catch (e) { /* ignore */ } + + // Method 4: Resolution-based fallback for smaller displays + if (s.width <= 1920 && s.height <= 1200) { + return true + } + + // Method 5: Check for high-res laptop displays + if ((s.width === 2400 && s.height === 1600) || + (s.width === 2560 && s.height === 1600) || + (s.width === 2880 && s.height === 1800)) { + return true + } + + return false // Default to large screen + } + + // Dynamic sizing based on screen type + readonly property int maxWidth: isSmallScreen ? 288 : 456 + readonly property int appNameMaxWidth: isSmallScreen ? 130 : 180 + readonly property int separatorWidth: 15 + readonly property int titleMaxWidth: maxWidth - appNameMaxWidth - separatorWidth - (Theme.spacingS * 2) + + width: Math.min(contentRow.implicitWidth + Theme.spacingS * 2, maxWidth) height: 30 radius: Theme.cornerRadius color: mouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) @@ -26,10 +83,10 @@ Rectangle { font.weight: Font.Medium color: Theme.surfaceText anchors.verticalCenter: parent.verticalCenter - // Limit app name width + // App name gets reasonable space - only truncate if absolutely necessary elide: Text.ElideRight maximumLineCount: 1 - width: Math.min(implicitWidth, 120) + width: Math.min(implicitWidth, root.appNameMaxWidth) } Text { @@ -48,10 +105,10 @@ Rectangle { font.weight: Font.Medium color: Theme.surfaceText anchors.verticalCenter: parent.verticalCenter - // Limit title width - increased for longer titles + // Window title gets remaining space and shows ellipsis when truncated elide: Text.ElideRight maximumLineCount: 1 - width: Math.min(implicitWidth, 350) + width: Math.min(implicitWidth, root.titleMaxWidth) } } diff --git a/Modules/TopBar/Media.qml b/Modules/TopBar/Media.qml index 23c34568..940e8c9a 100644 --- a/Modules/TopBar/Media.qml +++ b/Modules/TopBar/Media.qml @@ -9,6 +9,58 @@ Rectangle { readonly property MprisPlayer activePlayer: MprisController.activePlayer readonly property bool playerAvailable: activePlayer !== null + + // Screen detection for responsive design (same logic as FocusedApp) + readonly property bool isSmallScreen: { + // Walk up the parent chain to find the TopBar PanelWindow + let current = root.parent + while (current && !current.screen) { + current = current.parent + } + + if (!current || !current.screen) { + return true // Default to small if we can't detect + } + + const s = current.screen + + // Multi-method detection for laptop/small screens: + + // Method 1: Check screen name for laptop indicators + const screenName = (s.name || "").toLowerCase() + if (screenName.includes("edp") || screenName.includes("lvds")) { + return true + } + + // Method 2: Check pixel density if available + try { + if (s.pixelDensity && s.pixelDensity > 1.5) { + return true + } + } catch (e) { /* ignore */ } + + // Method 3: Check device pixel ratio if available + try { + if (s.devicePixelRatio && s.devicePixelRatio > 1.25) { + return true + } + } catch (e) { /* ignore */ } + + // Method 4: Resolution-based fallback for smaller displays + if (s.width <= 1920 && s.height <= 1200) { + return true + } + + // Method 5: Check for high-res laptop displays + if ((s.width === 2400 && s.height === 1600) || + (s.width === 2560 && s.height === 1600) || + (s.width === 2880 && s.height === 1800)) { + return true + } + + return false // Default to large screen + } + readonly property int contentWidth: Math.min(280, mediaRow.implicitWidth + Theme.spacingS * 2) signal clicked() @@ -93,6 +145,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter width: 140 + visible: !root.isSmallScreen // Hide title text on small screens text: { if (!activePlayer || !activePlayer.trackTitle) return "";