Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00
Code Packages Releases Activity

Implement floating panel design

Browse Source
This commit is contained in:
purian23
2025-07-11 09:40:37 -04:00
parent c9d40bf7fb
commit f6b25968dc
2 changed files with 92 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Widgets/TopBar.qml
View File

@@ -27,47 +27,74 @@ PanelWindow {
right: true right: true
} }
implicitHeight: Theme.barHeight implicitHeight: Theme.barHeight - 4
color: "transparent" color: "transparent"
Rectangle { // Floating panel container with margins
Item {
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) anchors.margins: 2
anchors.topMargin: 6
anchors.bottomMargin: 0
anchors.leftMargin: 8
anchors.rightMargin: 8
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" radius: Theme.cornerRadiusXLarge
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.75)
border.width: 1
}
Rectangle {
anchors.fill: parent
color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.08)
SequentialAnimation on opacity { // Material 3 elevation shadow
running: true layer.enabled: true
loops: Animation.Infinite layer.effect: DropShadow {
NumberAnimation { horizontalOffset: 0
to: 0.12 verticalOffset: 4
duration: Theme.extraLongDuration radius: 16
easing.type: Theme.standardEasing samples: 33
} color: Qt.rgba(0, 0, 0, 0.15)
NumberAnimation { transparentBorder: true
to: 0.06 }
duration: Theme.extraLongDuration
easing.type: Theme.standardEasing // Subtle border for definition
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1
radius: parent.radius
}
// Subtle surface tint overlay with animation
Rectangle {
anchors.fill: parent
color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
radius: parent.radius
SequentialAnimation on opacity {
running: true
loops: Animation.Infinite
NumberAnimation {
to: 0.08
duration: Theme.extraLongDuration
easing.type: Theme.standardEasing
}
NumberAnimation {
to: 0.02
duration: Theme.extraLongDuration
easing.type: Theme.standardEasing
}
} }
} }
} }
}
Item {
anchors.fill: parent
anchors.leftMargin: Theme.spacingL
anchors.rightMargin: Theme.spacingL
Row { Item {
anchors.fill: parent
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
anchors.topMargin: Theme.spacingXS
anchors.bottomMargin: Theme.spacingXS
Row {
id: leftSection id: leftSection
height: parent.height height: parent.height
spacing: Theme.spacingL spacing: Theme.spacingL
@@ -797,3 +824,4 @@ PanelWindow {
} }
} }
} }
}

40
Widgets/TopBarSimple.qml
View File

@@ -17,34 +17,60 @@ PanelWindow {
right: true right: true
} }
implicitHeight: theme.barHeight WlrLayershell.topMargin: 8
WlrLayershell.bottomMargin: 8
WlrLayershell.leftMargin: 16
WlrLayershell.rightMargin: 16
implicitHeight: theme.barHeight - 4
color: "transparent" color: "transparent"
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(theme.surfaceContainer.r, theme.surfaceContainer.g, theme.surfaceContainer.b, 0.95) anchors.margins: 2
anchors.topMargin: 6
anchors.bottomMargin: 2
anchors.leftMargin: 8
anchors.rightMargin: 8
radius: theme.cornerRadiusXLarge
color: Qt.rgba(theme.surfaceContainer.r, theme.surfaceContainer.g, theme.surfaceContainer.b, 0.75)
// Material 3 elevation shadow
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 4
radius: 16
samples: 33
color: Qt.rgba(0, 0, 0, 0.15)
transparentBorder: true
}
// Subtle border for definition
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
border.color: Qt.rgba(theme.outline.r, theme.outline.g, theme.outline.b, 0.12) border.color: Qt.rgba(theme.outline.r, theme.outline.g, theme.outline.b, 0.08)
border.width: 1 border.width: 1
radius: parent.radius
} }
// Subtle surface tint overlay with animation
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(theme.surfaceTint.r, theme.surfaceTint.g, theme.surfaceTint.b, 0.08) color: Qt.rgba(theme.surfaceTint.r, theme.surfaceTint.g, theme.surfaceTint.b, 0.04)
radius: parent.radius
SequentialAnimation on opacity { SequentialAnimation on opacity {
running: true running: true
loops: Animation.Infinite loops: Animation.Infinite
NumberAnimation { NumberAnimation {
to: 0.12 to: 0.08
duration: theme.extraLongDuration duration: theme.extraLongDuration
easing.type: theme.standardEasing easing.type: theme.standardEasing
} }
NumberAnimation { NumberAnimation {
to: 0.06 to: 0.02
duration: theme.extraLongDuration duration: theme.extraLongDuration
easing.type: theme.standardEasing easing.type: theme.standardEasing
} }
@@ -56,6 +82,8 @@ PanelWindow {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: theme.spacingL anchors.leftMargin: theme.spacingL
anchors.rightMargin: theme.spacingL anchors.rightMargin: theme.spacingL
anchors.topMargin: theme.spacingXS
anchors.bottomMargin: theme.spacingXS
// Left section - Apps and Workspace Switcher // Left section - Apps and Workspace Switcher
Row { Row {