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

Widgets Sizing: reworked our sizing approach to prepare for different bar densities.

Browse source
This commit is contained in:
LemmyCook 2025-09-15 22:33:09 -04:00
parent 593a0bfc2c
commit 47ef62beb3
31 changed files with 88 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Commons/Style.qml
View file

@ -65,14 +65,16 @@ Singleton {
property int animationSlow: Math.round(450 / Settings.data.general.animationSpeed) property int animationSlow: Math.round(450 / Settings.data.general.animationSpeed)
property int animationSlowest: Math.round(750 / Settings.data.general.animationSpeed) property int animationSlowest: Math.round(750 / Settings.data.general.animationSpeed)
// Dimensions
property int barHeight: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37
property int capsuleHeight: (barHeight * 0.73)
property int baseWidgetSize: (barHeight * 0.9)
property int sliderWidth: 200
// Delays // Delays
property int tooltipDelay: 300 property int tooltipDelay: 300
property int tooltipDelayLong: 1200 property int tooltipDelayLong: 1200
property int pillDelay: 500 property int pillDelay: 500
// Settings widgets base size
property real baseWidgetSize: 33
property real sliderWidth: 200
// Bar Dimensions
property real barHeight: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37
property real capsuleHeight: Math.round(barHeight * 0.73)
} }

17
Modules/Bar/Bar.qml
View file

@ -68,23 +68,13 @@ Variants {
radius: Settings.data.bar.floating ? Style.radiusL : 0 radius: Settings.data.bar.floating ? Style.radiusL : 0
} }
// For vertical bars, use a single column layout
Loader { Loader {
id: verticalBarLayout
anchors.fill: parent anchors.fill: parent
visible: Settings.data.bar.position === "left" || Settings.data.bar.position === "right" active: true
sourceComponent: verticalBarComponent sourceComponent: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? verticalBarComponent : horizontalBarComponent
} }
// For horizontal bars, use the original three-section layout // For vertical bars
Loader {
id: horizontalBarLayout
anchors.fill: parent
visible: Settings.data.bar.position === "top" || Settings.data.bar.position === "bottom"
sourceComponent: horizontalBarComponent
}
// Main layout components
Component { Component {
id: verticalBarComponent id: verticalBarComponent
Item { Item {
@ -163,6 +153,7 @@ Variants {
} }
} }
// For horizontal bars
Component { Component {
id: horizontalBarComponent id: horizontalBarComponent
Item { Item {

21
Modules/Bar/Widgets/ActiveWindow.qml
View file

@ -38,7 +38,7 @@ Item {
readonly property string barPosition: Settings.data.bar.position readonly property string barPosition: Settings.data.bar.position
implicitHeight: (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling) implicitHeight: (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling)
implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * 0.8 * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling)
function getTitle() { function getTitle() {
try { try {
@ -60,7 +60,7 @@ Item {
let total = Style.marginM * 2 * scaling // internal padding let total = Style.marginM * 2 * scaling // internal padding
if (showIcon) { if (showIcon) {
total += Style.baseWidgetSize * 0.5 * scaling + 2 * scaling // icon + spacing total += Style.capsuleHeight * 0.5 * scaling + 2 * scaling // icon + spacing
} }
// Calculate actual text width more accurately // Calculate actual text width more accurately
@ -129,11 +129,13 @@ Item {
Rectangle { Rectangle {
id: windowTitleRect id: windowTitleRect
visible: root.visible visible: root.visible
anchors.left: parent.left anchors.left: (barPosition === "top" || barPosition === "bottom") ? parent.left : undefined
anchors.top: (barPosition === "left" || barPosition === "right") ? parent.top : undefined
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling)
height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling) height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling) radius: width / 2
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
Item { Item {
@ -152,8 +154,8 @@ Item {
// Window icon // Window icon
Item { Item {
Layout.preferredWidth: Style.baseWidgetSize * 0.5 * scaling Layout.preferredWidth: Style.capsuleHeight * 0.75 * scaling
Layout.preferredHeight: Style.baseWidgetSize * 0.5 * scaling Layout.preferredHeight: Style.capsuleHeight * 0.75 * scaling
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: getTitle() !== "" && showIcon visible: getTitle() !== "" && showIcon
@ -217,11 +219,10 @@ Item {
// Window icon // Window icon
Item { Item {
width: Style.baseWidgetSize * 0.5 * scaling width: Style.capsuleHeight * 0.75 * scaling
height: Style.baseWidgetSize * 0.5 * scaling height: Style.capsuleHeight * 0.75 * scaling
anchors.centerIn: parent anchors.centerIn: parent
visible: getTitle() !== "" && showIcon
IconImage { IconImage {
id: windowIconVertical id: windowIconVertical
anchors.fill: parent anchors.fill: parent

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

@ -13,7 +13,7 @@ NIconButton {
property ShellScreen screen property ShellScreen screen
property real scaling: 1.0 property real scaling: 1.0
sizeRatio: 0.8 baseSize: Style.capsuleHeight
colorBg: Color.mSurfaceVariant colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface colorFg: Color.mOnSurface
colorBorder: Color.transparent colorBorder: Color.transparent

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

@ -39,7 +39,7 @@ Rectangle {
readonly property bool verticalMode: barPosition === "left" || barPosition === "right" readonly property bool verticalMode: barPosition === "left" || barPosition === "right"
implicitWidth: verticalMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling) implicitWidth: verticalMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.baseWidgetSize * 0.8 * scaling) // Match NPill implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match NPill
radius: Math.round(Style.radiusS * scaling) radius: Math.round(Style.radiusS * scaling)
color: Color.mSurfaceVariant color: Color.mSurfaceVariant

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

@ -10,9 +10,9 @@ NIconButton {
property real scaling: 1.0 property real scaling: 1.0
icon: "dark-mode" icon: "dark-mode"
tooltipText: "Toggle light/dark mode" tooltipText: "Toggle light/dark mode."
sizeRatio: 0.8
baseSize: Style.capsuleHeight
colorBg: Settings.data.colorSchemes.darkMode ? Color.mSurfaceVariant : Color.mPrimary colorBg: Settings.data.colorSchemes.darkMode ? Color.mSurfaceVariant : Color.mPrimary
colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
colorBorder: Color.transparent colorBorder: Color.transparent

7
Modules/Bar/Widgets/KeepAwake.qml
View file

@ -11,14 +11,11 @@ NIconButton {
property ShellScreen screen property ShellScreen screen
property real scaling: 1.0 property real scaling: 1.0
sizeRatio: 0.8 baseSize: Style.capsuleHeight
icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off" icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
tooltipText: IdleInhibitorService.isInhibited ? "Disable keep awake" : "Enable keep awake" tooltipText: IdleInhibitorService.isInhibited ? "Disable keep awake" : "Enable keep awake"
colorBg: IdleInhibitorService.isInhibited ? Color.mPrimary : Color.mSurfaceVariant colorBg: IdleInhibitorService.isInhibited ? Color.mPrimary : Color.mSurfaceVariant
colorFg: IdleInhibitorService.isInhibited ? Color.mOnPrimary : Color.mOnSurface colorFg: IdleInhibitorService.isInhibited ? Color.mOnPrimary : Color.mOnSurface
colorBorder: Color.transparent colorBorder: Color.transparent
onClicked: { onClicked: IdleInhibitorService.manualToggle()
IdleInhibitorService.manualToggle()
}
} }

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

@ -14,7 +14,7 @@ NIconButton {
property ShellScreen screen property ShellScreen screen
property real scaling: 1.0 property real scaling: 1.0
sizeRatio: 0.8 baseSize: Style.capsuleHeight
colorBg: Settings.data.nightLight.forced ? Color.mPrimary : Color.mSurfaceVariant colorBg: Settings.data.nightLight.forced ? Color.mPrimary : Color.mSurfaceVariant
colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mOnSurface colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mOnSurface
colorBorder: Color.transparent colorBorder: Color.transparent

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

@ -49,7 +49,7 @@ NIconButton {
return count return count
} }
sizeRatio: 0.8 baseSize: Style.capsuleHeight
icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell" icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
tooltipText: Settings.data.notifications.doNotDisturb ? "Notification history.\nRight-click to disable 'Do Not Disturb'." : "Notification history.\nRight-click to enable 'Do Not Disturb'." tooltipText: Settings.data.notifications.doNotDisturb ? "Notification history.\nRight-click to disable 'Do Not Disturb'." : "Notification history.\nRight-click to enable 'Do Not Disturb'."
colorBg: Color.mSurfaceVariant colorBg: Color.mSurfaceVariant

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

@ -13,7 +13,7 @@ NIconButton {
property real scaling: 1.0 property real scaling: 1.0
readonly property bool hasPP: PowerProfileService.available readonly property bool hasPP: PowerProfileService.available
sizeRatio: 0.8 baseSize: Style.capsuleHeight
visible: hasPP visible: hasPP
function profileIcon() { function profileIcon() {

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

@ -11,7 +11,7 @@ NIconButton {
property ShellScreen screen property ShellScreen screen
property real scaling: 1.0 property real scaling: 1.0
sizeRatio: 0.8 baseSize: Style.capsuleHeight
icon: "power" icon: "power"
tooltipText: "Power Settings" tooltipText: "Power Settings"

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

@ -13,7 +13,7 @@ NIconButton {
visible: ScreenRecorderService.isRecording visible: ScreenRecorderService.isRecording
icon: "camera-video" icon: "camera-video"
tooltipText: "Screen recording is active\nClick to stop recording" tooltipText: "Screen recording is active\nClick to stop recording"
sizeRatio: 0.8 baseSize: Style.capsuleHeight
colorBg: Color.mPrimary colorBg: Color.mPrimary
colorFg: Color.mOnPrimary colorFg: Color.mOnPrimary
onClicked: ScreenRecorderService.toggleRecording() onClicked: ScreenRecorderService.toggleRecording()

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

@ -33,7 +33,7 @@ NIconButton {
icon: useDistroLogo ? "" : "noctalia" icon: useDistroLogo ? "" : "noctalia"
tooltipText: "Open side panel." tooltipText: "Open side panel."
sizeRatio: 0.85 baseSize: Style.capsuleHeight
colorBg: Color.mSurfaceVariant colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface colorFg: Color.mOnSurface

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

@ -15,7 +15,7 @@ Rectangle {
property ShellScreen screen property ShellScreen screen
property real scaling: 1.0 property real scaling: 1.0
readonly property real itemSize: Style.baseWidgetSize * 0.8 * scaling readonly property real itemSize: Style.capsuleHeight * 0.8 * scaling
// Always visible when there are toplevels // Always visible when there are toplevels
implicitWidth: taskbarLayout.implicitWidth + Style.marginM * scaling * 2 implicitWidth: taskbarLayout.implicitWidth + Style.marginM * scaling * 2

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

@ -13,8 +13,7 @@ NIconButton {
property ShellScreen screen property ShellScreen screen
property real scaling: 1.0 property real scaling: 1.0
sizeRatio: 0.8 baseSize: Style.capsuleHeight
colorBg: Color.mSurfaceVariant colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface colorFg: Color.mOnSurface
colorBorder: Color.transparent colorBorder: Color.transparent

4
Modules/BluetoothPanel/BluetoothPanel.qml
View file

@ -53,7 +53,7 @@ NPanel {
enabled: Settings.data.network.bluetoothEnabled enabled: Settings.data.network.bluetoothEnabled
icon: BluetoothService.adapter && BluetoothService.adapter.discovering ? "stop" : "refresh" icon: BluetoothService.adapter && BluetoothService.adapter.discovering ? "stop" : "refresh"
tooltipText: "Refresh Devices" tooltipText: "Refresh Devices"
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: { onClicked: {
if (BluetoothService.adapter) { if (BluetoothService.adapter) {
BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering
@ -64,7 +64,7 @@ NPanel {
NIconButton { NIconButton {
icon: "close" icon: "close"
tooltipText: "Close." tooltipText: "Close."
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: { onClicked: {
root.close() root.close()
} }

2
Modules/Notification/Notification.qml
View file

@ -326,7 +326,7 @@ Variants {
NIconButton { NIconButton {
icon: "close" icon: "close"
tooltipText: "Close." tooltipText: "Close."
sizeRatio: 0.6 baseSize: Style.baseWidgetSize * 0.6
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Style.marginM * scaling anchors.topMargin: Style.marginM * scaling
anchors.right: parent.right anchors.right: parent.right

12
Modules/Notification/NotificationHistoryPanel.qml
View file

@ -48,15 +48,15 @@ NPanel {
NIconButton { NIconButton {
icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell" icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
tooltipText: Settings.data.notifications.doNotDisturb ? "'Do Not Disturb' is enabled." : "'Do Not Disturb' is disabled." tooltipText: Settings.data.notifications.doNotDisturb ? "'Do Not Disturb' is enabled." : "'Do Not Disturb' is disabled."
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb onClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
onRightClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb onRightClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
} }
NIconButton { NIconButton {
icon: "trash" icon: "trash"
tooltipText: "Clear history" tooltipText: "Clear history."
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: { onClicked: {
NotificationService.clearHistory() NotificationService.clearHistory()
root.close() root.close()
@ -66,7 +66,7 @@ NPanel {
NIconButton { NIconButton {
icon: "close" icon: "close"
tooltipText: "Close." tooltipText: "Close."
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: { onClicked: {
root.close() root.close()
} }
@ -198,8 +198,8 @@ NPanel {
// Delete button // Delete button
NIconButton { NIconButton {
icon: "trash" icon: "trash"
tooltipText: "Delete notification" tooltipText: "Delete notification."
sizeRatio: 0.7 baseSize: Style.baseWidgetSize * 0.7
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
onClicked: { onClicked: {

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

@ -14,6 +14,9 @@ NBox {
property var widgetModel: [] property var widgetModel: []
property var availableWidgets: [] property var availableWidgets: []
readonly property real miniButtonSize: Style.baseWidgetSize * 0.65
signal addWidget(string widgetId, string section) signal addWidget(string widgetId, string section)
signal removeWidget(string section, int index) signal removeWidget(string section, int index)
signal reorderWidget(string section, int fromIndex, int toIndex) signal reorderWidget(string section, int fromIndex, int toIndex)
@ -178,7 +181,7 @@ NBox {
active: BarWidgetRegistry.widgetHasUserSettings(modelData.id) active: BarWidgetRegistry.widgetHasUserSettings(modelData.id)
sourceComponent: NIconButton { sourceComponent: NIconButton {
icon: "settings" icon: "settings"
sizeRatio: 0.6 baseSize: miniButtonSize
colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight) colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight)
colorBg: Color.mOnSurface colorBg: Color.mOnSurface
colorFg: Color.mOnPrimary colorFg: Color.mOnPrimary
@ -218,7 +221,7 @@ NBox {
NIconButton { NIconButton {
icon: "close" icon: "close"
sizeRatio: 0.6 baseSize: miniButtonSize
colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight) colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight)
colorBg: Color.mOnSurface colorBg: Color.mOnSurface
colorFg: Color.mOnPrimary colorFg: Color.mOnPrimary

2
Modules/SettingsPanel/Tabs/AudioTab.qml
View file

@ -298,7 +298,7 @@ ColumnLayout {
NIconButton { NIconButton {
icon: "close" icon: "close"
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: Style.marginXS * scaling Layout.rightMargin: Style.marginXS * scaling
onClicked: { onClicked: {

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

@ -177,8 +177,8 @@ ColumnLayout {
model: Quickshell.screens || [] model: Quickshell.screens || []
delegate: NCheckbox { delegate: NCheckbox {
Layout.fillWidth: true Layout.fillWidth: true
label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}` label: modelData.name || "Unknown"
description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1 checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => { onToggled: checked => {
if (checked) { if (checked) {

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

@ -87,19 +87,9 @@ ColumnLayout {
anchors.margins: Style.marginL * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginXXS * scaling spacing: Style.marginXXS * scaling
NText { NLabel {
text: (`${modelData.name}: ${modelData.model}` || "Unknown") label: modelData.name|| "Unknown"
font.pointSize: Style.fontSizeL * scaling description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
font.weight: Style.fontWeightBold
color: Color.mPrimary
}
NText {
text: `Resolution: ${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})`
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap
Layout.fillWidth: true
} }
// Scale // Scale
@ -134,8 +124,8 @@ ColumnLayout {
NIconButton { NIconButton {
icon: "refresh" icon: "refresh"
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.9
tooltipText: "Reset scaling" tooltipText: "Reset scaling."
onClicked: ScalingService.setScreenScale(modelData, 1.0) onClicked: ScalingService.setScreenScale(modelData, 1.0)
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

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

@ -100,8 +100,8 @@ ColumnLayout {
model: Quickshell.screens || [] model: Quickshell.screens || []
delegate: NCheckbox { delegate: NCheckbox {
Layout.fillWidth: true Layout.fillWidth: true
label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}` label: modelData.name || "Unknown"
description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1 checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => { onToggled: checked => {
if (checked) { if (checked) {

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

@ -60,8 +60,8 @@ ColumnLayout {
model: Quickshell.screens || [] model: Quickshell.screens || []
delegate: NCheckbox { delegate: NCheckbox {
Layout.fillWidth: true Layout.fillWidth: true
label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}` label: modelData.name || "Unknown"
description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]`
checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1 checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => { onToggled: checked => {
if (checked) { if (checked) {

2
Modules/Toast/SimpleToast.qml
View file

@ -136,7 +136,7 @@ Rectangle {
colorBorder: Color.transparent colorBorder: Color.transparent
colorBorderHover: Color.mOutline colorBorderHover: Color.mOutline
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
onClicked: root.hide() onClicked: root.hide()

12
Modules/WiFiPanel/WiFiPanel.qml
View file

@ -57,7 +57,7 @@ NPanel {
NIconButton { NIconButton {
icon: "refresh" icon: "refresh"
tooltipText: "Refresh" tooltipText: "Refresh"
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
enabled: Settings.data.network.wifiEnabled && !NetworkService.scanning enabled: Settings.data.network.wifiEnabled && !NetworkService.scanning
onClicked: NetworkService.scan() onClicked: NetworkService.scan()
} }
@ -65,7 +65,7 @@ NPanel {
NIconButton { NIconButton {
icon: "close" icon: "close"
tooltipText: "Close." tooltipText: "Close."
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: root.close() onClicked: root.close()
} }
} }
@ -106,7 +106,7 @@ NPanel {
NIconButton { NIconButton {
icon: "close" icon: "close"
sizeRatio: 0.6 baseSize: Style.baseWidgetSize * 0.6
onClicked: NetworkService.lastError = "" onClicked: NetworkService.lastError = ""
} }
} }
@ -368,7 +368,7 @@ NPanel {
visible: (modelData.existing || modelData.cached) && !modelData.connected && NetworkService.connectingTo !== modelData.ssid && NetworkService.forgettingNetwork !== modelData.ssid && NetworkService.disconnectingFrom !== modelData.ssid visible: (modelData.existing || modelData.cached) && !modelData.connected && NetworkService.connectingTo !== modelData.ssid && NetworkService.forgettingNetwork !== modelData.ssid && NetworkService.disconnectingFrom !== modelData.ssid
icon: "trash" icon: "trash"
tooltipText: "Forget network" tooltipText: "Forget network"
sizeRatio: 0.7 baseSize: Style.baseWidgetSize * 0.8
onClicked: expandedSsid = expandedSsid === modelData.ssid ? "" : modelData.ssid onClicked: expandedSsid = expandedSsid === modelData.ssid ? "" : modelData.ssid
} }
@ -478,7 +478,7 @@ NPanel {
NIconButton { NIconButton {
icon: "close" icon: "close"
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: { onClicked: {
passwordSsid = "" passwordSsid = ""
passwordInput = "" passwordInput = ""
@ -532,7 +532,7 @@ NPanel {
NIconButton { NIconButton {
icon: "close" icon: "close"
sizeRatio: 0.8 baseSize: Style.baseWidgetSize * 0.8
onClicked: expandedSsid = "" onClicked: expandedSsid = ""
} }
} }

9
Widgets/NIconButton.qml
View file

@ -7,8 +7,7 @@ import qs.Services
Rectangle { Rectangle {
id: root id: root
// Multiplier to control how large the button container is relative to Style.baseWidgetSize property real baseSize: Style.baseWidgetSize
property real sizeRatio: 1.0
property string icon property string icon
property string tooltipText property string tooltipText
@ -29,8 +28,8 @@ Rectangle {
signal rightClicked signal rightClicked
signal middleClicked signal middleClicked
implicitWidth: Math.round(Style.baseWidgetSize * scaling * sizeRatio) implicitWidth: Math.round(baseSize * scaling)
implicitHeight: Math.round(Style.baseWidgetSize * scaling * sizeRatio) implicitHeight: Math.round(baseSize * scaling)
opacity: root.enabled ? Style.opacityFull : Style.opacityMedium opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
color: root.enabled && root.hovering ? colorBgHover : colorBg color: root.enabled && root.hovering ? colorBgHover : colorBg
@ -47,7 +46,7 @@ Rectangle {
NIcon { NIcon {
icon: root.icon icon: root.icon
font.pointSize: Math.max(1, root.width * 0.47) font.pointSize: Math.max(1, root.width * 0.48)
color: root.enabled && root.hovering ? colorFgHover : colorFg color: root.enabled && root.hovering ? colorFgHover : colorFg
// Center horizontally // Center horizontally
x: (root.width - width) / 2 x: (root.width - width) / 2

3
Widgets/NPill.qml
View file

@ -10,7 +10,6 @@ Item {
property string text: "" property string text: ""
property string suffix: "" property string suffix: ""
property string tooltipText: "" property string tooltipText: ""
property real sizeRatio: 0.8
property bool autoHide: false property bool autoHide: false
property bool forceOpen: false property bool forceOpen: false
property bool forceClose: false property bool forceClose: false
@ -46,7 +45,6 @@ Item {
text: root.text text: root.text
suffix: root.suffix suffix: root.suffix
tooltipText: root.tooltipText tooltipText: root.tooltipText
sizeRatio: root.sizeRatio
autoHide: root.autoHide autoHide: root.autoHide
forceOpen: root.forceOpen forceOpen: root.forceOpen
forceClose: root.forceClose forceClose: root.forceClose
@ -71,7 +69,6 @@ Item {
text: root.text text: root.text
suffix: root.suffix suffix: root.suffix
tooltipText: root.tooltipText tooltipText: root.tooltipText
sizeRatio: root.sizeRatio
autoHide: root.autoHide autoHide: root.autoHide
forceOpen: root.forceOpen forceOpen: root.forceOpen
forceClose: root.forceClose forceClose: root.forceClose

27
Widgets/NPillHorizontal.qml
View file

@ -10,7 +10,6 @@ Item {
property string text: "" property string text: ""
property string suffix: "" property string suffix: ""
property string tooltipText: "" property string tooltipText: ""
property real sizeRatio: 0.8
property bool autoHide: false property bool autoHide: false
property bool forceOpen: false property bool forceOpen: false
property bool forceClose: false property bool forceClose: false
@ -34,19 +33,17 @@ Item {
property bool showPill: false property bool showPill: false
property bool shouldAnimateHide: false property bool shouldAnimateHide: false
// Exposed width logic readonly property int pillHeight: Math.round(Style.capsuleHeight * scaling)
readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling) readonly property int pillPaddingHorizontal: Math.round(Style.capsuleHeight * 0.2 * scaling)
readonly property int pillHeight: iconSize readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5 * scaling)
readonly property int pillPaddingHorizontal: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
readonly property int pillOverlap: iconSize * 0.5
readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
width: iconSize + Math.max(0, pill.width - pillOverlap) width: pillHeight + Math.max(0, pill.width - pillOverlap)
height: pillHeight height: pillHeight
Rectangle { Rectangle {
id: pill id: pill
width: revealed ? maxPillWidth : 1 width: revealed ? pillMaxWidth : 1
height: pillHeight height: pillHeight
x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right
@ -76,7 +73,7 @@ Item {
} }
text: root.text + root.suffix text: root.text + root.suffix
font.family: Settings.data.ui.fontFixed font.family: Settings.data.ui.fontFixed
font.pointSize: Style.fontSizeXS * scaling font.pointSize: Math.max(1, root.pillHeight * 0.33)
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: forceOpen ? Color.mOnSurface : Color.mPrimary color: forceOpen ? Color.mOnSurface : Color.mPrimary
visible: revealed visible: revealed
@ -100,8 +97,8 @@ Item {
Rectangle { Rectangle {
id: iconCircle id: iconCircle
width: iconSize width: pillHeight
height: iconSize height: pillHeight
radius: width * 0.5 radius: width * 0.5
color: hovered ? Color.mTertiary : Color.mSurfaceVariant color: hovered ? Color.mTertiary : Color.mSurfaceVariant
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -117,7 +114,7 @@ Item {
NIcon { NIcon {
icon: root.icon icon: root.icon
font.pointSize: Style.fontSizeM * scaling font.pointSize: Math.max(1, pillHeight * 0.5)
color: hovered ? Color.mOnTertiary : Color.mOnSurface color: hovered ? Color.mOnTertiary : Color.mOnSurface
// Center horizontally // Center horizontally
x: (iconCircle.width - width) / 2 x: (iconCircle.width - width) / 2
@ -133,7 +130,7 @@ Item {
target: pill target: pill
property: "width" property: "width"
from: 1 from: 1
to: maxPillWidth to: pillMaxWidth
duration: Style.animationNormal duration: Style.animationNormal
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
@ -173,7 +170,7 @@ Item {
NumberAnimation { NumberAnimation {
target: pill target: pill
property: "width" property: "width"
from: maxPillWidth from: pillMaxWidth
to: 1 to: 1
duration: Style.animationNormal duration: Style.animationNormal
easing.type: Easing.InCubic easing.type: Easing.InCubic

3
Widgets/NPillVertical.qml
View file

@ -10,7 +10,6 @@ Item {
property string text: "" property string text: ""
property string suffix: "" property string suffix: ""
property string tooltipText: "" property string tooltipText: ""
property real sizeRatio: 0.8
property bool autoHide: false property bool autoHide: false
property bool forceOpen: false property bool forceOpen: false
property bool forceClose: false property bool forceClose: false
@ -43,7 +42,7 @@ Item {
property bool shouldAnimateHide: false property bool shouldAnimateHide: false
// Sizing logic for vertical bars // Sizing logic for vertical bars
readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling) readonly property int iconSize: Math.round(Style.capsuleHeight * scaling)
readonly property int pillHeight: iconSize readonly property int pillHeight: iconSize
readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin
readonly property int pillOverlap: iconSize * 0.5 readonly property int pillOverlap: iconSize * 0.5

2
Widgets/NWidgetLoader.qml
View file

@ -49,7 +49,7 @@ Item {
item.onLoaded() item.onLoaded()
} }
//Logger.log("NWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name) Logger.log("NWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name)
} }
} }