lainns-mirror/noctalia-shell
1
0
Fork 0
mirror of https://github.com/noctalia-dev/noctalia-shell.git synced 2026-05-11 17:08:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Bar: improved "mini" density look

Browse Source
This commit is contained in:
ItsLemmy
2025-10-13 20:16:18 -04:00
parent 4e11f4e2e6
commit 00509170ef
29 changed files with 95 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Bar/Extras/BarPill.qml
+3 -3
View File
@@ -12,13 +12,13 @@ Item {
property string text: ""
property string suffix: ""
property string tooltipText: ""
property string density: ""
property bool autoHide: false
property bool forceOpen: false
property bool forceClose: false
property bool disableOpen: false
property bool rightOpen: false
property bool hovered: false
property bool compact: false
readonly property string barPosition: Settings.data.bar.position
readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
@@ -54,7 +54,7 @@ Item {
disableOpen: root.disableOpen
rightOpen: root.rightOpen
hovered: root.hovered
compact: root.compact
density: root.density
onShown: root.shown()
onHidden: root.hidden()
onEntered: root.entered()
@@ -79,7 +79,7 @@ Item {
disableOpen: root.disableOpen
rightOpen: root.rightOpen
hovered: root.hovered
compact: root.compact
density: root.density
onShown: root.shown()
onHidden: root.hidden()
onEntered: root.entered()
Modules/Bar/Extras/BarPillHorizontal.qml
+25 -8
View File
@@ -14,13 +14,13 @@ Item {
property string text: ""
property string suffix: ""
property string tooltipText: ""
property string density: ""
property bool autoHide: false
property bool forceOpen: false
property bool forceClose: false
property bool disableOpen: false
property bool rightOpen: false
property bool hovered: false
property bool compact: false
// Effective shown state (true if hovered/animated open or forced)
readonly property bool revealed: !forceClose && (forceOpen || showPill)
@@ -41,10 +41,25 @@ Item {
readonly property int pillHeight: Style.capsuleHeight
readonly property int pillPaddingHorizontal: Math.round(Style.capsuleHeight * 0.2)
readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5)
readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
readonly property int pillMaxWidth: Math.max(1, Math.round(textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap))
readonly property real iconSize: Math.max(1, compact ? pillHeight * 0.65 : pillHeight * 0.48)
readonly property real textSize: Math.max(1, compact ? pillHeight * 0.45 : pillHeight * 0.33)
readonly property real iconSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.65))
default:
return Math.max(1, Math.round(pillHeight * 0.48))
}
}
readonly property real textSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.45))
default:
return Math.max(1, Math.round(pillHeight * 0.33))
}
}
width: pillHeight + Math.max(0, pill.width - pillOverlap)
height: pillHeight
@@ -68,10 +83,12 @@ Item {
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
topRightRadius: rightOpen ? pillHeight * 0.5 : 0
bottomRightRadius: rightOpen ? pillHeight * 0.5 : 0
readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
topLeftRadius: rightOpen ? 0 : halfPillHeight
bottomLeftRadius: rightOpen ? 0 : halfPillHeight
topRightRadius: rightOpen ? halfPillHeight : 0
bottomRightRadius: rightOpen ? halfPillHeight : 0
anchors.verticalCenter: parent.verticalCenter
NText {
Modules/Bar/Extras/BarPillVertical.qml
+27 -10
View File
@@ -12,13 +12,13 @@ Item {
property string text: ""
property string suffix: ""
property string tooltipText: ""
property string density: ""
property bool autoHide: false
property bool forceOpen: false
property bool forceClose: false
property bool disableOpen: false
property bool rightOpen: false
property bool hovered: false
property bool compact: false
// Bar position detection for pill direction
readonly property string barPosition: Settings.data.bar.position
@@ -48,12 +48,27 @@ Item {
readonly property int buttonSize: Style.capsuleHeight
readonly property int pillHeight: buttonSize
readonly property int pillPaddingVertical: 3 * 2 // Very precise adjustment don't replace by Style.margin
readonly property int pillOverlap: buttonSize * 0.5
readonly property int pillOverlap: Math.round(buttonSize * 0.5)
readonly property int maxPillWidth: buttonSize
readonly property int maxPillHeight: Math.max(1, textItem.implicitHeight + pillPaddingVertical * 4)
readonly property int maxPillHeight: Math.max(1, Math.round(textItem.implicitHeight + pillPaddingVertical * 4))
readonly property real iconSize: Math.max(1, compact ? pillHeight * 0.65 : pillHeight * 0.48)
readonly property real textSize: Math.max(1, compact ? pillHeight * 0.38 : pillHeight * 0.33)
readonly property real iconSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.65))
default:
return Math.max(1, Math.round(pillHeight * 0.48))
}
}
readonly property real textSize: {
switch (root.density) {
case "compact":
return Math.max(1, Math.round(pillHeight * 0.38))
default:
return Math.max(1, Math.round(pillHeight * 0.33))
}
}
// For vertical bars: width is just icon size, height includes pill space
width: buttonSize
@@ -79,11 +94,13 @@ Item {
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
// Radius logic for vertical expansion - rounded on the side that connects to icon
topLeftRadius: openUpward ? buttonSize * 0.5 : 0
bottomLeftRadius: openDownward ? buttonSize * 0.5 : 0
topRightRadius: openUpward ? buttonSize * 0.5 : 0
bottomRightRadius: openDownward ? buttonSize * 0.5 : 0
topLeftRadius: openUpward ? halfButtonSize : 0
bottomLeftRadius: openDownward ? halfButtonSize : 0
topRightRadius: openUpward ? halfButtonSize : 0
bottomRightRadius: openDownward ? halfButtonSize : 0
anchors.horizontalCenter: parent.horizontalCenter
@@ -92,7 +109,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: {
var offset = openDownward ? pillPaddingVertical * 0.75 : -pillPaddingVertical * 0.75
var offset = openDownward ? Math.round(pillPaddingVertical * 0.75) : -Math.round(pillPaddingVertical * 0.75)
if (forceOpen) {
// If its force open, the icon disc background is the same color as the bg pill move text slightly
offset += rightOpen ? -Style.marginXXS : Style.marginXXS
Modules/Bar/Widgets/Battery.qml
+1 -1
View File
@@ -86,7 +86,7 @@ Item {
BarPill {
id: pill
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
rightOpen: BarService.getPillDirection(root)
icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, charging, isReady)
text: (isReady || testMode) ? Math.round(percent) : "-"
Modules/Bar/Widgets/Bluetooth.qml
+1 -1
View File
@@ -14,7 +14,7 @@ NIconButton {
baseSize: Style.capsuleHeight
applyUiScale: false
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
colorBg: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
colorFg: Color.mOnSurface
colorBorder: Color.transparent
Modules/Bar/Widgets/Brightness.qml
+1 -1
View File
@@ -76,7 +76,7 @@ Item {
BarPill {
id: pill
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
rightOpen: BarService.getPillDirection(root)
icon: getIcon()
autoHide: false // Important to be false so we can hover as long as we want
Modules/Bar/Widgets/Clock.qml
+1 -1
View File
@@ -29,7 +29,7 @@ Rectangle {
readonly property string barPosition: Settings.data.bar.position
readonly property bool isBarVertical: barPosition === "left" || barPosition === "right"
readonly property bool compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
readonly property bool density: Settings.data.bar.density
readonly property var now: Time.date
Modules/Bar/Widgets/ControlCenter.qml
+1 -1
View File
@@ -38,7 +38,7 @@ NIconButton {
tooltipDirection: BarService.getTooltipDirection()
baseSize: Style.capsuleHeight
applyUiScale: false
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
colorFg: Color.mOnSurface
colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mTertiary
Modules/Bar/Widgets/CustomButton.qml
+1 -1
View File
@@ -48,7 +48,7 @@ Item {
rightOpen: BarService.getPillDirection(root)
icon: customIcon
text: _dynamicText
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
autoHide: false
forceOpen: _dynamicText !== ""
forceClose: false
Modules/Bar/Widgets/DarkMode.qml
+1 -1
View File
@@ -11,7 +11,7 @@ NIconButton {
icon: "dark-mode"
tooltipText: Settings.data.colorSchemes.darkMode ? I18n.tr("tooltips.switch-to-light-mode") : I18n.tr("tooltips.switch-to-dark-mode")
tooltipDirection: BarService.getTooltipDirection()
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
baseSize: Style.capsuleHeight
applyUiScale: false
colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent) : Color.mPrimary
Modules/Bar/Widgets/KeepAwake.qml
+1 -1
View File
@@ -12,7 +12,7 @@ NIconButton {
baseSize: Style.capsuleHeight
applyUiScale: false
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
tooltipText: IdleInhibitorService.isInhibited ? I18n.tr("tooltips.disable-keep-awake") : I18n.tr("tooltips.enable-keep-awake")
tooltipDirection: BarService.getTooltipDirection()
Modules/Bar/Widgets/KeyboardLayout.qml
+1 -1
View File
@@ -42,7 +42,7 @@ Item {
id: pill
anchors.verticalCenter: parent.verticalCenter
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
rightOpen: BarService.getPillDirection(root)
icon: "keyboard"
autoHide: false // Important to be false so we can hover as long as we want
Modules/Bar/Widgets/MediaMini.qml
+1 -1
View File
@@ -30,7 +30,7 @@ Item {
}
readonly property string barPosition: Settings.data.bar.position
readonly property bool compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
readonly property bool density: Settings.data.bar.density
readonly property string hideMode: (widgetSettings.hideMode !== undefined) ? widgetSettings.hideMode : "hidden" // "visible", "hidden", "transparent"
readonly property bool showAlbumArt: (widgetSettings.showAlbumArt !== undefined) ? widgetSettings.showAlbumArt : widgetMetadata.showAlbumArt
Modules/Bar/Widgets/Microphone.qml
+1 -1
View File
@@ -91,7 +91,7 @@ Item {
rightOpen: BarService.getPillDirection(root)
icon: getIcon()
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
autoHide: false // Important to be false so we can hover as long as we want
text: Math.round(AudioService.inputVolume * 100)
suffix: "%"
Modules/Bar/Widgets/NightLight.qml
+1 -1
View File
@@ -13,7 +13,7 @@ NIconButton {
property ShellScreen screen
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
baseSize: Style.capsuleHeight
applyUiScale: false
colorBg: Settings.data.nightLight.forced ? Color.mPrimary : (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
Modules/Bar/Widgets/NotificationHistory.qml
+1 -1
View File
@@ -50,7 +50,7 @@ NIconButton {
baseSize: Style.capsuleHeight
applyUiScale: false
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
tooltipText: Settings.data.notifications.doNotDisturb ? I18n.tr("tooltips.open-notification-history-disable-dnd") : I18n.tr("tooltips.open-notification-history-enable-dnd")
tooltipDirection: BarService.getTooltipDirection()
Modules/Bar/Widgets/PowerProfile.qml
+1 -1
View File
@@ -13,7 +13,7 @@ NIconButton {
baseSize: Style.capsuleHeight
applyUiScale: false
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
visible: PowerProfileService.available
icon: PowerProfileService.getIcon()
tooltipText: I18n.tr("tooltips.power-profile", {
Modules/Bar/Widgets/ScreenRecorder.qml
+1 -1
View File
@@ -12,7 +12,7 @@ NIconButton {
icon: "camera-video"
tooltipText: ScreenRecorderService.isRecording ? I18n.tr("tooltips.click-to-stop-recording") : I18n.tr("tooltips.click-to-start-recording")
tooltipDirection: BarService.getTooltipDirection()
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
baseSize: Style.capsuleHeight
applyUiScale: false
colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
Modules/Bar/Widgets/SessionMenu.qml
+1 -1
View File
@@ -10,7 +10,7 @@ NIconButton {
property ShellScreen screen
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
baseSize: Style.capsuleHeight
applyUiScale: false
icon: "power"
Modules/Bar/Widgets/SystemMonitor.qml
+2 -2
View File
@@ -29,7 +29,7 @@ Rectangle {
readonly property string barPosition: Settings.data.bar.position
readonly property bool isVertical: barPosition === "left" || barPosition === "right"
readonly property bool compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
readonly property bool density: Settings.data.bar.density
readonly property bool showCpuUsage: (widgetSettings.showCpuUsage !== undefined) ? widgetSettings.showCpuUsage : widgetMetadata.showCpuUsage
readonly property bool showCpuTemp: (widgetSettings.showCpuTemp !== undefined) ? widgetSettings.showCpuTemp : widgetMetadata.showCpuTemp
@@ -41,7 +41,7 @@ Rectangle {
readonly property real iconSize: textSize * 1.4
readonly property real textSize: {
var base = isVertical ? width * 0.82 : height
return Math.max(1, compact ? base * 0.43 : base * 0.33)
return Math.max(1, (density === "compact") ? base * 0.43 : base * 0.33)
}
readonly property int percentTextWidth: Math.ceil(percentMetrics.boundingRect.width + 3)
Modules/Bar/Widgets/Taskbar.qml
+4 -4
View File
@@ -20,8 +20,8 @@ Rectangle {
property int sectionWidgetsCount: 0
readonly property bool isVerticalBar: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
readonly property bool compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
readonly property real itemSize: compact ? Style.capsuleHeight * 0.9 : Style.capsuleHeight * 0.8
readonly property bool density: Settings.data.bar.density
readonly property real itemSize: (density === "compact") ? Style.capsuleHeight * 0.9 : Style.capsuleHeight * 0.8
property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
property var widgetSettings: {
@@ -46,8 +46,8 @@ Rectangle {
anchors {
leftMargin: isVerticalBar ? undefined : Style.marginM
rightMargin: isVerticalBar ? undefined : Style.marginM
topMargin: compact ? 0 : isVerticalBar ? Style.marginM : undefined
bottomMargin: compact ? 0 : isVerticalBar ? Style.marginM : undefined
topMargin: (density === "compact") ? 0 : isVerticalBar ? Style.marginM : undefined
bottomMargin: (density === "compact") ? 0 : isVerticalBar ? Style.marginM : undefined
}
// Configure GridLayout to behave like RowLayout or ColumnLayout
Modules/Bar/Widgets/Tray.qml
+1 -1
View File
@@ -34,7 +34,7 @@ Rectangle {
readonly property string barPosition: Settings.data.bar.position
readonly property bool isVertical: barPosition === "left" || barPosition === "right"
readonly property bool compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
readonly property bool density: Settings.data.bar.density
property real itemSize: Math.round(Style.capsuleHeight * 0.65)
property list<string> blacklist: widgetSettings.blacklist || widgetMetadata.blacklist || [] // Read from settings
property var filteredItems: []
Modules/Bar/Widgets/Volume.qml
+1 -1
View File
@@ -74,7 +74,7 @@ Item {
BarPill {
id: pill
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
rightOpen: BarService.getPillDirection(root)
icon: getIcon()
autoHide: false // Important to be false so we can hover as long as we want
Modules/Bar/Widgets/WallpaperSelector.qml
+1 -1
View File
@@ -12,7 +12,7 @@ NIconButton {
baseSize: Style.capsuleHeight
applyUiScale: false
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
icon: "wallpaper-selector"
tooltipText: I18n.tr("tooltips.open-wallpaper-selector")
tooltipDirection: BarService.getTooltipDirection()
Modules/Bar/Widgets/WiFi.qml
+1 -1
View File
@@ -12,7 +12,7 @@ NIconButton {
property ShellScreen screen
compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
density: Settings.data.bar.density
baseSize: Style.capsuleHeight
applyUiScale: false
colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
Modules/Bar/Widgets/Workspace.qml
+2 -2
View File
@@ -33,9 +33,9 @@ Item {
readonly property string barPosition: Settings.data.bar.position
readonly property bool isVertical: barPosition === "left" || barPosition === "right"
readonly property bool compact: (Settings.data.bar.density === "compact") || (Settings.data.bar.density === "mini")
readonly property bool density: Settings.data.bar.density
readonly property real baseDimensionRatio: {
const b = compact ? 0.85 : 0.65
const b = (density === "compact") ? 0.85 : 0.65
if (widgetSettings.labelMode === "none") {
return b * 0.75
}
Widgets/NCheckbox.qml
+1 -1
View File
@@ -6,7 +6,7 @@ import qs.Commons
RowLayout {
id: root
// Public API (mirrors NToggle but compact)
// Public API
property string label: ""
property string description: ""
property bool checked: false
Widgets/NIconButton.qml
+9 -2
View File
@@ -13,10 +13,10 @@ Rectangle {
property string icon
property string tooltipText
property string tooltipDirection: "auto"
property string density: ""
property bool enabled: true
property bool allowClickWhenDisabled: false
property bool hovering: false
property bool compact: false
property color colorBg: Color.mSurfaceVariant
property color colorFg: Color.mPrimary
@@ -49,7 +49,14 @@ Rectangle {
NIcon {
icon: root.icon
pointSize: Math.max(1, root.compact ? root.width * 0.65 : root.width * 0.48)
pointSize: {
switch (root.density) {
case "compact":
return Math.max(1, root.width * 0.65)
default:
return Math.max(1, root.width * 0.48)
}
}
applyUiScale: root.applyUiScale
color: root.enabled && root.hovering ? colorFgHover : colorFg
// Center horizontally
Widgets/NIconButtonHot.qml
+2 -2
View File
@@ -14,9 +14,9 @@ Rectangle {
property string icon: ""
property string tooltipText: ""
property string tooltipDirection: "auto"
property string density: ""
property bool enabled: true
property bool allowClickWhenDisabled: false
property bool compact: false
property bool hot: false
// Internal properties
@@ -81,7 +81,7 @@ Rectangle {
// Icon
NIcon {
icon: root.icon
pointSize: Math.max(1, root.compact ? root.width * 0.65 : root.width * 0.48)
pointSize: Math.max(1, Math.round(root.width * 0.48))
applyUiScale: root.applyUiScale
color: {
if (pressed) {