From c82c70a66221750a5e1c0c8afeebc1bad181f8be Mon Sep 17 00:00:00 2001 From: qiqi Date: Fri, 24 Mar 2023 17:47:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=8F=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E6=8C=89=E9=94=AE=EF=BC=9A=E6=90=9C=E7=B4=A2=E6=A1=86?= =?UTF-8?q?=E3=80=81=E7=94=B5=E6=BA=90=E3=80=81=E6=BB=91=E5=8A=A8=E6=9D=A1?= =?UTF-8?q?=E3=80=81=E7=BC=A9=E5=B0=8F=E7=AA=97=E5=8F=A3=E6=8C=89=E9=94=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qml/AppControls2/StyleBackground.qml | 16 +++- qml/AppUI/AppPageHeader.qml | 1 - qml/AppUI/FullScreenContent.qml | 52 +++++++++++-- qml/AppUI/FullScreenFooter.qml | 64 +++++++++++++-- qml/AppUI/FullScreenHeader.qml | 44 +++++++++-- qml/AppUI/PluginSelectMenu.qml | 6 +- qml/AppUI/SearchInputBar.qml | 112 +++++++++++++++++++-------- qml/AppUI/Sidebar.qml | 2 +- qml/main.qml | 15 +++- 9 files changed, 253 insertions(+), 59 deletions(-) diff --git a/qml/AppControls2/StyleBackground.qml b/qml/AppControls2/StyleBackground.qml index 3651b75..29c7a73 100644 --- a/qml/AppControls2/StyleBackground.qml +++ b/qml/AppControls2/StyleBackground.qml @@ -6,12 +6,12 @@ Rectangle { property int paletteRole: Palette.Base property int paletteGroup: Palette.Active property real alpha: 1.0 + property bool isFocus: false clip: true border.width: 0 function updateColor() { - border.color = themePalette.paletteColor(Palette.Highlight) if (useStyleTransparent) { color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup) } else { @@ -19,12 +19,23 @@ Rectangle { } } + function updateBorderColor() { + if (isFocus) { + border.color = themePalette.paletteColor(Palette.Highlight) + } else { + border.color = themePalette.paletteColorWithCustomTransparency(Palette.Base, Palette.Active, 0.1) + } + } + Component.onCompleted: { updateColor() + updateBorderColor() themePalette.styleColorChanged.connect(updateColor) + themePalette.styleColorChanged.connect(updateBorderColor) } Component.onDestruction: { themePalette.styleColorChanged.disconnect(updateColor) + themePalette.styleColorChanged.disconnect(updateBorderColor) } onUseStyleTransparentChanged: { @@ -39,5 +50,8 @@ Rectangle { onAlphaChanged: { updateColor() } + onIsFocusChanged: { + updateBorderColor() + } } diff --git a/qml/AppUI/AppPageHeader.qml b/qml/AppUI/AppPageHeader.qml index 938bde6..e8eb6a6 100644 --- a/qml/AppUI/AppPageHeader.qml +++ b/qml/AppUI/AppPageHeader.qml @@ -77,7 +77,6 @@ Item { Layout.fillWidth: true Layout.fillHeight: true radius: 16 - useStyleTransparent: false onTextChanged: { if (text === "") { pluginSelectMenu.model.reactivateProvider(); diff --git a/qml/AppUI/FullScreenContent.qml b/qml/AppUI/FullScreenContent.qml index c335f37..ae5e921 100644 --- a/qml/AppUI/FullScreenContent.qml +++ b/qml/AppUI/FullScreenContent.qml @@ -1,12 +1,31 @@ +/* + * 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.12 import QtQuick.Layouts 1.12 -import QtQuick.Controls 2.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 + spacing: 0 Item { Layout.preferredWidth: 90 @@ -110,6 +129,7 @@ RowLayout { cellWidth: contentViewBase.cellWidth cellHeight: contentViewBase.cellHeight model: modelManager.getAppModel() + delegate: Loader { width: GridView.view.cellWidth height: width @@ -282,14 +302,34 @@ RowLayout { } Item { - Layout.preferredWidth: 90 + Layout.preferredWidth: 48 Layout.fillHeight: true - AppControls2.ScrollBar { + ScrollBar { id: fullScreenScrollBar - anchors.horizontalCenter: parent.horizontalCenter - height: parent.height - width: 20 + anchors.centerIn: parent + 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 + } } } } diff --git a/qml/AppUI/FullScreenFooter.qml b/qml/AppUI/FullScreenFooter.qml index e7aa824..ab6bd95 100644 --- a/qml/AppUI/FullScreenFooter.qml +++ b/qml/AppUI/FullScreenFooter.qml @@ -1,8 +1,62 @@ -import QtQuick 2.0 +/* + * 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 . + * + */ -Item { - Text { - anchors.fill: parent - text: qsTr("FullScreenFooter.qml") +import QtQuick 2.0 +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 + +Row { + Layout.fillWidth: true + Layout.preferredHeight: 48 + layoutDirection: Qt.RightToLeft + + AppControls2.StyleBackground { + width: 48; height: width + useStyleTransparent: false + paletteRole: Palette.Light + alpha: powerButtonArea.containsPress ? 0.25 : powerButtonArea.containsMouse ? 0.12 : 0 + radius: height / 2 + + PowerButton { + id: powerButtonBase + } + + Image { + anchors.centerIn: parent + width: Math.floor(parent.width / 2) + height: width + source: powerButtonBase.icon + } + + MouseArea { + id: powerButtonArea + anchors.fill: parent + hoverEnabled: true + ToolTip.visible: containsMouse + ToolTip.text: powerButtonBase.toolTip + onClicked: { + powerButtonBase.clicked() + } + } } } + diff --git a/qml/AppUI/FullScreenHeader.qml b/qml/AppUI/FullScreenHeader.qml index b80028e..2b644ab 100644 --- a/qml/AppUI/FullScreenHeader.qml +++ b/qml/AppUI/FullScreenHeader.qml @@ -3,26 +3,56 @@ import QtQuick.Layouts 1.12 import QtQuick.Controls 2.12 import AppControls2 1.0 as AppControls2 import org.ukui.menu.core 1.0 +import org.ukui.menu.utils 1.0 Item { clip: true + SearchInputBar { + width: 372; height: 36 + anchors.centerIn: parent + radius: height / 2 + + onTextChanged: { + if (text === "") { + pluginSelectMenu.model.reactivateProvider(); + } else { + appPageHeaderUtils.model(PluginGroup.Button).reactivateProvider(); + appPageHeaderUtils.startSearch(text); + } + } + } PluginSelectMenu { + id: pluginSelectMenu anchors.right: parent.right anchors.rightMargin: 72 // 48+24 anchors.verticalCenter: parent.verticalCenter - width: 80 - height: 48 + height: 48; width: 72 // 48+16+8 spacing: 8 } - AppControls2.RoundButton { + AppControls2.StyleBackground { + width: 48; height: width + radius: 4 + useStyleTransparent: false + paletteRole: Palette.Light + alpha: buttonMouseArea.containsPress ? 0.30 : buttonMouseArea.containsMouse ? 0.20 : 0.00 anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - width: 48 - height: 48 - buttonIcon: "image://appicon/view-restore-symbolic" - onClicked: mainWindow.exitFullScreen() + + ThemeIcon { + anchors.centerIn: parent + width: parent.width / 2; height: width + source: "image://appicon/view-restore-symbolic" + highLight: true + autoHighLight: false + } + MouseArea { + id: buttonMouseArea + hoverEnabled: true + anchors.fill: parent + onClicked: mainWindow.exitFullScreen() + } } } diff --git a/qml/AppUI/PluginSelectMenu.qml b/qml/AppUI/PluginSelectMenu.qml index acc5afe..4a930c8 100644 --- a/qml/AppUI/PluginSelectMenu.qml +++ b/qml/AppUI/PluginSelectMenu.qml @@ -122,14 +122,14 @@ RowLayout { clip: true spacing: 4 model: pluginSelectMenuRoot.model + delegate: AppControls2.StyleBackground { width: ListView.view ? ListView.view.width : 0 height: 32 radius: 4 - alpha: mouseArea.containsMouse ? 0.2 : 1 - paletteRole: mouseArea.containsMouse ? Palette.Text : Palette.Window + alpha: mouseArea.containsMouse ? 0.2 : 0 + paletteRole: Palette.Text useStyleTransparent: false - opacity: sortMenu.opacity Item { anchors.fill: parent diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml index 011b084..0cd483e 100644 --- a/qml/AppUI/SearchInputBar.qml +++ b/qml/AppUI/SearchInputBar.qml @@ -16,7 +16,7 @@ * */ -import QtQuick 2.0 +import QtQuick 2.12 import QtQuick.Controls 2.5 import QtQuick.Layouts 1.12 import org.ukui.menu.core 1.0 @@ -30,49 +30,95 @@ AppControls2.StyleBackground { alpha: 0.04 useStyleTransparent: false paletteRole: Palette.Text - border.width: textInput.activeFocus ? 1 : 0 + border.width: 1 + isFocus: textInput.activeFocus - RowLayout { - anchors.fill: parent - anchors.rightMargin: parent.radius + Item { + id: defaultSearch + width: searchIcon.width + defaultText.contentWidth; height: parent.height + anchors.horizontalCenter: mainWindow.isFullScreen ? parent.horizontalCenter : undefined + anchors.verticalCenter: parent.verticalCenter Item { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.margins: 2 - Layout.maximumWidth: parent.height - 2*Layout.margins - Layout.maximumHeight: parent.height - Layout.alignment: Qt.AlignVCenter + id: searchIcon + width: 32; height: 32 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: (parent.height - height) / 2 - Image { + ThemeIcon { anchors.centerIn: parent - width:16; height: 16 + width: parent.height / 2; height: width source: "image://appicon/search-symbolic" + highLight: mainWindow.isFullScreen } } - Item { - Layout.fillWidth: true - Layout.fillHeight: true - TextInput { - id: textInput - clip: true - anchors.fill: parent - selectByMouse: true - 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) + AppControls2.StyleText { + id: defaultText + anchors.verticalCenter: parent.verticalCenter + anchors.left: searchIcon.right + text: qsTr("Search App") + visible: textInput.contentWidth === 0 + font.pixelSize: 14 + paletteRole: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text + verticalAlignment: TextInput.AlignVCenter + alpha: 0.25 + } + + states: State { + when: textInput.activeFocus || !mainWindow.isFullScreen + AnchorChanges { + target: defaultSearch + anchors.left: parent.left + anchors.horizontalCenter: undefined } } + + transitions: Transition { + AnchorAnimation { duration: 300; easing.type: Easing.InOutCubic } + } + } + + TextInput { + id: textInput + clip: true + anchors.right: parent.right + width: parent.width - searchIcon.width + height: parent.height + selectByMouse: true + verticalAlignment: TextInput.AlignVCenter + font.pixelSize: 14 + focus: parent.visible || mainWindow.isFullScreen + onActiveFocusChanged: clear() + + property int textColor: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text + + function updateTextInputColor() { + color = themePalette.paletteColor(textColor) + selectionColor = themePalette.paletteColor(Palette.Highlight) + } + + Component.onCompleted: { + updateTextInputColor(); + themePalette.styleColorChanged.connect(updateTextInputColor); + } + + onTextColorChanged: updateTextInputColor() + Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor) + } + + AppControls2.RoundButton { + id: clearButton + width: 18; height: width + anchors.right: parent.right + anchors.rightMargin: (parent.height - height) / 2 + anchors.verticalCenter: parent.verticalCenter + visible: mainWindow.isFullScreen && textInput.activeFocus + buttonIcon: "image://appicon/edit-clear-symbolic" + highlight: true + + onClicked: textInput.clear(); } } diff --git a/qml/AppUI/Sidebar.qml b/qml/AppUI/Sidebar.qml index b573fc3..7802084 100644 --- a/qml/AppUI/Sidebar.qml +++ b/qml/AppUI/Sidebar.qml @@ -63,7 +63,7 @@ Item { radius: 4 useStyleTransparent: false alpha: buttonMouseArea.containsPress ? 0.65 : buttonMouseArea.containsMouse ? 0.40 : 0.00 - Image { + ThemeIcon { anchors.centerIn: parent width: parent.width / 2; height: width source: "image://appicon/view-fullscreen-symbolic" diff --git a/qml/main.qml b/qml/main.qml index 74be2f8..4fb96cd 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -74,8 +74,10 @@ Item { anchors.left: parent.left anchors.bottom: parent.bottom radius: 12 - state: "normalScreen" + Component.onCompleted: { + state = mainWindow.isFullScreen ? "fullScreen" : "normalScreen" + } onHeightChanged: { if (root.transparency <= 0.6 && root.onComlpeted) { mainWindow.changeWindowBlurRegion(0, root.height - height, width, height) @@ -159,15 +161,24 @@ Item { sourceComponent: normalComponent NumberAnimation { id: normalShow; target: normalScreenLoader; properties: "opacity"; from: 0; to: 1; duration: root.animationDuration; easing.type: Easing.InQuint } NumberAnimation { id: normalHide; target: normalScreenLoader; properties: "opacity"; from: 1; to: 0; duration: root.animationDuration; easing.type: Easing.OutQuint } + + Component.onCompleted: { + active = mainWindow.isFullScreen ? false : true; + opacity = mainWindow.isFullScreen ? 0 : 1; + } } Loader { id: fullScreenLoader anchors.fill: parent sourceComponent: fullSceenComponent - opacity: 0 NumberAnimation { id: fullShow; target: fullScreenLoader; properties: "opacity"; from: 0; to: 1; duration: root.animationDuration; easing.type: Easing.InQuint } NumberAnimation { id: fullHide; target: fullScreenLoader; properties: "opacity"; from: 1; to: 0; duration: root.animationDuration; easing.type: Easing.OutQuint } + + Component.onCompleted: { + active = mainWindow.isFullScreen ? true : false; + opacity = mainWindow.isFullScreen ? 1 : 0; + } } Component {