feat(src): Modify the icons of window button & Change Blur radius and add ToolButton

LingmoStyle/CMakeLists.txt

@@ -41,7 +41,7 @@ endforeach (filepath)
 # Set Qt6 QMl Plugins
 qt_add_qml_module(${MODULE_NAME}
     PLUGIN_TARGET ${MODULE_NAME}
-    OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/QtQuick/Controls/LingmoStyle
+    OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/temp/QtQuick/Controls/LingmoStyle
     VERSION ${MODULE_VERSION}
     URI "QtQuick.Controls.LingmoStyle"
     TYPEINFO "plugins.qmltypes"
@@ -50,5 +50,5 @@ qt_add_qml_module(${MODULE_NAME}
     RESOURCE_PREFIX "/style"
 )
 
-install(DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/QtQuick/Controls/LingmoStyle DESTINATION ${INSTALL_QMLDIR}/QtQuick/Controls)
+install(DIRECTORY ${CMAKE_BINARY_DIR}/temp/QtQuick/Controls/LingmoStyle DESTINATION ${INSTALL_QMLDIR}/QtQuick/Controls)
 install(TARGETS ${MODULE_NAME} DESTINATION ${INSTALL_QMLDIR}/QtQuick/Controls/${MODULE_NAME})

LingmoStyle/ToolButton.qml

@@ -1,12 +1,63 @@
-// Copyright (C) 2017 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+/*
+ * SPDX-FileCopyrightText: 2024 Elysia <[email protected]>
+ *
+ * SPDX-License-Identifier: GPL-3.0
+ */
 
 import QtQuick
 import QtQuick.Templates as T
 import QtQuick.Controls.impl
-import QtQuick.Controls.Universal
+import LingmoUI
 
 T.ToolButton {
+    property bool disabled: !enabled
+    property string contentDescription: ""
+    property color normalColor: LingmoTheme.dark ? Qt.rgba(
+                                                    62 / 255, 62 / 255,
+                                                    62 / 255,
+                                                    1) : Qt.rgba(254 / 255, 254 / 255, 254 / 255, 1)
+    property color hoverColor: LingmoTheme.dark ? Qt.rgba(
+                                                   68 / 255, 68 / 255,
+                                                   68 / 255,
+                                                   1) : Qt.rgba(246 / 255, 246 / 255, 246 / 255, 1)
+    property color disableColor: LingmoTheme.dark ? Qt.rgba(
+                                                     59 / 255, 59 / 255,
+                                                     59 / 255,
+                                                     1) : Qt.rgba(251 / 255, 251
+                                                                  / 255, 251 / 255, 1)
+    property color dividerColor: LingmoTheme.dark ? Qt.rgba(
+                                                     80 / 255, 80 / 255,
+                                                     80 / 255,
+                                                     1) : Qt.rgba(233 / 255, 233
+                                                                  / 255, 233 / 255, 1)
+    property color textColor: {
+        if (LingmoTheme.dark) {
+            if (!enabled) {
+                return Qt.rgba(131 / 255, 131 / 255, 131 / 255, 1)
+            }
+            if (pressed) {
+                return Qt.rgba(162 / 255, 162 / 255, 162 / 255, 1)
+            }
+            return Qt.rgba(1, 1, 1, 1)
+        } else {
+            if (!enabled) {
+                return Qt.rgba(160 / 255, 160 / 255, 160 / 255, 1)
+            }
+            if (pressed) {
+                return Qt.rgba(96 / 255, 96 / 255, 96 / 255, 1)
+            }
+            return Qt.rgba(0, 0, 0, 1)
+        }
+    }
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
+    verticalPadding: 0
+    horizontalPadding: 12
+    font: LingmoTextStyle.Body
+    focusPolicy: Qt.TabFocus
+
     id: control
 
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
@@ -31,20 +82,23 @@ T.ToolButton {
         icon: control.icon
         text: control.text
         font: control.font
-        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+        color: control.textColor
     }
 
-    background: Rectangle {
+    background: LingmoControlBackground {
         implicitWidth: 68
-        implicitHeight: 48 // AppBarThemeCompactHeight
-
-        color: control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : "transparent"
-
-        Rectangle {
-            width: parent.width
-            height: parent.height
-            visible: enabled && (control.down || control.hovered)
-            color: control.down ? control.Universal.listMediumColor : control.Universal.listLowColor
+        implicitHeight: 48
+        radius: LingmoUnits.smallRadius
+        color: {
+            if (!enabled) {
+                return disableColor
+            }
+            return hovered ? hoverColor : normalColor
+        }
+        shadow: !pressed && enabled
+        LingmoFocusRectangle {
+            visible: control.activeFocus
+            radius: LingmoUnits.smallRadius
         }
     }
 }

example/qml/main.qml

@@ -8,6 +8,7 @@ LingmoObject {
     Component.onCompleted: {
         LingmoApp.init(root, Qt.locale("zh_CN"));
         LingmoTheme.animationEnabled = true;
+        LingmoTheme.blurBehindWindowEnabled = true;
         LingmoTheme.darkMode = LingmoThemeType.Dark;
 
         LingmoRouter.routes = {

example/qml/windows/MainPage.qml

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import LingmoUI
+import QtQuick.Controls.LingmoStyle as QQCL
 
 LingmoWindow {
     id: window
@@ -85,5 +86,10 @@ LingmoWindow {
                 console.log("成功点击！")
             }
         }
+
+        QQCL.ToolButton {
+            Layout.alignment: Qt.AlignHCenter
+            text: "I'm an Button"
+        }
     }
 }

src/Controls/LingmoAppBar.qml

@@ -208,9 +208,9 @@ Rectangle {
             padding: 0
             verticalPadding: 0
             horizontalPadding: 0
-            iconSource: LingmoIcons.ChromeMinimize
+            iconSource: LingmoIcons.ChevronDown
             Layout.alignment: Qt.AlignVCenter
-            iconSize: 11
+            iconSize: 16
             text: minimizeText
             radius: LingmoUnits.windowRadius
             visible: !isMac && showMinimize
@@ -231,7 +231,7 @@ Rectangle {
             padding: 0
             verticalPadding: 0
             horizontalPadding: 0
-            iconSource: d.isRestore ? LingmoIcons.ChromeRestore : LingmoIcons.ChromeMaximize
+            iconSource: d.isRestore ? LingmoIcons.BackToWindow : LingmoIcons.FullScreen
             color: {
                 if (down) {
                     return maximizePressColor
@@ -243,7 +243,7 @@ Rectangle {
             radius: LingmoUnits.windowRadius
             iconColor: control.textColor
             text: d.isRestore ? restoreText : maximizeText
-            iconSize: 11
+            iconSize: 12
             onClicked: maxClickListener()
         }
         LingmoIconButton {

src/Controls/LingmoWindow.qml

@@ -14,7 +14,7 @@ Window {
     property Component loadingItem: com_loading
     property bool fitsAppBarWindows: false
     property var tintOpacity: LingmoTheme.dark ? 0.80 : 0.75
-    property int blurRadius: 60
+    property int blurRadius: 80
     // Do not change this in other place!
     property var windowVisibility: window.visibility
     property alias effect: frameless.effect