From 3ec0841b44617a8501d3ad4ccdf32db741756c50 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Thu, 20 Apr 2023 14:56:09 +0800 Subject: [PATCH] add FluPasswordBox --- example/T_TextBox.qml | 38 +++++++++ example/component/CodeExpander.qml | 3 +- src/Fluent.cpp | 1 + src/controls/FluPasswordBox.qml | 120 +++++++++++++++++++++++++++++ src/controls/FluRadioButton.qml | 4 +- src/res.qrc | 1 + 6 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 src/controls/FluPasswordBox.qml diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml index d201916..cad1a38 100644 --- a/example/T_TextBox.qml +++ b/example/T_TextBox.qml @@ -51,6 +51,44 @@ FluScrollablePage{ }' } + FluArea{ + Layout.fillWidth: true + height: 68 + paddings: 10 + Layout.topMargin: 20 + + FluPasswordBox{ + Layout.topMargin: 20 + placeholderText: "请输入密码" + Layout.preferredWidth: 300 + disabled:password_box_switch.selected + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + } + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:password_box_switch + Layout.alignment: Qt.AlignRight + text:"Disabled" + } + } + } + CodeExpander{ + Layout.fillWidth: true + Layout.topMargin: -1 + code:'FluPasswordBox{ + placeholderText:"请输入密码" +}' + } + FluArea{ Layout.fillWidth: true diff --git a/example/component/CodeExpander.qml b/example/component/CodeExpander.qml index 5a23a35..98e51c8 100644 --- a/example/component/CodeExpander.qml +++ b/example/component/CodeExpander.qml @@ -118,7 +118,8 @@ FluExpander{ "FluColors", "FluTheme", "FluStatusView", - "FluRatingControl" + "FluRatingControl", + "FluPasswordBox" ]; code = code.replace(/\n/g, "
"); code = code.replace(/ /g, " "); diff --git a/src/Fluent.cpp b/src/Fluent.cpp index dc275f5..36c3e41 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -88,6 +88,7 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRadioButton.qml"),uri,major,minor,"FluRadioButton"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluSlider.qml"),uri,major,minor,"FluSlider"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTextBox.qml"),uri,major,minor,"FluTextBox"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPasswordBox.qml"),uri,major,minor,"FluPasswordBox"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluText.qml"),uri,major,minor,"FluText"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFilledButton.qml"),uri,major,minor,"FluFilledButton"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleSwitch.qml"),uri,major,minor,"FluToggleSwitch"); diff --git a/src/controls/FluPasswordBox.qml b/src/controls/FluPasswordBox.qml new file mode 100644 index 0000000..7e5cace --- /dev/null +++ b/src/controls/FluPasswordBox.qml @@ -0,0 +1,120 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import FluentUI + +TextField{ + + property int fontStyle: FluText.Body + property int pixelSize : FluTheme.textSize + property bool disabled: false + property int iconSource: 0 + property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) + property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + 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) + + id:control + width: 300 + enabled: !disabled + color: { + if(disabled){ + return disableColor + } + return normalColor + } + echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password + renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering + selectionColor: FluTheme.primaryColor.lightest + placeholderTextColor: { + if(disabled){ + return placeholderDisableColor + } + if(focus){ + return placeholderFocusColor + } + return placeholderNormalColor + } + font.bold: { + switch (fontStyle) { + case FluText.Display: + return true + case FluText.TitleLarge: + return true + case FluText.Title: + return true + case FluText.SubTitle: + return true + case FluText.BodyStrong: + return true + case FluText.Body: + return false + case FluText.Caption: + return false + default: + return false + } + } + font.pixelSize: { + switch (fontStyle) { + case FluText.Display: + return text.pixelSize * 4.857 + case FluText.TitleLarge: + return text.pixelSize * 2.857 + case FluText.Title: + return text.pixelSize * 2 + case FluText.SubTitle: + return text.pixelSize * 1.428 + case FluText.Body: + return text.pixelSize * 1.0 + case FluText.BodyStrong: + return text.pixelSize * 1.0 + case FluText.Caption: + return text.pixelSize * 0.857 + default: + return text.pixelSize * 1.0 + } + } + selectByMouse: true + rightPadding: icon_end.visible ? 50 : 30 + background: FluTextBoxBackground{ + inputItem: control + 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 + } + } + } + FluIconButton{ + id:btn_reveal + iconSource:FluentIcons.RevealPasswordMedium + iconSize: 10 + width: 20 + height: 20 + opacity: 0.5 + visible: control.text !== "" + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: icon_end.visible ? 25 : 5 + } + } + TapHandler { + acceptedButtons: Qt.RightButton + onTapped: control.echoMode !== TextInput.Password && menu.popup() + } + FluTextBoxMenu{ + id:menu + inputItem: control + } + +} + diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml index d8f33ca..e21ea17 100644 --- a/src/controls/FluRadioButton.qml +++ b/src/controls/FluRadioButton.qml @@ -48,7 +48,9 @@ Button { } Behavior on border.width { NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.BezierSpline + easing.bezierCurve: [ 0, 0, 0, 1 ] } } border.color: { diff --git a/src/res.qrc b/src/res.qrc index c8ac590..c925cdd 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -70,5 +70,6 @@ controls/FluStatusView.qml controls/FluPaneItemEmpty.qml controls/FluRatingControl.qml + controls/FluPasswordBox.qml