From 386bb7700b22ca8d07e7203718e407970853e1cb Mon Sep 17 00:00:00 2001 From: qiqi Date: Sat, 8 Apr 2023 18:42:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=8F=E6=94=B6?= =?UTF-8?q?=E8=97=8F=E5=A4=B9=E5=8A=A8=E7=94=BB=EF=BC=9B=20=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=A1=86=E7=82=B9=E5=87=BB=E5=8F=89=E5=8F=B7=E5=A4=B1?= =?UTF-8?q?=E7=84=A6=E6=B8=85=E7=A9=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qml/AppControls2/FolderIcon.qml | 2 - qml/AppControls2/FolderItem.qml | 1 + qml/AppControls2/RoundButton.qml | 5 +- qml/AppUI/AppPageHeader.qml | 1 - qml/AppUI/EditText.qml | 18 ++-- qml/AppUI/FullScreenContent.qml | 122 ++++++++++++++++++++--- qml/AppUI/FullScreenFolder.qml | 165 +++++++++++++++++++++++++++++++ qml/AppUI/FullScreenHeader.qml | 6 ++ qml/AppUI/FullScreenUI.qml | 45 ++++++++- qml/AppUI/SearchInputBar.qml | 7 +- qml/qml.qrc | 1 + 11 files changed, 341 insertions(+), 32 deletions(-) create mode 100644 qml/AppUI/FullScreenFolder.qml diff --git a/qml/AppControls2/FolderIcon.qml b/qml/AppControls2/FolderIcon.qml index 1ff8110..bc5717e 100644 --- a/qml/AppControls2/FolderIcon.qml +++ b/qml/AppControls2/FolderIcon.qml @@ -26,10 +26,8 @@ StyleBackground { property alias padding: iconGrid.padding property alias spacing: iconGrid.spacing - radius: 4 paletteRole: Palette.Text useStyleTransparent: false - alpha: 0.12 Grid { id: iconGrid diff --git a/qml/AppControls2/FolderItem.qml b/qml/AppControls2/FolderItem.qml index 85a2957..06a3e9e 100644 --- a/qml/AppControls2/FolderItem.qml +++ b/qml/AppControls2/FolderItem.qml @@ -27,6 +27,7 @@ MouseArea { rows: 2; columns: 2 spacing: 2; padding: 2 icons: icon + alpha: 0.12; radius: 4 Layout.alignment: Qt.AlignVCenter Layout.preferredWidth: 32 Layout.preferredHeight: 32 diff --git a/qml/AppControls2/RoundButton.qml b/qml/AppControls2/RoundButton.qml index e2220f7..72cc3b1 100644 --- a/qml/AppControls2/RoundButton.qml +++ b/qml/AppControls2/RoundButton.qml @@ -5,7 +5,8 @@ MouseArea { id: buttonMouseArea hoverEnabled: true property string buttonIcon: "" - property bool highlight: false + property alias highlight: themeIcon.highLight + property alias autoHighLight: themeIcon.autoHighLight StyleBackground { useStyleTransparent: false @@ -16,9 +17,9 @@ MouseArea { } ThemeIcon { + id: themeIcon anchors.centerIn: parent width: 16; height: width source: buttonIcon - highLight: buttonMouseArea.highlight } } diff --git a/qml/AppUI/AppPageHeader.qml b/qml/AppUI/AppPageHeader.qml index a2fc48b..986c28f 100644 --- a/qml/AppUI/AppPageHeader.qml +++ b/qml/AppUI/AppPageHeader.qml @@ -142,7 +142,6 @@ Item { delegate: AppControls2.RoundButton { width: height; height: ListView.view ? ListView.view.height : 0 buttonIcon: model.icon - onClicked: { root.state = "search"; searchInputBar.providerId = model.id; diff --git a/qml/AppUI/EditText.qml b/qml/AppUI/EditText.qml index d1aa022..740a0de 100644 --- a/qml/AppUI/EditText.qml +++ b/qml/AppUI/EditText.qml @@ -27,6 +27,7 @@ Item { property bool textCenterIn: false property bool editStatus: false property string textEdited: title + property bool isFullScreenFolder: false Component { id: unEditText @@ -36,16 +37,16 @@ Item { horizontalAlignment: contain.textCenterIn ? Text.AlignHCenter : Text.AlignLeft elide: Text.ElideRight text: contain.textEdited + paletteRole: isFullScreenFolder ? Palette.HighlightedText : Palette.Text + font.bold: !isFullScreenFolder + font.pixelSize: isFullScreenFolder ? 32 : 14 MouseArea { id: textArea anchors.fill: parent - onDoubleClicked: { - contain.editStatus = true; - } + onDoubleClicked: contain.editStatus = true; } } - } Component { @@ -72,6 +73,8 @@ Item { text: contain.textEdited selectByMouse: true maximumLength: 14 + font.bold: !isFullScreenFolder + font.pixelSize: isFullScreenFolder ? 32 : 14 onEditingFinished: { modelManager.getFolderModel().renameFolder(text); @@ -79,8 +82,9 @@ Item { contain.editStatus = false; } + property int textColor: isFullScreenFolder ? Palette.HighlightedText : Palette.Text function updateTextInputColor() { - color = themePalette.paletteColor(Palette.Text); + color = themePalette.paletteColor(textColor); selectionColor = themePalette.paletteColor(Palette.Highlight); } @@ -107,10 +111,12 @@ Item { anchors.centerIn: parent width: 16; height: width source: "image://appicon/edit-clear-symbolic" + highLight: isFullScreenFolder + autoHighLight: !isFullScreenFolder } onClicked: { - textEdit.text = title; + textEdit.text = textEdited; contain.editStatus = false; } } diff --git a/qml/AppUI/FullScreenContent.qml b/qml/AppUI/FullScreenContent.qml index a4c4a8b..06de44c 100644 --- a/qml/AppUI/FullScreenContent.qml +++ b/qml/AppUI/FullScreenContent.qml @@ -24,7 +24,41 @@ import org.ukui.menu.core 1.0 import AppControls2 1.0 as AppControls2 RowLayout { + id: root clip: true + signal openFolderSignal(string folderId, string folderName, int x, int y) + signal contentShowFinished() + property bool isContentShow: true + property int animationDuration: 300 + + state: isContentShow ? "contentShow" : "contentHidden" + states: [ + State { + name: "contentHidden" + PropertyChanges { target: root; opacity: 0; scale: 0.95 } + }, + State { + name: "contentShow" + PropertyChanges { target: root; opacity: 1; scale: 1 } + } + ] + + transitions: [ + Transition { + to:"contentHidden" + SequentialAnimation { + PropertyAnimation { properties: "opacity, scale"; duration: animationDuration; easing.type: Easing.InOutCubic } + ScriptAction { script: root.visible = false } + } + }, + Transition { + to: "contentShow" + SequentialAnimation { + PropertyAnimation { properties: "opacity, scale"; duration: animationDuration; easing.type: Easing.InOutCubic } + ScriptAction { script: root.contentShowFinished() } + } + } + ] Item { Layout.preferredWidth: 145 @@ -42,7 +76,7 @@ RowLayout { interactive: contentHeight > parent.height spacing: 5 - highlightMoveDuration: 300 + highlightMoveDuration: animationDuration highlight: AppControls2.StyleBackground { width: labelListView.maxLabelWidth; height: 30 radius: 4 @@ -73,7 +107,6 @@ RowLayout { model: modelManager.getLabelModel() delegate: MouseArea { - id: labelMouseArea width: labelListView.maxLabelWidth height: 30 hoverEnabled: true @@ -82,6 +115,7 @@ RowLayout { paletteRole: Palette.HighlightedText elide: Text.ElideRight horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter text: model.displayName } onClicked: { @@ -136,6 +170,7 @@ RowLayout { ScrollBar.vertical: fullScreenScrollBar cellWidth: contentViewBase.cellWidth cellHeight: contentViewBase.cellHeight + boundsBehavior: Flickable.StopAtBounds model: modelManager.getAppModel() delegate: Loader { @@ -143,6 +178,7 @@ RowLayout { height: width property int index: model.index property int type: model.type + property string id: model.id property string name: model.name property string icon: model.icon sourceComponent: { @@ -150,7 +186,7 @@ RowLayout { return appComponent; } if (type === DataType.Folder) { - return folderComponent; + return normalFolderComponent; } } } @@ -159,17 +195,17 @@ RowLayout { id: appComponent Item { MouseArea { - id: appMouseArea anchors.centerIn: parent hoverEnabled: true width: 170; height: width + acceptedButtons: Qt.LeftButton | Qt.RightButton AppControls2.StyleBackground { anchors.fill: parent useStyleTransparent: false paletteRole: Palette.Light radius: 16 - alpha: appMouseArea.containsPress ? 0.25 : appMouseArea.containsMouse ? 0.15 : 0.00 + alpha: parent.containsPress ? 0.25 : parent.containsMouse ? 0.15 : 0.00 AppControls2.IconLabel { anchors.fill: parent iconWidth: 96; iconHeight: 96 @@ -180,7 +216,14 @@ RowLayout { } onClicked: { - parent.parent.GridView.view.model.appClicked(index); + if (mouse.button === Qt.RightButton) { + parent.parent.GridView.view.model.openMenu(index); + return; + } + if (mouse.button === Qt.LeftButton) { + parent.parent.GridView.view.model.appClicked(index); + return; + } } } } @@ -188,18 +231,65 @@ RowLayout { } Component { - id: folderComponent + id: normalFolderComponent Item { MouseArea { anchors.centerIn: parent - width: 100; height: 140 - AppControls2.IconLabel { + hoverEnabled: true + width: 170; height: width + acceptedButtons: Qt.LeftButton | Qt.RightButton + + AppControls2.StyleBackground { anchors.fill: parent - iconWidth: 96 - iconHeight: 96 - appName: name - appIcon: icon + useStyleTransparent: false + paletteRole: Palette.Light + radius: 16 + alpha: parent.containsPress ? 0.25 : parent.containsMouse ? 0.15 : 0.00 + + ColumnLayout { + height: 128; width: parent.width + anchors.centerIn: parent + spacing: 8 + AppControls2.FolderIcon { + id: folderIcon + Layout.margins: 5 + rows: 4; columns: 4 + spacing: 2; padding: 8 + icons: icon + radius: 16; alpha: 0.25 + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: 86; Layout.preferredHeight: 86 + } + AppControls2.StyleText { + Layout.fillWidth: true; Layout.fillHeight: true + horizontalAlignment: Text.AlignHCenter + elide: Text.ElideRight + text: name + font.pixelSize: 14 + paletteRole: Palette.HighlightedText + } + } } + + onClicked: { + if (mouse.button === Qt.RightButton) { + parent.parent.GridView.view.model.openMenu(index); + return; + } + if (mouse.button === Qt.LeftButton) { + var x = folderIcon.mapToGlobal(0,0).x; + var y = folderIcon.mapToGlobal(0,0).y + openFolderSignal(id, name, x, y); + root.isContentShow = false; + opacity = 0; + return; + } + } + function resetOpacity() { + opacity = 1; + } + Component.onCompleted: root.contentShowFinished.connect(resetOpacity) + Component.onDestruction: root.contentShowFinished.disconnect(resetOpacity) } } } @@ -214,6 +304,7 @@ RowLayout { ScrollBar.vertical: fullScreenScrollBar contentHeight: labelColumn.height flickableDirection: Flickable.VerticalFlick + boundsBehavior: Flickable.StopAtBounds interactive: !contentYAnimation.running Column { @@ -268,7 +359,6 @@ RowLayout { height: GridView.view.cellHeight MouseArea { - id: labelAppMouseArea anchors.centerIn: parent hoverEnabled: true width: 170; height: width @@ -278,7 +368,7 @@ RowLayout { useStyleTransparent: false paletteRole: Palette.Light radius: 16 - alpha: labelAppMouseArea.containsPress ? 0.25 : labelAppMouseArea.containsMouse ? 0.15 : 0.00 + alpha: parent.containsPress ? 0.25 : parent.containsMouse ? 0.15 : 0.00 AppControls2.IconLabel { anchors.fill: parent iconWidth: 96; iconHeight: 96 @@ -303,7 +393,7 @@ RowLayout { id: contentYAnimation target: labelViewFlickable property: "contentY" - duration: 300 + duration: animationDuration onFinished: { labelViewFlickable.returnToBounds(); } diff --git a/qml/AppUI/FullScreenFolder.qml b/qml/AppUI/FullScreenFolder.qml new file mode 100644 index 0000000..8329f93 --- /dev/null +++ b/qml/AppUI/FullScreenFolder.qml @@ -0,0 +1,165 @@ +/* + * 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 QtQuick 2.0 +import QtQuick.Layouts 1.12 +import org.ukui.menu.core 1.0 +import AppControls2 1.0 as AppControls2 + +Item { + property alias model: folderGridView.model + property string folderName: "" + property int margins: 20 + property int folderX: 0 + property int folderY: 0 + property bool isFolderOpened: false + property int animationDuration: 300 + + AppControls2.StyleBackground { + id: folderIconBase + paletteRole: Palette.Text + useStyleTransparent: false + property int folderIconSize: 0 + property int iconSpacing: 0 + property int imageX: 0 + property int imageY: 0 + alpha: 0.25 + + state: isFolderOpened ? "folderOpened" : "folderHidden" + states: [ + State { + name: "folderOpened" + PropertyChanges { + target: folderIconBase + width: 720; height: folderGridView.viewMaxHeight; radius: 36 + x: (parent.width - width) / 2; y: (parent.height - height) / 2 + folderIconSize: 96; iconSpacing: 8 + imageX: 37; imageY: 17 + } + PropertyChanges { target: folderGridView; anchors.margins: margins } + PropertyChanges { target: folderNameText; opacity: 1 } + }, + State { + name: "folderHidden" + PropertyChanges { + target: folderIconBase + width: 86; height: width; radius: 16 + x: parent.parent.mapFromGlobal(folderX, 0).x; y: parent.parent.mapFromGlobal(0, folderY).y + folderIconSize: 16; iconSpacing: 0 + imageX: 0; imageY: 0 + } + PropertyChanges { target: folderGridView; anchors.margins: 8 } + PropertyChanges { target: folderNameText; opacity: 0 } + } + ] + transitions: [ + Transition { + to: "folderHidden" + SequentialAnimation { + ScriptAction { script: folderGridView.positionViewAtBeginning() } + ParallelAnimation { + PropertyAnimation { + duration: animationDuration; easing.type: Easing.InOutCubic + properties: "x, y, width, height, folderIconSize, iconSpacing, radius, imageX, imageY, anchors.margins" + } + PropertyAnimation { + duration: animationDuration; easing.type: Easing.OutQuint + properties: "opacity" + } + } + ScriptAction { script: parent.active = false } + } + }, + Transition { + to: "folderOpened" + ParallelAnimation { + PropertyAnimation { + duration: animationDuration; easing.type: Easing.InOutCubic + properties: "x, y, width, height, folderIconSize, iconSpacing, radius, imageX, imageY, anchors.margins" + } + PropertyAnimation { + duration: animationDuration; easing.type: Easing.InQuint + properties: "opacity" + } + } + } + ] + + GridView { + id: folderGridView + anchors.fill: parent + cellHeight: width / 4; cellWidth: cellHeight + boundsBehavior: Flickable.StopAtBounds + property int viewMaxHeight: Math.ceil(count / 4) * 170 > width ? width + margins*2 : (Math.ceil(count / 4) * 170 + margins*2) + model: modelManager.getFolderModel() + delegate: MouseArea { + hoverEnabled: true + width: GridView.view.cellHeight; height: width + acceptedButtons: Qt.LeftButton | Qt.RightButton + + AppControls2.StyleBackground { + anchors.fill: parent + useStyleTransparent: false + paletteRole: Palette.Light + radius: 16 + alpha: parent.containsPress ? 0.25 : parent.containsMouse ? 0.15 : 0.00 + + Image { + id: iconImage + source: icon + height: folderIconBase.folderIconSize; width: height + x: folderIconBase.imageX; y: folderIconBase.imageY + } + + AppControls2.StyleText { + width: parent.width + horizontalAlignment: Text.AlignHCenter + anchors.top: iconImage.bottom + anchors.topMargin: folderIconBase.iconSpacing + anchors.horizontalCenter: parent.horizontalCenter + text: name + font.pixelSize: 14 + elide: Text.ElideRight + paletteRole: Palette.HighlightedText + } + } + onClicked: { + if (mouse.button === Qt.RightButton) { + menuManager.showMenu(id); + return; + } + if (mouse.button === Qt.LeftButton) { + appManager.launchApp(id); + return; + } + } + } + } + } + + EditText { + id: folderNameText + anchors.bottom: folderGridView.parent.top + anchors.bottomMargin: 30 + anchors.horizontalCenter: folderGridView.parent.horizontalCenter + height: 47; width: folderGridView.width + textEdited: folderName + textCenterIn: true + isFullScreenFolder: true + } +} diff --git a/qml/AppUI/FullScreenHeader.qml b/qml/AppUI/FullScreenHeader.qml index 2b644ab..333a4f0 100644 --- a/qml/AppUI/FullScreenHeader.qml +++ b/qml/AppUI/FullScreenHeader.qml @@ -7,10 +7,13 @@ import org.ukui.menu.utils 1.0 Item { clip: true + property alias searchOpacity: searchInputBar.opacity SearchInputBar { + id: searchInputBar width: 372; height: 36 anchors.centerIn: parent radius: height / 2 + visible: opacity onTextChanged: { if (text === "") { @@ -20,6 +23,9 @@ Item { appPageHeaderUtils.startSearch(text); } } + Behavior on opacity { + NumberAnimation { duration: 300; easing.type: Easing.InOutCubic } + } } PluginSelectMenu { diff --git a/qml/AppUI/FullScreenUI.qml b/qml/AppUI/FullScreenUI.qml index aafb911..3c7b95f 100644 --- a/qml/AppUI/FullScreenUI.qml +++ b/qml/AppUI/FullScreenUI.qml @@ -5,6 +5,20 @@ import org.ukui.menu.core 1.0 AppControls2.StyleBackground { paletteRole: Palette.Dark + MouseArea { + anchors.fill: parent + onClicked: { + if (fullScreenContent.visible) { + //执行全屏退出操作 + forceActiveFocus(); + mainWindow.hide(); + } else { + folderLoader.item.isFolderOpened = false; + fullScreenContent.visible = true; + fullScreenContent.isContentShow = true; + } + } + } ColumnLayout { anchors.fill: parent @@ -12,20 +26,43 @@ AppControls2.StyleBackground { anchors.rightMargin: 35 FullScreenHeader { - // full screen header + id: fullScreenHeader Layout.preferredHeight: 130 Layout.fillWidth: true Layout.maximumHeight: 130 + searchOpacity: fullScreenContent.isContentShow ? 1 : 0 } - FullScreenContent { - // full screen content + Item { Layout.fillHeight: true Layout.fillWidth: true + + FullScreenContent { + id: fullScreenContent + anchors.fill: parent + } + + Loader { + id: folderLoader + active: false + anchors.fill: parent + sourceComponent: FullScreenFolder {} + + function openFolder(id, name, x, y) { + active = true; + item.model.setFolderId(id); + item.folderName = name; + item.folderX = x; + item.folderY = y; + item.isFolderOpened = true; + } + + Component.onCompleted: fullScreenContent.openFolderSignal.connect(openFolder) + Component.onDestruction: fullScreenContent.openFolderSignal.disconnect(openFolder) + } } FullScreenFooter { - // full screen footer Layout.preferredHeight: 90 Layout.fillWidth: true } diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml index d92384a..59d2381 100644 --- a/qml/AppUI/SearchInputBar.qml +++ b/qml/AppUI/SearchInputBar.qml @@ -52,6 +52,7 @@ AppControls2.StyleBackground { width: parent.height / 2; height: width source: "image://appicon/search-symbolic" highLight: mainWindow.isFullScreen + autoHighLight: !mainWindow.isFullScreen } } @@ -119,7 +120,11 @@ AppControls2.StyleBackground { visible: mainWindow.isFullScreen && textInput.activeFocus buttonIcon: "image://appicon/edit-clear-symbolic" highlight: true + autoHighLight: false - onClicked: textInput.clear(); + onClicked: { + textInput.clear(); + textInput.focus = false; + } } } diff --git a/qml/qml.qrc b/qml/qml.qrc index fe98c4a..2c19037 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -34,5 +34,6 @@ AppUI/AppPageContent.qml AppUI/PluginSelectMenu.qml AppUI/EditText.qml + AppUI/FullScreenFolder.qml