From 936ee9db7cf07f887c91f1aa043488519599e870 Mon Sep 17 00:00:00 2001 From: hewenfei Date: Tue, 28 Nov 2023 16:58:37 +0800 Subject: [PATCH] feat: new layout for 4.10. --- data/org.ukui.menu.settings.gschema.xml | 8 +- qml/AppUI/AppPage.qml | 7 +- qml/AppUI/FullScreenFooter.qml | 5 +- qml/AppUI/NormalUI.qml | 31 ++- qml/AppUI/Sidebar.qml | 309 ++++++------------------ qml/AppUI/WidgetPage.qml | 182 ++++++++++++++ qml/AppUI/qmldir | 1 + qml/qml.qrc | 1 + src/utils/power-button.cpp | 2 +- 9 files changed, 294 insertions(+), 252 deletions(-) create mode 100644 qml/AppUI/WidgetPage.qml diff --git a/data/org.ukui.menu.settings.gschema.xml b/data/org.ukui.menu.settings.gschema.xml index 8337317..a769dfb 100644 --- a/data/org.ukui.menu.settings.gschema.xml +++ b/data/org.ukui.menu.settings.gschema.xml @@ -7,14 +7,14 @@ Control the duration of animation - - 652 + + 842 width of ukui-menu Control the width of the ukui-menu - - 540 + + 688 height of ukui-menu Control the height of the ukui-menu diff --git a/qml/AppUI/AppPage.qml b/qml/AppUI/AppPage.qml index 6234cee..e41ac0b 100644 --- a/qml/AppUI/AppPage.qml +++ b/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 { - radius: 12 +Item { property alias header: appPageHeader property alias content: appPageContent ColumnLayout { anchors.fill: parent - anchors.topMargin: parent.radius + anchors.topMargin: 12 spacing: 0 AppPageHeader { diff --git a/qml/AppUI/FullScreenFooter.qml b/qml/AppUI/FullScreenFooter.qml index 6cc039c..962753b 100644 --- a/qml/AppUI/FullScreenFooter.qml +++ b/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 { } } } - diff --git a/qml/AppUI/NormalUI.qml b/qml/AppUI/NormalUI.qml index 87c355e..961ea0b 100644 --- a/qml/AppUI/NormalUI.qml +++ b/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; } } diff --git a/qml/AppUI/Sidebar.qml b/qml/AppUI/Sidebar.qml index 2d1ed21..6447fff 100644 --- a/qml/AppUI/Sidebar.qml +++ b/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,257 +32,94 @@ Item { anchors.fill: parent anchors.topMargin: 12 + anchors.bottomMargin: 12 spacing: 0 - property bool liteMode: isLiteMode - onLiteModeChanged: { - updateSidebarLayout(extensionInfoList.currentItem.extensionOptions) - } + MouseArea { + id: fullScreenbutton - function updateSidebarLayout(options) { - sidebarBottomBar.visible = !options.includes(MenuExtension.HideBottomBar); - fullScreenbutton.visible = !isLiteMode && !options.includes(MenuExtension.HideFullScreenButton); - } + Layout.preferredWidth: 36 + Layout.preferredHeight: 36 + Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - 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 - hoverEnabled: true - anchors.fill: parent - ToolTip.delay: 500 - ToolTip.text: qsTr("Expand") - ToolTip.visible: containsMouse - - onClicked: mainWindow.isFullScreen = true - activeFocusOnTab: true - Keys.onPressed: { - if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { - mainWindow.isFullScreen = true; - } - } - } - } - } - } - } - - 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; - } - } - } - } - - 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 - height: 24 - source: powerButtonBase.icon - } - - MouseArea { - id: powerButtonArea - anchors.fill: parent - hoverEnabled: true - ToolTip.delay: 500 - ToolTip.visible: containsMouse - ToolTip.text: powerButtonBase.toolTip - 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); - } - } - - onClicked: { - var buttonPosition = powerButtonArea.mapToGlobal(width, height); - powerButtonBase.clicked(mouse.button === Qt.LeftButton, buttonPosition.x + spacingFromMenu, buttonPosition.y + spacingFromMenu, mainWindow.isFullScreen); - } - } - } - } - } - } - - 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 + ToolTip.delay: 500 + ToolTip.text: qsTr("Expand") + ToolTip.visible: containsMouse + visible: !isLiteMode + hoverEnabled: true activeFocusOnTab: true - KeyNavigation.down: extensionLoader + + onClicked: mainWindow.isFullScreen = true 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}); + mainWindow.isFullScreen = true; } } - 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 { + UkuiItems.StyleBackground { anchors.fill: parent - onClicked: { - normalUI.focusToFalse(); - parent.ListView.view.currentIndex = model.index; - EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name}); + radius: 4 + useStyleTransparency: false + paletteRole: UkuiItems.Theme.Button + alpha: parent.containsPress ? 1 : parent.containsMouse ? 0.7 : 0 + borderColor: UkuiItems.Theme.Highlight + border.width: parent.activeFocus ? 2 : 0 + + ThemeIcon { + anchors.centerIn: parent + width: 16; height: 16 + source: "view-fullscreen-symbolic" } } } - } - Component.onCompleted: { - if (extensionInfoList.count > 0) { - extensionInfoList.currentIndex = 0; + MouseArea { + id: powerButton + Layout.preferredWidth: 36 + 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 + + Keys.onPressed: { + if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { + powerButtonBase.clicked(true, 0, 0, mainWindow.isFullScreen); + } + } + + onClicked: { + var buttonPosition = mapToGlobal(width, height); + powerButtonBase.clicked(mouse.button === Qt.LeftButton, buttonPosition.x + spacingFromMenu, buttonPosition.y + spacingFromMenu, mainWindow.isFullScreen); + } + + UkuiItems.StyleBackground { + anchors.fill: parent + paletteRole: UkuiItems.Theme.Button + useStyleTransparency: false + alpha: parent.containsPress ? 1 : parent.containsMouse ? 0.7 : 0 + radius: 4 + borderColor: UkuiItems.Theme.Highlight + border.width: parent.activeFocus ? 2 : 0 + + PowerButton { + id: powerButtonBase + } + + ThemeIcon { + anchors.centerIn: parent + width: 16 + height: 16 + source: powerButtonBase.icon + } + } } } } diff --git a/qml/AppUI/WidgetPage.qml b/qml/AppUI/WidgetPage.qml new file mode 100644 index 0000000..c41d31a --- /dev/null +++ b/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 . + * + */ + +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; + } + } +} diff --git a/qml/AppUI/qmldir b/qml/AppUI/qmldir index fc4fa7d..8d5cdc3 100644 --- a/qml/AppUI/qmldir +++ b/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 diff --git a/qml/qml.qrc b/qml/qml.qrc index 5210279..e4c421e 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -7,6 +7,7 @@ AppUI/FullScreenUI.qml AppUI/AppPage.qml AppUI/Sidebar.qml + AppUI/WidgetPage.qml AppUI/AppList.qml AppUI/FullScreenHeader.qml AppUI/FullScreenContent.qml diff --git a/src/utils/power-button.cpp b/src/utils/power-button.cpp index dbde67a..0f6df04 100644 --- a/src/utils/power-button.cpp +++ b/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()