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

17
Modules/Bar/Bar.qml
View file

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

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

@ -38,7 +38,7 @@ Item {
readonly property string barPosition: Settings.data.bar.position
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() {
try {
@ -60,7 +60,7 @@ Item {
let total = Style.marginM * 2 * scaling // internal padding
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
@ -129,11 +129,13 @@ Item {
Rectangle {
id: windowTitleRect
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.horizontalCenter: parent.horizontalCenter
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)
radius: Math.round(Style.radiusM * scaling)
radius: width / 2
color: Color.mSurfaceVariant
Item {
@ -152,8 +154,8 @@ Item {
// Window icon
Item {
Layout.preferredWidth: Style.baseWidgetSize * 0.5 * scaling
Layout.preferredHeight: Style.baseWidgetSize * 0.5 * scaling
Layout.preferredWidth: Style.capsuleHeight * 0.75 * scaling
Layout.preferredHeight: Style.capsuleHeight * 0.75 * scaling
Layout.alignment: Qt.AlignVCenter
visible: getTitle() !== "" && showIcon
@ -217,11 +219,10 @@ Item {
// Window icon
Item {
width: Style.baseWidgetSize * 0.5 * scaling
height: Style.baseWidgetSize * 0.5 * scaling
width: Style.capsuleHeight * 0.75 * scaling
height: Style.capsuleHeight * 0.75 * scaling
anchors.centerIn: parent
visible: getTitle() !== "" && showIcon
IconImage {
id: windowIconVertical
anchors.fill: parent

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

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

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

@ -39,7 +39,7 @@ Rectangle {
readonly property bool verticalMode: barPosition === "left" || barPosition === "right"
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)
color: Color.mSurfaceVariant

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

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

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

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

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

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

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

@ -49,7 +49,7 @@ NIconButton {
return count
}
sizeRatio: 0.8
baseSize: Style.capsuleHeight
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'."
colorBg: Color.mSurfaceVariant

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

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

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

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

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

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

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

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

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

@ -15,7 +15,7 @@ Rectangle {
property ShellScreen screen
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
implicitWidth: taskbarLayout.implicitWidth + Style.marginM * scaling * 2

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

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