-
Notifications
You must be signed in to change notification settings - Fork 175
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [sidebar] add animation spliter
Add AnimationHSpliter provides sidebar show/hide animation and drag. Log: Add animation spliter
- Loading branch information
Showing
10 changed files
with
413 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| // SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd. | ||
| // | ||
| // SPDX-License-Identifier: GPL-3.0-or-later | ||
|
|
||
| import QtQuick | ||
| import QtQuick.Layouts | ||
|
|
||
| /*! | ||
| * 用于边栏的横向分裂器，提供拖拽控件，动画交互功能 | ||
| */ | ||
| Item { | ||
| id: spliter | ||
|
|
||
| // 是否响应动画触发事件 | ||
| property alias enableAnimation: trans.enabled | ||
| // 是否响应 Hover 和拖拽效果 | ||
| property alias enableMouse: mouseLoader.active | ||
| property alias handle: handleLoader.sourceComponent | ||
| property int handleWidth: 6 | ||
| // 分裂器附加 anchor 位置，允许在父控件左侧或右侧的边缘，计算方向相反 | ||
| property bool leftSide: false | ||
| property real maximumWidth: 600 | ||
| property real minimumWidth: 150 | ||
| // 缓存手动拖拽的宽度，用于动画恢复 | ||
| property real showWidth: 200 | ||
| // 动画控制切换，switchShow 更新为 true 时触发弹出动画，为 false 时触发隐藏动画 | ||
| property bool switchShow: true | ||
| property Item target: parent | ||
|
|
||
| function adjustParentWidth(xOffset) { | ||
| var adjWidth; | ||
| if (null === spliter.target) { | ||
| return; | ||
| } | ||
| adjWidth = spliter.target.width + (leftSide ? -xOffset : xOffset); | ||
| adjWidth = Math.min(Math.max(minimumWidth, adjWidth), maximumWidth); | ||
| // 缓存用于动画的宽度 | ||
| showWidth = adjWidth; | ||
| // 外部组件可能被布局管理 | ||
| if (null !== target.Layout) { | ||
| target.Layout.preferredWidth = adjWidth; | ||
| } else { | ||
| target.width = adjWidth; | ||
| } | ||
| } | ||
|
|
||
| implicitHeight: target ? target.height : 0 | ||
| implicitWidth: handleWidth | ||
|
|
||
| // 拖拽也会触发属性变更,因此未使用 Behaviour | ||
| states: [ | ||
| State { | ||
| name: "show" | ||
| when: spliter.switchShow | ||
|
|
||
| PropertyChanges { | ||
| Layout.preferredWidth: showWidth | ||
| explicit: true | ||
| target: spliter.target | ||
| } | ||
| }, | ||
| State { | ||
| name: "hide" | ||
| when: !spliter.switchShow | ||
|
|
||
| PropertyChanges { | ||
| Layout.preferredWidth: 0 | ||
| explicit: true | ||
| target: spliter.target | ||
| } | ||
| } | ||
| ] | ||
| transitions: Transition { | ||
| id: trans | ||
|
|
||
| onRunningChanged: { | ||
| if (running && spliter.switchShow) { | ||
| spliter.target.visible = true; | ||
| } else if (!running && !spliter.switchShow) { | ||
| spliter.target.visible = false; | ||
| } | ||
| } | ||
|
|
||
| NumberAnimation { | ||
| duration: 200 | ||
| easing.type: Easing.InOutQuad | ||
| property: "Layout.preferredWidth" | ||
| } | ||
| } | ||
|
|
||
| anchors { | ||
| left: leftSide ? target.left : undefined | ||
| right: leftSide ? undefined : target.right | ||
| } | ||
|
|
||
| Loader { | ||
| id: handleLoader | ||
|
|
||
| sourceComponent: Item { | ||
| height: spliter.height | ||
| width: handleWidth | ||
| } | ||
| } | ||
|
|
||
| Loader { | ||
| id: mouseLoader | ||
|
|
||
| anchors.fill: parent | ||
|
|
||
| sourceComponent: MouseArea { | ||
| property real baseX | ||
|
|
||
| anchors.fill: parent | ||
| cursorShape: (containsMouse || pressed) ? Qt.SplitHCursor : Qt.ArrowCursor | ||
| hoverEnabled: true | ||
|
|
||
| onPositionChanged: { | ||
| if (pressed) { | ||
| spliter.adjustParentWidth(mouseX - baseX); | ||
| } | ||
| } | ||
| onPressed: { | ||
| baseX = mouseX; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
src/plugins/filemanager/core/dfmplugin-titlebar/qml/OptionButtonBox.qml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| // SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd. | ||
| // | ||
| // SPDX-License-Identifier: GPL-3.0-or-later | ||
|
|
||
| import QtQuick | ||
| import QtQuick.Controls | ||
| import QtQuick.Layouts | ||
| import org.deepin.dtk | ||
| import org.dfm.base | ||
|
|
||
| RowLayout { | ||
| property int iconSize: 28 | ||
|
|
||
| ButtonGroup { | ||
| buttons: viewMode.children | ||
| exclusive: true | ||
| } | ||
|
|
||
| Row { | ||
| id: viewMode | ||
|
|
||
| ToolButton { | ||
| id: iconView | ||
|
|
||
| checkable: true | ||
|
|
||
| icon { | ||
| height: iconSize | ||
| name: "unchecked" | ||
| width: iconSize | ||
| } | ||
| } | ||
|
|
||
| ToolButton { | ||
| id: listView | ||
|
|
||
| checkable: true | ||
|
|
||
| icon { | ||
| height: iconSize | ||
| name: "unchecked" | ||
| width: iconSize | ||
| } | ||
| } | ||
|
|
||
| ToolButton { | ||
| id: treeView | ||
|
|
||
| checkable: true | ||
|
|
||
| icon { | ||
| height: iconSize | ||
| name: "unchecked" | ||
| width: iconSize | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ToolButton { | ||
| id: detail | ||
|
|
||
| checkable: true | ||
|
|
||
| Component.onCompleted: { | ||
| checked = Containment.showDetail; | ||
| } | ||
|
|
||
| icon { | ||
| height: iconSize | ||
| name: "splitscreen_right" | ||
| width: iconSize | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.