Dock: Float improvements, can click below dock and on the side. Should fix #237
This commit is contained in:
LemmyCook
parent
3c97acf00f
commit
c8886629ad
2 changed files with 325 additions and 275 deletions
|
|
@ -12,10 +12,10 @@ import qs.Widgets
|
|||
Variants {
|
||||
model: Quickshell.screens
|
||||
|
||||
delegate: Loader {
|
||||
|
||||
delegate: Item {
|
||||
required property ShellScreen modelData
|
||||
property real scaling: ScalingService.getScreenScale(modelData)
|
||||
|
||||
Connections {
|
||||
target: ScalingService
|
||||
function onScaleChanged(screenName, scale) {
|
||||
|
|
@ -25,61 +25,39 @@ Variants {
|
|||
}
|
||||
}
|
||||
|
||||
active: Settings.isLoaded && modelData ? Settings.data.dock.monitors.includes(modelData.name) : false
|
||||
|
||||
sourceComponent: PanelWindow {
|
||||
id: dockWindow
|
||||
|
||||
screen: modelData
|
||||
|
||||
// Shared properties between peek and dock windows
|
||||
readonly property bool autoHide: Settings.data.dock.autoHide
|
||||
readonly property int hideDelay: 500
|
||||
readonly property int showDelay: 100
|
||||
readonly property int hideAnimationDuration: Style.animationFast
|
||||
readonly property int showAnimationDuration: Style.animationFast
|
||||
readonly property int peekHeight: 7 * scaling
|
||||
readonly property int fullHeight: dockContainer.height
|
||||
readonly property int peekHeight: 1 // no scaling for peek
|
||||
readonly property int iconSize: 36 * scaling
|
||||
readonly property int floatingMargin: Settings.data.dock.floatingRatio * Style.marginL * scaling // Margin to make dock float
|
||||
readonly property int floatingMargin: Settings.data.dock.floatingRatio * Style.marginL * scaling
|
||||
|
||||
// Bar detection and positioning properties
|
||||
readonly property bool hasBar: modelData.name ? (Settings.data.bar.monitors.includes(modelData.name)
|
||||
|| (Settings.data.bar.monitors.length === 0)) : false
|
||||
readonly property bool barAtBottom: hasBar && Settings.data.bar.position === "bottom"
|
||||
readonly property bool barAtTop: hasBar && Settings.data.bar.position === "top"
|
||||
readonly property int barHeight: (barAtBottom || barAtTop) ? Settings.data.bar.height * scaling : 0
|
||||
readonly property int dockSpacing: 8 * scaling // Space between dock and bar/edge
|
||||
readonly property int barHeight: Style.barHeight * scaling
|
||||
|
||||
// Track hover state
|
||||
// Shared state between windows
|
||||
property bool dockHovered: false
|
||||
property bool anyAppHovered: false
|
||||
property bool hidden: autoHide
|
||||
property bool peekHovered: false
|
||||
|
||||
// Dock is positioned at the bottom
|
||||
anchors.bottom: true
|
||||
focusable: false
|
||||
color: Color.transparent
|
||||
// Separate property to control Loader - stays true during animations
|
||||
property bool dockLoaded: !autoHide // Start loaded if autoHide is off
|
||||
|
||||
WlrLayershell.namespace: "noctalia-dock"
|
||||
WlrLayershell.exclusionMode: Settings.data.dock.exclusive ? ExclusionMode.Auto : ExclusionMode.Ignore
|
||||
|
||||
// Set the window size - include extra height only if bar is at bottom
|
||||
implicitWidth: dockContainer.width + (Style.marginM * 2 * scaling)
|
||||
implicitHeight: fullHeight + floatingMargin + (barAtBottom ? barHeight + dockSpacing : 0)
|
||||
|
||||
// Position the entire window above the bar only when bar is at bottom
|
||||
margins.bottom: barAtBottom ? barHeight : 0
|
||||
|
||||
// Watch for autoHide setting changes
|
||||
onAutoHideChanged: {
|
||||
if (!autoHide) {
|
||||
// If auto-hide is disabled, show the dock
|
||||
hidden = false
|
||||
hideTimer.stop()
|
||||
showTimer.stop()
|
||||
} else {
|
||||
// If auto-hide is enabled, start hidden
|
||||
hidden = true
|
||||
// Timer to unload dock after hide animation completes
|
||||
Timer {
|
||||
id: unloadTimer
|
||||
interval: hideAnimationDuration + 50 // Add small buffer
|
||||
onTriggered: {
|
||||
if (hidden && autoHide) {
|
||||
dockLoaded = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -88,8 +66,9 @@ Variants {
|
|||
id: hideTimer
|
||||
interval: hideDelay
|
||||
onTriggered: {
|
||||
if (autoHide && !dockHovered && !anyAppHovered && !peekArea.containsMouse) {
|
||||
if (autoHide && !dockHovered && !anyAppHovered && !peekHovered) {
|
||||
hidden = true
|
||||
unloadTimer.restart() // Start unload timer when hiding
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,47 +79,111 @@ Variants {
|
|||
interval: showDelay
|
||||
onTriggered: {
|
||||
if (autoHide) {
|
||||
hidden = false
|
||||
dockLoaded = true // Load dock immediately
|
||||
hidden = false // Then trigger show animation
|
||||
unloadTimer.stop() // Cancel any pending unload
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Peek area that remains visible when dock is hidden
|
||||
// Watch for autoHide setting changes
|
||||
onAutoHideChanged: {
|
||||
if (!autoHide) {
|
||||
hidden = false
|
||||
dockLoaded = true
|
||||
hideTimer.stop()
|
||||
showTimer.stop()
|
||||
unloadTimer.stop()
|
||||
} else {
|
||||
hidden = true
|
||||
unloadTimer.restart() // Schedule unload after animation
|
||||
}
|
||||
}
|
||||
|
||||
// PEEK WINDOW - Always visible when auto-hide is enabled
|
||||
Loader {
|
||||
active: Settings.isLoaded && modelData && Settings.data.dock.monitors.includes(modelData.name) && autoHide
|
||||
|
||||
sourceComponent: PanelWindow {
|
||||
id: peekWindow
|
||||
|
||||
screen: modelData
|
||||
anchors.bottom: true
|
||||
anchors.left: true
|
||||
anchors.right: true
|
||||
focusable: false
|
||||
color: Color.transparent
|
||||
|
||||
WlrLayershell.namespace: "noctalia-dock-peek"
|
||||
WlrLayershell.exclusionMode: ExclusionMode.Auto // Always exclusive
|
||||
|
||||
implicitHeight: peekHeight
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: barAtBottom ? Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity) : Color.transparent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: peekArea
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: peekHeight + floatingMargin + (barAtBottom ? dockSpacing : 0)
|
||||
hoverEnabled: autoHide
|
||||
visible: autoHide
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
|
||||
onEntered: {
|
||||
if (autoHide && hidden) {
|
||||
peekHovered = true
|
||||
if (hidden) {
|
||||
showTimer.start()
|
||||
}
|
||||
}
|
||||
|
||||
onExited: {
|
||||
if (autoHide && !hidden && !dockHovered && !anyAppHovered) {
|
||||
peekHovered = false
|
||||
if (!hidden && !dockHovered && !anyAppHovered) {
|
||||
hideTimer.restart()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dockContainer
|
||||
width: dockLayout.implicitWidth + Style.marginM * scaling * 2
|
||||
height: Math.round(iconSize * 1.5)
|
||||
color: Qt.alpha(Color.mSurface, Settings.data.dock.backgroundOpacity)
|
||||
// DOCK WINDOW
|
||||
Loader {
|
||||
active: Settings.isLoaded && modelData && Settings.data.dock.monitors.includes(modelData.name) && dockLoaded
|
||||
|
||||
sourceComponent: PanelWindow {
|
||||
id: dockWindow
|
||||
|
||||
screen: modelData
|
||||
|
||||
focusable: false
|
||||
color: Color.transparent
|
||||
|
||||
WlrLayershell.namespace: "noctalia-dock-main"
|
||||
WlrLayershell.exclusionMode: Settings.data.dock.exclusive ? ExclusionMode.Auto : ExclusionMode.Ignore
|
||||
|
||||
// Size to fit the dock container exactly
|
||||
implicitWidth: dockContainerWrapper.width
|
||||
implicitHeight: dockContainerWrapper.height
|
||||
|
||||
// Position above the bar if it's at bottom
|
||||
anchors.bottom: true
|
||||
margins.bottom: barAtBottom ? barHeight + floatingMargin : floatingMargin
|
||||
|
||||
// Rectangle {
|
||||
// anchors.fill: parent
|
||||
// color: "#000FF0"
|
||||
// z: -1
|
||||
// }
|
||||
|
||||
// Wrapper item for scale/opacity animations
|
||||
Item {
|
||||
id: dockContainerWrapper
|
||||
width: dockContainer.width
|
||||
height: dockContainer.height
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: floatingMargin + (barAtBottom ? dockSpacing : 0)
|
||||
radius: Style.radiusL * scaling
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
border.color: Color.mOutline
|
||||
|
||||
// Fade and zoom animation properties
|
||||
// Apply animations to this wrapper
|
||||
opacity: hidden ? 0 : 1
|
||||
scale: hidden ? 0.85 : 1
|
||||
|
||||
|
|
@ -159,6 +202,16 @@ Variants {
|
|||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dockContainer
|
||||
width: dockLayout.implicitWidth + Style.marginM * scaling * 2
|
||||
height: Math.round(iconSize * 1.5)
|
||||
color: Qt.alpha(Color.mSurface, Settings.data.dock.backgroundOpacity)
|
||||
anchors.centerIn: parent
|
||||
radius: Style.radiusL * scaling
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
border.color: Color.mOutline
|
||||
|
||||
MouseArea {
|
||||
id: dockMouseArea
|
||||
anchors.fill: parent
|
||||
|
|
@ -169,16 +222,13 @@ Variants {
|
|||
if (autoHide) {
|
||||
showTimer.stop()
|
||||
hideTimer.stop()
|
||||
if (hidden) {
|
||||
hidden = false
|
||||
}
|
||||
unloadTimer.stop() // Cancel unload if hovering
|
||||
}
|
||||
}
|
||||
|
||||
onExited: {
|
||||
dockHovered = false
|
||||
// Only start hide timer if we're not hovering over any app or the peek area
|
||||
if (autoHide && !anyAppHovered && !peekArea.containsMouse) {
|
||||
if (autoHide && !anyAppHovered && !peekHovered) {
|
||||
hideTimer.restart()
|
||||
}
|
||||
}
|
||||
|
|
@ -211,7 +261,8 @@ Variants {
|
|||
Layout.preferredHeight: iconSize
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
|
||||
property bool isActive: ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData
|
||||
property bool isActive: ToplevelManager.activeToplevel
|
||||
&& ToplevelManager.activeToplevel === modelData
|
||||
property bool hovered: appMouseArea.containsMouse
|
||||
property string appId: modelData ? modelData.appId : ""
|
||||
property string appTitle: modelData ? modelData.title : ""
|
||||
|
|
@ -283,17 +334,14 @@ Variants {
|
|||
if (autoHide) {
|
||||
showTimer.stop()
|
||||
hideTimer.stop()
|
||||
if (hidden) {
|
||||
hidden = false
|
||||
}
|
||||
unloadTimer.stop() // Cancel unload if hovering app
|
||||
}
|
||||
}
|
||||
|
||||
onExited: {
|
||||
anyAppHovered = false
|
||||
appTooltip.hide()
|
||||
// Only start hide timer if we're not hovering over the dock or peek area
|
||||
if (autoHide && !dockHovered && !peekArea.containsMouse) {
|
||||
if (autoHide && !dockHovered && !peekHovered) {
|
||||
hideTimer.restart()
|
||||
}
|
||||
}
|
||||
|
|
@ -342,3 +390,5 @@ Variants {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,32 +53,32 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
|
||||
// ColumnLayout {
|
||||
// spacing: Style.marginXXS * scaling
|
||||
// Layout.fillWidth: true
|
||||
ColumnLayout {
|
||||
spacing: Style.marginXXS * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
// NLabel {
|
||||
// label: "Dock Floating Distance"
|
||||
// description: "Adjust the floating distance from the screen edge."
|
||||
// }
|
||||
|
||||
// RowLayout {
|
||||
// NSlider {
|
||||
// Layout.fillWidth: true
|
||||
// from: 0
|
||||
// to: 4
|
||||
// stepSize: 0.01
|
||||
// value: Settings.data.dock.floatingRatio
|
||||
// onMoved: Settings.data.dock.floatingRatio = value
|
||||
// cutoutColor: Color.mSurface
|
||||
// }
|
||||
|
||||
// NText {
|
||||
// text: Math.floor(Settings.data.dock.floatingRatio * 100) + "%"
|
||||
// Layout.alignment: Qt.AlignVCenter
|
||||
// Layout.leftMargin: Style.marginS * scaling
|
||||
// color: Color.mOnSurface
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
NLabel {
|
||||
label: "Dock Floating Distance"
|
||||
description: "Adjust the floating distance from the screen edge."
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
NSlider {
|
||||
Layout.fillWidth: true
|
||||
from: 0
|
||||
to: 4
|
||||
stepSize: 0.01
|
||||
value: Settings.data.dock.floatingRatio
|
||||
onMoved: Settings.data.dock.floatingRatio = value
|
||||
cutoutColor: Color.mSurface
|
||||
}
|
||||
|
||||
NText {
|
||||
text: Math.floor(Settings.data.dock.floatingRatio * 100) + "%"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.leftMargin: Style.marginS * scaling
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue