From 6d4fc101b27066d6a71f625c59b7e4bd05566b76 Mon Sep 17 00:00:00 2001 From: qiqi Date: Thu, 2 Mar 2023 13:57:13 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=B7=BB=E5=8A=A0=E6=90=9C=E7=B4=A2=E6=A1=86?= =?UTF-8?q?=E5=94=A4=E5=87=BA=E9=9A=90=E8=97=8F=E5=8A=A8=E7=94=BB=E3=80=81?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E6=98=BE=E7=A4=BA=E7=BB=86=E8=8A=82?= =?UTF-8?q?=EF=BC=9B2.=E6=B7=BB=E5=8A=A0=E6=8C=89=E9=92=AE=E7=9A=84?= =?UTF-8?q?=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=EF=BC=9B3.=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=BB=91=E5=8A=A8=E5=8C=BA=E5=9F=9F=E7=9A=84=E5=88=86?= =?UTF-8?q?=E5=89=B2=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qml/AppControls2/RoundButton.qml | 22 +++++ qml/AppControls2/StyleBackground.qml | 3 +- qml/AppControls2/qmldir | 1 + qml/AppUI/AppList.qml | 10 ++ qml/AppUI/AppPage.qml | 3 +- qml/AppUI/AppPageHeader.qml | 124 ++++++++++++------------- qml/AppUI/SearchInputBar.qml | 21 ++++- qml/AppUI/Sidebar.qml | 8 -- qml/extensions/FavoriteExtension.qml | 10 ++ qml/extensions/RecentFileExtension.qml | 11 +++ qml/qml.qrc | 1 + 11 files changed, 136 insertions(+), 78 deletions(-) create mode 100644 qml/AppControls2/RoundButton.qml diff --git a/qml/AppControls2/RoundButton.qml b/qml/AppControls2/RoundButton.qml new file mode 100644 index 0000000..2815a4c --- /dev/null +++ b/qml/AppControls2/RoundButton.qml @@ -0,0 +1,22 @@ +import QtQuick 2.0 +import org.ukui.menu.core 1.0 + +MouseArea { + id: buttonMouseArea + hoverEnabled: true + property string buttonIcon: "" + + StyleBackground { + useStyleTransparent: false + paletteRole: Palette.Text + anchors.fill: parent + radius: height / 2 + alpha: buttonMouseArea.containsPress ? 0.17 : buttonMouseArea.containsMouse ? 0.12 : 0.06 + } + + Image { + anchors.centerIn: parent + width: 16; height: width + source: buttonIcon + } +} diff --git a/qml/AppControls2/StyleBackground.qml b/qml/AppControls2/StyleBackground.qml index 57562a7..3651b75 100644 --- a/qml/AppControls2/StyleBackground.qml +++ b/qml/AppControls2/StyleBackground.qml @@ -1,5 +1,4 @@ import QtQuick 2.0 -import QtQuick.Controls 2.5 import org.ukui.menu.core 1.0 Rectangle { @@ -9,8 +8,10 @@ Rectangle { property real alpha: 1.0 clip: true + border.width: 0 function updateColor() { + border.color = themePalette.paletteColor(Palette.Highlight) if (useStyleTransparent) { color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup) } else { diff --git a/qml/AppControls2/qmldir b/qml/AppControls2/qmldir index 16675b3..d475ec1 100644 --- a/qml/AppControls2/qmldir +++ b/qml/AppControls2/qmldir @@ -6,3 +6,4 @@ AppItem 1.0 AppItem.qml FolderItem 1.0 FolderItem.qml LabelItem 1.0 LabelItem.qml IconLabel 1.0 IconLabel.qml +RoundButton 1.0 RoundButton.qml diff --git a/qml/AppUI/AppList.qml b/qml/AppUI/AppList.qml index d597685..bae67b8 100644 --- a/qml/AppUI/AppList.qml +++ b/qml/AppUI/AppList.qml @@ -31,9 +31,19 @@ Item { hoverEnabled: true anchors.fill: parent + AppControls2.StyleBackground { + anchors.top: parent.top + width: parent.width; height: 1 + useStyleTransparent: false + alpha: 0.15 + paletteRole: Palette.Text + visible: appListView.contentY > 0 + } + RowLayout { anchors.fill: parent spacing: 0 + anchors.leftMargin: 4 ListView { id: appListView diff --git a/qml/AppUI/AppPage.qml b/qml/AppUI/AppPage.qml index fc148ab..d43a934 100644 --- a/qml/AppUI/AppPage.qml +++ b/qml/AppUI/AppPage.qml @@ -29,7 +29,7 @@ AppControls2.StyleBackground { ColumnLayout { anchors.fill: parent anchors.topMargin: parent.radius - spacing: 4 + spacing: 0 AppPageHeader { Layout.fillWidth: true @@ -40,7 +40,6 @@ AppControls2.StyleBackground { clip: true Layout.fillWidth: true Layout.fillHeight: true - Layout.leftMargin: 4 } } } diff --git a/qml/AppUI/AppPageHeader.qml b/qml/AppUI/AppPageHeader.qml index 15433b2..e69b3c2 100644 --- a/qml/AppUI/AppPageHeader.qml +++ b/qml/AppUI/AppPageHeader.qml @@ -19,7 +19,6 @@ 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 @@ -27,30 +26,44 @@ import org.ukui.menu.utils 1.0 Item { id: appPageHeaderRoot property string title: "" + clip: true state: "normal" states: [ State { name: "normal" - PropertyChanges { target: searchBar; visible: false } - PropertyChanges { target: pluginSelectionBar; visible: true } - StateChangeScript { - script: { - sortMenu.sortMenuModel.reactivateProvider(); - } - } + PropertyChanges { target: searchBar; scale: 0.9; y: -pluginSelectionBar.height } + PropertyChanges { target: pluginSelectionBar; scale: 1.0; y: 0 } + StateChangeScript { script: sortMenu.sortMenuModel.reactivateProvider() } }, State { name: "search" - PropertyChanges { target: searchBar; visible: true } - PropertyChanges { target: pluginSelectionBar; visible: false } + PropertyChanges { target: searchBar; scale: 1.0; y: 0 } + PropertyChanges { target: pluginSelectionBar; scale: 0.9; y: pluginSelectionBar.height } + } + ] + + transitions:[ + Transition { + to: "normal" + SequentialAnimation { + NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 } + ScriptAction { script: searchBar.visible = false } + } + }, + Transition { + to: "search" + SequentialAnimation { + ScriptAction { script: searchBar.visible = true } + NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300} + } } ] Item { id: searchBar - width: parent.width - height: 30 + width: parent.width; height: 30 + RowLayout { anchors.fill: parent anchors.leftMargin: 15 @@ -59,29 +72,31 @@ Item { SearchInputBar { id: searchInputBar + property string providerId: "" + Layout.fillWidth: true Layout.fillHeight: true radius: 16 useStyleTransparent: false - onTextChanged: appPageHeaderUtils.startSearch(text); + onTextChanged: + { + if (text === "") { + sortMenu.sortMenuModel.reactivateProvider(); + } else { + appPageHeaderUtils.activateProvider(providerId); + appPageHeaderUtils.startSearch(text); + } + } + } - AppControls2.StyleBackground { - Layout.preferredWidth: parent.height - Layout.preferredHeight: parent.height - radius: height / 2 - useStyleTransparent: false - Image { - anchors.centerIn: parent - width: 16; height: 16 - source: "image://appicon/edit-clear-symbolic" - } - MouseArea { - anchors.fill: parent - onClicked: { - searchInputBar.clear(); - appPageHeaderRoot.state = "normal" - } + AppControls2.RoundButton { + Layout.preferredWidth: parent.height; Layout.preferredHeight: parent.height + buttonIcon: "image://appicon/edit-clear-symbolic" + + onClicked: { + searchInputBar.clear(); + appPageHeaderRoot.state = "normal"; } } } @@ -99,6 +114,7 @@ Item { Layout.fillHeight: true verticalAlignment: Qt.AlignVCenter text: appPageHeaderRoot.title + font.bold: true } ListView { @@ -112,23 +128,13 @@ Item { orientation: ListView.Horizontal model: appPageHeaderUtils.model(PluginGroup.Button) - delegate: AppControls2.StyleBackground { - width: height - height: ListView.view ? ListView.view.height : 0 - radius: height / 2 - useStyleTransparent: false - Image { - width: parent.height / 2 - height: parent.height / 2 - anchors.centerIn: parent - source: model.icon - } - MouseArea { - anchors.fill: parent - onClicked: { - appPageHeaderRoot.state = "search" - appPageHeaderUtils.activateProvider(model.id); - } + delegate: AppControls2.RoundButton { + width: height; height: ListView.view ? ListView.view.height : 0 + buttonIcon: model.icon + + onClicked: { + appPageHeaderRoot.state = "search"; + searchInputBar.providerId = model.id; } } } @@ -139,23 +145,13 @@ Item { Layout.rightMargin: 8 Layout.alignment: Qt.AlignVCenter - AppControls2.StyleBackground { - width: 32 - height: width - radius: height / 2 - useStyleTransparent: false - Image { - id: providerIcon - width: parent.height / 2 - height: parent.height / 2 - anchors.centerIn: parent - source: "image://appicon/ukui-selected" - } - MouseArea { - anchors.fill: parent - onClicked: { - sortMenu.sortMenuModel.autoSwitchProvider(); - } + AppControls2.RoundButton { + id: providerIcon + width: 32; height: width + buttonIcon: "image://appicon/ukui-selected" + + onClicked: { + sortMenu.sortMenuModel.autoSwitchProvider(); } } @@ -175,7 +171,7 @@ Item { } function updateProviderIcon() { - providerIcon.source = sortMenu.sortMenuModel.currentProviderIcon(); + providerIcon.buttonIcon = sortMenu.sortMenuModel.currentProviderIcon(); } Component.onCompleted: { diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml index 34400f4..011b084 100644 --- a/qml/AppUI/SearchInputBar.qml +++ b/qml/AppUI/SearchInputBar.qml @@ -19,7 +19,7 @@ import QtQuick 2.0 import QtQuick.Controls 2.5 import QtQuick.Layouts 1.12 - +import org.ukui.menu.core 1.0 import AppControls2 1.0 as AppControls2 AppControls2.StyleBackground { @@ -27,6 +27,10 @@ AppControls2.StyleBackground { function clear() { textInput.clear(); } + alpha: 0.04 + useStyleTransparent: false + paletteRole: Palette.Text + border.width: textInput.activeFocus ? 1 : 0 RowLayout { anchors.fill: parent @@ -49,14 +53,25 @@ AppControls2.StyleBackground { Item { Layout.fillWidth: true Layout.fillHeight: true - clip: true + TextInput { id: textInput + clip: true anchors.fill: parent selectByMouse: true - selectionColor: "red" + selectionColor: "lightblue" verticalAlignment: TextInput.AlignVCenter font.pixelSize: 14 + focus: parent.visible; + } + + Text { + anchors.fill: parent + text: qsTr("Search App") + visible: textInput.contentWidth === 0 + font.pixelSize: textInput.font.pixelSize + verticalAlignment: TextInput.AlignVCenter + color: Qt.rgba(0,0,0,0.25) } } } diff --git a/qml/AppUI/Sidebar.qml b/qml/AppUI/Sidebar.qml index 832b204..aadf7a0 100644 --- a/qml/AppUI/Sidebar.qml +++ b/qml/AppUI/Sidebar.qml @@ -63,14 +63,6 @@ Item { } } - AppControls2.StyleBackground { - Layout.fillWidth: true - Layout.preferredHeight: 1 - useStyleTransparent: false - alpha: 0.15 - paletteRole: Palette.Text - } - Item { Layout.fillWidth: true Layout.fillHeight: true diff --git a/qml/extensions/FavoriteExtension.qml b/qml/extensions/FavoriteExtension.qml index 3ca1810..b52b1b3 100644 --- a/qml/extensions/FavoriteExtension.qml +++ b/qml/extensions/FavoriteExtension.qml @@ -33,6 +33,16 @@ UkuiMenuExtension { anchors.fill: parent hoverEnabled: true + AppControls2.StyleBackground { + anchors.top: parent.top + width: parent.width; height: 1 + useStyleTransparent: false + alpha: 0.15 + paletteRole: Palette.Text + visible: favoriteView.contentY > 0 + z: 1 + } + GridView { id: favoriteView anchors.fill: parent diff --git a/qml/extensions/RecentFileExtension.qml b/qml/extensions/RecentFileExtension.qml index bf62361..195a637 100644 --- a/qml/extensions/RecentFileExtension.qml +++ b/qml/extensions/RecentFileExtension.qml @@ -19,6 +19,7 @@ import QtQuick 2.0 import QtQuick.Controls 2.5 import org.ukui.menu.extension 1.0 +import org.ukui.menu.core 1.0 import AppControls2 1.0 as AppControls2 UkuiMenuExtension { @@ -43,6 +44,16 @@ UkuiMenuExtension { } } + AppControls2.StyleBackground { + anchors.top: parent.top + width: parent.width; height: 1 + useStyleTransparent: false + alpha: 0.15 + paletteRole: Palette.Text + visible: recentFileView.contentY > 0 + z: 1 + } + ListView { id: recentFileView anchors.fill: parent diff --git a/qml/qml.qrc b/qml/qml.qrc index 6882c96..f51be11 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -24,5 +24,6 @@ extensions/FolderExtension.qml extensions/RecentFileExtension.qml extensions/FavoriteExtension.qml + AppControls2/RoundButton.qml