ui: 修改全屏模式布局

qml/AppControls2/LabelItem.qml

@@ -23,23 +23,25 @@ MouseArea {
         RowLayout {
             anchors.fill: parent
             UkuiItems.StyleText {
-                Layout.preferredHeight:  parent.height
+                Layout.fillWidth: true
-                Layout.preferredWidth: contentWidth
+                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"
             }
         }
     }

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: {

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 <https://www.gnu.org/licenses/>.
+ *
+ */
+
+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);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

qml/AppUI/AppListHeader.qml

@@ -45,53 +45,14 @@ Item {
             text: root.title === "" ? header.title : root.title
         }
 
-        UkuiItems.StyleBackground {
+        AppListActions {
-            useStyleTransparency: false
+            Layout.preferredWidth: width
-            paletteRole: Platform.Theme.Text
+            Layout.preferredHeight: 36
-            radius: height/2
-            alpha: 0.06
-
-            Layout.preferredWidth: childrenRect.width + 10
-            Layout.fillHeight: true
             Layout.topMargin: 5
             Layout.bottomMargin: 5
             Layout.alignment: Qt.AlignVCenter
 
-            Row {
+            actions: header.actions
-                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);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
         }
     }
 }

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;
+                mainContainer.visible = true;
-                fullScreenContent.visible = true;
-                fullScreenContent.isContentShow = true;
             }
         }
     }
 
-    ColumnLayout {
-        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
-        }
-
     Item {
+        id: mainContainer
+        anchors.fill: parent
+
+        AppPageBackend {
+            id: appPageBackend
+        }
+
+        // 两行三列
+        GridLayout {
+            anchors.fill: parent
+            // anchors.margins: 36
+            anchors.leftMargin: 36
+            anchors.topMargin: 36
+            anchors.rightMargin: 36
+            anchors.bottomMargin: 5
+
+            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
+                }
+            }
+
+            // 搜索框: [row: 0, column: 1]
+            Item {
+                Layout.row: 0
+                Layout.column: 1
+                Layout.fillWidth: true
+                Layout.preferredHeight: 40
+
+                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
 
-            FullScreenContent {
+                AppList {
-                id: fullScreenContent
                     anchors.fill: parent
-                Component.onCompleted: folderLoader.turnPageFinished.connect(contentShowFinished)
+                    visible: true
-                Component.onDestruction: folderLoader.turnPageFinished.disconnect(contentShowFinished)
+                    model: appPageBackend.appModel
-            }
 
-            Folder {
+                    view.onContentYChanged: {
-                id: folderLoader
+                        //
-                anchors.fill: parent
+                    }
-                Component.onCompleted: fullScreenContent.openFolderSignal.connect(initFolder)
+                }
-                Component.onDestruction: fullScreenContent.openFolderSignal.disconnect(initFolder)
+            }
-            }
-        }
-
-        FullScreenFooter {
-            Layout.preferredHeight: 90
-            Layout.fillWidth: true
         }
     }
 }

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) {
+                    if (mainWindow.isFullScreen) {
+                        mainWindow.exitFullScreen();
+                    } else {
                         mainWindow.isFullScreen = true;
                     }
                 }
+            }
 
             background.radius: Platform.Theme.minRadius
-            icon.mode: UkuiItems.Icon.AutoHighlight
+            icon.mode: mainWindow.isFullScreen ? UkuiItems.Icon.Highlight : UkuiItems.Icon.AutoHighlight
-            icon.source: "view-fullscreen-symbolic"
+            icon.source: mainWindow.isFullScreen ? "view-restore-symbolic" : "view-fullscreen-symbolic"
         }
 
         Item {

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

qml/qml.qrc

@@ -13,6 +13,7 @@
         <file>AppUI/FullScreenContent.qml</file>
         <file>AppUI/FullScreenFooter.qml</file>
         <file>AppUI/AppListHeader.qml</file>
+        <file>AppUI/AppListActions.qml</file>
         <file>AppUI/SearchInputBar.qml</file>
         <file>AppUI/AppListView.qml</file>
         <file>AppControls2/qmldir</file>