Skip to content

Commit 962ed4c

Browse files
BLumiaBLumia
committed
fix: use transform for smoother dock hide animation
避免通过调整原始窗口高度来进行dock的显示\隐藏动画,以便使dock显示\隐 藏动画更流畅. Log:
1 parent 499e14a commit 962ed4c

File tree

1 file changed

+148
-122
lines changed

1 file changed

+148
-122
lines changed

‎panels/dock/package/main.qml‎

Lines changed: 148 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Window {
5959
D.DWindow.enabled: true
6060
D.DWindow.windowRadius: 0
6161
D.DWindow.borderWidth: 1
62-
D.DWindow.enableBlurWindow: true
62+
D.DWindow.enableBlurWindow: Qt.platform.pluginName !== "xcb"
6363
D.DWindow.themeType: Panel.colorTheme
6464
D.DWindow.borderColor: D.DTK.themeType === D.ApplicationHelper.DarkType ? Qt.rgba(0, 0, 0, dock.blendColorAlpha(0.6) + 20 / 255) : Qt.rgba(0, 0, 0, 0.15)
6565
D.ColorSelector.family: D.Palette.CrystalColor
@@ -78,35 +78,30 @@ Window {
7878
restoreMode: Binding.RestoreNone
7979
}
8080

81-
// only add blendColor effect when DWindow.enableBlurWindow is true,
82-
// avoid to updating blur area frequently.--
83-
D.StyledBehindWindowBlur {
84-
control: parent
85-
anchors.fill: parent
86-
cornerRadius: 0
87-
blendColor: {
88-
if (valid) {
89-
return DStyle.Style.control.selectColor(undefined,
90-
Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, dock.blendColorAlpha(0.6)),
91-
Qt.rgba(10 / 255, 10 / 255, 10 /255, dock.blendColorAlpha(85 / 255)))
92-
}
93-
return DStyle.Style.control.selectColor(undefined,
94-
DStyle.Style.behindWindowBlur.lightNoBlurColor,
95-
DStyle.Style.behindWindowBlur.darkNoBlurColor)
96-
}
97-
}
98-
9981
PropertyAnimation {
10082
id: hideShowAnimation;
101-
target: dock;
102-
property: useColumnLayout ? "width" : "height";
103-
to: Panel.hideState != Dock.Hide ? Panel.dockSize : 1;
83+
// Currently, Wayland (Treeland) doesn't support StyledBehindWindowBlur inside the window, thus we keep using the window size approach on Wayland
84+
property bool useTransformBasedAnimation: Qt.platform.pluginName === "xcb"
85+
target: useTransformBasedAnimation ? dockTransform : dock;
86+
property: {
87+
if (useTransformBasedAnimation) return dock.useColumnLayout ? "x" : "y";
88+
return dock.useColumnLayout ? "width" : "height";
89+
}
90+
to: {
91+
if (useTransformBasedAnimation) return Panel.hideState != Dock.Hide ? 0 : ((Panel.position == Dock.Left || Panel.position == Dock.Top) ? -Panel.dockSize : Panel.dockSize);
92+
return Panel.hideState != Dock.Hide ? Panel.dockSize : 1;
93+
}
10494
duration: 500
95+
easing.type: Easing.OutCubic
10596
onStarted: {
10697
dock.visible = true
10798
}
10899
onStopped: {
109-
dock.visible = ((useColumnLayout ? dock.width : dock.height) != 1)
100+
if (useTransformBasedAnimation) {
101+
dock.visible = ((dock.useColumnLayout ? dockTransform.x : dockTransform.y) == 0)
102+
} else {
103+
dock.visible = ((dock.useColumnLayout ? dock.width : dock.height) != 1)
104+
}
110105
}
111106
}
112107

@@ -238,128 +233,159 @@ Window {
238233
}
239234
}
240235

241-
TapHandler {
242-
acceptedButtons: Qt.LeftButton | Qt.RightButton
243-
gesturePolicy: TapHandler.WithinBounds
244-
onTapped: function(eventPoint, button) {
245-
let lastActive = MenuHelper.activeMenu
246-
MenuHelper.closeCurrent()
247-
dockMenuLoader.active = true
248-
if (button === Qt.RightButton && lastActive !== dockMenuLoader.item) {
249-
// maybe has popup visible, close it.
250-
Panel.requestClosePopup()
251-
MenuHelper.openMenu(dockMenuLoader.item)
236+
Item {
237+
id: dockContainer
238+
width: dock.useColumnLayout ? Panel.dockSize : parent.width
239+
height: dock.useColumnLayout ? parent.height : Panel.dockSize
240+
anchors {
241+
left: parent.left
242+
top: parent.top
243+
}
244+
transform: Translate {
245+
id: dockTransform
246+
}
247+
248+
// only add blendColor effect when DWindow.enableBlurWindow is true,
249+
// avoid to updating blur area frequently.--
250+
D.StyledBehindWindowBlur {
251+
control: parent
252+
anchors.fill: parent
253+
cornerRadius: 0
254+
blendColor: {
255+
if (valid) {
256+
return DStyle.Style.control.selectColor(undefined,
257+
Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, dock.blendColorAlpha(0.6)),
258+
Qt.rgba(10 / 255, 10 / 255, 10 /255, dock.blendColorAlpha(85 / 255)))
259+
}
260+
return DStyle.Style.control.selectColor(undefined,
261+
DStyle.Style.behindWindowBlur.lightNoBlurColor,
262+
DStyle.Style.behindWindowBlur.darkNoBlurColor)
252263
}
253-
if (button === Qt.LeftButton) {
254-
// try to close popup when clicked empty, because dock does not have focus.
255-
Panel.requestClosePopup()
264+
}
265+
266+
TapHandler {
267+
acceptedButtons: Qt.LeftButton | Qt.RightButton
268+
gesturePolicy: TapHandler.WithinBounds
269+
onTapped: function(eventPoint, button) {
270+
let lastActive = MenuHelper.activeMenu
271+
MenuHelper.closeCurrent()
272+
dockMenuLoader.active = true
273+
if (button === Qt.RightButton && lastActive !== dockMenuLoader.item) {
274+
// maybe has popup visible, close it.
275+
Panel.requestClosePopup()
276+
MenuHelper.openMenu(dockMenuLoader.item)
277+
}
278+
if (button === Qt.LeftButton) {
279+
// try to close popup when clicked empty, because dock does not have focus.
280+
Panel.requestClosePopup()
281+
}
256282
}
257283
}
258-
}
259284

260-
HoverHandler {
261-
cursorShape: Qt.ArrowCursor
262-
}
285+
HoverHandler {
286+
cursorShape: Qt.ArrowCursor
287+
}
263288

264-
// TODO missing property binding to update ProxyModel's filter and sort opearation.
265-
Repeater {
266-
model: Applet.appletItems
267-
delegate: Item {
268-
property var order: model.data.dockOrder
269-
property bool itemVisible: model.data.shouldVisible === undefined || model.data.shouldVisible
289+
// TODO missing property binding to update ProxyModel's filter and sort opearation.
290+
Repeater {
291+
model: Applet.appletItems
292+
delegate: Item {
293+
property var order: model.data.dockOrder
294+
property bool itemVisible: model.data.shouldVisible === undefined || model.data.shouldVisible
270295

271-
onItemVisibleChanged: {
272-
updateAppItems()
273-
}
274-
onOrderChanged: {
275-
updateAppItems()
296+
onItemVisibleChanged: {
297+
updateAppItems()
298+
}
299+
onOrderChanged: {
300+
updateAppItems()
301+
}
276302
}
277303
}
278-
}
279304

280-
// TODO: remove GridLayout and use delegatechosser manager all items
281-
GridLayout {
282-
id: gridLayout
283-
anchors.fill: parent
284-
columns: 1
285-
rows: 1
286-
flow: useColumnLayout ? GridLayout.LeftToRight : GridLayout.TopToBottom
287-
property real itemMargin: Math.max((dockItemIconSize / 48 * 10))
288-
columnSpacing: dockLeftPartModel.count > 0 ? 10 : itemMargin
289-
rowSpacing: columnSpacing
305+
// TODO: remove GridLayout and use delegatechosser manager all items
306+
GridLayout {
307+
id: gridLayout
308+
anchors.fill: parent
309+
columns: 1
310+
rows: 1
311+
flow: useColumnLayout ? GridLayout.LeftToRight : GridLayout.TopToBottom
312+
property real itemMargin: Math.max((dockItemIconSize / 48 * 10))
313+
columnSpacing: dockLeftPartModel.count > 0 ? 10 : itemMargin
314+
rowSpacing: columnSpacing
315+
316+
Item {
317+
id: leftMargin
318+
implicitWidth: 0
319+
implicitHeight: 0
320+
}
290321

291-
Item {
292-
id: leftMargin
293-
implicitWidth: 0
294-
implicitHeight: 0
295-
}
322+
Item {
323+
id: dockLeftPart
324+
visible: dockLeftPartModel.count > 0
325+
implicitWidth: leftLoader.implicitWidth
326+
implicitHeight: leftLoader.implicitHeight
327+
OverflowContainer {
328+
id: leftLoader
329+
anchors.fill: parent
330+
useColumnLayout: dock.useColumnLayout
331+
model: DockPartAppletModel {
332+
id: dockLeftPartModel
333+
leftDockOrder: 0
334+
rightDockOrder: 10
335+
}
336+
}
337+
}
296338

297-
Item {
298-
id: dockLeftPart
299-
visible: dockLeftPartModel.count > 0
300-
implicitWidth: leftLoader.implicitWidth
301-
implicitHeight: leftLoader.implicitHeight
302-
OverflowContainer {
303-
id: leftLoader
304-
anchors.fill: parent
305-
useColumnLayout: dock.useColumnLayout
306-
model: DockPartAppletModel {
307-
id: dockLeftPartModel
308-
leftDockOrder: 0
309-
rightDockOrder: 10
339+
Item {
340+
id: dockCenterPart
341+
implicitWidth: centerLoader.implicitWidth
342+
implicitHeight: centerLoader.implicitHeight
343+
onXChanged: dockCenterPartPosChanged()
344+
onYChanged: dockCenterPartPosChanged()
345+
Layout.leftMargin: !useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
346+
(dock.width - dockCenterPart.implicitWidth) / 2 - (dockLeftPart.implicitWidth + 20) + Math.min((dock.width - dockCenterPart.implicitWidth) / 2 - (dockRightPart.implicitWidth + 20), 0) : 0
347+
Layout.topMargin: useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
348+
(dock.height - dockCenterPart.implicitHeight) / 2 - (dockLeftPart.implicitHeight + 20) + Math.min((dock.height - dockCenterPart.implicitHeight) / 2 - (dockRightPart.implicitHeight + 20), 0) : 0
349+
350+
Behavior on Layout.leftMargin { NumberAnimation { duration: 200; easing.type: Easing.OutCubic } }
351+
Behavior on Layout.topMargin { NumberAnimation { duration: 200; easing.type: Easing.OutCubic } }
352+
353+
OverflowContainer {
354+
id: centerLoader
355+
anchors.fill: parent
356+
useColumnLayout: dock.useColumnLayout
357+
spacing: dock.itemSpacing
358+
model: DockPartAppletModel {
359+
id: dockCenterPartModel
360+
leftDockOrder: 10
361+
rightDockOrder: 20
362+
}
310363
}
311364
}
365+
366+
Item {
367+
Layout.fillWidth: true
368+
Layout.fillHeight: true
369+
}
312370
}
313371

314372
Item {
315-
id: dockCenterPart
316-
implicitWidth: centerLoader.implicitWidth
317-
implicitHeight: centerLoader.implicitHeight
318-
onXChanged: dockCenterPartPosChanged()
319-
onYChanged: dockCenterPartPosChanged()
320-
Layout.leftMargin: !useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
321-
(dock.width - dockCenterPart.implicitWidth) / 2 - (dockLeftPart.implicitWidth + 20) + Math.min((dock.width - dockCenterPart.implicitWidth) / 2 - (dockRightPart.implicitWidth + 20), 0) : 0
322-
Layout.topMargin: useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
323-
(dock.height - dockCenterPart.implicitHeight) / 2 - (dockLeftPart.implicitHeight + 20) + Math.min((dock.height - dockCenterPart.implicitHeight) / 2 - (dockRightPart.implicitHeight + 20), 0) : 0
324-
325-
Behavior on Layout.leftMargin { NumberAnimation { duration: 200; easing.type: Easing.OutCubic } }
326-
Behavior on Layout.topMargin { NumberAnimation { duration: 200; easing.type: Easing.OutCubic } }
327-
373+
id: dockRightPart
374+
implicitWidth: rightLoader.implicitWidth
375+
implicitHeight: rightLoader.implicitHeight
376+
anchors.right: parent.right
377+
anchors.bottom: parent.bottom
328378
OverflowContainer {
329-
id: centerLoader
379+
id: rightLoader
330380
anchors.fill: parent
331381
useColumnLayout: dock.useColumnLayout
332-
spacing: dock.itemSpacing
333382
model: DockPartAppletModel {
334-
id: dockCenterPartModel
335-
leftDockOrder: 10
336-
rightDockOrder: 20
383+
id: dockRightPartModel
384+
leftDockOrder: 20
385+
rightDockOrder: 30
337386
}
338387
}
339388
}
340-
341-
Item {
342-
Layout.fillWidth: true
343-
Layout.fillHeight: true
344-
}
345-
}
346-
347-
Item {
348-
id: dockRightPart
349-
implicitWidth: rightLoader.implicitWidth
350-
implicitHeight: rightLoader.implicitHeight
351-
anchors.right: parent.right
352-
anchors.bottom: parent.bottom
353-
OverflowContainer {
354-
id: rightLoader
355-
anchors.fill: parent
356-
useColumnLayout: dock.useColumnLayout
357-
model: DockPartAppletModel {
358-
id: dockRightPartModel
359-
leftDockOrder: 20
360-
rightDockOrder: 30
361-
}
362-
}
363389
}
364390

365391
MouseArea {

0 commit comments

Comments
 (0)