diff --git a/example/qml/page/T_Progress.qml b/example/qml/page/T_Progress.qml index 56f92512..27bf6418 100644 --- a/example/qml/page/T_Progress.qml +++ b/example/qml/page/T_Progress.qml @@ -12,32 +12,71 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true Layout.topMargin: 20 - height: 260 + height: 110 paddings: 10 + ColumnLayout{ - spacing: 20 + spacing: 10 anchors{ verticalCenter: parent.verticalCenter left: parent.left } + FluText{ + text: "indeterminate = true" + } FluProgressBar{ } FluProgressRing{ } + } + } + CodeExpander{ + Layout.fillWidth: true + Layout.topMargin: -1 + code:'FluProgressBar{ + +} +FluProgressRing{ + +} +' + } + + FluArea{ + Layout.fillWidth: true + Layout.topMargin: 20 + height: 230 + paddings: 10 + + ColumnLayout{ + spacing: 10 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + FluText{ + text: "indeterminate = false" + } FluProgressBar{ - id:progress_bar indeterminate: false + progress: slider.value/100 } FluProgressRing{ - id:progress_ring indeterminate: false + progress: slider.value/100 + } + FluProgressBar{ + indeterminate: false + progressVisible: true + progress: slider.value/100 + } + FluProgressRing{ + indeterminate: false + progressVisible: true + progress: slider.value/100 } FluSlider{ - onValueChanged:{ - var progress = value/100 - progress_bar.progress = progress - progress_ring.progress = progress - } + id:slider Component.onCompleted: { value = 50 } @@ -48,22 +87,14 @@ FluScrollablePage{ Layout.fillWidth: true Layout.topMargin: -1 code:'FluProgressBar{ - -} - -FluProgressRing{ - -} - -FluProgressBar{ indeterminate: false } - FluProgressRing{ indeterminate: false -}' + progressVisible: true +} +' } - } diff --git a/example/qml/page/T_Rectangle.qml b/example/qml/page/T_Rectangle.qml index 50011446..9cfe42aa 100644 --- a/example/qml/page/T_Rectangle.qml +++ b/example/qml/page/T_Rectangle.qml @@ -12,7 +12,7 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true Layout.topMargin: 20 - height: 480 + height: 460 paddings: 10 Column{ diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml index fefe4ff9..4b722064 100644 --- a/example/qml/page/T_TableView.qml +++ b/example/qml/page/T_TableView.qml @@ -64,8 +64,8 @@ FluContentPage{ address: getRandomAddresses(), nickname: getRandomNickname(), longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好", - height:46, - minimumHeight:46, + height:42, + minimumHeight:42, maximumHeight:300, action:com_action }) diff --git a/src/imports/FluentUI/Controls/FluComboBox.qml b/src/imports/FluentUI/Controls/FluComboBox.qml index 4eb89adf..06e8a10b 100644 --- a/src/imports/FluentUI/Controls/FluComboBox.qml +++ b/src/imports/FluentUI/Controls/FluComboBox.qml @@ -39,8 +39,8 @@ ComboBox { } contentItem: T.TextField { property bool disabled: !control.editable - leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1 - rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1 + leftPadding: !control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1 + rightPadding: control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1 topPadding: 6 - control.padding bottomPadding: 6 - control.padding renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering diff --git a/src/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/imports/FluentUI/Controls/FluMultilineTextBox.qml index faafb157..1f535af6 100644 --- a/src/imports/FluentUI/Controls/FluMultilineTextBox.qml +++ b/src/imports/FluentUI/Controls/FluMultilineTextBox.qml @@ -23,7 +23,7 @@ TextArea{ font:FluTextStyle.Body wrapMode: Text.WrapAnywhere padding: 8 - leftPadding: 8 + leftPadding: padding+2 renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering selectedTextColor: color selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) diff --git a/src/imports/FluentUI/Controls/FluPasswordBox.qml b/src/imports/FluentUI/Controls/FluPasswordBox.qml index 8d0da5cf..e6d8a93b 100644 --- a/src/imports/FluentUI/Controls/FluPasswordBox.qml +++ b/src/imports/FluentUI/Controls/FluPasswordBox.qml @@ -23,7 +23,7 @@ TextField{ } font:FluTextStyle.Body padding: 8 - leftPadding: 8 + leftPadding: padding+2 echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6) diff --git a/src/imports/FluentUI/Controls/FluProgressBar.qml b/src/imports/FluentUI/Controls/FluProgressBar.qml index 319a51b0..2a45c091 100644 --- a/src/imports/FluentUI/Controls/FluProgressBar.qml +++ b/src/imports/FluentUI/Controls/FluProgressBar.qml @@ -2,44 +2,67 @@ import QtQuick import QtQuick.Controls import FluentUI -FluRectangle { +Item{ + property real progress: 0.5 property bool indeterminate: true + property bool progressVisible: false id: control width: 150 height: 5 - radius: [3,3,3,3] - clip: true - color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1) - Component.onCompleted: { - if(indeterminate){ - bar.x = -control.width*0.5 - behavior.enabled = true - bar.x = control.width - }else{ - bar.x = 0 + + FluRectangle { + shadow: false + radius: [3,3,3,3] + anchors.fill: parent + color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1) + Component.onCompleted: { + if(indeterminate){ + bar.x = -control.width*0.5 + behavior.enabled = true + bar.x = control.width + }else{ + bar.x = 0 + } } - } - Rectangle{ - id:bar - radius: 3 - width: control.width*progress - height: control.height - color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark - Behavior on x{ - id:behavior - enabled: false - NumberAnimation{ - duration: 1000 - onRunningChanged: { - if(!running){ - behavior.enabled = false - bar.x = -control.width*0.5 - behavior.enabled = true - bar.x = control.width + Rectangle{ + id:bar + radius: 3 + width: control.width*progress + height: control.height + color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + Behavior on x{ + id:behavior + enabled: false + NumberAnimation{ + duration: 1000 + onRunningChanged: { + if(!running){ + behavior.enabled = false + bar.x = -control.width*0.5 + behavior.enabled = true + bar.x = control.width + } } } } } } + + FluText{ + text:(control.progress * 100).toFixed(0) + "%" + font.pixelSize: 10 + visible: { + if(control.indeterminate){ + return false + } + return control.progressVisible + } + anchors{ + left: parent.left + leftMargin: control.width+5 + verticalCenter: parent.verticalCenter + } + } } + diff --git a/src/imports/FluentUI/Controls/FluProgressRing.qml b/src/imports/FluentUI/Controls/FluProgressRing.qml index 5f7b9a24..d809e918 100644 --- a/src/imports/FluentUI/Controls/FluProgressRing.qml +++ b/src/imports/FluentUI/Controls/FluProgressRing.qml @@ -6,8 +6,8 @@ Rectangle { property real linWidth : width/8 property real progress: 0.25 property bool indeterminate: true - readonly property real radius2 : radius - linWidth/2 property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + property bool progressVisible: false id: control width: 44 height: 44 @@ -24,6 +24,10 @@ Rectangle { control.rotation = 360 } } + QtObject{ + id:d + property real _radius: control.radius-control.linWidth/2 + } Connections{ target: FluTheme function onDarkChanged(){ @@ -53,18 +57,29 @@ Rectangle { antialiasing: true renderTarget: Canvas.Image onPaint: { - var ctx = canvas.getContext("2d"); - ctx.setTransform(1, 0, 0, 1, 0, 0); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.save(); - ctx.lineWidth = linWidth; - ctx.strokeStyle = primaryColor; - ctx.fillStyle = primaryColor; - ctx.beginPath(); - ctx.arc(width/2, height/2, radius2 ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI); - ctx.stroke(); - ctx.closePath(); - ctx.restore(); + var ctx = canvas.getContext("2d") + ctx.setTransform(1, 0, 0, 1, 0, 0) + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.save() + ctx.lineWidth = linWidth + ctx.strokeStyle = primaryColor + ctx.fillStyle = primaryColor + ctx.beginPath() + ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI) + ctx.stroke() + ctx.closePath() + ctx.restore() } } + FluText{ + text:(control.progress * 100).toFixed(0) + "%" + font.pixelSize: 10 + visible: { + if(control.indeterminate){ + return false + } + return control.progressVisible + } + anchors.centerIn: parent + } } diff --git a/src/imports/FluentUI/Controls/FluTableView.qml b/src/imports/FluentUI/Controls/FluTableView.qml index b3d2145a..fe5a9997 100644 --- a/src/imports/FluentUI/Controls/FluTableView.qml +++ b/src/imports/FluentUI/Controls/FluTableView.qml @@ -49,6 +49,9 @@ Rectangle { if(obj){ return obj } + if(columnSource[column].editMultiline === true){ + return com_edit_multiline + } return com_edit } } @@ -63,6 +66,23 @@ Rectangle { } Component{ id:com_edit + FluTextBox{ + text: display + readOnly: true === columnSource[column].readOnly + Component.onCompleted: { + forceActiveFocus() + selectAll() + } + onCommit: { + if(!readOnly){ + display = text + } + tableView.closeEditor() + } + } + } + Component{ + id:com_edit_multiline Item{ anchors.fill: parent ScrollView{ @@ -455,7 +475,7 @@ Rectangle { var minimumHeight = obj.minimumHeight var maximumHeight = obj.maximumHeight if(!minimumHeight){ - minimumHeight = 46 + minimumHeight = 42 } if(!maximumHeight){ maximumHeight = 65535 diff --git a/src/imports/FluentUI/Controls/FluTextBox.qml b/src/imports/FluentUI/Controls/FluTextBox.qml index 9eab2904..b3155a2e 100644 --- a/src/imports/FluentUI/Controls/FluTextBox.qml +++ b/src/imports/FluentUI/Controls/FluTextBox.qml @@ -16,7 +16,7 @@ TextField{ id:control width: 300 padding: 8 - leftPadding: 8 + leftPadding: padding+2 enabled: !disabled color: { if(!enabled){