feat: new layout for 4.10.

data/org.ukui.menu.settings.gschema.xml

@@ -7,14 +7,14 @@
       <description>Control the duration of animation</description>
     </key>
     <key type="i" name="width">
-      <range min="600" max="700"/>
+      <range min="680" max="900"/>
-      <default>652</default>
+      <default>842</default>
       <summary>width of ukui-menu</summary>
       <description>Control the width of the ukui-menu</description>
     </key>
     <key type="i" name="height">
-      <range min="500" max="600"/>
+      <range min="580" max="700"/>
-      <default>540</default>
+      <default>688</default>
       <summary>height of ukui-menu</summary>
       <description>Control the height of the ukui-menu</description>
     </key>

qml/AppUI/AppPage.qml

@@ -18,18 +18,15 @@
 
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.12
-import AppControls2 1.0 as AppControls2
 import org.ukui.menu.core 1.0
 
-AppControls2.StyleBackground {
+Item {
-    radius: 12
     property alias header: appPageHeader
     property alias content: appPageContent
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.topMargin: parent.radius
+        anchors.topMargin: 12
         spacing: 0
 
         AppPageHeader {

qml/AppUI/FullScreenFooter.qml

@@ -42,10 +42,12 @@ Row {
             id: powerButtonBase
         }
 
-        Image {
+        ThemeIcon {
             anchors.centerIn: parent
             width: Math.floor(parent.width / 2)
             height: width
+            highLight: true
+            autoHighLight: false
             source: powerButtonBase.icon
         }
 
@@ -72,4 +74,3 @@ Row {
         }
     }
 }
-

qml/AppUI/NormalUI.qml

@@ -1,8 +1,8 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.0 as QQC2
-import AppControls2 1.0 as AppControls2
 import org.ukui.menu.core 1.0
 
+import org.ukui.quick.items 1.0 as UkuiItems
+
 FocusScope {
     id: normalUI
     anchors.fill: parent
@@ -28,12 +28,35 @@ FocusScope {
         anchors.fill: parent;
         AppPage {
             id: appPage
-            width: 300
+            width: 312
             height: parent.height;
         }
 
+        UkuiItems.StyleBackground {
+            width: 1
+            height: parent.height
+
+            paletteRole: UkuiItems.Theme.ButtonText
+            useStyleTransparency: false
+            alpha: 0.05
+        }
+
+        WidgetPage {
+            width: parent.width - 370;
+            height: parent.height;
+        }
+
+        UkuiItems.StyleBackground {
+            width: 1
+            height: parent.height
+
+            paletteRole: UkuiItems.Theme.ButtonText
+            useStyleTransparency: false
+            alpha: 0.05
+        }
+
         Sidebar {
-            width: parent.width - 300;
+            width: 60;
             height: parent.height;
         }
     }

qml/AppUI/Sidebar.qml

@@ -21,10 +21,10 @@ import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.5
 
-import AppControls2 1.0 as AppControls2
 import org.ukui.menu.core 1.0
 import org.ukui.menu.utils 1.0
 import org.ukui.menu.extension 1.0
+import org.ukui.quick.items 1.0 as UkuiItems
 
 Item {
     ColumnLayout {
@@ -32,179 +32,63 @@ Item {
 
         anchors.fill: parent
         anchors.topMargin: 12
+        anchors.bottomMargin: 12
         spacing: 0
 
-        property bool liteMode: isLiteMode
-        onLiteModeChanged: {
-            updateSidebarLayout(extensionInfoList.currentItem.extensionOptions)
-        }
-
-        function updateSidebarLayout(options) {
-            sidebarBottomBar.visible = !options.includes(MenuExtension.HideBottomBar);
-            fullScreenbutton.visible = !isLiteMode && !options.includes(MenuExtension.HideFullScreenButton);
-        }
-
-        Item {
-            id: sidebarTopBar
-            Layout.fillWidth: true
-            Layout.preferredHeight: 40
-            Layout.rightMargin: 12
-            Layout.leftMargin: 12
-
-            RowLayout {
-                anchors.fill: parent
-                spacing: 4
-
-                ListView {
-                    id: extensionInfoList
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                    Layout.leftMargin: 4
-                    Layout.rightMargin: 4
-
-                    clip: true
-                    spacing: 24
-                    interactive: false
-                    orientation: ListView.Horizontal
-                    model: extensionManager.extensionModel()
-                    delegate: extensionInfoDelegate
-
-                    function send(data) {
-                        if (currentItem !== null) {
-                            model.send(currentIndex, data);
-                        }
-                    }
-
-                    onCurrentIndexChanged: {
-                        if (currentItem !== null) {
-                            currentItem.select();
-                        }
-                    }
-                }
-
-                Loader {
-                    id: extensionMenuLoader
-                    visible: sourceComponent !== undefined
-                    Layout.preferredWidth: 34
-                    Layout.preferredHeight: 34
-                    Layout.alignment: Qt.AlignVCenter
-                }
-
-                AppControls2.StyleBackground {
-                    id: fullScreenbutton
-                    Layout.preferredWidth: 34
-                    Layout.preferredHeight: 34
-                    Layout.alignment: Qt.AlignVCenter
-
-                    radius: 4
-                    useStyleTransparent: false
-                    alpha: buttonMouseArea.containsPress ? 0.65 : buttonMouseArea.containsMouse ? 0.40 : 0.00
-                    borderColor: Palette.Highlight
-                    border.width: buttonMouseArea.activeFocus ? 2 : 0
-                    ThemeIcon {
-                        anchors.centerIn: parent
-                        width: 16; height: 16
-                        source: "image://appicon/view-fullscreen-symbolic"
         MouseArea {
-                            id: buttonMouseArea
+            id: fullScreenbutton
-                            hoverEnabled: true
+
-                            anchors.fill: parent
+            Layout.preferredWidth: 36
+            Layout.preferredHeight: 36
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
             ToolTip.delay: 500
             ToolTip.text: qsTr("Expand")
             ToolTip.visible: containsMouse
 
-                            onClicked: mainWindow.isFullScreen = true
+            visible: !isLiteMode
+            hoverEnabled: true
             activeFocusOnTab: true
+
+            onClicked: mainWindow.isFullScreen = true
             Keys.onPressed: {
                 if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
                     mainWindow.isFullScreen = true;
                 }
             }
-                        }
-                    }
-                }
-            }
-        }
 
-        Item {
+            UkuiItems.StyleBackground {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            Loader {
-                id: extensionLoader
                 anchors.fill: parent
-                clip: true
+                radius: 4
-                onLoaded: {
+                useStyleTransparency: false
-                    item.send.connect(extensionInfoList.send);
+                paletteRole: UkuiItems.Theme.Button
-                    sidebarLayout.updateSidebarLayout(extensionInfoList.currentItem.extensionOptions);
+                alpha: parent.containsPress ? 1 : parent.containsMouse ? 0.7 : 0
-                    updateMenu();
+                borderColor: UkuiItems.Theme.Highlight
-                    item.extensionMenuChanged.connect(updateMenu);
+                border.width: parent.activeFocus ? 2 : 0
-                }
-                Keys.onTabPressed: {
-                    extensionInfoList.focus = true
-                }
 
-                function updateMenu() {
+                ThemeIcon {
-                    if (item === null) {
-                        return;
-                    }
-                    if (item.extensionMenu !== null) {
-                        extensionMenuLoader.sourceComponent = item.extensionMenu;
-                    } else {
-                        extensionMenuLoader.sourceComponent = undefined;
-                    }
-                }
-            }
-        }
-
-        Item {
-            id: sidebarBottomBar
-            Layout.fillWidth: true
-            Layout.preferredHeight: 32
-            Layout.topMargin: 5
-            Layout.bottomMargin: 8
-            Layout.leftMargin: 12
-            Layout.rightMargin: 12
-
-            RowLayout {
-                anchors.fill: parent
-                layoutDirection: Qt.RightToLeft
-                spacing: 5
-
-                AppControls2.StyleBackground {
-                    Layout.preferredWidth: 32
-                    Layout.preferredHeight: 32
-                    Layout.alignment: Qt.AlignVCenter
-
-                    paletteRole: Palette.Base
-                    useStyleTransparent: false
-                    alpha: powerButtonArea.containsPress ? 0.85 : powerButtonArea.containsMouse ? 0.65 : 0
-                    radius: height / 2
-                    borderColor: Palette.Highlight
-                    border.width: powerButtonArea.activeFocus ? 2 : 0
-                    PowerButton {
-                        id: powerButtonBase
-                    }
-
-                    Image {
                     anchors.centerIn: parent
-                        width: 24
+                    width: 16; height: 16
-                        height: 24
+                    source: "view-fullscreen-symbolic"
-                        source: powerButtonBase.icon
+                }
+            }
         }
 
         MouseArea {
-                        id: powerButtonArea
+            id: powerButton
-                        anchors.fill: parent
+            Layout.preferredWidth: 36
-                        hoverEnabled: true
+            Layout.preferredHeight: 36
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+
             ToolTip.delay: 500
             ToolTip.visible: containsMouse
             ToolTip.text: powerButtonBase.toolTip
+
+            hoverEnabled: true
+            activeFocusOnTab: true
             acceptedButtons: Qt.LeftButton | Qt.RightButton
             property int spacingFromMenu: 16
 
-                        activeFocusOnTab: true
             Keys.onPressed: {
                 if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
                     powerButtonBase.clicked(true, 0, 0, mainWindow.isFullScreen);
@@ -212,77 +96,30 @@ Item {
             }
 
             onClicked: {
-                            var buttonPosition = powerButtonArea.mapToGlobal(width, height);
+                var buttonPosition = mapToGlobal(width, height);
                 powerButtonBase.clicked(mouse.button === Qt.LeftButton, buttonPosition.x + spacingFromMenu, buttonPosition.y + spacingFromMenu, mainWindow.isFullScreen);
             }
-                    }
-                }
-            }
-        }
-    }
 
-    Component {
+            UkuiItems.StyleBackground {
-        id: extensionInfoDelegate
-
-        AppControls2.StyleBackground {
-            useStyleTransparent: false
-            paletteRole: Palette.Highlight
-            alpha: 0
-            radius: 4
-            borderColor: Palette.Highlight
-            border.width: activeFocus ? 2 : 0
-
-            property var extensionData: model.data
-            property var extensionOptions: model.options
-            width: styleText.width
-            height: ListView.view ? ListView.view.height : 0
-
-            activeFocusOnTab: true
-            KeyNavigation.down: extensionLoader
-            Keys.onPressed: {
-                if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
-                    ListView.view.currentIndex = model.index;
-                    EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
-                }
-            }
-
-            onExtensionDataChanged: {
-                if (extensionLoader.source === model.url) {
-                    extensionLoader.item.extensionData = extensionData;
-                }
-            }
-
-            function select() {
-                if (extensionLoader.source !== model.url) {
-                    extensionLoader.setSource(model.url, {extensionData: extensionData});
-                }
-            }
-
-            AppControls2.StyleText {
-                height: parent.height
-                id: styleText
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-                font.bold: parent.ListView.isCurrentItem
-
-                paletteRole: parent.ListView.isCurrentItem ? Palette.Highlight: Palette.Text
-                text: model.name
-            }
-
-            MouseArea {
                 anchors.fill: parent
-                onClicked: {
+                paletteRole: UkuiItems.Theme.Button
-                    normalUI.focusToFalse();
+                useStyleTransparency: false
-                    parent.ListView.view.currentIndex = model.index;
+                alpha: parent.containsPress ? 1 : parent.containsMouse ? 0.7 : 0
-                    EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
+                radius: 4
-                }
+                borderColor: UkuiItems.Theme.Highlight
-            }
+                border.width: parent.activeFocus ? 2 : 0
-        }
+
+                PowerButton {
+                    id: powerButtonBase
                 }
 
-    Component.onCompleted: {
+                ThemeIcon {
-        if (extensionInfoList.count > 0) {
+                    anchors.centerIn: parent
-            extensionInfoList.currentIndex = 0;
+                    width: 16
+                    height: 16
+                    source: powerButtonBase.icon
+                }
+            }
         }
     }
 }

qml/AppUI/WidgetPage.qml

@@ -0,0 +1,182 @@
+/*
+ * 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 QtQml 2.12
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.5
+
+import AppControls2 1.0 as AppControls2
+import org.ukui.menu.core 1.0
+import org.ukui.menu.utils 1.0
+import org.ukui.menu.extension 1.0
+
+Item {
+    ColumnLayout {
+        id: sidebarLayout
+
+        anchors.fill: parent
+        anchors.topMargin: 12
+        spacing: 0
+
+        Item {
+            id: sidebarTopBar
+            Layout.fillWidth: true
+            Layout.preferredHeight: 40
+            Layout.rightMargin: 12
+            Layout.leftMargin: 12
+
+            RowLayout {
+                anchors.fill: parent
+                spacing: 4
+
+                ListView {
+                    id: extensionInfoList
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.leftMargin: 4
+                    Layout.rightMargin: 4
+
+                    clip: true
+                    spacing: 24
+                    interactive: false
+                    orientation: ListView.Horizontal
+                    model: extensionManager.extensionModel()
+                    delegate: extensionInfoDelegate
+
+                    function send(data) {
+                        if (currentItem !== null) {
+                            model.send(currentIndex, data);
+                        }
+                    }
+
+                    onCurrentIndexChanged: {
+                        if (currentItem !== null) {
+                            currentItem.select();
+                        }
+                    }
+                }
+
+                Loader {
+                    id: extensionMenuLoader
+                    visible: sourceComponent !== undefined
+                    Layout.preferredWidth: 34
+                    Layout.preferredHeight: 34
+                    Layout.alignment: Qt.AlignVCenter
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Loader {
+                id: extensionLoader
+                anchors.fill: parent
+                clip: true
+                onLoaded: {
+                    item.send.connect(extensionInfoList.send);
+                    // sidebarLayout.updateSidebarLayout(extensionInfoList.currentItem.extensionOptions);
+                    updateMenu();
+                    item.extensionMenuChanged.connect(updateMenu);
+                }
+                Keys.onTabPressed: {
+                    extensionInfoList.focus = true
+                }
+
+                function updateMenu() {
+                    if (item === null) {
+                        return;
+                    }
+                    if (item.extensionMenu !== null) {
+                        extensionMenuLoader.sourceComponent = item.extensionMenu;
+                    } else {
+                        extensionMenuLoader.sourceComponent = undefined;
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: extensionInfoDelegate
+
+        AppControls2.StyleBackground {
+            useStyleTransparent: false
+            paletteRole: Palette.Highlight
+            alpha: 0
+            radius: 4
+            borderColor: Palette.Highlight
+            border.width: activeFocus ? 2 : 0
+
+            property var extensionData: model.data
+            property var extensionOptions: model.options
+            width: styleText.width
+            height: ListView.view ? ListView.view.height : 0
+
+            activeFocusOnTab: true
+            KeyNavigation.down: extensionLoader
+            Keys.onPressed: {
+                if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
+                    ListView.view.currentIndex = model.index;
+                    EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
+                }
+            }
+
+            onExtensionDataChanged: {
+                if (extensionLoader.source === model.url) {
+                    extensionLoader.item.extensionData = extensionData;
+                }
+            }
+
+            function select() {
+                if (extensionLoader.source !== model.url) {
+                    extensionLoader.setSource(model.url, {extensionData: extensionData});
+                }
+            }
+
+            AppControls2.StyleText {
+                height: parent.height
+                id: styleText
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                font.bold: parent.ListView.isCurrentItem
+
+                paletteRole: parent.ListView.isCurrentItem ? Palette.Highlight: Palette.Text
+                text: model.name
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    normalUI.focusToFalse();
+                    parent.ListView.view.currentIndex = model.index;
+                    EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if (extensionInfoList.count > 0) {
+            extensionInfoList.currentIndex = 0;
+        }
+    }
+}

qml/AppUI/qmldir

@@ -2,6 +2,7 @@ module AppUI
 AppPage 1.0 AppPage.qml
 AppList 1.0 AppList.qml
 Sidebar 1.0 Sidebar.qml
+WidgetPage 1.0 WidgetPage.qml
 NormalUI 1.0 NormalUI.qml
 FullScreenUI 1.0 FullScreenUI.qml
 AppPageHeader 1.0 AppPageHeader.qml

qml/qml.qrc

@@ -7,6 +7,7 @@
         <file>AppUI/FullScreenUI.qml</file>
         <file>AppUI/AppPage.qml</file>
         <file>AppUI/Sidebar.qml</file>
+        <file>AppUI/WidgetPage.qml</file>
         <file>AppUI/AppList.qml</file>
         <file>AppUI/FullScreenHeader.qml</file>
         <file>AppUI/FullScreenContent.qml</file>

src/utils/power-button.cpp

@@ -43,7 +43,7 @@ PowerButton::~PowerButton()
 
 QString PowerButton::getIcon()
 {
-    return {KYLIN_POWER_NORMAL_PATH_MAJOR};
+    return "exit-symbolic";
 }
 
 QString PowerButton::getToolTip()