diff --git a/example/qml-Qt6/App.qml b/example/qml-Qt6/App.qml index 70bc1c7a..5430b133 100644 --- a/example/qml-Qt6/App.qml +++ b/example/qml-Qt6/App.qml @@ -28,6 +28,7 @@ Window { FluApp.init(app) FluTheme.darkMode = FluThemeType.System FluTheme.enableAnimation = true + FluTheme.nativeText = true FluApp.routes = { "/":"qrc:/example/qml/window/MainWindow.qml", "/about":"qrc:/example/qml/window/AboutWindow.qml", diff --git a/example/qml/App.qml b/example/qml/App.qml index 0060ec77..72dadab8 100644 --- a/example/qml/App.qml +++ b/example/qml/App.qml @@ -28,6 +28,7 @@ Window { FluApp.init(app) FluTheme.darkMode = FluThemeType.System FluTheme.enableAnimation = true + FluTheme.nativeText = true FluApp.routes = { "/":"qrc:/example/qml/window/MainWindow.qml", "/about":"qrc:/example/qml/window/AboutWindow.qml", diff --git a/src/Qt5/imports/FluentUI/Controls/FluContentDialog.qml b/src/Qt5/imports/FluentUI/Controls/FluContentDialog.qml index 5c177337..48266caf 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluContentDialog.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluContentDialog.qml @@ -38,7 +38,6 @@ FluPopup { right: parent.right } } - Flickable{ id:sroll_message contentWidth: width @@ -47,11 +46,10 @@ FluPopup { left: parent.left right: parent.right } + boundsBehavior:Flickable.StopAtBounds contentHeight: text_message.height - clip: true height: Math.min(text_message.height,300) ScrollBar.vertical: FluScrollBar {} - FluText{ id:text_message font: FluTextStyle.Body @@ -63,9 +61,7 @@ FluPopup { rightPadding: 20 bottomPadding: 14 } - } - Rectangle{ id:layout_actions height: 68 @@ -140,4 +136,3 @@ FluPopup { } } } - diff --git a/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml index 5d9bc200..aacbef50 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml @@ -20,8 +20,8 @@ TextArea{ } font:FluTextStyle.Body wrapMode: Text.WrapAnywhere - padding: 8 - leftPadding: padding+2 + padding: 7 + leftPadding: padding+4 renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering selectedTextColor: color selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) diff --git a/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml b/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml index 1d5ed6e5..811b6ab3 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml @@ -20,8 +20,8 @@ TextField{ return normalColor } font:FluTextStyle.Body - padding: 8 - leftPadding: padding+2 + padding: 7 + leftPadding: padding+4 echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) @@ -36,22 +36,9 @@ TextField{ return placeholderNormalColor } selectByMouse: true - rightPadding: icon_end.visible ? 50 : 30 background: FluTextBoxBackground{ inputItem: control implicitWidth: 240 - FluIcon{ - id:icon_end - iconSource: control.iconSource - iconSize: 15 - opacity: 0.5 - visible: control.iconSource != 0 - anchors{ - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 5 - } - } } Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event) @@ -65,16 +52,16 @@ TextField{ id:btn_reveal iconSource:FluentIcons.RevealPasswordMedium iconSize: 10 - width: 20 + width: 30 height: 20 verticalPadding: 0 horizontalPadding: 0 - opacity: 0.5 + iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1) visible: control.text !== "" anchors{ verticalCenter: parent.verticalCenter right: parent.right - rightMargin: icon_end.visible ? 25 : 5 + rightMargin: 5 } } FluTextBoxMenu{ diff --git a/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml b/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml index 917e2f66..171875d9 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml @@ -48,7 +48,7 @@ T.SpinBox { inputMethodHints: control.inputMethodHints Rectangle{ width: parent.width - height: contentItem.activeFocus ? 3 : 1 + height: contentItem.activeFocus ? 2 : 1 anchors.bottom: parent.bottom visible: contentItem.enabled color: { diff --git a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml index 2168b88a..3a192a60 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml @@ -142,7 +142,10 @@ Rectangle { id:item_text text: itemData anchors.fill: parent - anchors.margins: 10 + leftPadding: 11 + rightPadding: 11 + topPadding: 6 + bottomPadding: 6 elide: Text.ElideRight wrapMode: Text.WrapAnywhere verticalAlignment: Text.AlignVCenter diff --git a/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml b/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml index e2b28bc8..4a03cf86 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml @@ -1,4 +1,5 @@ import QtQuick 2.15 +import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 import FluentUI 1.0 @@ -11,11 +12,11 @@ TextField{ property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) - property int iconRightMargin: icon_end.visible ? 25 : 5 + property int iconRightMargin: icon_end.visible ? 40 : 5 property bool cleanEnabled: true id:control - padding: 8 - leftPadding: padding+2 + padding: 7 + leftPadding: padding+4 enabled: !disabled color: { if(!enabled){ @@ -25,7 +26,7 @@ TextField{ } font:FluTextStyle.Body renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering - selectionColor:FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) + selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) selectedTextColor: color placeholderTextColor: { if(!enabled){ @@ -41,18 +42,6 @@ TextField{ background: FluTextBoxBackground{ inputItem: control implicitWidth: 240 - FluIcon{ - id:icon_end - iconSource: control.iconSource - iconSize: 15 - opacity: 0.5 - visible: control.iconSource != 0 - anchors{ - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 5 - } - } } Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event) @@ -68,29 +57,43 @@ TextField{ acceptedButtons: Qt.RightButton onClicked: control.echoMode !== TextInput.Password && menu.popup() } - FluIconButton{ - iconSource:FluentIcons.ChromeClose - iconSize: 10 - width: 20 - height: 20 - verticalPadding: 0 - horizontalPadding: 0 - visible: { - if(control.cleanEnabled === false){ - return false - } - if(control.readOnly) - return false - return control.text !== "" - } + RowLayout{ + height: parent.height anchors{ - verticalCenter: parent.verticalCenter right: parent.right - rightMargin: control.iconRightMargin + rightMargin: 5 } - contentDescription:"清空" - onClicked:{ - control.text = "" + spacing: 4 + FluIconButton{ + iconSource: FluentIcons.Cancel + iconSize: 12 + Layout.preferredWidth: 30 + Layout.preferredHeight: 20 + Layout.alignment: Qt.AlignVCenter + iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1) + verticalPadding: 0 + horizontalPadding: 0 + visible: { + if(control.cleanEnabled === false){ + return false + } + if(control.readOnly) + return false + return control.text !== "" + } + contentDescription:"Clean" + onClicked:{ + control.text = "" + } + } + FluIcon{ + id:icon_end + iconSource: control.iconSource + iconSize: 12 + Layout.alignment: Qt.AlignVCenter + Layout.rightMargin: 10 + iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1) + visible: control.iconSource != 0 } } FluTextBoxMenu{ @@ -98,4 +101,3 @@ TextField{ inputItem: control } } - diff --git a/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml index 64d0698a..a7a96221 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml @@ -36,14 +36,14 @@ Rectangle{ } Rectangle{ width: parent.width - height: inputItem.activeFocus ? 3 : 1 + height: inputItem.activeFocus ? 2 : 1 anchors.bottom: parent.bottom visible: !inputItem.disabled color: { if(FluTheme.dark){ - inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) + return inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) }else{ - return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) + return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(134/255,134/255,134/255,1) } } Behavior on height{ diff --git a/src/Qt6/imports/FluentUI/Controls/FluContentDialog.qml b/src/Qt6/imports/FluentUI/Controls/FluContentDialog.qml index 20344527..b5934361 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluContentDialog.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluContentDialog.qml @@ -38,7 +38,6 @@ FluPopup { right: parent.right } } - Flickable{ id:sroll_message contentWidth: width @@ -47,11 +46,10 @@ FluPopup { left: parent.left right: parent.right } + boundsBehavior:Flickable.StopAtBounds contentHeight: text_message.height - clip: true height: Math.min(text_message.height,300) ScrollBar.vertical: FluScrollBar {} - FluText{ id:text_message font: FluTextStyle.Body @@ -63,9 +61,7 @@ FluPopup { rightPadding: 20 bottomPadding: 14 } - } - Rectangle{ id:layout_actions height: 68 diff --git a/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml index 2b94a105..3117f618 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml @@ -22,7 +22,7 @@ TextArea{ font:FluTextStyle.Body wrapMode: Text.WrapAnywhere padding: 8 - leftPadding: padding+2 + leftPadding: padding+4 renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering selectedTextColor: color selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) diff --git a/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml b/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml index cab67563..319ec100 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml @@ -21,11 +21,11 @@ TextField{ return normalColor } font:FluTextStyle.Body - padding: 8 - leftPadding: padding+2 + padding: 7 + leftPadding: padding+4 echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering - selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) + selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) selectedTextColor: color placeholderTextColor: { if(!enabled){ @@ -37,22 +37,9 @@ TextField{ return placeholderNormalColor } selectByMouse: true - rightPadding: icon_end.visible ? 50 : 30 background: FluTextBoxBackground{ inputItem: control implicitWidth: 240 - FluIcon{ - id:icon_end - iconSource: control.iconSource - iconSize: 15 - opacity: 0.5 - visible: control.iconSource != 0 - anchors{ - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 5 - } - } } Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event) @@ -66,16 +53,16 @@ TextField{ id:btn_reveal iconSource:FluentIcons.RevealPasswordMedium iconSize: 10 - width: 20 + width: 30 height: 20 verticalPadding: 0 horizontalPadding: 0 - opacity: 0.5 + iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1) visible: control.text !== "" anchors{ verticalCenter: parent.verticalCenter right: parent.right - rightMargin: icon_end.visible ? 25 : 5 + rightMargin: 5 } } FluTextBoxMenu{ diff --git a/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml b/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml index 2ebf5cd7..96f80fa2 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml @@ -49,7 +49,7 @@ T.SpinBox { inputMethodHints: control.inputMethodHints Rectangle{ width: parent.width - height: contentItem.activeFocus ? 3 : 1 + height: contentItem.activeFocus ? 2 : 1 anchors.bottom: parent.bottom visible: contentItem.enabled color: { diff --git a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml index 298488d5..171f2897 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml @@ -144,9 +144,12 @@ Rectangle { id:item_text text: itemData anchors.fill: parent - anchors.margins: 10 elide: Text.ElideRight wrapMode: Text.WrapAnywhere + leftPadding: 11 + rightPadding: 11 + topPadding: 6 + bottomPadding: 6 verticalAlignment: Text.AlignVCenter HoverHandler{ id: hover_handler @@ -230,7 +233,7 @@ Rectangle { clip: true delegate: Rectangle { id:item_table - property var position: Qt.point(column,row) + property point position: Qt.point(column,row) required property bool selected color: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)) implicitHeight: 40 @@ -283,7 +286,7 @@ Rectangle { property var itemData: display property var tableView: table_view property var tableModel: table_model - property var position: item_table.position + property point position: item_table.position property int row: position.y property int column: position.x anchors.fill: parent diff --git a/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml b/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml index a6266421..d74ae240 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml @@ -1,5 +1,6 @@ import QtQuick import QtQuick.Controls +import QtQuick.Layouts import QtQuick.Controls.Basic import FluentUI @@ -12,11 +13,11 @@ TextField{ property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) - property int iconRightMargin: icon_end.visible ? 25 : 5 + property int iconRightMargin: icon_end.visible ? 40 : 5 property bool cleanEnabled: true id:control - padding: 8 - leftPadding: padding+2 + padding: 7 + leftPadding: padding+4 enabled: !disabled color: { if(!enabled){ @@ -26,7 +27,7 @@ TextField{ } font:FluTextStyle.Body renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering - selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) + selectionColor: FluTools.colorAlpha(FluTheme.primaryColor.lightest,0.6) selectedTextColor: color placeholderTextColor: { if(!enabled){ @@ -42,18 +43,6 @@ TextField{ background: FluTextBoxBackground{ inputItem: control implicitWidth: 240 - FluIcon{ - id:icon_end - iconSource: control.iconSource - iconSize: 15 - opacity: 0.5 - visible: control.iconSource != 0 - anchors{ - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 5 - } - } } Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event) @@ -69,29 +58,43 @@ TextField{ acceptedButtons: Qt.RightButton onClicked: control.echoMode !== TextInput.Password && menu.popup() } - FluIconButton{ - iconSource:FluentIcons.ChromeClose - iconSize: 10 - width: 20 - height: 20 - verticalPadding: 0 - horizontalPadding: 0 - visible: { - if(control.cleanEnabled === false){ - return false - } - if(control.readOnly) - return false - return control.text !== "" - } + RowLayout{ + height: parent.height anchors{ - verticalCenter: parent.verticalCenter right: parent.right - rightMargin: control.iconRightMargin + rightMargin: 5 } - contentDescription:"清空" - onClicked:{ - control.text = "" + spacing: 4 + FluIconButton{ + iconSource: FluentIcons.Cancel + iconSize: 12 + Layout.preferredWidth: 30 + Layout.preferredHeight: 20 + Layout.alignment: Qt.AlignVCenter + iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1) + verticalPadding: 0 + horizontalPadding: 0 + visible: { + if(control.cleanEnabled === false){ + return false + } + if(control.readOnly) + return false + return control.text !== "" + } + contentDescription:"Clean" + onClicked:{ + control.text = "" + } + } + FluIcon{ + id:icon_end + iconSource: control.iconSource + iconSize: 12 + Layout.alignment: Qt.AlignVCenter + Layout.rightMargin: 10 + iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1) + visible: control.iconSource != 0 } } FluTextBoxMenu{ @@ -99,4 +102,3 @@ TextField{ inputItem: control } } - diff --git a/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml index 835e9ad8..dcbf94bb 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml @@ -36,14 +36,14 @@ Rectangle{ } Rectangle{ width: parent.width - height: inputItem.activeFocus ? 3 : 1 + height: inputItem.activeFocus ? 2 : 1 anchors.bottom: parent.bottom visible: !inputItem.disabled color: { if(FluTheme.dark){ - inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) + return inputItem.activeFocus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) }else{ - return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) + return inputItem.activeFocus ? FluTheme.primaryColor.dark : Qt.rgba(134/255,134/255,134/255,1) } } Behavior on height{