添加全屏基础按键：搜索框、电源、滑动条、缩小窗口按键

2023-03-24 17:47:17 +08:00 · 2023-03-24 17:47:17 +08:00 · c82c70a662
parent 71a3e79930
commit c82c70a662
9 changed files with 253 additions and 59 deletions
--- 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()
+    }
 }

--- 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();
--- 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 <https://www.gnu.org/licenses/>.
+ *
+ */
+
 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
+            }
        }
    }
 }
--- 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 <https://www.gnu.org/licenses/>.
+ *
+ */

-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()
+            }
+        }
    }
 }
+
--- 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()
+        }
    }
 }

--- 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
--- 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();
    }
 }
--- 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"
--- 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 {