378 lines
14 KiB
QML
378 lines
14 KiB
QML
/*
|
|
* 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.Layouts 1.12
|
|
import QtQml.Models 2.12
|
|
import QtQuick.Controls 2.5
|
|
import org.ukui.menu.core 1.0
|
|
import AppControls2 1.0 as AppControls2
|
|
|
|
RowLayout {
|
|
clip: true
|
|
|
|
Item {
|
|
Layout.preferredWidth: 145
|
|
Layout.fillHeight: true
|
|
Layout.leftMargin: 15
|
|
|
|
ListView {
|
|
id: labelListView
|
|
signal labelClicked(string labelId)
|
|
property int maxLabelWidth: count < 20 ? width : 30
|
|
|
|
anchors.centerIn: parent
|
|
width: parent.width
|
|
height: contentHeight > parent.height ? parent.height : contentHeight
|
|
interactive: contentHeight > parent.height
|
|
spacing: 5
|
|
|
|
highlightMoveDuration: 300
|
|
highlight: AppControls2.StyleBackground {
|
|
width: labelListView.maxLabelWidth; height: 30
|
|
radius: 4
|
|
useStyleTransparent: false
|
|
paletteRole: Palette.Light
|
|
border.width: 1
|
|
alpha: 0.18; borderAlpha: 0.7
|
|
borderColor: Palette.HighlightedText
|
|
}
|
|
onCountChanged: currentIndex = 0
|
|
|
|
model: DelegateModel {
|
|
groups: DelegateModelGroup {
|
|
name: "disabledItem"
|
|
includeByDefault: false
|
|
}
|
|
|
|
items.onChanged: {
|
|
for (let i = 0; i < items.count;) {
|
|
let item = items.get(i);
|
|
if (item.model.isDisable) {
|
|
items.setGroups(i, 1, "disabledItem");
|
|
continue;
|
|
}
|
|
++i;
|
|
}
|
|
}
|
|
|
|
model: modelManager.getLabelModel()
|
|
delegate: MouseArea {
|
|
id: labelMouseArea
|
|
width: labelListView.maxLabelWidth
|
|
height: 30
|
|
hoverEnabled: true
|
|
AppControls2.StyleText {
|
|
anchors.fill: parent
|
|
paletteRole: Palette.HighlightedText
|
|
elide: Text.ElideRight
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: model.displayName
|
|
}
|
|
onClicked: {
|
|
labelListView.currentIndex = DelegateModel.itemsIndex;
|
|
labelListView.labelClicked(model.id)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: contentViewBase
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
property int maxColumns: 8
|
|
property int columns: {
|
|
let c = Math.floor(width / cellWidth);
|
|
return c > maxColumns ? maxColumns : c;
|
|
}
|
|
property int cellWidth: 220
|
|
// property int cellWidth: Math.min(Math.floor(width / columns), 220)
|
|
property int cellHeight: cellWidth
|
|
property int headerHeight: 30
|
|
|
|
Component.onCompleted: {
|
|
changeView(modelManager.getLabelGroupModel().containLabel);
|
|
modelManager.getLabelGroupModel().containLabelChanged.connect(changeView);
|
|
}
|
|
|
|
Component.onDestruction: {
|
|
modelManager.getLabelGroupModel().containLabelChanged.disconnect(changeView);
|
|
contentViewLoader.sourceComponent = undefined;
|
|
}
|
|
|
|
function changeView(toLabelView) {
|
|
contentViewLoader.sourceComponent = toLabelView ? labelViewComponent : appViewComponent;
|
|
}
|
|
|
|
Loader {
|
|
id: contentViewLoader
|
|
height: parent.height
|
|
width: contentViewBase.cellWidth * contentViewBase.columns + 2
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
}
|
|
|
|
// view id: 1
|
|
Component {
|
|
id: appViewComponent
|
|
GridView {
|
|
ScrollBar.vertical: fullScreenScrollBar
|
|
cellWidth: contentViewBase.cellWidth
|
|
cellHeight: contentViewBase.cellHeight
|
|
model: modelManager.getAppModel()
|
|
|
|
delegate: Loader {
|
|
width: GridView.view.cellWidth
|
|
height: width
|
|
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 appComponent;
|
|
}
|
|
if (type === DataType.Folder) {
|
|
return folderComponent;
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: appComponent
|
|
Item {
|
|
MouseArea {
|
|
id: appMouseArea
|
|
anchors.centerIn: parent
|
|
hoverEnabled: true
|
|
width: 170; height: width
|
|
|
|
AppControls2.StyleBackground {
|
|
anchors.fill: parent
|
|
useStyleTransparent: false
|
|
paletteRole: Palette.Light
|
|
radius: 16
|
|
alpha: appMouseArea.containsPress ? 0.25 : appMouseArea.containsMouse ? 0.15 : 0.00
|
|
AppControls2.IconLabel {
|
|
anchors.fill: parent
|
|
iconWidth: 96; iconHeight: 96
|
|
appName: name; appIcon: icon
|
|
spacing: 8
|
|
textHighLight: true
|
|
}
|
|
}
|
|
|
|
onClicked: {
|
|
parent.parent.GridView.view.model.appClicked(index);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Component {
|
|
id: folderComponent
|
|
Item {
|
|
MouseArea {
|
|
anchors.centerIn: parent
|
|
width: 100; height: 140
|
|
AppControls2.IconLabel {
|
|
anchors.fill: parent
|
|
iconWidth: 96
|
|
iconHeight: 96
|
|
appName: name
|
|
appIcon: icon
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// view id: 2
|
|
Component {
|
|
id: labelViewComponent
|
|
Flickable {
|
|
id: labelViewFlickable
|
|
ScrollBar.vertical: fullScreenScrollBar
|
|
contentHeight: labelColumn.height
|
|
flickableDirection: Flickable.VerticalFlick
|
|
interactive: !contentYAnimation.running
|
|
|
|
Column {
|
|
id: labelColumn
|
|
width: parent.width
|
|
height: childrenRect.height
|
|
Repeater {
|
|
id: labelRepeater
|
|
model: modelManager.getLabelGroupModel()
|
|
delegate: GridView {
|
|
id: labelAppsGridView
|
|
width: parent.width
|
|
height: contentHeight
|
|
|
|
property int labelIndex: index
|
|
|
|
interactive: false
|
|
cacheBuffer: 50
|
|
cellWidth: contentViewBase.cellWidth
|
|
cellHeight: contentViewBase.cellHeight
|
|
|
|
header: Item {
|
|
width: labelAppsGridView.width
|
|
height: contentViewBase.headerHeight
|
|
Row {
|
|
anchors.fill: parent
|
|
anchors.leftMargin: 67
|
|
spacing: 15
|
|
AppControls2.StyleText {
|
|
id: labelName
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
width: contentWidth
|
|
text: name
|
|
paletteRole: Palette.HighlightedText
|
|
}
|
|
|
|
AppControls2.StyleBackground {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
useStyleTransparent: false
|
|
alpha: 0.14
|
|
paletteRole: Palette.Light
|
|
height: 1
|
|
width: parent.width - labelName.width - parent.spacing
|
|
}
|
|
}
|
|
}
|
|
|
|
model: extraData
|
|
delegate: Item {
|
|
width: GridView.view.cellWidth
|
|
height: GridView.view.cellHeight
|
|
|
|
MouseArea {
|
|
id: labelAppMouseArea
|
|
anchors.centerIn: parent
|
|
hoverEnabled: true
|
|
width: 170; height: width
|
|
|
|
AppControls2.StyleBackground {
|
|
anchors.fill: parent
|
|
useStyleTransparent: false
|
|
paletteRole: Palette.Light
|
|
radius: 16
|
|
alpha: labelAppMouseArea.containsPress ? 0.25 : labelAppMouseArea.containsMouse ? 0.15 : 0.00
|
|
AppControls2.IconLabel {
|
|
anchors.fill: parent
|
|
iconWidth: 96; iconHeight: 96
|
|
appName: modelData.name
|
|
appIcon: modelData.icon
|
|
spacing: 8
|
|
textHighLight: true
|
|
}
|
|
}
|
|
|
|
onClicked: {
|
|
//console.log("clicked", Object.keys(model))
|
|
labelRepeater.model.openApp(labelAppsGridView.labelIndex, model.index);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
NumberAnimation {
|
|
id: contentYAnimation
|
|
target: labelViewFlickable
|
|
property: "contentY"
|
|
duration: 300
|
|
onFinished: {
|
|
labelViewFlickable.returnToBounds();
|
|
}
|
|
}
|
|
|
|
function scrollerView(labelId) {
|
|
let labelindex = labelRepeater.model.getLabelIndex(labelId);
|
|
if (labelindex < 0 || labelindex >= labelRepeater.count) {
|
|
return;
|
|
}
|
|
|
|
let nextY = labelRepeater.itemAt(labelindex).y;
|
|
let sh = labelColumn.height - nextY;
|
|
if (sh < height) {
|
|
nextY -= (height - sh);
|
|
}
|
|
|
|
contentYAnimation.running = false;
|
|
if (nextY === contentY) {
|
|
return;
|
|
}
|
|
|
|
contentYAnimation.from = contentY;
|
|
contentYAnimation.to = nextY;
|
|
contentYAnimation.running = true;
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
labelListView.labelClicked.connect(scrollerView);
|
|
}
|
|
Component.onDestruction: {
|
|
labelListView.labelClicked.disconnect(scrollerView);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.preferredWidth: 160
|
|
Layout.fillHeight: true
|
|
|
|
ScrollBar {
|
|
id: fullScreenScrollBar
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.horizontalCenter: parent.right
|
|
anchors.horizontalCenterOffset: -24
|
|
height: 200
|
|
width: (hovered || pressed) ? 8 : 4
|
|
padding: 0
|
|
opacity: fullScreenScrollBar.size < 1.0 ? 1.0 : 0.0
|
|
|
|
Behavior on width {
|
|
NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
|
|
}
|
|
|
|
background: AppControls2.StyleBackground {
|
|
useStyleTransparent: false
|
|
paletteRole: Palette.Dark
|
|
alpha: 0.25
|
|
radius: width / 2
|
|
}
|
|
|
|
contentItem: AppControls2.StyleBackground {
|
|
radius: width / 2
|
|
useStyleTransparent: false
|
|
paletteRole: Palette.Light
|
|
alpha: fullScreenScrollBar.pressed ? 0.90 : fullScreenScrollBar.hovered ? 0.78 : 0.60
|
|
}
|
|
}
|
|
}
|
|
}
|