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

封装listview和滚动条,简化各Item功能

This commit is contained in:
hewenfei 2023-03-31 16:08:10 +08:00
parent fd8d7ed2d6
commit 8f40eb3af1
8 changed files with 185 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
qml/AppControls2/AppItem.qml
View File

@ -3,35 +3,25 @@ import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5 import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0 import org.ukui.menu.core 1.0
StyleBackground { MouseArea {
radius: 4 id: control
useStyleTransparent: false hoverEnabled: true
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.visible: content.textTruncated && control.containsMouse
ToolTip.text: name
IconLabel { StyleBackground {
id: content
anchors.fill: parent anchors.fill: parent
iconHeight: 32; iconWidth: iconHeight radius: 4
appName: name; appIcon: icon useStyleTransparent: false
display: Display.TextBesideIcon alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
spacing: 12 ToolTip.visible: content.textTruncated && control.containsMouse
} ToolTip.text: name
MouseArea {
id: control
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: { IconLabel {
if (mouse.button === Qt.RightButton) { id: content
appListView.model.openMenu(index); anchors.fill: parent
return iconHeight: 32; iconWidth: iconHeight
} appName: name; appIcon: icon
if (mouse.button === Qt.LeftButton) { display: Display.TextBesideIcon
appListView.model.appClicked(index); spacing: 12
}
} }
} }
} }

42
qml/AppControls2/FolderItem.qml
View File

@ -3,35 +3,25 @@ import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5 import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0 import org.ukui.menu.core 1.0
StyleBackground { MouseArea {
radius: 4 id: control
useStyleTransparent: false hoverEnabled: true
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.visible: content.textTruncated && control.containsMouse
ToolTip.text: name
IconLabel { StyleBackground {
id: content
anchors.fill: parent anchors.fill: parent
iconHeight: 32; iconWidth: iconHeight radius: 4
appName: name; appIcon: icon useStyleTransparent: false
display: Display.TextBesideIcon alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
spacing: 12 ToolTip.visible: content.textTruncated && control.containsMouse
} ToolTip.text: name
MouseArea {
id: control
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: { IconLabel {
if (mouse.button === Qt.RightButton) { id: content
appListView.model.openMenu(index); anchors.fill: parent
return iconHeight: 32; iconWidth: iconHeight
} appName: name; appIcon: icon
if (mouse.button === Qt.LeftButton) { display: Display.TextBesideIcon
appListView.model.appClicked(index); spacing: 12
}
} }
} }
} }

58
qml/AppControls2/LabelItem.qml
View File

@ -2,42 +2,40 @@ import QtQuick 2.0
import QtQuick.Layouts 1.12 import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5 import QtQuick.Controls 2.5
StyleBackground { MouseArea {
radius: 4 id: control
useStyleTransparent: false hoverEnabled: true
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.text: qsTr("Open the label selection interface") ToolTip.text: qsTr("Open the label selection interface")
ToolTip.visible: control.containsMouse ToolTip.visible: control.containsMouse
RowLayout { StyleBackground {
anchors.fill: parent anchors.fill: parent
StyleText { radius: 4
Layout.preferredHeight: parent.height useStyleTransparent: false
Layout.preferredWidth: contentWidth alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
Layout.leftMargin: 12
horizontalAlignment: Qt.AlignLeft RowLayout {
verticalAlignment: Qt.AlignVCenter anchors.fill: parent
font.pixelSize: 14 StyleText {
font.bold: true Layout.preferredHeight: parent.height
text: name Layout.preferredWidth: contentWidth
} Layout.leftMargin: 12
Image { horizontalAlignment: Qt.AlignLeft
visible: control.containsMouse verticalAlignment: Qt.AlignVCenter
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter font.pixelSize: 14
Layout.preferredWidth: 24 font.bold: true
Layout.preferredHeight: 24 text: name
Layout.rightMargin: 16 }
source: "image://appicon/open-menu-symbolic"
} Image {
} visible: control.containsMouse
MouseArea { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
id: control Layout.preferredWidth: 24
hoverEnabled: true Layout.preferredHeight: 24
anchors.fill: parent Layout.rightMargin: 16
onClicked: { source: "image://appicon/open-menu-symbolic"
appList.labelItemClicked(); }
} }
} }
} }

112
qml/AppUI/AppList.qml
View File

@ -25,85 +25,79 @@ import org.ukui.menu.core 1.0
Item { Item {
property string title: "" property string title: ""
signal labelItemClicked()
signal openFolderPageSignal(string folderId, string folderName);
function labelSelection(labelId) { function labelSelection(labelId) {
appListView.positionViewAtIndex(appListView.model.getLabelIndex(labelId), ListView.Beginning) appListView.view.positionViewAtIndex(appListView.model.getLabelIndex(labelId), ListView.Beginning)
} }
MouseArea { AppListView {
id: appListArea id: appListView
hoverEnabled: true
anchors.fill: parent anchors.fill: parent
model: modelManager.getAppModel()
AppControls2.StyleBackground { delegate: Component {
anchors.top: parent.top Loader {
width: parent.width; height: 1 width: ListView.view ? ListView.view.width : 0
useStyleTransparent: false height: 40
alpha: 0.15 property int index: model.index
paletteRole: Palette.Text property int type: model.type
visible: appListView.contentY > 0 property string id: model.id
} property string name: model.name
property string icon: model.icon
RowLayout { sourceComponent: {
anchors.fill: parent if (type === DataType.Normal) {
spacing: 0 return appItem;
anchors.leftMargin: 4 }
if (type === DataType.Folder) {
ListView { return folderItem;
id: appListView }
spacing: 4 if (type === DataType.Label) {
Layout.fillHeight: true return labelItem;
Layout.fillWidth: true
ScrollBar.vertical: appListScrollBar
highlightMoveDuration: 0
boundsBehavior: Flickable.StopAtBounds
model: modelManager.getAppModel()
delegate: Component {
Loader {
width: ListView.view ? ListView.view.width : 0
height: 40
property int index: model.index
property int type: model.type
property string name: model.name
property string icon: model.icon
sourceComponent: {
if (type === DataType.Normal) {
return appItem;
}
if (type === DataType.Folder) {
return folderItem;
}
if (type === DataType.Label) {
return labelItem;
}
}
} }
} }
} }
AppControls2.ScrollBar {
id: appListScrollBar
Layout.fillHeight: true
Layout.preferredWidth: 14
visual: appListArea.containsMouse
}
} }
} }
Component { Component {
id: appItem id: appItem
AppControls2.AppItem {} AppControls2.AppItem {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) {
appListView.model.openMenu(index);
return;
}
if (mouse.button === Qt.LeftButton) {
appManager.launchApp(id);
return;
}
}
}
} }
Component { Component {
id: labelItem id: labelItem
AppControls2.LabelItem {} AppControls2.LabelItem {
onClicked: labelItemClicked();
}
} }
Component { Component {
id: folderItem id: folderItem
AppControls2.FolderItem {} AppControls2.FolderItem {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) {
appListView.model.openMenu(index);
return;
}
if (mouse.button === Qt.LeftButton) {
openFolderPageSignal(id, name);
return;
}
}
}
} }
} }

69
qml/AppUI/AppListView.qml Normal file
View File

@ -0,0 +1,69 @@
/*
* 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 QtQuick.Layouts 1.12
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0
MouseArea {
id: root
readonly property alias view: listView
property alias model: listView.model
property alias delegate: listView.delegate
hoverEnabled: true
clip: true
AppControls2.StyleBackground {
anchors.top: parent.top
width: parent.width
height: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
visible: listView.contentY > 0
}
RowLayout {
anchors.fill: parent
spacing: 0
anchors.leftMargin: 4
ListView {
id: listView
spacing: 4
Layout.fillHeight: true
Layout.fillWidth: true
highlightMoveDuration: 0
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: listViewScrollBar
}
AppControls2.ScrollBar {
id: listViewScrollBar
Layout.fillHeight: true
Layout.preferredWidth: 14
visual: root.containsMouse
}
}
}

2
qml/AppUI/AppPageContent.qml
View File

@ -28,7 +28,7 @@ Item {
clip: true clip: true
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 4 anchors.leftMargin: 4
function labelItemClicked() { onLabelItemClicked: {
appList.visible = false; appList.visible = false;
selectionPage.viewShowStart(); selectionPage.viewShowStart();
} }

1
qml/AppUI/qmldir
View File

@ -5,6 +5,7 @@ Sidebar 1.0 Sidebar.qml
NormalUI 1.0 NormalUI.qml NormalUI 1.0 NormalUI.qml
FullScreenUI 1.0 FullScreenUI.qml FullScreenUI 1.0 FullScreenUI.qml
AppPageHeader 1.0 AppPageHeader.qml AppPageHeader 1.0 AppPageHeader.qml
AppListView 1.0 AppListView.qml
SearchInputBar 1.0 SearchInputBar.qml SearchInputBar 1.0 SearchInputBar.qml
PluginSelectMenu 1.0 PluginSelectMenu.qml PluginSelectMenu 1.0 PluginSelectMenu.qml
FullScreenHeader 1.0 FullScreenHeader.qml FullScreenHeader 1.0 FullScreenHeader.qml

1
qml/qml.qrc
View File

@ -15,6 +15,7 @@
<file>AppUI/FullScreenFooter.qml</file> <file>AppUI/FullScreenFooter.qml</file>
<file>AppUI/AppPageHeader.qml</file> <file>AppUI/AppPageHeader.qml</file>
<file>AppUI/SearchInputBar.qml</file> <file>AppUI/SearchInputBar.qml</file>
<file>AppUI/AppListView.qml</file>
<file>AppControls2/qmldir</file> <file>AppControls2/qmldir</file>
<file>AppControls2/App.qml</file> <file>AppControls2/App.qml</file>
<file>AppControls2/ScrollBar.qml</file> <file>AppControls2/ScrollBar.qml</file>