Bar UI improvements

- better rounding at low scaling, for accurate vertical centering
- use fixed font bar system monitor
- use bold for workspaces name
This commit is contained in:
LemmyCook 2025-08-27 14:46:19 -04:00
parent d6df496216
commit c6cf5a0fab
5 changed files with 11 additions and 12 deletions

View file

@ -26,7 +26,7 @@ Variants {
WlrLayershell.namespace: "noctalia-bar" WlrLayershell.namespace: "noctalia-bar"
implicitHeight: Style.barHeight * scaling implicitHeight: Math.round(Style.barHeight * scaling)
color: Color.transparent color: Color.transparent
anchors { anchors {

View file

@ -88,7 +88,8 @@ Row {
// Fix collapsed width to 120px to avoid layout shifts with neighbors // Fix collapsed width to 120px to avoid layout shifts with neighbors
// Expand up to 400px on hover // Expand up to 400px on hover
width: mouseArea.containsMouse ? Math.min(Math.max(minWidth * scaling, fullTitleMetrics.contentWidth), 400 * scaling) : minWidth * scaling width: mouseArea.containsMouse ? Math.min(Math.max(minWidth * scaling, fullTitleMetrics.contentWidth),
400 * scaling) : minWidth * scaling
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: getTitle() text: getTitle()
font.pointSize: Style.fontSizeS * scaling font.pointSize: Style.fontSizeS * scaling

View file

@ -113,20 +113,14 @@ Row {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: Settings.data.audio.showMiniplayerAlbumArt visible: Settings.data.audio.showMiniplayerAlbumArt
Rectangle { Item {
width: 18 * scaling width: Math.round(18 * scaling)
height: 18 * scaling height: Math.round(18 * scaling)
radius: width * 0.5
color: Color.transparent
antialiasing: true
clip: true
NImageCircled { NImageCircled {
id: trackArt id: trackArt
visible: MediaService.trackArtUrl.toString() !== "" visible: MediaService.trackArtUrl.toString() !== ""
anchors.fill: parent anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
anchors.margins: scaling
imagePath: MediaService.trackArtUrl imagePath: MediaService.trackArtUrl
fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow" fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow"
borderWidth: 0 borderWidth: 0

View file

@ -46,6 +46,7 @@ Row {
NText { NText {
id: cpuUsageText id: cpuUsageText
text: `${SystemStatService.cpuUsage}%` text: `${SystemStatService.cpuUsage}%`
font.family: Settings.data.ui.fontFixed
font.pointSize: Style.fontSizeS * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -67,6 +68,7 @@ Row {
NText { NText {
text: `${SystemStatService.cpuTemp}°C` text: `${SystemStatService.cpuTemp}°C`
font.family: Settings.data.ui.fontFixed
font.pointSize: Style.fontSizeS * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -87,6 +89,7 @@ Row {
NText { NText {
text: `${SystemStatService.memoryUsageGb}G` text: `${SystemStatService.memoryUsageGb}G`
font.family: Settings.data.ui.fontFixed
font.pointSize: Style.fontSizeS * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

View file

@ -152,7 +152,7 @@ Item {
model: localWorkspaces model: localWorkspaces
Item { Item {
id: workspacePillContainer id: workspacePillContainer
height: (Settings.data.bar.showWorkspaceLabel !== "none") ? 18 * scaling : 14 * scaling height: (Settings.data.bar.showWorkspaceLabel !== "none") ? Math.round(18 * scaling) : Math.round(14 * scaling)
width: root.calculatedWsWidth(model) width: root.calculatedWsWidth(model)
Rectangle { Rectangle {
@ -177,6 +177,7 @@ Item {
font.pointSize: model.isFocused ? Style.fontSizeXS * scaling : Style.fontSizeXXS * scaling font.pointSize: model.isFocused ? Style.fontSizeXS * scaling : Style.fontSizeXXS * scaling
font.capitalization: Font.AllUppercase font.capitalization: Font.AllUppercase
font.family: Settings.data.ui.fontFixed font.family: Settings.data.ui.fontFixed
font.weight: Style.fontWeightBold
wrapMode: Text.Wrap wrapMode: Text.Wrap
color: { color: {
if (model.isFocused) if (model.isFocused)