p87392540
/
ukui-panel
forked from openkylin/ukui-panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(taskManager): 添加预览图宽高限制，解决切换显示时窗口闪烁问题

This commit is contained in:
qiqi49 2024-05-14 16:33:45 +08:00 committed by He Sir
parent d04c952ae2
commit 5a7e6f3ff9
4 changed files with 248 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
widgets/ukui-task-manager/CMakeLists.txt
View File

@ -106,6 +106,7 @@ install(FILES "qmldir" DESTINATION ${PLUGIN_INSTALL_PATH})
install(FILES "qml/AppIcon.qml" DESTINATION ${PLUGIN_INSTALL_PATH})
install(FILES "qml/AppList.qml" DESTINATION ${PLUGIN_INSTALL_PATH})
install(FILES "qml/ThumbnailWindow.qml" DESTINATION ${PLUGIN_INSTALL_PATH})
install(FILES "qml/ThumbnailContainer.qml" DESTINATION ${PLUGIN_INSTALL_PATH})
install(TARGETS "ukui-task-manager" LIBRARY DESTINATION ${PLUGIN_INSTALL_PATH})

36
widgets/ukui-task-manager/plugin/qml/TaskManagerView.qml
View File

@ -18,7 +18,7 @@
* hxf <hewenfei@kylinos.cn>
*
*/
import QtQml 2.15
import QtQuick 2.12
import QtQml.Models 2.12
import QtQuick.Layouts 1.12
@ -48,7 +48,7 @@ TaskManager {
Transition {
to: "aboutToShowThumbnail"
SequentialAnimation {
PauseAnimation { duration: 500 }
PauseAnimation { duration: 400 }
ScriptAction {
script: {
if (!thumbnailView.visible) {
@ -62,7 +62,7 @@ TaskManager {
Transition {
to: "aboutToHideThumbanil"
SequentialAnimation {
PauseAnimation { duration: 300 }
PauseAnimation { duration: 400 }
ScriptAction {
script: {
if (thumbnailView.visible) {
@ -75,14 +75,29 @@ TaskManager {
}
]
Component.onCompleted: {
itemContainsMouse.connect(thumbnailToBeChanged);
}
Timer {
id: changedThumbnailData
property var dataToBeChanged
interval: 400
onTriggered: {
viewContent.thumbnailData = dataToBeChanged;
}
}
onRequestThumbnailView: (show, data) => {
if (show) {
thumbnailView.visualParent = data.currentTaskItem;
state = "aboutToShowThumbnail";
if (viewContent.thumbnailData !== data) {
if (thumbnailView.visible) {
// timer
changedThumbnailData.dataToBeChanged = data;
changedThumbnailData.start();
} else {
viewContent.thumbnailData = data;
viewContent.determineListViewSize();
}
} else {
state = "aboutToHideThumbanil";
}
@ -93,7 +108,7 @@ TaskManager {
mainItem: viewContent
enableWindowBlur: true
type: Platform.WindowType.SystemWindow
visualParent: viewContent.thumbnailData ? viewContent.thumbnailData.currentTaskItem : null
function updatePosition() {
switch (Widget.container.position) {
case Items.Types.Left:
@ -114,12 +129,6 @@ TaskManager {
thumbnailView.margin = 10;
}
// 避免预览图未完成加载就显示，
onVisualParentChanged: {
thumbnailView.hide();
taskManager.state = "";
}
UkuiTaskManager.ThumbnailWindow {
id: viewContent
@ -129,6 +138,7 @@ TaskManager {
property var windowIcons: thumbnailData ? thumbnailData.windowIcons : []
property bool isHorizontal: taskManager.view.orientation === ListView.Horizontal
property bool hasFocus: viewContent.containsMouse || viewContent.menuVisible
property bool windowVisible: thumbnailView.visible
onHasFocusChanged: {
if (hasFocus) {

179
widgets/ukui-task-manager/qml/ThumbnailContainer.qml Normal file
View File

@ -0,0 +1,179 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import org.ukui.quick.items 1.0
import org.ukui.windowThumbnail 1.0
import org.ukui.quick.platform 1.0
import org.ukui.panel.taskManager 1.0 as UkuiTaskManager
StyleBackground {
id: container
property int spacing: 8
property var containerIcon
property bool isList: false
property bool containsMouse: false
property bool containsPress: false
// 是否以width为基准
property bool isWidthBased: false
property string containerTitle: ""
signal closeButtonClicked()
paletteRole: (isList && containsMouse) ? Theme.BrightText : Theme.Base
alpha: !isList ? 0.75 : containsPress ? 0.10 : containsMouse ? 0.05 : 0
useStyleTransparency: false
radius: isList ? 4 : 12
Loader {
id: layoutLoader
height: item.height
width: item.width
sourceComponent: isList ? listLayout : thumbnailLayout
}
Component {
id: thumbnailLayout
ColumnLayout {
id: baseLayout
spacing: 0
height: {
var preHeight = windowThumbnail.height + container.spacing * 3 + 24;
if (preHeight < minimumHeight ) {
return minimumHeight;
} else if (preHeight > maximumHeight) {
windowThumbnail.Layout.maximumHeight = maximumHeight - container.spacing * 3 - 24;
return maximumHeight
} else {
return preHeight;
}
}
width: {
var preWidth = windowThumbnail.width + container.spacing * 2;
if (preWidth < minimumWidth ) {
return minimumWidth;
} else if (preWidth > maximumWidth) {
windowThumbnail.Layout.maximumWidth = maximumWidth - container.spacing * 2;
return maximumWidth
} else {
return preWidth;
}
}
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: 24
Layout.maximumHeight: 24
Layout.margins: container.spacing
Layout.bottomMargin: 0
Icon {
Layout.preferredHeight: 24
Layout.preferredWidth: 24
Layout.rightMargin: container.spacing
source: containerIcon
}
StyleText {
Layout.fillHeight: true
Layout.fillWidth: true
text: containerTitle
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
MouseArea {
Layout.preferredHeight: 16
Layout.preferredWidth: 16
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
hoverEnabled: true
visible: container.containsMouse
Rectangle {
color: "red"
radius: 4
anchors.fill: parent
visible: parent.containsMouse
}
Icon {
anchors.fill: parent
mode: parent.containsMouse ? Icon.Highlight : Icon.AutoHighlight
source: "window-close-symbolic"
}
onClicked: {
closeButtonClicked();
}
}
}
WindowThumbnail {
id: windowThumbnail
Layout.alignment: Qt.AlignHCenter
Layout.margins: container.spacing
Layout.preferredWidth: width
Layout.preferredHeight: height
height: isWidthBased ? itemHeight : listView.preChildrenSize - 48
width: isWidthBased ? listView.preChildrenSize - 16 : itemWidth
property real itemHeight
property real itemWidth
// 窗口visible改变
winId: windowVisible ? modelData : ""
onWinIdChanged: {
if (winId === "") {
return;
}
var itemGeometry = UkuiTaskManager.WindowManager.geometry(modelData);
if (!isWidthBased) {
itemWidth = itemGeometry.width * ((listView.preChildrenSize - 48) / itemGeometry.height);
} else {
itemHeight = itemGeometry.height * ((listView.preChildrenSize - 16) / itemGeometry.width);
}
}
}
}
}
Component {
id: listLayout
Item {
width: 220
height: 36
RowLayout {
anchors.fill: parent
anchors.margins: 8
Icon {
Layout.preferredHeight: 16
Layout.preferredWidth: 16
source: containerIcon
}
StyleText {
Layout.fillHeight: true
Layout.fillWidth: true
text: containerTitle
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
MouseArea {
Layout.preferredHeight: 16
Layout.preferredWidth: 16
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
hoverEnabled: true
visible: container.containsMouse
Rectangle {
color: "red"
radius: 4
anchors.fill: parent
visible: parent.containsMouse
}
Icon {
anchors.fill: parent
source: "window-close-symbolic"
}
onClicked: {
closeButtonClicked();
}
}
}
}
}
}

78
widgets/ukui-task-manager/qml/ThumbnailWindow.qml
View File

@ -52,9 +52,27 @@ MouseArea {
function determineListViewSize() {
if (isHorizontal) {
listViewBase.determineHeight();
var listPreHeight = listViewBase.determineHeight(currentWinIdList).height;
if (listPreHeight < 124) {
listView.state = "list";
listView.isList = true;
return;
} else {
listView.preChildrenSize = listPreHeight;
listView.state = "thumbnail";
listView.isList = false;
}
} else {
listViewBase.determineWidth();
var listPreWidth = listViewBase.determineWidth(currentWinIdList).width;
if (listPreWidth < 124) {
listView.state = "list";
listView.isList = true;
return;
} else {
listView.preChildrenSize = listPreWidth;
listView.state = "thumbnail";
listView.isList = false;
}
}
}
@ -63,6 +81,9 @@ MouseArea {
paletteRole: Platform.Theme.Base
useStyleTransparency: false
width: listView.width
height: listView.height
alpha: 0
// 窗口尺寸不能为0
onWidthChanged: {
baseMouseArea.width = Math.max(listViewBase.width, 1);
@ -72,15 +93,16 @@ MouseArea {
baseMouseArea.width = Math.max(listViewBase.width, 1);
baseMouseArea.height = Math.max(listViewBase.height, 1);
}
function determineHeight() {
function determineHeight(winIdList) {
var totalWidth = 0;
var thumbnailHeight = 144;
if (!currentWinIdList) {
if (!winIdList) {
return;
}
for (var i = 0; i < currentWinIdList.length; i++) {
var itemGeometry = UkuiTaskManager.WindowManager.geometry(currentWinIdList[i]);
for (var i = 0; i < winIdList.length; i++) {
var itemGeometry = UkuiTaskManager.WindowManager.geometry(winIdList[i]);
totalWidth = totalWidth + (itemGeometry.width * (thumbnailHeight / itemGeometry.height));
}
@ -92,26 +114,19 @@ MouseArea {
}
var listPreHeight = thumbnailHeight + 48;
if (listPreHeight < 124) {
listView.state = "list";
listView.isList = true;
return;
} else {
listView.preChildrenSize = listPreHeight;
listView.state = "thumbnail";
listView.isList = false;
}
var listPreWidth = otherAreaSize + totalWidth;
return Qt.rect(0, 0, listPreWidth, listPreHeight);
}
function determineWidth() {
function determineWidth(winIdList) {
var totalHeight = 0;
var thumbnailWidth = 176;
if (!currentWinIdList) {
if (!winIdList) {
return;
}
for (var i = 0; i < currentWinIdList.length; i++) {
var itemGeometry = UkuiTaskManager.WindowManager.geometry(currentWinIdList[i]);
for (var i = 0; i < winIdList.length; i++) {
var itemGeometry = UkuiTaskManager.WindowManager.geometry(winIdList[i]);
totalHeight = totalHeight + (itemGeometry.height * (thumbnailWidth / itemGeometry.width));
}
@ -124,15 +139,8 @@ MouseArea {
}
var listPreWidth = thumbnailWidth + 16;
if (listPreWidth < 124) {
listView.state = "list";
listView.isList = true;
return;
} else {
listView.preChildrenSize = listPreWidth;
listView.state = "thumbnail";
listView.isList = false;
}
var listPreHeight = totalHeight + otherAreaSize;
return Qt.rect(0, 0, listPreWidth, listPreHeight);;
}
ListView {
@ -237,7 +245,7 @@ MouseArea {
property var windowThumbnailMprisModel: mprisModel
property bool mouseAreaContainsMouse: itemMouseArea.containsMouse
property bool mouseAreaContainsPress: itemMouseArea.containsPress
property bool isThumbnailWidthBased: !isHorizontal
property bool isListViewHorizontal: isHorizontal
// mprisModel.count > 0为mpris音视频预览图
sourceComponent: (mprisModel.count > 0) ? mprisPlayerComponent : thumbnailComponent
@ -263,10 +271,14 @@ MouseArea {
Component {
id: thumbnailComponent
WindowThumbnailContainer {
width: listView.isList ? 220 : (isThumbnailWidthBased ? listView.preChildrenSize : contentWidth)
height: listView.isList ? 36 : (isThumbnailWidthBased ? contentHeight : listView.preChildrenSize)
ThumbnailContainer {
width: listView.isList ? 220 : (isListViewHorizontal ? contentWidth : listView.preChildrenSize)
height: listView.isList ? 36 : (isListViewHorizontal ? listView.preChildrenSize : contentHeight)
property int maximumHeight: 312
property int minimumHeight: 120
property int maximumWidth: 502
property int minimumWidth : 120
property real contentHeight: childrenRect.height
property real contentWidth: childrenRect.width
@ -276,7 +288,7 @@ MouseArea {
containerTitle: title === undefined ? "" : title
containsMouse: mouseAreaContainsMouse
containsPress: mouseAreaContainsPress
isWidthBased: isThumbnailWidthBased
isWidthBased: !isListViewHorizontal
onCloseButtonClicked: {
UkuiTaskManager.TaskManager.activateWindowView("");