openkylin
/
ukui-menu
mirror of https://gitee.com/openkylin/ukui-menu.git
9
0
Fork 1
Code Issues Projects Releases Wiki Activity

ui: 修改全屏模式布局

This commit is contained in:
hewenfei 2024-01-09 07:31:27 +08:00
parent 35041e83ee
commit dacc9d4608
8 changed files with 208 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
qml/AppControls2/LabelItem.qml
View File

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

2
qml/AppUI/AppList.qml
View File

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

74
qml/AppUI/AppListActions.qml Normal file
View File

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

47
qml/AppUI/AppListHeader.qml
View File

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

140
qml/AppUI/FullScreenUI.qml
View File

@ -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)
}
}
FullScreenFooter {
Layout.preferredHeight: 90
Layout.fillWidth: true
view.onContentYChanged: {
//
}
}
}
}
}
}

20
qml/AppUI/Sidebar.qml
View File

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

1
qml/AppUI/qmldir
View File

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

1
qml/qml.qrc
View File

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