feat: new layout for 4.10.

This commit is contained in:
hewenfei 2023-11-28 16:58:37 +08:00
parent a44d551311
commit 936ee9db7c
9 changed files with 294 additions and 252 deletions

View File

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

View File

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

View File

@ -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 {
}
}
}

View File

@ -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;
}
}

View File

@ -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
}
}
}
}
}

182
qml/AppUI/WidgetPage.qml Normal file
View File

@ -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;
}
}
}

View File

@ -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

View File

@ -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>

View File

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