Skip to content

Commit c8162a2

Browse files
BLumiaBLumia
committed
wip: use transform for dock hide animation
Log:
1 parent 499e14a commit c8162a2

File tree

1 file changed

+135
-121
lines changed

1 file changed

+135
-121
lines changed

‎panels/dock/package/main.qml‎

Lines changed: 135 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -78,35 +78,18 @@ 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+
target: dockTransform;
84+
property: useColumnLayout ? "x" : "y";
85+
to: Panel.hideState != Dock.Hide ? 0 : ((Panel.position == Dock.Left || Panel.position == Dock.Top) ? -Panel.dockSize : Panel.dockSize);
10486
duration: 500
87+
easing.type: Easing.OutCubic
10588
onStarted: {
10689
dock.visible = true
10790
}
10891
onStopped: {
109-
dock.visible = ((useColumnLayout ? dock.width : dock.height) != 1)
92+
dock.visible = ((useColumnLayout ? dockTransform.x : dockTransform.y) == 0)
11093
}
11194
}
11295

@@ -238,128 +221,159 @@ Window {
238221
}
239222
}
240223

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)
224+
Item {
225+
id: dockContainer
226+
width: dock.useColumnLayout ? Panel.dockSize : parent.width
227+
height: dock.useColumnLayout ? parent.height : Panel.dockSize
228+
anchors {
229+
left: parent.left
230+
top: parent.top
231+
}
232+
transform: Translate {
233+
id: dockTransform
234+
}
235+
236+
// only add blendColor effect when DWindow.enableBlurWindow is true,
237+
// avoid to updating blur area frequently.--
238+
D.StyledBehindWindowBlur {
239+
control: parent
240+
anchors.fill: parent
241+
cornerRadius: 0
242+
blendColor: {
243+
if (valid) {
244+
return DStyle.Style.control.selectColor(undefined,
245+
Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, dock.blendColorAlpha(0.6)),
246+
Qt.rgba(10 / 255, 10 / 255, 10 /255, dock.blendColorAlpha(85 / 255)))
247+
}
248+
return DStyle.Style.control.selectColor(undefined,
249+
DStyle.Style.behindWindowBlur.lightNoBlurColor,
250+
DStyle.Style.behindWindowBlur.darkNoBlurColor)
252251
}
253-
if (button === Qt.LeftButton) {
254-
// try to close popup when clicked empty, because dock does not have focus.
255-
Panel.requestClosePopup()
252+
}
253+
254+
TapHandler {
255+
acceptedButtons: Qt.LeftButton | Qt.RightButton
256+
gesturePolicy: TapHandler.WithinBounds
257+
onTapped: function(eventPoint, button) {
258+
let lastActive = MenuHelper.activeMenu
259+
MenuHelper.closeCurrent()
260+
dockMenuLoader.active = true
261+
if (button === Qt.RightButton && lastActive !== dockMenuLoader.item) {
262+
// maybe has popup visible, close it.
263+
Panel.requestClosePopup()
264+
MenuHelper.openMenu(dockMenuLoader.item)
265+
}
266+
if (button === Qt.LeftButton) {
267+
// try to close popup when clicked empty, because dock does not have focus.
268+
Panel.requestClosePopup()
269+
}
256270
}
257271
}
258-
}
259272

260-
HoverHandler {
261-
cursorShape: Qt.ArrowCursor
262-
}
273+
HoverHandler {
274+
cursorShape: Qt.ArrowCursor
275+
}
263276

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
277+
// TODO missing property binding to update ProxyModel's filter and sort opearation.
278+
Repeater {
279+
model: Applet.appletItems
280+
delegate: Item {
281+
property var order: model.data.dockOrder
282+
property bool itemVisible: model.data.shouldVisible === undefined || model.data.shouldVisible
270283

271-
onItemVisibleChanged: {
272-
updateAppItems()
273-
}
274-
onOrderChanged: {
275-
updateAppItems()
284+
onItemVisibleChanged: {
285+
updateAppItems()
286+
}
287+
onOrderChanged: {
288+
updateAppItems()
289+
}
276290
}
277291
}
278-
}
279292

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
293+
// TODO: remove GridLayout and use delegatechosser manager all items
294+
GridLayout {
295+
id: gridLayout
296+
anchors.fill: parent
297+
columns: 1
298+
rows: 1
299+
flow: useColumnLayout ? GridLayout.LeftToRight : GridLayout.TopToBottom
300+
property real itemMargin: Math.max((dockItemIconSize / 48 * 10))
301+
columnSpacing: dockLeftPartModel.count > 0 ? 10 : itemMargin
302+
rowSpacing: columnSpacing
303+
304+
Item {
305+
id: leftMargin
306+
implicitWidth: 0
307+
implicitHeight: 0
308+
}
290309

291-
Item {
292-
id: leftMargin
293-
implicitWidth: 0
294-
implicitHeight: 0
295-
}
310+
Item {
311+
id: dockLeftPart
312+
visible: dockLeftPartModel.count > 0
313+
implicitWidth: leftLoader.implicitWidth
314+
implicitHeight: leftLoader.implicitHeight
315+
OverflowContainer {
316+
id: leftLoader
317+
anchors.fill: parent
318+
useColumnLayout: dock.useColumnLayout
319+
model: DockPartAppletModel {
320+
id: dockLeftPartModel
321+
leftDockOrder: 0
322+
rightDockOrder: 10
323+
}
324+
}
325+
}
296326

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
327+
Item {
328+
id: dockCenterPart
329+
implicitWidth: centerLoader.implicitWidth
330+
implicitHeight: centerLoader.implicitHeight
331+
onXChanged: dockCenterPartPosChanged()
332+
onYChanged: dockCenterPartPosChanged()
333+
Layout.leftMargin: !useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
334+
(dock.width - dockCenterPart.implicitWidth) / 2 - (dockLeftPart.implicitWidth + 20) + Math.min((dock.width - dockCenterPart.implicitWidth) / 2 - (dockRightPart.implicitWidth + 20), 0) : 0
335+
Layout.topMargin: useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
336+
(dock.height - dockCenterPart.implicitHeight) / 2 - (dockLeftPart.implicitHeight + 20) + Math.min((dock.height - dockCenterPart.implicitHeight) / 2 - (dockRightPart.implicitHeight + 20), 0) : 0
337+
338+
Behavior on Layout.leftMargin { NumberAnimation { duration: 200; easing.type: Easing.OutCubic } }
339+
Behavior on Layout.topMargin { NumberAnimation { duration: 200; easing.type: Easing.OutCubic } }
340+
341+
OverflowContainer {
342+
id: centerLoader
343+
anchors.fill: parent
344+
useColumnLayout: dock.useColumnLayout
345+
spacing: dock.itemSpacing
346+
model: DockPartAppletModel {
347+
id: dockCenterPartModel
348+
leftDockOrder: 10
349+
rightDockOrder: 20
350+
}
310351
}
311352
}
353+
354+
Item {
355+
Layout.fillWidth: true
356+
Layout.fillHeight: true
357+
}
312358
}
313359

314360
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-
361+
id: dockRightPart
362+
implicitWidth: rightLoader.implicitWidth
363+
implicitHeight: rightLoader.implicitHeight
364+
anchors.right: parent.right
365+
anchors.bottom: parent.bottom
328366
OverflowContainer {
329-
id: centerLoader
367+
id: rightLoader
330368
anchors.fill: parent
331369
useColumnLayout: dock.useColumnLayout
332-
spacing: dock.itemSpacing
333370
model: DockPartAppletModel {
334-
id: dockCenterPartModel
335-
leftDockOrder: 10
336-
rightDockOrder: 20
371+
id: dockRightPartModel
372+
leftDockOrder: 20
373+
rightDockOrder: 30
337374
}
338375
}
339376
}
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-
}
363377
}
364378

365379
MouseArea {

0 commit comments

Comments
 (0)