ui: 修改全屏模式布局

2024-01-09 07:31:27 +08:00 · 2024-01-09 07:31:27 +08:00 · dacc9d4608
parent 35041e83ee
commit dacc9d4608
8 changed files with 208 additions and 85 deletions
--- 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"
            }
        }
    }
--- 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: {
--- a/qml/AppUI/AppListActions.qml
+++ 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 <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);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- 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
        }
    }
 }
--- 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 {
-        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 {
-                id: fullScreenContent
+                AppList {
                    anchors.fill: parent
-                Component.onCompleted: folderLoader.turnPageFinished.connect(contentShowFinished)
-                Component.onDestruction: folderLoader.turnPageFinished.disconnect(contentShowFinished)
-            }
+                    visible: true
+                    model: appPageBackend.appModel

-            Folder {
-                id: folderLoader
-                anchors.fill: parent
-                Component.onCompleted: fullScreenContent.openFolderSignal.connect(initFolder)
-                Component.onDestruction: fullScreenContent.openFolderSignal.disconnect(initFolder)
+                    view.onContentYChanged: {
+                        //
+                    }
                }
            }
-
-        FullScreenFooter {
-            Layout.preferredHeight: 90
-            Layout.fillWidth: true
        }
    }
 }
--- 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) {
+                    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 {
--- 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
--- a/qml/qml.qrc
+++ b/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>