From dacc9d4608b3c477378c721a9c1a2ad9e82147e0 Mon Sep 17 00:00:00 2001 From: hewenfei Date: Tue, 9 Jan 2024 07:31:27 +0800 Subject: [PATCH] =?UTF-8?q?ui:=20=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=8F?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qml/AppControls2/LabelItem.qml | 10 ++- qml/AppUI/AppList.qml | 2 + qml/AppUI/AppListActions.qml | 74 ++++++++++++++++++ qml/AppUI/AppListHeader.qml | 47 +----------- qml/AppUI/FullScreenUI.qml | 136 +++++++++++++++++++++++++-------- qml/AppUI/Sidebar.qml | 22 ++++-- qml/AppUI/qmldir | 1 + qml/qml.qrc | 1 + 8 files changed, 208 insertions(+), 85 deletions(-) create mode 100644 qml/AppUI/AppListActions.qml diff --git a/qml/AppControls2/LabelItem.qml b/qml/AppControls2/LabelItem.qml index 2fc8216..41e366a 100644 --- a/qml/AppControls2/LabelItem.qml +++ b/qml/AppControls2/LabelItem.qml @@ -23,23 +23,25 @@ MouseArea { RowLayout { anchors.fill: parent UkuiItems.StyleText { - Layout.preferredHeight: parent.height - Layout.preferredWidth: contentWidth + Layout.fillWidth: true + Layout.fillHeight: true Layout.leftMargin: 12 horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignVCenter font.bold: true text: section + elide: Text.ElideRight } - Image { + UkuiItems.Icon { visible: control.containsMouse Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.preferredWidth: 24 Layout.preferredHeight: 24 Layout.rightMargin: 16 - source: "image://appicon/open-menu-symbolic" + mode: UkuiItems.Icon.AutoHighlight + source: "open-menu-symbolic" } } } diff --git a/qml/AppUI/AppList.qml b/qml/AppUI/AppList.qml index 1170af3..bd5e2ff 100644 --- a/qml/AppUI/AppList.qml +++ b/qml/AppUI/AppList.qml @@ -103,6 +103,8 @@ AppListView { view.section.property: "group" view.section.delegate: Component { AppControls2.LabelItem { + width: ListView.view.width + height: appListView.itemHeight focus: true; onClicked: labelItemClicked(); Keys.onPressed: { diff --git a/qml/AppUI/AppListActions.qml b/qml/AppUI/AppListActions.qml new file mode 100644 index 0000000..fabea1c --- /dev/null +++ b/qml/AppUI/AppListActions.qml @@ -0,0 +1,74 @@ +/* + * Copyright (C) 2023, KylinSoft Co., Ltd. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + * + */ + +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import org.ukui.quick.items 1.0 as UkuiItems +import org.ukui.quick.platform 1.0 as Platform + +UkuiItems.StyleBackground { + id: root + property alias count: actionsRepeater.count + property alias actions: actionsRepeater.model + property alias spacing: mainLayout.spacing + property int maring: 2 + + width: count > 0 ? (childrenRect.width + maring*2) : 0 + + useStyleTransparency: false + paletteRole: Platform.Theme.Text + radius: height/2 + alpha: 0.06 + + Row { + id: mainLayout + width: childrenRect.width + height: parent.height - maring*2 + x: root.maring; y: root.maring + spacing: 2 + + Repeater { + id: actionsRepeater + delegate: Component { + UkuiItems.Button { + width: height + height: parent.height + + ToolTip.delay: 500 + ToolTip.text: modelData.toolTip + ToolTip.visible: modelData.toolTip !== "" && containsMouse + + background.radius: width / 2 + background.alpha: modelData.checked ? 0.75 : containsMouse ? 0.4 : 0 + icon.source: modelData.icon + icon.mode: UkuiItems.Icon.AutoHighlight + + onClicked: { + // 执行action + modelData.trigger(); + } + Keys.onPressed: { + if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { + pluginSortButtonRoot.model.changeProvider(0); + } + } + } + } + } + } +} diff --git a/qml/AppUI/AppListHeader.qml b/qml/AppUI/AppListHeader.qml index 7877704..54bacac 100644 --- a/qml/AppUI/AppListHeader.qml +++ b/qml/AppUI/AppListHeader.qml @@ -45,53 +45,14 @@ Item { text: root.title === "" ? header.title : root.title } - UkuiItems.StyleBackground { - useStyleTransparency: false - paletteRole: Platform.Theme.Text - radius: height/2 - alpha: 0.06 - - Layout.preferredWidth: childrenRect.width + 10 - Layout.fillHeight: true + AppListActions { + Layout.preferredWidth: width + Layout.preferredHeight: 36 Layout.topMargin: 5 Layout.bottomMargin: 5 Layout.alignment: Qt.AlignVCenter - Row { - width: childrenRect.width - height: parent.height - 10 - x: 5; y: 5 - spacing: 5 - - Repeater { - model: header.actions - delegate: Component { - UkuiItems.Button { - width: height - height: parent.height - - ToolTip.delay: 500 - ToolTip.text: modelData.toolTip - ToolTip.visible: modelData.toolTip !== "" && containsMouse - - background.radius: width / 2 - background.alpha: modelData.checked ? 0.75 : containsMouse ? 0.4 : 0 - icon.source: modelData.icon - icon.mode: UkuiItems.Icon.AutoHighlight - - onClicked: { - // 执行action - modelData.trigger(); - } - Keys.onPressed: { - if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { - pluginSortButtonRoot.model.changeProvider(0); - } - } - } - } - } - } + actions: header.actions } } } diff --git a/qml/AppUI/FullScreenUI.qml b/qml/AppUI/FullScreenUI.qml index e048d9c..f551cf1 100644 --- a/qml/AppUI/FullScreenUI.qml +++ b/qml/AppUI/FullScreenUI.qml @@ -6,56 +6,130 @@ import org.ukui.menu.core 1.0 UkuiItems.StyleBackground { paletteRole: Platform.Theme.Dark + MouseArea { anchors.fill: parent onClicked: { - if (fullScreenContent.visible) { + if (mainContainer.visible) { //执行全屏退出操作 forceActiveFocus(); mainWindow.hide(); } else { - folderLoader.isFolderOpened = false; - fullScreenContent.visible = true; - fullScreenContent.isContentShow = true; + mainContainer.visible = true; } } } - ColumnLayout { + Item { + id: mainContainer anchors.fill: parent - anchors.leftMargin: 35 - anchors.rightMargin: 35 - FullScreenHeader { - id: fullScreenHeader - Layout.preferredHeight: 130 - Layout.fillWidth: true - Layout.maximumHeight: 130 - searchOpacity: fullScreenContent.isContentShow ? 1 : 0 + AppPageBackend { + id: appPageBackend } - Item { - Layout.fillHeight: true - Layout.fillWidth: true + // 两行三列 + GridLayout { + anchors.fill: parent + // anchors.margins: 36 + anchors.leftMargin: 36 + anchors.topMargin: 36 + anchors.rightMargin: 36 + anchors.bottomMargin: 5 - FullScreenContent { - id: fullScreenContent - anchors.fill: parent - Component.onCompleted: folderLoader.turnPageFinished.connect(contentShowFinished) - Component.onDestruction: folderLoader.turnPageFinished.disconnect(contentShowFinished) + rowSpacing: 5 + columnSpacing: 5 + rows: 2 + columns: 3 + + // 应用列表模式选择按钮: [row: 0, column: 0] [rowspan: 2, columnSpan: 1] + Item { + Layout.row: 0 + Layout.column: 0 + Layout.preferredWidth: Math.max(actionsItem.width, labelsItem.width) + Layout.preferredHeight: 40 + + // TODO: 设计最小保持宽度 + AppListActions { + id: actionsItem + anchors.centerIn: parent + height: parent.height + actions: appPageBackend.appModel.header.actions + visible: count > 0 + } } - Folder { - id: folderLoader - anchors.fill: parent - Component.onCompleted: fullScreenContent.openFolderSignal.connect(initFolder) - Component.onDestruction: fullScreenContent.openFolderSignal.disconnect(initFolder) - } - } + // 搜索框: [row: 0, column: 1] + Item { + Layout.row: 0 + Layout.column: 1 + Layout.fillWidth: true + Layout.preferredHeight: 40 - FullScreenFooter { - Layout.preferredHeight: 90 - Layout.fillWidth: true + SearchInputBar { + id: searchInputBar + width: 372; height: 36 + anchors.centerIn: parent + radius: Platform.Theme.minRadius + visible: opacity + + onTextChanged: { + if (text === "") { + appPageBackend.group = PluginGroup.Display; + } else { + appPageBackend.group = PluginGroup.Search; + appPageBackend.startSearch(text); + } + } + + Behavior on opacity { + NumberAnimation { duration: 300; easing.type: Easing.InOutCubic } + } + } + } + + // 右侧按钮区域: [row: 0, column: 2] [rowspan: 2, columnSpan: 1] + Sidebar { + Layout.row: 0 + Layout.column: 2 + Layout.rowSpan: 2 + Layout.columnSpan: 1 + Layout.preferredWidth: 60 + Layout.fillHeight: true + } + + // 左侧标签列表: [row: 1, column: 0] + Item { + Layout.row: 1 + Layout.column: 0 + Layout.preferredWidth: Math.max(actionsItem.width, labelsItem.width) + Layout.fillHeight: true + + Item { + id: labelsItem + anchors.centerIn: parent + width: 120 + height: parent.height + } + } + + // 应用列表: [row: 1, column: 1] + Item { + Layout.row: 1 + Layout.column: 1 + Layout.fillWidth: true + Layout.fillHeight: true + + AppList { + anchors.fill: parent + visible: true + model: appPageBackend.appModel + + view.onContentYChanged: { + // + } + } + } } } } diff --git a/qml/AppUI/Sidebar.qml b/qml/AppUI/Sidebar.qml index fd91a75..8deb81c 100644 --- a/qml/AppUI/Sidebar.qml +++ b/qml/AppUI/Sidebar.qml @@ -29,8 +29,6 @@ import org.ukui.quick.items 1.0 as UkuiItems Item { ColumnLayout { - id: sidebarLayout - anchors.fill: parent anchors.topMargin: 12 anchors.bottomMargin: 12 @@ -45,19 +43,29 @@ Item { Layout.alignment: Qt.AlignHCenter ToolTip.delay: 500 - ToolTip.text: qsTr("Expand") + ToolTip.text: mainWindow.isFullScreen ? qsTr("Contract") : qsTr("Expand") ToolTip.visible: containsMouse - onClicked: mainWindow.isFullScreen = true + onClicked: { + if (mainWindow.isFullScreen) { + mainWindow.exitFullScreen(); + } else { + mainWindow.isFullScreen = true; + } + } Keys.onPressed: { if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { - mainWindow.isFullScreen = true; + if (mainWindow.isFullScreen) { + mainWindow.exitFullScreen(); + } else { + mainWindow.isFullScreen = true; + } } } background.radius: Platform.Theme.minRadius - icon.mode: UkuiItems.Icon.AutoHighlight - icon.source: "view-fullscreen-symbolic" + icon.mode: mainWindow.isFullScreen ? UkuiItems.Icon.Highlight : UkuiItems.Icon.AutoHighlight + icon.source: mainWindow.isFullScreen ? "view-restore-symbolic" : "view-fullscreen-symbolic" } Item { diff --git a/qml/AppUI/qmldir b/qml/AppUI/qmldir index f84c91c..fced38d 100644 --- a/qml/AppUI/qmldir +++ b/qml/AppUI/qmldir @@ -7,6 +7,7 @@ NormalUI 1.0 NormalUI.qml FullScreenUI 1.0 FullScreenUI.qml AppListHeader 1.0 AppListHeader.qml AppListView 1.0 AppListView.qml +AppListActions 1.0 AppListActions.qml SearchInputBar 1.0 SearchInputBar.qml PluginSelectButton 1.0 PluginSelectButton.qml FullScreenHeader 1.0 FullScreenHeader.qml diff --git a/qml/qml.qrc b/qml/qml.qrc index 51fcad0..550b34b 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -13,6 +13,7 @@ AppUI/FullScreenContent.qml AppUI/FullScreenFooter.qml AppUI/AppListHeader.qml + AppUI/AppListActions.qml AppUI/SearchInputBar.qml AppUI/AppListView.qml AppControls2/qmldir