1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-24 13:32:50 -05:00

scalable topbar

This commit is contained in:
bbedward
2025-08-23 15:15:07 -04:00
parent 9d7b617cd6
commit 3f6d330f5f
21 changed files with 162 additions and 110 deletions

View File

@@ -84,6 +84,7 @@ Singleton {
property bool notificationOverlayEnabled: false
property bool topBarAutoHide: false
property real topBarSpacing: 4
property real topBarInnerPadding: 8
property bool topBarSquareCorners: false
property int notificationTimeoutLow: 5000
property int notificationTimeoutNormal: 5000
@@ -273,6 +274,7 @@ Singleton {
notificationTimeoutCritical = settings.notificationTimeoutCritical
!== undefined ? settings.notificationTimeoutCritical : 0
topBarSpacing = settings.topBarSpacing !== undefined ? settings.topBarSpacing : 4
topBarInnerPadding = settings.topBarInnerPadding !== undefined ? settings.topBarInnerPadding : 8
topBarSquareCorners = settings.topBarSquareCorners
!== undefined ? settings.topBarSquareCorners : false
applyStoredTheme()
@@ -355,6 +357,7 @@ Singleton {
"notificationOverlayEnabled": notificationOverlayEnabled,
"topBarAutoHide": topBarAutoHide,
"topBarSpacing": topBarSpacing,
"topBarInnerPadding": topBarInnerPadding,
"topBarSquareCorners": topBarSquareCorners,
"notificationTimeoutLow": notificationTimeoutLow,
"notificationTimeoutNormal": notificationTimeoutNormal,
@@ -875,6 +878,11 @@ Singleton {
saveSettings()
}
function setTopBarInnerPadding(padding) {
topBarInnerPadding = padding
saveSettings()
}
function setTopBarSquareCorners(enabled) {
topBarSquareCorners = enabled
saveSettings()

View File

@@ -896,71 +896,6 @@ Item {
}
}
// Corner Radius
StyledRect {
width: parent.width
height: cornerRadiusSection.implicitHeight + Theme.spacingL * 2
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
Theme.surfaceVariant.b, 0.3)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
Theme.outline.b, 0.2)
border.width: 1
Column {
id: cornerRadiusSection
anchors.fill: parent
anchors.margins: Theme.spacingL
spacing: Theme.spacingM
Row {
width: parent.width
spacing: Theme.spacingM
DankIcon {
name: "rounded_corner"
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: "Corner Radius"
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
}
}
Column {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: "Bar & Widget Corner Roundness"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
}
DankSlider {
width: parent.width
height: 24
value: SettingsData.cornerRadius
minimum: 0
maximum: 32
unit: ""
showValue: true
onSliderValueChanged: newValue => {
SettingsData.setCornerRadius(
newValue)
}
}
}
}
}
}
}

View File

@@ -618,10 +618,62 @@ Item {
}
}
Column {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: "Vertical Padding (0 = minimal height)"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
}
DankSlider {
width: parent.width
height: 24
value: SettingsData.topBarInnerPadding
minimum: 0
maximum: 24
unit: ""
showValue: true
onSliderValueChanged: newValue => {
SettingsData.setTopBarInnerPadding(
newValue)
}
}
}
Column {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: "Corner Radius (0 = square corners)"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
}
DankSlider {
width: parent.width
height: 24
value: SettingsData.cornerRadius
minimum: 0
maximum: 32
unit: ""
showValue: true
onSliderValueChanged: newValue => {
SettingsData.setCornerRadius(
newValue)
}
}
}
DankToggle {
width: parent.width
text: "Square Corners"
description: "Disable corner radius for the top bar (always square corners)"
description: "Removes rounded corners from bar container."
checked: SettingsData.topBarSquareCorners
onToggled: checked => {
SettingsData.setTopBarSquareCorners(

View File

@@ -11,11 +11,13 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real widgetHeight: 30
property real barHeight: 48
signal toggleBatteryPopup
width: BatteryService.batteryAvailable ? 70 : 40
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = batteryArea.containsMouse
@@ -132,7 +134,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
toggleBatteryPopup()

View File

@@ -11,11 +11,13 @@ Rectangle {
property string section: "center"
property var popupTarget: null
property var parentScreen: null
property real barHeight: 48
property real widgetHeight: 30
signal clockClicked
width: clockRow.implicitWidth + Theme.spacingS * 2
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
@@ -79,7 +81,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
root.clockClicked()

View File

@@ -15,12 +15,14 @@ Rectangle {
property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
property real widgetHeight: 30
property real barHeight: 48
signal clicked
signal iconClicked(string tab)
width: controlIndicators.implicitWidth + Theme.spacingS * 2
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = controlCenterArea.containsMouse
@@ -143,7 +145,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}

View File

@@ -13,9 +13,11 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real barHeight: 48
property real widgetHeight: 30
width: 55
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = cpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -42,7 +44,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
DgopService.setSortBy("cpu")

View File

@@ -13,9 +13,11 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real barHeight: 48
property real widgetHeight: 30
width: 55
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = cpuTempArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -42,7 +44,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
DgopService.setSortBy("cpu")

View File

@@ -10,6 +10,7 @@ Rectangle {
property bool compactMode: SettingsData.focusedWindowCompactMode
property int availableWidth: 400
property real widgetHeight: 30
readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
readonly property int maxNormalWidth: 456
readonly property int maxCompactWidth: 288
@@ -18,7 +19,7 @@ Rectangle {
width: compactMode ? Math.min(baseWidth,
maxCompactWidth) : Math.min(baseWidth,
maxNormalWidth)
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
if (!activeWindow || !activeWindow.title)

View File

@@ -14,6 +14,8 @@ Rectangle {
property var popupTarget: null
property var parentScreen: null
property var widgetData: null
property real barHeight: 48
property real widgetHeight: 30
property int selectedGpuIndex: (widgetData && widgetData.selectedGpuIndex
!== undefined) ? widgetData.selectedGpuIndex : 0
@@ -29,7 +31,7 @@ Rectangle {
}
width: 55
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = gpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -84,7 +86,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
DgopService.setSortBy("cpu")

View File

@@ -11,9 +11,10 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real widgetHeight: 30
width: 40
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : (SessionService.idleInhibited ? Theme.primaryHover : Theme.secondaryHover)

View File

@@ -10,11 +10,13 @@ Item {
property string section: "left"
property var popupTarget: null
property var parentScreen: null
property real widgetHeight: 30
property real barHeight: 48
signal clicked
width: 40
height: 30
height: widgetHeight
MouseArea {
id: launcherArea
@@ -30,7 +32,7 @@ Item {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
root.clicked()

View File

@@ -29,10 +29,12 @@ Rectangle {
property string section: "center"
property var popupTarget: null
property var parentScreen: null
property real barHeight: 48
property real widgetHeight: 30
signal clicked
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = Theme.surfaceTextHover
@@ -210,7 +212,7 @@ Rectangle {
var relativeX = globalPos.x - screenX
root.popupTarget.setTriggerPosition(
relativeX,
Theme.barHeight + Theme.spacingXS,
barHeight + Theme.spacingXS,
root.width, root.section, currentScreen)
}
root.clicked()

View File

@@ -10,11 +10,13 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real widgetHeight: 30
property real barHeight: 48
signal clicked
width: 40
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = notificationArea.containsMouse
@@ -56,7 +58,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
root.clicked()

View File

@@ -10,13 +10,14 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real widgetHeight: 30
readonly property bool hasActivePrivacy: PrivacyService.anyPrivacyActive
readonly property int activeCount: PrivacyService.microphoneActive + PrivacyService.cameraActive
+ PrivacyService.screensharingActive
width: hasActivePrivacy ? (activeCount > 1 ? 80 : 60) : 0
height: hasActivePrivacy ? 30 : 0
height: hasActivePrivacy ? widgetHeight : 0
radius: Theme.cornerRadius
visible: hasActivePrivacy
opacity: hasActivePrivacy ? 1 : 0

View File

@@ -13,9 +13,11 @@ Rectangle {
property string section: "right"
property var popupTarget: null
property var parentScreen: null
property real barHeight: 48
property real widgetHeight: 30
width: 55
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = ramArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
@@ -42,7 +44,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
DgopService.setSortBy("memory")

View File

@@ -14,6 +14,7 @@ Rectangle {
property var parentScreen
property var hoveredItem: null
property var topBar: null
property real widgetHeight: 30
// The visual root for this window
property Item windowRoot: (Window.window ? Window.window.contentItem : null)
readonly property var sortedToplevels: CompositorService.sortedToplevels
@@ -30,7 +31,7 @@ Rectangle {
}
width: calculatedWidth
height: 30
height: widgetHeight
radius: Theme.cornerRadius
visible: windowCount > 0
clip: false

View File

@@ -9,13 +9,14 @@ Rectangle {
property var parentWindow: null
property var parentScreen: null
property real widgetHeight: 30
readonly property int calculatedWidth: SystemTray.items.values.length
> 0 ? SystemTray.items.values.length
* 24 + Theme.spacingS * 2 : 0
width: calculatedWidth
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
if (SystemTray.items.values.length === 0)

View File

@@ -23,9 +23,11 @@ PanelWindow {
readonly property int notificationCount: NotificationService.notifications.length
property bool autoHide: SettingsData.topBarAutoHide
property bool reveal: !autoHide || topBarMouseArea.containsMouse
readonly property real effectiveBarHeight: Math.max(root.widgetHeight + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding))
readonly property real widgetHeight: Math.max(20, 26 + SettingsData.topBarInnerPadding * 0.6)
screen: modelData
implicitHeight: Theme.barHeight - 4 + SettingsData.topBarSpacing
implicitHeight: effectiveBarHeight + SettingsData.topBarSpacing
color: "transparent"
Component.onCompleted: {
let fonts = Qt.fontFamilies()
@@ -153,7 +155,7 @@ PanelWindow {
right: true
}
exclusiveZone: autoHide ? -1 : Theme.barHeight - 4 + SettingsData.topBarSpacing
exclusiveZone: autoHide ? -1 : root.effectiveBarHeight + SettingsData.topBarSpacing - 2
mask: Region {
item: topBarMouseArea
@@ -161,7 +163,7 @@ PanelWindow {
MouseArea {
id: topBarMouseArea
height: root.reveal ? Theme.barHeight - 4 + SettingsData.topBarSpacing : 4
height: root.reveal ? effectiveBarHeight + SettingsData.topBarSpacing : 4
anchors {
top: parent.top
left: parent.left
@@ -182,7 +184,7 @@ PanelWindow {
transform: Translate {
id: topBarSlide
y: root.reveal ? 0 : -(Theme.barHeight - 8)
y: root.reveal ? 0 : -(effectiveBarHeight - 4)
Behavior on y {
NumberAnimation {
@@ -386,10 +388,10 @@ PanelWindow {
}
anchors.fill: parent
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
anchors.topMargin: Theme.spacingXS
anchors.bottomMargin: Theme.spacingXS
anchors.leftMargin: Math.max(Theme.spacingXS, SettingsData.topBarInnerPadding * 0.8)
anchors.rightMargin: Math.max(Theme.spacingXS, SettingsData.topBarInnerPadding * 0.8)
anchors.topMargin: SettingsData.topBarInnerPadding / 2
anchors.bottomMargin: SettingsData.topBarInnerPadding / 2
clip: true
Row {
@@ -604,7 +606,7 @@ PanelWindow {
Rectangle {
width: 40
height: 30
height: root.widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
@@ -646,6 +648,8 @@ PanelWindow {
LauncherButton {
isActive: false
widgetHeight: root.widgetHeight
barHeight: root.effectiveBarHeight
section: {
if (parent && parent.parent) {
if (parent.parent === leftSection)
@@ -672,6 +676,7 @@ PanelWindow {
WorkspaceSwitcher {
screenName: root.screenName
widgetHeight: root.widgetHeight
}
}
@@ -680,6 +685,7 @@ PanelWindow {
FocusedApp {
availableWidth: topBarContent.leftToMediaGap
widgetHeight: root.widgetHeight
}
}
@@ -687,6 +693,7 @@ PanelWindow {
id: runningAppsComponent
RunningApps {
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -706,6 +713,8 @@ PanelWindow {
Clock {
compactMode: topBarContent.overlapping
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -736,6 +745,8 @@ PanelWindow {
Media {
compactMode: topBarContent.spacingTight
|| topBarContent.overlapping
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -764,6 +775,8 @@ PanelWindow {
id: weatherComponent
Weather {
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -794,6 +807,7 @@ PanelWindow {
SystemTrayBar {
parentWindow: root
parentScreen: root.screen
widgetHeight: root.widgetHeight
}
}
@@ -801,6 +815,7 @@ PanelWindow {
id: privacyIndicatorComponent
PrivacyIndicator {
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -818,6 +833,8 @@ PanelWindow {
id: cpuUsageComponent
CpuMonitor {
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -844,6 +861,8 @@ PanelWindow {
id: memUsageComponent
RamMonitor {
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -870,6 +889,8 @@ PanelWindow {
id: cpuTempComponent
CpuTemperature {
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -896,6 +917,8 @@ PanelWindow {
id: gpuTempComponent
GpuTemperature {
barHeight: root.effectiveBarHeight
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -925,6 +948,8 @@ PanelWindow {
NotificationCenterButton {
hasUnread: root.notificationCount > 0
isActive: notificationCenterLoader.item ? notificationCenterLoader.item.shouldBeVisible : false
widgetHeight: root.widgetHeight
barHeight: root.effectiveBarHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -953,6 +978,8 @@ PanelWindow {
Battery {
batteryPopupVisible: batteryPopoutLoader.item ? batteryPopoutLoader.item.shouldBeVisible : false
widgetHeight: root.widgetHeight
barHeight: root.effectiveBarHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -981,6 +1008,8 @@ PanelWindow {
ControlCenterButton {
isActive: controlCenterLoader.item ? controlCenterLoader.item.shouldBeVisible : false
widgetHeight: root.widgetHeight
barHeight: root.effectiveBarHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -1023,6 +1052,7 @@ PanelWindow {
id: idleInhibitorComponent
IdleInhibitor {
widgetHeight: root.widgetHeight
section: {
if (parent && parent.parent === leftSection)
return "left"
@@ -1041,7 +1071,7 @@ PanelWindow {
Item {
width: parent.spacerSize || 20
height: 30
height: root.widgetHeight
Rectangle {
anchors.fill: parent
@@ -1068,7 +1098,7 @@ PanelWindow {
Rectangle {
width: 1
height: 20
height: root.widgetHeight * 0.67
color: Theme.outline
opacity: 0.3
}

View File

@@ -9,13 +9,15 @@ Rectangle {
property string section: "center"
property var popupTarget: null
property var parentScreen: null
property real barHeight: 48
property real widgetHeight: 30
signal clicked
visible: SettingsData.weatherEnabled
width: visible ? Math.min(100,
weatherRow.implicitWidth + Theme.spacingS * 2) : 0
height: 30
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = weatherArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
@@ -67,7 +69,7 @@ Rectangle {
var screenX = currentScreen.x || 0
var relativeX = globalPos.x - screenX
popupTarget.setTriggerPosition(
relativeX, Theme.barHeight + Theme.spacingXS,
relativeX, barHeight + Theme.spacingXS,
width, section, currentScreen)
}
root.clicked()

View File

@@ -10,6 +10,7 @@ Rectangle {
id: root
property string screenName: ""
property real widgetHeight: 30
property int currentWorkspace: {
if (CompositorService.isNiri) {
return getNiriActiveWorkspace()
@@ -78,10 +79,10 @@ Rectangle {
width: SettingsData.showWorkspacePadding ? Math.max(
120,
workspaceRow.implicitWidth + Theme.spacingL
workspaceRow.implicitWidth + SettingsData.topBarInnerPadding
* 2) : workspaceRow.implicitWidth
+ Theme.spacingL * 2
height: 30
+ SettingsData.topBarInnerPadding * 2
height: widgetHeight
radius: Theme.cornerRadius
color: {
const baseColor = Theme.surfaceTextHover
@@ -192,9 +193,8 @@ Rectangle {
workspaceData.name) : null
property bool hasIcon: iconData !== null
width: isActive ? Theme.spacingXL + Theme.spacingM : Theme.spacingL
+ Theme.spacingXS
height: Theme.spacingL
width: isActive ? widgetHeight * 1.2 + Theme.spacingXS : widgetHeight * 0.8
height: widgetHeight * 0.6
radius: height / 2
color: isActive ? Theme.primary : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha