From 5f166240002e61d3684b0af8ff36c4c8e6884794 Mon Sep 17 00:00:00 2001 From: bbedward Date: Sat, 24 Jan 2026 22:26:59 -0500 Subject: [PATCH] misc: fix some various scaling issues with fonts fixes #1268 --- .../Modals/Settings/SettingsSidebar.qml | 4 +- .../Modules/DankDash/DankDashPopout.qml | 32 ++- .../Modules/DankDash/MediaPlayerTab.qml | 3 +- quickshell/Modules/DankDash/WeatherTab.qml | 38 ++- .../Modules/Settings/WidgetsTabSection.qml | 222 ++++++++++++------ 5 files changed, 197 insertions(+), 102 deletions(-) diff --git a/quickshell/Modals/Settings/SettingsSidebar.qml b/quickshell/Modals/Settings/SettingsSidebar.qml index adbde500..d104174f 100644 --- a/quickshell/Modals/Settings/SettingsSidebar.qml +++ b/quickshell/Modals/Settings/SettingsSidebar.qml @@ -750,7 +750,7 @@ Rectangle { Rectangle { id: categoryRow width: parent.width - height: 40 + height: Math.max(Theme.iconSize, Theme.fontSizeMedium) + Theme.spacingS * 2 radius: Theme.cornerRadius visible: categoryDelegate.modelData.separator !== true @@ -847,7 +847,7 @@ Rectangle { readonly property bool isHighlighted: root.keyboardHighlightIndex === modelData.tabIndex width: childrenColumn.width - height: 36 + height: Math.max(Theme.iconSize - 4, Theme.fontSizeSmall + 1) + Theme.spacingS * 2 radius: Theme.cornerRadius visible: root.isItemVisible(modelData) color: { diff --git a/quickshell/Modules/DankDash/DankDashPopout.qml b/quickshell/Modules/DankDash/DankDashPopout.qml index d66759f5..0a86af62 100644 --- a/quickshell/Modules/DankDash/DankDashPopout.qml +++ b/quickshell/Modules/DankDash/DankDashPopout.qml @@ -314,25 +314,39 @@ DankPopout { height: Theme.spacingXS } - StackLayout { + Item { id: pages width: parent.width + height: implicitHeight implicitHeight: { - if (currentIndex === 0) + if (root.currentTabIndex === 0) return overviewLoader.item?.implicitHeight ?? 410; - if (currentIndex === 1) + if (root.currentTabIndex === 1) return mediaLoader.item?.implicitHeight ?? 410; - if (currentIndex === 2) + if (root.currentTabIndex === 2) return wallpaperLoader.item?.implicitHeight ?? 410; - if (SettingsData.weatherEnabled && currentIndex === 3) + if (SettingsData.weatherEnabled && root.currentTabIndex === 3) return weatherLoader.item?.implicitHeight ?? 410; return 410; } - currentIndex: root.currentTabIndex + + readonly property var currentItem: { + if (root.currentTabIndex === 0) + return overviewLoader.item; + if (root.currentTabIndex === 1) + return mediaLoader.item; + if (root.currentTabIndex === 2) + return wallpaperLoader.item; + if (root.currentTabIndex === 3) + return weatherLoader.item; + return null; + } Loader { id: overviewLoader + anchors.fill: parent active: root.currentTabIndex === 0 + visible: active sourceComponent: Component { OverviewTab { onCloseDash: root.dashVisible = false @@ -350,7 +364,9 @@ DankPopout { Loader { id: mediaLoader + anchors.fill: parent active: root.currentTabIndex === 1 + visible: active sourceComponent: Component { MediaPlayerTab { targetScreen: root.screen @@ -379,7 +395,9 @@ DankPopout { Loader { id: wallpaperLoader + anchors.fill: parent active: root.currentTabIndex === 2 + visible: active sourceComponent: Component { WallpaperTab { active: true @@ -393,7 +411,9 @@ DankPopout { Loader { id: weatherLoader + anchors.fill: parent active: SettingsData.weatherEnabled && root.currentTabIndex === 3 + visible: active sourceComponent: Component { WeatherTab {} } diff --git a/quickshell/Modules/DankDash/MediaPlayerTab.qml b/quickshell/Modules/DankDash/MediaPlayerTab.qml index 483d27a5..8d1ca06a 100644 --- a/quickshell/Modules/DankDash/MediaPlayerTab.qml +++ b/quickshell/Modules/DankDash/MediaPlayerTab.qml @@ -129,7 +129,7 @@ Item { } implicitWidth: 700 - implicitHeight: 410 + implicitHeight: playerContent.height + playerContent.anchors.topMargin * 2 Connections { target: activePlayer @@ -327,6 +327,7 @@ Item { clip: false visible: !_noneAvailable && (!showNoPlayerNow) ColumnLayout { + id: playerContent width: 484 height: 370 spacing: Theme.spacingXS diff --git a/quickshell/Modules/DankDash/WeatherTab.qml b/quickshell/Modules/DankDash/WeatherTab.qml index 5e1ed49c..bd970e8e 100644 --- a/quickshell/Modules/DankDash/WeatherTab.qml +++ b/quickshell/Modules/DankDash/WeatherTab.qml @@ -12,7 +12,7 @@ Item { LayoutMirroring.childrenInherit: true implicitWidth: 700 - implicitHeight: 410 + implicitHeight: root.available ? mainColumn.implicitHeight : unavailableColumn.implicitHeight + Theme.spacingXL * 2 property bool syncing: false function syncFrom(type) { @@ -52,6 +52,7 @@ Item { property bool available: WeatherService.weather.available Column { + id: unavailableColumn anchors.centerIn: parent spacing: Theme.spacingL visible: !root.available @@ -141,6 +142,7 @@ Item { } Column { + id: mainColumn anchors.fill: parent visible: root.available spacing: Theme.spacingXS @@ -164,7 +166,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter // anchors.verticalCenter: parent.verticalCenter width: weatherIcon.width + tempColumn.width + sunriseColumn.width + Theme.spacingM * 2 - height: 70 + height: Math.max(weatherIcon.height, tempColumn.height, sunriseColumn.height) DankIcon { id: weatherIcon @@ -325,7 +327,7 @@ Item { Item { id: dateStepper anchors.horizontalCenter: parent.horizontalCenter - height: 60 + height: dateStepperInner.height + Theme.spacingM * 2 width: dateStepperInner.width property var currentDate: new Date() @@ -354,10 +356,11 @@ Item { Item { id: dateStepperInner - anchors.fill: parent + anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter readonly property var space: Theme.spacingXS width: yearStepper.width + monthStepper.width + dayStepper.width + hourStepper.width + minuteStepper.width + (suffix.visible ? suffix.width : 0) + 10.5 * space + 2 * dateStepperInnerPadding.width + height: Math.max(yearStepper.height, monthStepper.height, dayStepper.height, hourStepper.height, minuteStepper.height) Item { id: dateStepperInnerPadding @@ -444,20 +447,15 @@ Item { text: ":" } } - Rectangle { + StyledText { id: suffix visible: !SettingsData.use24HourClock - anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenter: minuteStepper.verticalCenter anchors.left: minuteStepper.right anchors.leftMargin: 2 * parent.space - StyledText { - isMonospace: true - anchors.horizontalCenter: parent.horizontalCenter - text: dateStepper.splitDate[5] ?? "" - font.pixelSize: Theme.fontSizeSmall - x: -Theme.fontSizeSmall / 2 - y: -Theme.fontSizeSmall / 2 - } + isMonospace: true + text: dateStepper.splitDate[5] ?? "" + font.pixelSize: Theme.fontSizeSmall } DankActionButton { id: dateResetButton @@ -898,7 +896,7 @@ Item { Row { width: parent.width - height: 32 + height: Math.max(hourlyHeader.height, denseButton.height) + Theme.spacingS spacing: Theme.spacingS StyledText { @@ -928,7 +926,7 @@ Item { Item { width: parent.width - height: 100 + Theme.spacingXS + height: (hourlyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS Loader { id: hourlyLoader @@ -962,7 +960,7 @@ Item { contentHeight: cardHeight contentWidth: cardWidth - property var cardHeight: 100 + property var cardHeight: Theme.fontSizeLarge * 6 property var cardWidth: ((hourlyList.width + hourlyList.spacing) / hourlyList.visibleCount) - hourlyList.spacing property int initialIndex: (new Date()).getHours() property bool dense: !SessionData.weatherHourlyDetailed @@ -1038,7 +1036,7 @@ Item { Row { width: parent.width - height: 32 + height: dailyHeader.height + Theme.spacingS spacing: Theme.spacingS StyledText { @@ -1060,7 +1058,7 @@ Item { Item { width: parent.width - height: 100 + Theme.spacingXS + height: (dailyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS Loader { id: dailyLoader @@ -1094,7 +1092,7 @@ Item { contentHeight: cardHeight contentWidth: cardWidth - property var cardHeight: 100 + property var cardHeight: Theme.fontSizeLarge * 6 property var cardWidth: ((dailyList.width + dailyList.spacing) / dailyList.visibleCount) - dailyList.spacing property int initialIndex: 0 property bool dense: false diff --git a/quickshell/Modules/Settings/WidgetsTabSection.qml b/quickshell/Modules/Settings/WidgetsTabSection.qml index 6160b534..c911145d 100644 --- a/quickshell/Modules/Settings/WidgetsTabSection.qml +++ b/quickshell/Modules/Settings/WidgetsTabSection.qml @@ -373,81 +373,42 @@ Column { } } + DankActionButton { + id: musicMenuButton + visible: modelData.id === "music" + buttonSize: 32 + iconName: "more_vert" + iconSize: 18 + iconColor: Theme.outline + onClicked: { + musicContextMenu.widgetData = modelData; + musicContextMenu.sectionId = root.sectionId; + musicContextMenu.widgetIndex = index; + + var buttonPos = musicMenuButton.mapToItem(root, 0, 0); + var popupWidth = musicContextMenu.width; + var popupHeight = musicContextMenu.height; + + var xPos = buttonPos.x - popupWidth - Theme.spacingS; + if (xPos < 0) + xPos = buttonPos.x + musicMenuButton.width + Theme.spacingS; + + var yPos = buttonPos.y - popupHeight / 2 + musicMenuButton.height / 2; + if (yPos < 0) { + yPos = Theme.spacingS; + } else if (yPos + popupHeight > root.height) { + yPos = root.height - popupHeight - Theme.spacingS; + } + + musicContextMenu.x = xPos; + musicContextMenu.y = yPos; + musicContextMenu.open(); + } + } + Row { spacing: Theme.spacingXS - visible: modelData.id === "clock" || modelData.id === "music" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name" - - DankActionButton { - id: smallSizeButton - buttonSize: 28 - visible: modelData.id === "music" - iconName: "photo_size_select_small" - iconSize: 16 - iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 0 ? Theme.primary : Theme.outline - onClicked: { - root.compactModeChanged("music", 0); - } - onEntered: { - sharedTooltip.show("Small", smallSizeButton, 0, 0, "bottom"); - } - onExited: { - sharedTooltip.hide(); - } - } - - DankActionButton { - id: mediumSizeButton - buttonSize: 28 - visible: modelData.id === "music" - iconName: "photo_size_select_actual" - iconSize: 16 - iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 1 ? Theme.primary : Theme.outline - onClicked: { - root.compactModeChanged("music", 1); - } - onEntered: { - sharedTooltip.show("Medium", mediumSizeButton, 0, 0, "bottom"); - } - onExited: { - sharedTooltip.hide(); - } - } - - DankActionButton { - id: largeSizeButton - buttonSize: 28 - visible: modelData.id === "music" - iconName: "photo_size_select_large" - iconSize: 16 - iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 2 ? Theme.primary : Theme.outline - onClicked: { - root.compactModeChanged("music", 2); - } - onEntered: { - sharedTooltip.show("Large", largeSizeButton, 0, 0, "bottom"); - } - onExited: { - sharedTooltip.hide(); - } - } - - DankActionButton { - id: largerSizeButton - buttonSize: 28 - visible: modelData.id === "music" - iconName: "fit_screen" - iconSize: 16 - iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 3 ? Theme.primary : Theme.outline - onClicked: { - root.compactModeChanged("music", 3); - } - onEntered: { - sharedTooltip.show("Largest", largerSizeButton, 0, 0, "bottom"); - } - onExited: { - sharedTooltip.hide(); - } - } + visible: modelData.id === "clock" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name" DankActionButton { id: compactModeButton @@ -1308,4 +1269,119 @@ Column { } } } + + Popup { + id: musicContextMenu + + property var widgetData: null + property string sectionId: "" + property int widgetIndex: -1 + + width: 180 + height: musicMenuColumn.implicitHeight + Theme.spacingS * 2 + padding: 0 + modal: true + focus: true + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside + + background: Rectangle { + color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) + radius: Theme.cornerRadius + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) + border.width: 0 + } + + contentItem: Item { + Column { + id: musicMenuColumn + anchors.fill: parent + anchors.margins: Theme.spacingS + spacing: 2 + + Repeater { + model: [ + { + icon: "photo_size_select_small", + label: I18n.tr("Small"), + sizeValue: 0 + }, + { + icon: "photo_size_select_actual", + label: I18n.tr("Medium"), + sizeValue: 1 + }, + { + icon: "photo_size_select_large", + label: I18n.tr("Large"), + sizeValue: 2 + }, + { + icon: "fit_screen", + label: I18n.tr("Largest"), + sizeValue: 3 + } + ] + + delegate: Rectangle { + required property var modelData + required property int index + + function isSelected() { + var wd = musicContextMenu.widgetData; + var currentSize = wd?.mediaSize ?? SettingsData.mediaSize; + return currentSize === modelData.sizeValue; + } + + width: musicMenuColumn.width + height: Math.max(18, Theme.fontSizeSmall) + Theme.spacingM * 2 + radius: Theme.cornerRadius + color: musicOptionArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent" + + Row { + anchors.left: parent.left + anchors.leftMargin: Theme.spacingS + anchors.verticalCenter: parent.verticalCenter + spacing: Theme.spacingS + + DankIcon { + name: modelData.icon + size: 18 + color: isSelected() ? Theme.primary : Theme.surfaceText + anchors.verticalCenter: parent.verticalCenter + } + + StyledText { + text: modelData.label + font.pixelSize: Theme.fontSizeSmall + font.weight: isSelected() ? Font.Medium : Font.Normal + color: isSelected() ? Theme.primary : Theme.surfaceText + anchors.verticalCenter: parent.verticalCenter + } + } + + DankIcon { + anchors.right: parent.right + anchors.rightMargin: Theme.spacingS + anchors.verticalCenter: parent.verticalCenter + name: "check" + size: 16 + color: Theme.primary + visible: isSelected() + } + + MouseArea { + id: musicOptionArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + root.compactModeChanged("music", modelData.sizeValue); + musicContextMenu.close(); + } + } + } + } + } + } + } }