update

example/qml/page/T_ShortcutPicker.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"ShortcutPicker"
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 100
+        paddings: 10
+        FluShortcutPicker{
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluShortcutPicker{
+
+}'
+    }
+
+}
+

src/Qt5/imports/FluentUI/Controls/FluButton.qml

@@ -6,8 +6,8 @@ Button {
     property bool disabled: false
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -33,6 +33,7 @@ Button {
     Accessible.onPressAction: control.clicked()
     id: control
     enabled: !disabled
+    verticalPadding: 0
     horizontalPadding:12
     font:FluTextStyle.Body
     focusPolicy:Qt.TabFocus

src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -7,8 +7,8 @@ Button {
     property bool disabled: false
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -38,6 +38,7 @@ Button {
     rightPadding:35
     enabled: !disabled
     focusPolicy:Qt.TabFocus
+    verticalPadding: 0
     horizontalPadding:12
     background: Rectangle{
         implicitWidth: 28

src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml

@@ -27,6 +27,7 @@ Button {
     enabled: !disabled
     focusPolicy:Qt.TabFocus
     font:FluTextStyle.Body
+    verticalPadding: 0
     horizontalPadding:12
     background: Rectangle{
         implicitWidth: 28

src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml

@@ -21,14 +21,14 @@ Button {
         if(d.checked){
             return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
         }else{
-            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
         }
     }
     property color disableColor: {
         if(d.checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
         }
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
@@ -39,6 +39,7 @@ Button {
     focusPolicy:Qt.TabFocus
     id: control
     enabled: !disabled
+    verticalPadding: 0
     horizontalPadding:12
     background: FluClip{
         implicitWidth: 28
@@ -69,7 +70,7 @@ Button {
             color: FluTheme.primaryColor
             anchors.bottom: parent.bottom
             Behavior on height{
-                enabled: control.progress !== 1
+                enabled: control.progress === 1
                 SequentialAnimation {
                     PauseAnimation {
                         duration: FluTheme.enableAnimation ? 167 : 0

src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluIconButton {
+
+    id:control
+
+    background: Rectangle{
+        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
+        border.width: 1
+        implicitHeight: 42
+        implicitWidth: layout_row.width+28
+        radius: control.radius
+        color:control.color
+        FluFocusRectangle{
+            visible: control.activeFocus
+        }
+    }
+
+    component ItemKey:Rectangle{
+        id:item_key_control
+        property string text : ""
+        color:FluTheme.primaryColor
+        width: Math.max(item_text.implicitWidth+12,28)
+        height: Math.max(item_text.implicitHeight,28)
+        radius: 4
+        Text{
+            id:item_text
+            color: FluTheme.dark ? Qt.rgba(0,0,0,1)  : Qt.rgba(1,1,1,1)
+            font.pixelSize: 13
+            text: item_key_control.text
+            anchors.centerIn: parent
+        }
+    }
+
+    Row{
+        id:layout_row
+        spacing: 5
+        anchors.centerIn: parent
+        ItemKey{
+            text:"Ctrl"
+        }
+        ItemKey{
+            text:"A"
+        }
+        Item{
+            width: 3
+            height: 1
+        }
+        FluIcon{
+            iconSource: FluentIcons.EditMirrored
+            iconSize: 13
+            anchors{
+                verticalCenter: parent.verticalCenter
+            }
+        }
+
+    }
+
+    FluContentDialog{
+        id:content_dialog
+
+    }
+
+    onClicked: {
+        content_dialog.open()
+    }
+
+}

src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml

@@ -16,14 +16,14 @@ Button {
         if(checked){
             return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
         }else{
-            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
         }
     }
     property color disableColor: {
         if(checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
         }
     }
     property var clickListener : function(){
@@ -37,6 +37,7 @@ Button {
     focusPolicy:Qt.TabFocus
     id: control
     enabled: !disabled
+    verticalPadding: 0
     horizontalPadding:12
     onClicked: clickListener()
     onCheckableChanged: {

src/Qt5/imports/FluentUI/Controls/FluWindow.qml

@@ -304,8 +304,7 @@ Window {
         return lifecycle.createRegister(window,path)
     }
     function moveWindowToDesktopCenter(){
-        window.x = (Screen.desktopAvailableWidth - window.width)/2
-        window.y = (Screen.desktopAvailableHeight - window.height)/2
+        return framless_helper.moveWindowToDesktopCenter()
     }
     function onResult(data){
         if(_pageRegister){

src/Qt6/imports/FluentUI/Controls/FluButton.qml

@@ -7,8 +7,8 @@ Button {
     property bool disabled: false
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -34,6 +34,7 @@ Button {
     Accessible.onPressAction: control.clicked()
     id: control
     enabled: !disabled
+    verticalPadding: 0
     horizontalPadding:12
     font:FluTextStyle.Body
     focusPolicy:Qt.TabFocus

src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -8,8 +8,8 @@ Button {
     property bool disabled: false
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -39,6 +39,7 @@ Button {
     rightPadding:35
     enabled: !disabled
     focusPolicy:Qt.TabFocus
+    verticalPadding: 0
     horizontalPadding:12
     background: Rectangle{
         implicitWidth: 28

src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml

@@ -28,6 +28,7 @@ Button {
     enabled: !disabled
     focusPolicy:Qt.TabFocus
     font:FluTextStyle.Body
+    verticalPadding: 0
     horizontalPadding:12
     background: Rectangle{
         implicitWidth: 28

src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml

@@ -22,14 +22,14 @@ Button {
         if(d.checked){
             return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
         }else{
-            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
         }
     }
     property color disableColor: {
         if(d.checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
         }
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
@@ -40,6 +40,7 @@ Button {
     focusPolicy:Qt.TabFocus
     id: control
     enabled: !disabled
+    verticalPadding: 0
     horizontalPadding:12
     background: FluClip{
         implicitWidth: 28

src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml

@@ -22,8 +22,8 @@ FluIconButton {
         id:item_key_control
         property string text : ""
         color:FluTheme.primaryColor
-        width: Math.max(item_text.implicitWidth + 12,28)
-        height: Math.max(item_text.implicitHeight + 12,28)
+        width: Math.max(item_text.implicitWidth+12,28)
+        height: Math.max(item_text.implicitHeight,28)
         radius: 4
         Text{
             id:item_text
@@ -68,3 +68,4 @@ FluIconButton {
     }
 
 }
+

src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml

@@ -17,14 +17,14 @@ Button {
         if(checked){
             return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
         }else{
-            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
         }
     }
     property color disableColor: {
         if(checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
         }
     }
     property var clickListener : function(){
@@ -38,6 +38,7 @@ Button {
     focusPolicy:Qt.TabFocus
     id: control
     enabled: !disabled
+    verticalPadding: 0
     horizontalPadding:12
     onClicked: clickListener()
     background: Rectangle{

src/Qt6/imports/FluentUI/Controls/FluWindow.qml

@@ -303,8 +303,7 @@ Window {
         return lifecycle.createRegister(window,path)
     }
     function moveWindowToDesktopCenter(){
-        window.x = (Screen.desktopAvailableWidth - window.width)/2
-        window.y = (Screen.desktopAvailableHeight - window.height)/2
+        return framless_helper.moveWindowToDesktopCenter()
     }
     function onResult(data){
         if(_pageRegister){