diff --git a/example/example_en_US.ts b/example/example_en_US.ts index a47dc335..8cc746c7 100644 --- a/example/example_en_US.ts +++ b/example/example_en_US.ts @@ -1089,46 +1089,6 @@ Updated content: Click to Select a Color - > - - - Cancel - - - - - OK - - - - - Color Picker - - - - - Edit Color - - - - - Red - - - - - Green - - - - - Blue - - - - - Opacity - - T_ComboBox diff --git a/example/example_zh_CN.ts b/example/example_zh_CN.ts index dd7776bd..21da450f 100644 --- a/example/example_zh_CN.ts +++ b/example/example_zh_CN.ts @@ -1113,44 +1113,36 @@ Updated content: 点击选中颜色 - > - Cancel - 取消 + 取消 - OK - 确定 + 确定 - Color Picker - 颜色选择器 + 颜色选择器 - Edit Color - 编辑颜色 + 编辑颜色 - Red - 红色 + 红色 - Green - 绿色 + 绿色 - Blue - 蓝色 + 蓝色 - Opacity - 透明度 + 透明度 diff --git a/example/qml/page/T_ColorPicker.qml b/example/qml/page/T_ColorPicker.qml index 8733f288..0fc22811 100644 --- a/example/qml/page/T_ColorPicker.qml +++ b/example/qml/page/T_ColorPicker.qml @@ -18,16 +18,7 @@ FluScrollablePage{ text: qsTr("Click to Select a Color - >") Layout.alignment: Qt.AlignVCenter } - FluColorPicker{ - cancelText: qsTr("Cancel") - okText: qsTr("OK") - titleText: qsTr("Color Picker") - editText: qsTr("Edit Color") - redText: qsTr("Red") - greenText: qsTr("Green") - blueText: qsTr("Blue") - opacityText: qsTr("Opacity") - } + FluColorPicker{} } } CodeExpander{ diff --git a/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml index 8d31b79c..5cf03217 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml @@ -53,8 +53,6 @@ FluButton { } Menu{ id:popup - height: container.height - width: container.width modal: true Overlay.modal: Item {} enter: Transition { @@ -75,458 +73,318 @@ FluButton { } } contentItem: Item{ - clip: true - Rectangle{ - id:container - width: 300 - height: 360 - radius: 4 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - ColumnLayout { - anchors.fill: parent - spacing: 0 - Item{ - Layout.fillWidth: true - Layout.preferredHeight: 50 - RowLayout{ - anchors.fill: parent - spacing: 10 - Item{ - Layout.leftMargin: parent.spacing - Layout.fillWidth: true - Layout.fillHeight: true - FluTextButton{ - width: parent.width + id:container + implicitWidth: 300 + implicitHeight: 360 + ColumnLayout { + anchors.fill: parent + spacing: 0 + Item{ + Layout.fillWidth: true + Layout.preferredHeight: 50 + RowLayout{ + anchors.fill: parent + spacing: 10 + Item{ + Layout.leftMargin: parent.spacing + Layout.fillWidth: true + Layout.fillHeight: true + FluTextButton{ + width: parent.width + anchors.centerIn: parent + contentItem: FluText { + text: d.displayDate.toLocaleString(FluApp.locale, "MMMM yyyy") + verticalAlignment: Text.AlignVCenter + } + visible: d.pageIndex === 0 + onClicked: { + d.pageIndex = 1 + } + } + FluTextButton{ + width: parent.width + anchors.centerIn: parent + contentItem: FluText { + text: d.displayDate.toLocaleString(FluApp.locale, "yyyy") + verticalAlignment: Text.AlignVCenter + } + visible: d.pageIndex === 1 + onClicked: { + d.pageIndex = 2 + } + } + FluTextButton{ + width: parent.width + anchors.centerIn: parent + contentItem: FluText { + text: "%1-%2".arg(d.yearRing.x).arg(d.yearRing.y) + verticalAlignment: Text.AlignVCenter + textColor: FluTheme.fontTertiaryColor + } + visible: d.pageIndex === 2 + } + } + FluIconButton{ + id:icon_up + iconSource: FluentIcons.CaretUpSolid8 + iconSize: 10 + onClicked: { + d.previousButton() + } + } + FluIconButton{ + id:icon_down + iconSource: FluentIcons.CaretDownSolid8 + iconSize: 10 + Layout.rightMargin: parent.spacing + onClicked: { + d.nextButton() + } + } + } + FluDivider{ + width: parent.width + height: 1 + anchors.bottom: parent.bottom + } + } + Item{ + Layout.fillWidth: true + Layout.fillHeight: true + StackView{ + id:stack_view + anchors.fill: parent + initialItem: com_page_one + replaceEnter : Transition{ + OpacityAnimator{ + from: 0 + to: 1 + duration: 83 + } + ScaleAnimator{ + from: 0.5 + to: 1 + duration: 167 + easing.type: Easing.OutCubic + } + } + replaceExit : Transition{ + OpacityAnimator{ + from: 1 + to: 0 + duration: 83 + } + ScaleAnimator{ + from: 1.0 + to: 0.5 + duration: 167 + easing.type: Easing.OutCubic + } + } + } + Connections{ + target: d + function onPageIndexChanged(){ + if(d.pageIndex === 0){ + stack_view.replace(com_page_one) + } + if(d.pageIndex === 1){ + stack_view.replace(com_page_two) + } + if(d.pageIndex === 2){ + stack_view.replace(com_page_three) + } + } + } + Component{ + id:com_page_three + GridView{ + id:grid_view + cellHeight: 75 + cellWidth: 75 + clip: true + boundsBehavior: GridView.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + model: { + var fromYear = calender_model.from.getFullYear() + var toYear = calender_model.to.getFullYear() + return toYear-fromYear+1 + } + highlightRangeMode: GridView.StrictlyEnforceRange + onCurrentIndexChanged:{ + var year = currentIndex + calender_model.from.getFullYear() + var start = Math.ceil(year / 10) * 10 + var end = start+10 + d.yearRing = Qt.point(start,end) + } + highlightMoveDuration: 100 + Component.onCompleted: { + grid_view.highlightMoveDuration = 0 + currentIndex = d.displayDate.getFullYear()-calender_model.from.getFullYear() + timer_delay.restart() + } + Connections{ + target: d + function onNextButton(){ + grid_view.currentIndex = Math.min(grid_view.currentIndex+16,grid_view.count-1) + } + function onPreviousButton(){ + grid_view.currentIndex = Math.max(grid_view.currentIndex-16,0) + } + } + Timer{ + id:timer_delay + interval: 100 + onTriggered: { + grid_view.highlightMoveDuration = 100 + } + } + currentIndex: -1 + delegate: Item{ + property int year : calender_model.from.getFullYear()+modelData + property bool toYear: year === d.toDay.getFullYear() + implicitHeight: 75 + implicitWidth: 75 + FluControl{ + id:control_delegate + width: 60 + height: 60 anchors.centerIn: parent - contentItem: FluText { - text: d.displayDate.toLocaleString(FluApp.locale, "MMMM yyyy") - verticalAlignment: Text.AlignVCenter + Rectangle{ + width: 48 + height: 48 + radius: width/2 + color: { + if(toYear){ + if(control_delegate.pressed){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) + } + if(control_delegate.hovered){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) + } + return FluTheme.primaryColor + }else{ + if(control_delegate.pressed){ + return FluTheme.itemPressColor + } + if(control_delegate.hovered){ + return FluTheme.itemHoverColor + } + return FluColors.Transparent + } + } + anchors.centerIn: parent + } + + FluText{ + text: year + anchors.centerIn: parent + opacity: { + if(year >= d.yearRing.x && year <= d.yearRing.y){ + return 1 + } + if(control_delegate.hovered){ + return 1 + } + return 0.3 + } + color: { + if(toYear){ + return FluColors.White + } + if(control_delegate.pressed){ + return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 + } + if(control_delegate.hovered){ + return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 + } + return FluTheme.dark ? FluColors.White : FluColors.Grey220 + } } - visible: d.pageIndex === 0 onClicked: { + d.displayDate = new Date(year,0,1) d.pageIndex = 1 } } - FluTextButton{ - width: parent.width - anchors.centerIn: parent - contentItem: FluText { - text: d.displayDate.toLocaleString(FluApp.locale, "yyyy") - verticalAlignment: Text.AlignVCenter - } - visible: d.pageIndex === 1 - onClicked: { - d.pageIndex = 2 - } - } - FluTextButton{ - width: parent.width - anchors.centerIn: parent - contentItem: FluText { - text: "%1-%2".arg(d.yearRing.x).arg(d.yearRing.y) - verticalAlignment: Text.AlignVCenter - textColor: FluTheme.fontTertiaryColor - } - visible: d.pageIndex === 2 - } } - FluIconButton{ - id:icon_up - iconSource: FluentIcons.CaretUpSolid8 - iconSize: 10 - onClicked: { - d.previousButton() - } - } - FluIconButton{ - id:icon_down - iconSource: FluentIcons.CaretDownSolid8 - iconSize: 10 - Layout.rightMargin: parent.spacing - onClicked: { - d.nextButton() - } - } - } - FluDivider{ - width: parent.width - height: 1 - anchors.bottom: parent.bottom } } - Item{ - Layout.fillWidth: true - Layout.fillHeight: true - StackView{ - id:stack_view - anchors.fill: parent - initialItem: com_page_one - replaceEnter : Transition{ - OpacityAnimator{ - from: 0 - to: 1 - duration: 83 - } - ScaleAnimator{ - from: 0.5 - to: 1 - duration: 167 - easing.type: Easing.OutCubic - } - } - replaceExit : Transition{ - OpacityAnimator{ - from: 1 - to: 0 - duration: 83 - } - ScaleAnimator{ - from: 1.0 - to: 0.5 - duration: 167 - easing.type: Easing.OutCubic - } - } - } - Connections{ - target: d - function onPageIndexChanged(){ - if(d.pageIndex === 0){ - stack_view.replace(com_page_one) - } - if(d.pageIndex === 1){ - stack_view.replace(com_page_two) - } - if(d.pageIndex === 2){ - stack_view.replace(com_page_three) - } - } - } - Component{ - id:com_page_three - GridView{ - id:grid_view - cellHeight: 75 - cellWidth: 75 - clip: true - boundsBehavior: GridView.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - model: { - var fromYear = calender_model.from.getFullYear() - var toYear = calender_model.to.getFullYear() - return toYear-fromYear+1 - } - highlightRangeMode: GridView.StrictlyEnforceRange - onCurrentIndexChanged:{ - var year = currentIndex + calender_model.from.getFullYear() - var start = Math.ceil(year / 10) * 10 - var end = start+10 - d.yearRing = Qt.point(start,end) - } - highlightMoveDuration: 100 - Component.onCompleted: { - grid_view.highlightMoveDuration = 0 - currentIndex = d.displayDate.getFullYear()-calender_model.from.getFullYear() - timer_delay.restart() - } - Connections{ - target: d - function onNextButton(){ - grid_view.currentIndex = Math.min(grid_view.currentIndex+16,grid_view.count-1) - } - function onPreviousButton(){ - grid_view.currentIndex = Math.max(grid_view.currentIndex-16,0) - } - } - Timer{ - id:timer_delay - interval: 100 - onTriggered: { - grid_view.highlightMoveDuration = 100 - } - } - currentIndex: -1 - delegate: Item{ - property int year : calender_model.from.getFullYear()+modelData - property bool toYear: year === d.toDay.getFullYear() - implicitHeight: 75 - implicitWidth: 75 - FluControl{ - id:control_delegate - width: 60 - height: 60 - anchors.centerIn: parent - Rectangle{ - width: 48 - height: 48 - radius: width/2 - color: { - if(toYear){ - if(control_delegate.pressed){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) - } - if(control_delegate.hovered){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) - } - return FluTheme.primaryColor - }else{ - if(control_delegate.pressed){ - return FluTheme.itemPressColor - } - if(control_delegate.hovered){ - return FluTheme.itemHoverColor - } - return FluColors.Transparent - } - } - anchors.centerIn: parent - } + Component{ + id:com_page_two - FluText{ - text: year - anchors.centerIn: parent - opacity: { - if(year >= d.yearRing.x && year <= d.yearRing.y){ - return 1 - } - if(control_delegate.hovered){ - return 1 - } - return 0.3 - } - color: { - if(toYear){ - return FluColors.White - } - if(control_delegate.pressed){ - return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 - } - if(control_delegate.hovered){ - return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 - } - return FluTheme.dark ? FluColors.White : FluColors.Grey220 - } - } - onClicked: { - d.displayDate = new Date(year,0,1) - d.pageIndex = 1 - } - } + ListView{ + id:listview + ScrollBar.vertical: FluScrollBar {} + highlightRangeMode: ListView.StrictlyEnforceRange + clip: true + boundsBehavior: ListView.StopAtBounds + spacing: 0 + highlightMoveDuration: 100 + model: { + var fromYear = calender_model.from.getFullYear() + var toYear = calender_model.to.getFullYear() + var yearsArray = [] + for (var i = fromYear; i <= toYear; i++) { + yearsArray.push(i) + } + return yearsArray + } + currentIndex: -1 + onCurrentIndexChanged:{ + var year = model[currentIndex] + var month = d.displayDate.getMonth() + d.displayDate = new Date(year,month,1) + } + Connections{ + target: d + function onNextButton(){ + listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) + } + function onPreviousButton(){ + listview.currentIndex = Math.max(listview.currentIndex-1,0) } } - } - Component{ - id:com_page_two - - ListView{ - id:listview - ScrollBar.vertical: FluScrollBar {} - highlightRangeMode: ListView.StrictlyEnforceRange - clip: true - boundsBehavior: ListView.StopAtBounds - spacing: 0 - highlightMoveDuration: 100 - model: { - var fromYear = calender_model.from.getFullYear() - var toYear = calender_model.to.getFullYear() - var yearsArray = [] - for (var i = fromYear; i <= toYear; i++) { - yearsArray.push(i) - } - return yearsArray - } - currentIndex: -1 - onCurrentIndexChanged:{ - var year = model[currentIndex] - var month = d.displayDate.getMonth() - d.displayDate = new Date(year,month,1) - } - Connections{ - target: d - function onNextButton(){ - listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) - } - function onPreviousButton(){ - listview.currentIndex = Math.max(listview.currentIndex-1,0) - } - } - Component.onCompleted: { - listview.highlightMoveDuration = 0 - currentIndex = model.indexOf(d.displayDate.getFullYear()) - timer_delay.restart() - } - Timer{ - id:timer_delay - interval: 100 - onTriggered: { - listview.highlightMoveDuration = 100 - } - } - delegate: Item{ - id:layout_congrol - property int year : modelData - width: listview.width - height: 75*3 - GridView{ - anchors.fill: parent - cellHeight: 75 - cellWidth: 75 - clip: true - interactive: false - boundsBehavior: GridView.StopAtBounds - model: 12 - delegate: Item{ - property int month : modelData - property bool toMonth: layout_congrol.year === d.toDay.getFullYear() && month === d.toDay.getMonth() - implicitHeight: 75 - implicitWidth: 75 - FluControl{ - id:control_delegate - width: 60 - height: 60 - anchors.centerIn: parent - Rectangle{ - width: 48 - height: 48 - radius: width/2 - color: { - if(toMonth){ - if(control_delegate.pressed){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) - } - if(control_delegate.hovered){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) - } - return FluTheme.primaryColor - }else{ - if(control_delegate.pressed){ - return FluTheme.itemPressColor - } - if(control_delegate.hovered){ - return FluTheme.itemHoverColor - } - return FluColors.Transparent - } - } - anchors.centerIn: parent - } - FluText{ - text: new Date(layout_congrol.year,month).toLocaleString(FluApp.locale, "MMMM") - anchors.centerIn: parent - opacity: { - if(layout_congrol.year === d.displayDate.getFullYear()){ - return 1 - } - if(control_delegate.hovered){ - return 1 - } - return 0.3 - } - color: { - if(toMonth){ - return FluColors.White - } - if(control_delegate.pressed){ - return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 - } - if(control_delegate.hovered){ - return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 - } - return FluTheme.dark ? FluColors.White : FluColors.Grey220 - } - } - onClicked: { - d.displayDate = new Date(layout_congrol.year,month) - d.pageIndex = 0 - } - } - } - } + Component.onCompleted: { + listview.highlightMoveDuration = 0 + currentIndex = model.indexOf(d.displayDate.getFullYear()) + timer_delay.restart() + } + Timer{ + id:timer_delay + interval: 100 + onTriggered: { + listview.highlightMoveDuration = 100 } } - } - Component{ - id:com_page_one - ColumnLayout { - DayOfWeekRow { - id: dayOfWeekRow - locale: FluApp.locale - font: FluTextStyle.Body - delegate: Label { - text: model.shortName - font: dayOfWeekRow.font - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - Layout.column: 1 - Layout.fillWidth: true - } - ListView{ - id:listview - property bool isCompleted: false - Layout.fillWidth: true - Layout.fillHeight: true - highlightRangeMode: ListView.StrictlyEnforceRange + delegate: Item{ + id:layout_congrol + property int year : modelData + width: listview.width + height: 75*3 + GridView{ + anchors.fill: parent + cellHeight: 75 + cellWidth: 75 clip: true - boundsBehavior: ListView.StopAtBounds - spacing: 0 - highlightMoveDuration: 100 - currentIndex: -1 - ScrollBar.vertical: FluScrollBar {} - onCurrentIndexChanged:{ - if(isCompleted){ - var month = calender_model.monthAt(currentIndex) - var year = calender_model.yearAt(currentIndex) - d.displayDate = new Date(year,month,1) - } - } - Component.onCompleted: { - listview.model = calender_model - listview.highlightMoveDuration = 0 - currentIndex = calender_model.indexOf(d.displayDate) - timer_delay.restart() - isCompleted = true - } - Timer{ - id:timer_delay - interval: 100 - onTriggered: { - listview.highlightMoveDuration = 100 - } - } - Connections{ - target: d - function onNextButton(){ - listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) - } - function onPreviousButton(){ - listview.currentIndex = Math.max(listview.currentIndex-1,0) - } - } - delegate: MonthGrid { - id: grid - width: listview.width - height: listview.height - month: model.month - year: model.year - spacing: 0 - locale: FluApp.locale - delegate: FluControl { - required property bool today - required property int year - required property int month - required property int day - required property int visibleMonth - id: control_delegate - visibleMonth: grid.month - implicitHeight: 40 - implicitWidth: 40 + interactive: false + boundsBehavior: GridView.StopAtBounds + model: 12 + delegate: Item{ + property int month : modelData + property bool toMonth: layout_congrol.year === d.toDay.getFullYear() && month === d.toDay.getMonth() + implicitHeight: 75 + implicitWidth: 75 + FluControl{ + id:control_delegate + width: 60 + height: 60 + anchors.centerIn: parent Rectangle{ - width: 34 - height: 34 + width: 48 + height: 48 radius: width/2 color: { - if(today){ + if(toMonth){ if(control_delegate.pressed){ return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) } @@ -546,31 +404,11 @@ FluButton { } anchors.centerIn: parent } - Rectangle{ - width: 40 - height: 40 - border.width: 1 - anchors.centerIn: parent - radius: width/2 - border.color: FluTheme.primaryColor - color: FluColors.Transparent - visible: { - if(control.current){ - var y = control.current.getFullYear() - var m = control.current.getMonth() - var d = control.current.getDate() - if(y === year && m === month && d === day){ - return true - } - return false - } - return false - } - } FluText{ - text: day + text: new Date(layout_congrol.year,month).toLocaleString(FluApp.locale, "MMMM") + anchors.centerIn: parent opacity: { - if(month === grid.month){ + if(layout_congrol.year === d.displayDate.getFullYear()){ return 1 } if(control_delegate.hovered){ @@ -578,9 +416,8 @@ FluButton { } return 0.3 } - anchors.centerIn: parent color: { - if(today){ + if(toMonth){ return FluColors.White } if(control_delegate.pressed){ @@ -593,17 +430,173 @@ FluButton { } } onClicked: { - control.current = new Date(year,month,day) - control.accepted() - popup.close() + d.displayDate = new Date(layout_congrol.year,month) + d.pageIndex = 0 } } - background: Item { - x: grid.leftPadding - y: grid.topPadding - width: grid.availableWidth - height: grid.availableHeight + } + } + } + } + } + Component{ + id:com_page_one + ColumnLayout { + DayOfWeekRow { + id: dayOfWeekRow + locale: FluApp.locale + font: FluTextStyle.Body + delegate: Label { + text: model.shortName + font: dayOfWeekRow.font + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + Layout.column: 1 + Layout.fillWidth: true + } + ListView{ + id:listview + property bool isCompleted: false + Layout.fillWidth: true + Layout.fillHeight: true + highlightRangeMode: ListView.StrictlyEnforceRange + clip: true + boundsBehavior: ListView.StopAtBounds + spacing: 0 + highlightMoveDuration: 100 + currentIndex: -1 + ScrollBar.vertical: FluScrollBar {} + onCurrentIndexChanged:{ + if(isCompleted){ + var month = calender_model.monthAt(currentIndex) + var year = calender_model.yearAt(currentIndex) + d.displayDate = new Date(year,month,1) + } + } + Component.onCompleted: { + listview.model = calender_model + listview.highlightMoveDuration = 0 + currentIndex = calender_model.indexOf(d.displayDate) + timer_delay.restart() + isCompleted = true + } + Timer{ + id:timer_delay + interval: 100 + onTriggered: { + listview.highlightMoveDuration = 100 + } + } + Connections{ + target: d + function onNextButton(){ + listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) + } + function onPreviousButton(){ + listview.currentIndex = Math.max(listview.currentIndex-1,0) + } + } + delegate: MonthGrid { + id: grid + width: listview.width + height: listview.height + month: model.month + year: model.year + spacing: 0 + locale: FluApp.locale + delegate: FluControl { + required property bool today + required property int year + required property int month + required property int day + required property int visibleMonth + id: control_delegate + visibleMonth: grid.month + implicitHeight: 40 + implicitWidth: 40 + Rectangle{ + width: 34 + height: 34 + radius: width/2 + color: { + if(today){ + if(control_delegate.pressed){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) + } + if(control_delegate.hovered){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) + } + return FluTheme.primaryColor + }else{ + if(control_delegate.pressed){ + return FluTheme.itemPressColor + } + if(control_delegate.hovered){ + return FluTheme.itemHoverColor + } + return FluColors.Transparent + } + } + anchors.centerIn: parent } + Rectangle{ + width: 40 + height: 40 + border.width: 1 + anchors.centerIn: parent + radius: width/2 + border.color: FluTheme.primaryColor + color: FluColors.Transparent + visible: { + if(control.current){ + var y = control.current.getFullYear() + var m = control.current.getMonth() + var d = control.current.getDate() + if(y === year && m === month && d === day){ + return true + } + return false + } + return false + } + } + FluText{ + text: day + opacity: { + if(month === grid.month){ + return 1 + } + if(control_delegate.hovered){ + return 1 + } + return 0.3 + } + anchors.centerIn: parent + color: { + if(today){ + return FluColors.White + } + if(control_delegate.pressed){ + return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 + } + if(control_delegate.hovered){ + return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 + } + return FluTheme.dark ? FluColors.White : FluColors.Grey220 + } + } + onClicked: { + control.current = new Date(year,month,day) + control.accepted() + popup.close() + } + } + background: Item { + x: grid.leftPadding + y: grid.topPadding + width: grid.availableWidth + height: grid.availableHeight } } } @@ -612,21 +605,23 @@ FluButton { } } } - background: Item{ + background:Rectangle{ + radius: 5 + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) FluShadow{ - radius: 4 + radius: 5 } } function showPopup() { var pos = control.mapToItem(null, 0, 0) if(d.window.height>pos.y+control.height+container.height){ - popup.y = control.height + popup.y = control.height - 1 } else if(pos.y>container.height){ popup.y = -container.height } else { popup.y = d.window.height-(pos.y+container.height) } - popup.x = -(popup.width-control.width)/2 popup.open() } } diff --git a/src/Qt5/imports/FluentUI/Controls/FluColorPicker.qml b/src/Qt5/imports/FluentUI/Controls/FluColorPicker.qml index c809cfc6..bdac72d9 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluColorPicker.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluColorPicker.qml @@ -13,16 +13,15 @@ Button{ property color current : Qt.rgba(1,1,1,1) signal accepted() property int colorHandleRadius: 8 - property string cancelText: "取消" - property string okText: "确定" - property string titleText: "颜色选择器" - property string editText: "编辑颜色" - property string redText: "红色" - property string greenText: "绿色" - property string blueText: "蓝色" - property string opacityText: "透明度" - background: - Rectangle{ + property string cancelText: qsTr("Cancel") + property string okText: qsTr("OK") + property string titleText: qsTr("Color Picker") + property string editText: qsTr("Edit Color") + property string redText: qsTr("Red") + property string greenText: qsTr("Green") + property string blueText: qsTr("Blue") + property string opacityText: qsTr("Opacity") + background: Rectangle{ id:layout_color radius: 5 color:"#00000000" diff --git a/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml b/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml index 1f03ae30..1ba43afa 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml @@ -4,7 +4,6 @@ import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 import FluentUI 1.0 - FluButton { property bool showYear: true property var current @@ -96,8 +95,6 @@ FluButton { Menu{ id:popup modal: true - width: container.width - height: container.height Overlay.modal: Item {} enter: Transition { reversible: true @@ -116,227 +113,220 @@ FluButton { duration: FluTheme.animationEnabled ? 83 : 0 } } - background:Item{ + background:Rectangle{ + radius: 5 + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) FluShadow{ - radius: 4 + radius: 5 } } contentItem: Item{ - clip: true - Rectangle{ - id:container - radius: 4 - width: 300 - height: 340 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - MouseArea{ - anchors.fill: parent - } - FluShadow{ - radius: 4 - } - RowLayout{ - id:layout_content - spacing: 0 - width: parent.width - height: 300 - Component{ - id:list_delegate - Item{ - height:38 - width:getListView().width - function getListView(){ - if(type === 0) - return list_view_1 - if(type === 1) - return list_view_2 - if(type === 2) - return list_view_3 + id:container + implicitHeight: 340 + implicitWidth: 300 + MouseArea{ + anchors.fill: parent + } + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 280 + Component{ + id:list_delegate + Item{ + height: 38 + width: getListView().width + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 + } + Rectangle{ + anchors.fill: parent + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { + if(getListView().currentIndex === position){ + return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor,1.1): FluTheme.primaryColor + } + if(item_mouse.containsMouse){ + return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return Qt.rgba(0,0,0,0) } - Rectangle{ + radius: 3 + MouseArea{ + id:item_mouse anchors.fill: parent - anchors.topMargin: 2 - anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 - color: { + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_year.text = model + list_view_2.model = generateMonthArray(1,12) + text_month.text = list_view_2.model[list_view_2.currentIndex] + + list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) + text_day.text = list_view_3.model[list_view_3.currentIndex] + } + if(type === 1){ + text_month.text = model + list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) + text_day.text = list_view_3.model[list_view_3.currentIndex] + + } + if(type === 2){ + text_day.text = model + } + } + } + FluText{ + text:model + color: { if(getListView().currentIndex === position){ - return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor,1.1): FluTheme.primaryColor - } - if(item_mouse.containsMouse){ - return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) - } - return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) - } - radius: 3 - MouseArea{ - id:item_mouse - anchors.fill: parent - hoverEnabled: true - onClicked: { - getListView().currentIndex = position - if(type === 0){ - text_year.text = model - list_view_2.model = generateMonthArray(1,12) - text_month.text = list_view_2.model[list_view_2.currentIndex] - - list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) - text_day.text = list_view_3.model[list_view_3.currentIndex] - } - if(type === 1){ - text_month.text = model - list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) - text_day.text = list_view_3.model[list_view_3.currentIndex] - - } - if(type === 2){ - text_day.text = model - } - } - } - FluText{ - text:model - color: { - if(getListView().currentIndex === position){ - if(FluTheme.dark){ - return Qt.rgba(0,0,0,1) - }else{ - return Qt.rgba(1,1,1,1) - } + if(FluTheme.dark){ + return Qt.rgba(0,0,0,1) }else{ - return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" + return Qt.rgba(1,1,1,1) } + }else{ + return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" } - anchors.centerIn: parent } + anchors.centerIn: parent } } } - ListView{ - id:list_view_1 - width: 100 - height: parent.height - boundsBehavior:Flickable.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - model: generateYearArray(1924,2048) - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - visible: showYear - delegate: FluLoader{ - property var model: modelData - property int type:0 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - } - ListView{ - id:list_view_2 - width: showYear ? 100 : 150 - height: parent.height - clip: true - ScrollBar.vertical: FluScrollBar {} - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:1 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - } - ListView{ - id:list_view_3 - width: showYear ? 100 : 150 - height: parent.height - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - Layout.alignment: Qt.AlignVCenter - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:2 - property int position:index - sourceComponent: list_delegate - } + } + ListView{ + id:list_view_1 + Layout.preferredWidth: 100 + Layout.preferredHeight: parent.height - 2 + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + model: generateYearArray(1924,2048) + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + visible: showYear + delegate: FluLoader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate } } Rectangle{ - width: parent.width - height: 1 - anchors.top: layout_content.bottom + Layout.preferredWidth: 1 + Layout.preferredHeight: parent.height + color: control.dividerColor + visible: showYear + } + ListView{ + id:list_view_2 + Layout.preferredWidth: showYear ? 99 : 150 + Layout.preferredHeight: parent.height - 2 + Layout.alignment: Qt.AlignVCenter + clip: true + ScrollBar.vertical: FluScrollBar {} + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + Layout.preferredWidth: 1 + Layout.preferredHeight: parent.height color: control.dividerColor } - Rectangle{ - id:layout_actions - height: 40 - radius: 5 - color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + ListView{ + id:list_view_3 + Layout.preferredWidth: showYear ? 99 : 150 + Layout.preferredHeight: parent.height - 2 + Layout.alignment: Qt.AlignVCenter + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } + } + Rectangle{ + id:layout_actions + height: 60 + color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) + radius: 5 + anchors{ + bottom:parent.bottom + left: parent.left + right: parent.right + } + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + FluButton{ anchors{ - bottom:parent.bottom left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: control.cancelText + onClicked: { + popup.close() + } + } + FluFilledButton{ + anchors{ right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter } - Item { - id:divider - width: 1 - height: parent.height - anchors.centerIn: parent - } - FluButton{ - anchors{ - left: parent.left - leftMargin: 20 - rightMargin: 10 - right: divider.left - verticalCenter: parent.verticalCenter - } - text: control.cancelText - onClicked: { - popup.close() - } - } - FluFilledButton{ - anchors{ - right: parent.right - left: divider.right - rightMargin: 20 - leftMargin: 10 - verticalCenter: parent.verticalCenter - } - text: control.okText - onClicked: { - d.changeFlag = false - popup.close() - const year = text_year.text - const month = text_month.text - const day = text_day.text - const date = new Date() - date.setFullYear(parseInt(year)); - date.setMonth(parseInt(month) - 1); - date.setDate(parseInt(day)); - date.setHours(0); - date.setMinutes(0); - date.setSeconds(0); - current = date - control.accepted() - } + text: control.okText + onClicked: { + d.changeFlag = false + popup.close() + const year = text_year.text + const month = text_month.text + const day = text_day.text + const date = new Date() + date.setFullYear(parseInt(year)); + date.setMonth(parseInt(month) - 1); + date.setDate(parseInt(day)); + date.setHours(0); + date.setMinutes(0); + date.setSeconds(0); + current = date + control.accepted() } } } @@ -361,7 +351,7 @@ FluButton { text_day.text = day var pos = control.mapToItem(null, 0, 0) if(d.window.height>pos.y+control.height+container.height){ - popup.y = control.height + popup.y = control.height-1 } else if(pos.y>container.height){ popup.y = -container.height } else { diff --git a/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml b/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml index 70d79f01..21b88b6c 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluTimePicker.qml @@ -111,8 +111,6 @@ FluButton { } Menu{ id:popup - width: container.width - height: container.height modal: true Overlay.modal: Item {} enter: Transition { @@ -132,224 +130,219 @@ FluButton { duration: FluTheme.animationEnabled ? 83 : 0 } } - background:Item{ + background:Rectangle{ + radius: 5 + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) FluShadow{ - radius: 4 + radius: 5 } } contentItem: Item{ - clip: true - Rectangle{ - id:container - height: 340 - width: 300 - radius: 4 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - MouseArea{ - anchors.fill: parent - } - RowLayout{ - id:layout_content - spacing: 0 - width: parent.width - height: 300 - Component{ - id:list_delegate - Item{ - height:38 - width:getListView().width - function getListView(){ - if(type === 0) - return list_view_1 - if(type === 1) - return list_view_2 - if(type === 2) - return list_view_3 + id:container + implicitHeight: 340 + implicitWidth: 300 + MouseArea{ + anchors.fill: parent + } + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 280 + Component{ + id:list_delegate + Item{ + height:38 + width:getListView().width + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 + } + Rectangle{ + anchors.fill: parent + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { + if(getListView().currentIndex === position){ + return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor,1.1) : FluTheme.primaryColor + } + if(item_mouse.containsMouse){ + return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return Qt.rgba(0,0,0,0) } - Rectangle{ + radius: 3 + MouseArea{ + id:item_mouse anchors.fill: parent - anchors.topMargin: 2 - anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 - color: { + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_hour.text = model + } + if(type === 1){ + text_minute.text = model + } + if(type === 2){ + text_ampm.text = model + } + } + } + FluText{ + text:model + color: { if(getListView().currentIndex === position){ - return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor,1.1) : FluTheme.primaryColor - } - if(item_mouse.containsMouse){ - return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) - } - return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) - } - radius: 3 - MouseArea{ - id:item_mouse - anchors.fill: parent - hoverEnabled: true - onClicked: { - getListView().currentIndex = position - if(type === 0){ - text_hour.text = model - } - if(type === 1){ - text_minute.text = model - } - if(type === 2){ - text_ampm.text = model - } - } - } - FluText{ - text:model - color: { - if(getListView().currentIndex === position){ - if(FluTheme.dark){ - return Qt.rgba(0,0,0,1) - }else{ - return Qt.rgba(1,1,1,1) - } + if(FluTheme.dark){ + return Qt.rgba(0,0,0,1) }else{ - return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" + return Qt.rgba(1,1,1,1) } + }else{ + return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" } - anchors.centerIn: parent } + anchors.centerIn: parent } } } - ListView{ - id:list_view_1 - width: isH ? 100 : 150 - height: parent.height - boundsBehavior:Flickable.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - model: isH ? generateArray(1,12) : generateArray(0,23) - clip: true - delegate: FluLoader{ - property var model: modelData - property int type:0 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - } - ListView{ - id:list_view_2 - width: isH ? 100 : 150 - height: parent.height - model: generateArray(0,59) - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:1 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - visible: isH - } - ListView{ - id:list_view_3 - width: 100 - height: 76 - model: [control.amText,control.pmText] - clip: true - visible: isH - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - Layout.alignment: Qt.AlignVCenter - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:2 - property int position:index - sourceComponent: list_delegate - } + } + ListView{ + id:list_view_1 + Layout.preferredWidth: isH ? 100 : 150 + Layout.preferredHeight: parent.height-2 + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + model: isH ? generateArray(1,12) : generateArray(0,23) + clip: true + delegate: FluLoader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate } } Rectangle{ - width: parent.width - height: 1 - anchors.top: layout_content.bottom + Layout.preferredWidth: 1 + Layout.preferredHeight: parent.height color: control.dividerColor } + ListView{ + id:list_view_2 + Layout.preferredWidth: isH ? 99 : 150 + Layout.preferredHeight: parent.height-2 + Layout.alignment: Qt.AlignVCenter + model: generateArray(0,59) + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } Rectangle{ - id:layout_actions - height: 40 - radius: 5 - color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + width: 1 + height: parent.height + color: control.dividerColor + visible: isH + } + ListView{ + id:list_view_3 + Layout.preferredWidth: 100 + Layout.preferredHeight: 76 + model: [control.amText,control.pmText] + clip: true + visible: isH + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } + } + Rectangle{ + id:layout_actions + height: 60 + color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) + radius: 5 + anchors{ + bottom:parent.bottom + left: parent.left + right: parent.right + } + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + FluButton{ anchors{ - bottom:parent.bottom left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: control.cancelText + onClicked: { + popup.close() + } + } + FluFilledButton{ + anchors{ right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter } - Item { - id:divider - width: 1 - height: parent.height - anchors.centerIn: parent - } - FluButton{ - anchors{ - left: parent.left - leftMargin: 20 - rightMargin: 10 - right: divider.left - verticalCenter: parent.verticalCenter - } - text: control.cancelText - onClicked: { - popup.close() - } - } - FluFilledButton{ - anchors{ - right: parent.right - left: divider.right - rightMargin: 20 - leftMargin: 10 - verticalCenter: parent.verticalCenter - } - text: control.okText - onClicked: { - d.changeFlag = false - popup.close() - const hours = text_hour.text - const minutes = text_minute.text - const period = text_ampm.text - const date = new Date() - var hours24 = parseInt(hours); - if(control.hourFormat === FluTimePickerType.H){ - if (hours === "12") { - hours24 = (period === control.amText) ? 0 : 12; - } else { - hours24 = (period === control.pmText) ? hours24 : hours24 + 12; - } + text: control.okText + onClicked: { + d.changeFlag = false + popup.close() + const hours = text_hour.text + const minutes = text_minute.text + const period = text_ampm.text + const date = new Date() + var hours24 = parseInt(hours); + if(control.hourFormat === FluTimePickerType.H){ + if (hours === "12") { + hours24 = (period === control.amText) ? 0 : 12; + } else { + hours24 = (period === control.pmText) ? hours24 : hours24 + 12; } - date.setHours(hours24); - date.setMinutes(parseInt(minutes)); - date.setSeconds(0); - current = date - control.accepted() } + date.setHours(hours24); + date.setMinutes(parseInt(minutes)); + date.setSeconds(0); + current = date + control.accepted() } } } @@ -387,7 +380,7 @@ FluButton { } var pos = control.mapToItem(null, 0, 0) if(d.window.height>pos.y+control.height+container.height){ - popup.y = control.height + popup.y = control.height-1 } else if(pos.y>container.height){ popup.y = -container.height } else { diff --git a/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml index 496021db..f6d7c39d 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml @@ -52,8 +52,6 @@ FluButton { } Menu{ id:popup - height: container.height - width: container.width modal: true Overlay.modal: Item {} enter: Transition { @@ -74,458 +72,318 @@ FluButton { } } contentItem: Item{ - clip: true - Rectangle{ - id:container - width: 300 - height: 360 - radius: 4 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - ColumnLayout { - anchors.fill: parent - spacing: 0 - Item{ - Layout.fillWidth: true - Layout.preferredHeight: 50 - RowLayout{ - anchors.fill: parent - spacing: 10 - Item{ - Layout.leftMargin: parent.spacing - Layout.fillWidth: true - Layout.fillHeight: true - FluTextButton{ - width: parent.width + id:container + implicitWidth: 300 + implicitHeight: 360 + ColumnLayout { + anchors.fill: parent + spacing: 0 + Item{ + Layout.fillWidth: true + Layout.preferredHeight: 50 + RowLayout{ + anchors.fill: parent + spacing: 10 + Item{ + Layout.leftMargin: parent.spacing + Layout.fillWidth: true + Layout.fillHeight: true + FluTextButton{ + width: parent.width + anchors.centerIn: parent + contentItem: FluText { + text: d.displayDate.toLocaleString(FluApp.locale, "MMMM yyyy") + verticalAlignment: Text.AlignVCenter + } + visible: d.pageIndex === 0 + onClicked: { + d.pageIndex = 1 + } + } + FluTextButton{ + width: parent.width + anchors.centerIn: parent + contentItem: FluText { + text: d.displayDate.toLocaleString(FluApp.locale, "yyyy") + verticalAlignment: Text.AlignVCenter + } + visible: d.pageIndex === 1 + onClicked: { + d.pageIndex = 2 + } + } + FluTextButton{ + width: parent.width + anchors.centerIn: parent + contentItem: FluText { + text: "%1-%2".arg(d.yearRing.x).arg(d.yearRing.y) + verticalAlignment: Text.AlignVCenter + textColor: FluTheme.fontTertiaryColor + } + visible: d.pageIndex === 2 + } + } + FluIconButton{ + id:icon_up + iconSource: FluentIcons.CaretUpSolid8 + iconSize: 10 + onClicked: { + d.previousButton() + } + } + FluIconButton{ + id:icon_down + iconSource: FluentIcons.CaretDownSolid8 + iconSize: 10 + Layout.rightMargin: parent.spacing + onClicked: { + d.nextButton() + } + } + } + FluDivider{ + width: parent.width + height: 1 + anchors.bottom: parent.bottom + } + } + Item{ + Layout.fillWidth: true + Layout.fillHeight: true + StackView{ + id:stack_view + anchors.fill: parent + initialItem: com_page_one + replaceEnter : Transition{ + OpacityAnimator{ + from: 0 + to: 1 + duration: 83 + } + ScaleAnimator{ + from: 0.5 + to: 1 + duration: 167 + easing.type: Easing.OutCubic + } + } + replaceExit : Transition{ + OpacityAnimator{ + from: 1 + to: 0 + duration: 83 + } + ScaleAnimator{ + from: 1.0 + to: 0.5 + duration: 167 + easing.type: Easing.OutCubic + } + } + } + Connections{ + target: d + function onPageIndexChanged(){ + if(d.pageIndex === 0){ + stack_view.replace(com_page_one) + } + if(d.pageIndex === 1){ + stack_view.replace(com_page_two) + } + if(d.pageIndex === 2){ + stack_view.replace(com_page_three) + } + } + } + Component{ + id:com_page_three + GridView{ + id:grid_view + cellHeight: 75 + cellWidth: 75 + clip: true + boundsBehavior: GridView.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + model: { + var fromYear = calender_model.from.getFullYear() + var toYear = calender_model.to.getFullYear() + return toYear-fromYear+1 + } + highlightRangeMode: GridView.StrictlyEnforceRange + onCurrentIndexChanged:{ + var year = currentIndex + calender_model.from.getFullYear() + var start = Math.ceil(year / 10) * 10 + var end = start+10 + d.yearRing = Qt.point(start,end) + } + highlightMoveDuration: 100 + Component.onCompleted: { + grid_view.highlightMoveDuration = 0 + currentIndex = d.displayDate.getFullYear()-calender_model.from.getFullYear() + timer_delay.restart() + } + Connections{ + target: d + function onNextButton(){ + grid_view.currentIndex = Math.min(grid_view.currentIndex+16,grid_view.count-1) + } + function onPreviousButton(){ + grid_view.currentIndex = Math.max(grid_view.currentIndex-16,0) + } + } + Timer{ + id:timer_delay + interval: 100 + onTriggered: { + grid_view.highlightMoveDuration = 100 + } + } + currentIndex: -1 + delegate: Item{ + property int year : calender_model.from.getFullYear()+modelData + property bool toYear: year === d.toDay.getFullYear() + implicitHeight: 75 + implicitWidth: 75 + FluControl{ + id:control_delegate + width: 60 + height: 60 anchors.centerIn: parent - contentItem: FluText { - text: d.displayDate.toLocaleString(FluApp.locale, "MMMM yyyy") - verticalAlignment: Text.AlignVCenter + Rectangle{ + width: 48 + height: 48 + radius: width/2 + color: { + if(toYear){ + if(control_delegate.pressed){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) + } + if(control_delegate.hovered){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) + } + return FluTheme.primaryColor + }else{ + if(control_delegate.pressed){ + return FluTheme.itemPressColor + } + if(control_delegate.hovered){ + return FluTheme.itemHoverColor + } + return FluColors.Transparent + } + } + anchors.centerIn: parent + } + + FluText{ + text: year + anchors.centerIn: parent + opacity: { + if(year >= d.yearRing.x && year <= d.yearRing.y){ + return 1 + } + if(control_delegate.hovered){ + return 1 + } + return 0.3 + } + color: { + if(toYear){ + return FluColors.White + } + if(control_delegate.pressed){ + return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 + } + if(control_delegate.hovered){ + return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 + } + return FluTheme.dark ? FluColors.White : FluColors.Grey220 + } } - visible: d.pageIndex === 0 onClicked: { + d.displayDate = new Date(year,0,1) d.pageIndex = 1 } } - FluTextButton{ - width: parent.width - anchors.centerIn: parent - contentItem: FluText { - text: d.displayDate.toLocaleString(FluApp.locale, "yyyy") - verticalAlignment: Text.AlignVCenter - } - visible: d.pageIndex === 1 - onClicked: { - d.pageIndex = 2 - } - } - FluTextButton{ - width: parent.width - anchors.centerIn: parent - contentItem: FluText { - text: "%1-%2".arg(d.yearRing.x).arg(d.yearRing.y) - verticalAlignment: Text.AlignVCenter - textColor: FluTheme.fontTertiaryColor - } - visible: d.pageIndex === 2 - } } - FluIconButton{ - id:icon_up - iconSource: FluentIcons.CaretUpSolid8 - iconSize: 10 - onClicked: { - d.previousButton() - } - } - FluIconButton{ - id:icon_down - iconSource: FluentIcons.CaretDownSolid8 - iconSize: 10 - Layout.rightMargin: parent.spacing - onClicked: { - d.nextButton() - } - } - } - FluDivider{ - width: parent.width - height: 1 - anchors.bottom: parent.bottom } } - Item{ - Layout.fillWidth: true - Layout.fillHeight: true - StackView{ - id:stack_view - anchors.fill: parent - initialItem: com_page_one - replaceEnter : Transition{ - OpacityAnimator{ - from: 0 - to: 1 - duration: 83 - } - ScaleAnimator{ - from: 0.5 - to: 1 - duration: 167 - easing.type: Easing.OutCubic - } - } - replaceExit : Transition{ - OpacityAnimator{ - from: 1 - to: 0 - duration: 83 - } - ScaleAnimator{ - from: 1.0 - to: 0.5 - duration: 167 - easing.type: Easing.OutCubic - } - } - } - Connections{ - target: d - function onPageIndexChanged(){ - if(d.pageIndex === 0){ - stack_view.replace(com_page_one) - } - if(d.pageIndex === 1){ - stack_view.replace(com_page_two) - } - if(d.pageIndex === 2){ - stack_view.replace(com_page_three) - } - } - } - Component{ - id:com_page_three - GridView{ - id:grid_view - cellHeight: 75 - cellWidth: 75 - clip: true - boundsBehavior: GridView.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - model: { - var fromYear = calender_model.from.getFullYear() - var toYear = calender_model.to.getFullYear() - return toYear-fromYear+1 - } - highlightRangeMode: GridView.StrictlyEnforceRange - onCurrentIndexChanged:{ - var year = currentIndex + calender_model.from.getFullYear() - var start = Math.ceil(year / 10) * 10 - var end = start+10 - d.yearRing = Qt.point(start,end) - } - highlightMoveDuration: 100 - Component.onCompleted: { - grid_view.highlightMoveDuration = 0 - currentIndex = d.displayDate.getFullYear()-calender_model.from.getFullYear() - timer_delay.restart() - } - Connections{ - target: d - function onNextButton(){ - grid_view.currentIndex = Math.min(grid_view.currentIndex+16,grid_view.count-1) - } - function onPreviousButton(){ - grid_view.currentIndex = Math.max(grid_view.currentIndex-16,0) - } - } - Timer{ - id:timer_delay - interval: 100 - onTriggered: { - grid_view.highlightMoveDuration = 100 - } - } - currentIndex: -1 - delegate: Item{ - property int year : calender_model.from.getFullYear()+modelData - property bool toYear: year === d.toDay.getFullYear() - implicitHeight: 75 - implicitWidth: 75 - FluControl{ - id:control_delegate - width: 60 - height: 60 - anchors.centerIn: parent - Rectangle{ - width: 48 - height: 48 - radius: width/2 - color: { - if(toYear){ - if(control_delegate.pressed){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) - } - if(control_delegate.hovered){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) - } - return FluTheme.primaryColor - }else{ - if(control_delegate.pressed){ - return FluTheme.itemPressColor - } - if(control_delegate.hovered){ - return FluTheme.itemHoverColor - } - return FluColors.Transparent - } - } - anchors.centerIn: parent - } + Component{ + id:com_page_two - FluText{ - text: year - anchors.centerIn: parent - opacity: { - if(year >= d.yearRing.x && year <= d.yearRing.y){ - return 1 - } - if(control_delegate.hovered){ - return 1 - } - return 0.3 - } - color: { - if(toYear){ - return FluColors.White - } - if(control_delegate.pressed){ - return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 - } - if(control_delegate.hovered){ - return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 - } - return FluTheme.dark ? FluColors.White : FluColors.Grey220 - } - } - onClicked: { - d.displayDate = new Date(year,0,1) - d.pageIndex = 1 - } - } + ListView{ + id:listview + ScrollBar.vertical: FluScrollBar {} + highlightRangeMode: ListView.StrictlyEnforceRange + clip: true + boundsBehavior: ListView.StopAtBounds + spacing: 0 + highlightMoveDuration: 100 + model: { + var fromYear = calender_model.from.getFullYear() + var toYear = calender_model.to.getFullYear() + var yearsArray = [] + for (var i = fromYear; i <= toYear; i++) { + yearsArray.push(i) + } + return yearsArray + } + currentIndex: -1 + onCurrentIndexChanged:{ + var year = model[currentIndex] + var month = d.displayDate.getMonth() + d.displayDate = new Date(year,month,1) + } + Connections{ + target: d + function onNextButton(){ + listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) + } + function onPreviousButton(){ + listview.currentIndex = Math.max(listview.currentIndex-1,0) } } - } - Component{ - id:com_page_two - - ListView{ - id:listview - ScrollBar.vertical: FluScrollBar {} - highlightRangeMode: ListView.StrictlyEnforceRange - clip: true - boundsBehavior: ListView.StopAtBounds - spacing: 0 - highlightMoveDuration: 100 - model: { - var fromYear = calender_model.from.getFullYear() - var toYear = calender_model.to.getFullYear() - var yearsArray = [] - for (var i = fromYear; i <= toYear; i++) { - yearsArray.push(i) - } - return yearsArray - } - currentIndex: -1 - onCurrentIndexChanged:{ - var year = model[currentIndex] - var month = d.displayDate.getMonth() - d.displayDate = new Date(year,month,1) - } - Connections{ - target: d - function onNextButton(){ - listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) - } - function onPreviousButton(){ - listview.currentIndex = Math.max(listview.currentIndex-1,0) - } - } - Component.onCompleted: { - listview.highlightMoveDuration = 0 - currentIndex = model.indexOf(d.displayDate.getFullYear()) - timer_delay.restart() - } - Timer{ - id:timer_delay - interval: 100 - onTriggered: { - listview.highlightMoveDuration = 100 - } - } - delegate: Item{ - id:layout_congrol - property int year : modelData - width: listview.width - height: 75*3 - GridView{ - anchors.fill: parent - cellHeight: 75 - cellWidth: 75 - clip: true - interactive: false - boundsBehavior: GridView.StopAtBounds - model: 12 - delegate: Item{ - property int month : modelData - property bool toMonth: layout_congrol.year === d.toDay.getFullYear() && month === d.toDay.getMonth() - implicitHeight: 75 - implicitWidth: 75 - FluControl{ - id:control_delegate - width: 60 - height: 60 - anchors.centerIn: parent - Rectangle{ - width: 48 - height: 48 - radius: width/2 - color: { - if(toMonth){ - if(control_delegate.pressed){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) - } - if(control_delegate.hovered){ - return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) - } - return FluTheme.primaryColor - }else{ - if(control_delegate.pressed){ - return FluTheme.itemPressColor - } - if(control_delegate.hovered){ - return FluTheme.itemHoverColor - } - return FluColors.Transparent - } - } - anchors.centerIn: parent - } - FluText{ - text: new Date(layout_congrol.year,month).toLocaleString(FluApp.locale, "MMMM") - anchors.centerIn: parent - opacity: { - if(layout_congrol.year === d.displayDate.getFullYear()){ - return 1 - } - if(control_delegate.hovered){ - return 1 - } - return 0.3 - } - color: { - if(toMonth){ - return FluColors.White - } - if(control_delegate.pressed){ - return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 - } - if(control_delegate.hovered){ - return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 - } - return FluTheme.dark ? FluColors.White : FluColors.Grey220 - } - } - onClicked: { - d.displayDate = new Date(layout_congrol.year,month) - d.pageIndex = 0 - } - } - } - } + Component.onCompleted: { + listview.highlightMoveDuration = 0 + currentIndex = model.indexOf(d.displayDate.getFullYear()) + timer_delay.restart() + } + Timer{ + id:timer_delay + interval: 100 + onTriggered: { + listview.highlightMoveDuration = 100 } } - } - Component{ - id:com_page_one - ColumnLayout { - DayOfWeekRow { - id: dayOfWeekRow - locale: FluApp.locale - font: FluTextStyle.Body - delegate: Label { - text: model.shortName - font: dayOfWeekRow.font - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - Layout.column: 1 - Layout.fillWidth: true - } - ListView{ - id:listview - property bool isCompleted: false - Layout.fillWidth: true - Layout.fillHeight: true - highlightRangeMode: ListView.StrictlyEnforceRange + delegate: Item{ + id:layout_congrol + property int year : modelData + width: listview.width + height: 75*3 + GridView{ + anchors.fill: parent + cellHeight: 75 + cellWidth: 75 clip: true - boundsBehavior: ListView.StopAtBounds - spacing: 0 - highlightMoveDuration: 100 - currentIndex: -1 - ScrollBar.vertical: FluScrollBar {} - onCurrentIndexChanged:{ - if(isCompleted){ - var month = calender_model.monthAt(currentIndex) - var year = calender_model.yearAt(currentIndex) - d.displayDate = new Date(year,month,1) - } - } - Component.onCompleted: { - listview.model = calender_model - listview.highlightMoveDuration = 0 - currentIndex = calender_model.indexOf(d.displayDate) - timer_delay.restart() - isCompleted = true - } - Timer{ - id:timer_delay - interval: 100 - onTriggered: { - listview.highlightMoveDuration = 100 - } - } - Connections{ - target: d - function onNextButton(){ - listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) - } - function onPreviousButton(){ - listview.currentIndex = Math.max(listview.currentIndex-1,0) - } - } - delegate: MonthGrid { - id: grid - width: listview.width - height: listview.height - month: model.month - year: model.year - spacing: 0 - locale: FluApp.locale - delegate: FluControl { - required property bool today - required property int year - required property int month - required property int day - required property int visibleMonth - id: control_delegate - visibleMonth: grid.month - implicitHeight: 40 - implicitWidth: 40 + interactive: false + boundsBehavior: GridView.StopAtBounds + model: 12 + delegate: Item{ + property int month : modelData + property bool toMonth: layout_congrol.year === d.toDay.getFullYear() && month === d.toDay.getMonth() + implicitHeight: 75 + implicitWidth: 75 + FluControl{ + id:control_delegate + width: 60 + height: 60 + anchors.centerIn: parent Rectangle{ - width: 34 - height: 34 + width: 48 + height: 48 radius: width/2 color: { - if(today){ + if(toMonth){ if(control_delegate.pressed){ return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) } @@ -545,31 +403,11 @@ FluButton { } anchors.centerIn: parent } - Rectangle{ - width: 40 - height: 40 - border.width: 1 - anchors.centerIn: parent - radius: width/2 - border.color: FluTheme.primaryColor - color: FluColors.Transparent - visible: { - if(control.current){ - var y = control.current.getFullYear() - var m = control.current.getMonth() - var d = control.current.getDate() - if(y === year && m === month && d === day){ - return true - } - return false - } - return false - } - } FluText{ - text: day + text: new Date(layout_congrol.year,month).toLocaleString(FluApp.locale, "MMMM") + anchors.centerIn: parent opacity: { - if(month === grid.month){ + if(layout_congrol.year === d.displayDate.getFullYear()){ return 1 } if(control_delegate.hovered){ @@ -577,9 +415,8 @@ FluButton { } return 0.3 } - anchors.centerIn: parent color: { - if(today){ + if(toMonth){ return FluColors.White } if(control_delegate.pressed){ @@ -592,17 +429,173 @@ FluButton { } } onClicked: { - control.current = new Date(year,month,day) - control.accepted() - popup.close() + d.displayDate = new Date(layout_congrol.year,month) + d.pageIndex = 0 } } - background: Item { - x: grid.leftPadding - y: grid.topPadding - width: grid.availableWidth - height: grid.availableHeight + } + } + } + } + } + Component{ + id:com_page_one + ColumnLayout { + DayOfWeekRow { + id: dayOfWeekRow + locale: FluApp.locale + font: FluTextStyle.Body + delegate: Label { + text: model.shortName + font: dayOfWeekRow.font + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + Layout.column: 1 + Layout.fillWidth: true + } + ListView{ + id:listview + property bool isCompleted: false + Layout.fillWidth: true + Layout.fillHeight: true + highlightRangeMode: ListView.StrictlyEnforceRange + clip: true + boundsBehavior: ListView.StopAtBounds + spacing: 0 + highlightMoveDuration: 100 + currentIndex: -1 + ScrollBar.vertical: FluScrollBar {} + onCurrentIndexChanged:{ + if(isCompleted){ + var month = calender_model.monthAt(currentIndex) + var year = calender_model.yearAt(currentIndex) + d.displayDate = new Date(year,month,1) + } + } + Component.onCompleted: { + listview.model = calender_model + listview.highlightMoveDuration = 0 + currentIndex = calender_model.indexOf(d.displayDate) + timer_delay.restart() + isCompleted = true + } + Timer{ + id:timer_delay + interval: 100 + onTriggered: { + listview.highlightMoveDuration = 100 + } + } + Connections{ + target: d + function onNextButton(){ + listview.currentIndex = Math.min(listview.currentIndex+1,listview.count-1) + } + function onPreviousButton(){ + listview.currentIndex = Math.max(listview.currentIndex-1,0) + } + } + delegate: MonthGrid { + id: grid + width: listview.width + height: listview.height + month: model.month + year: model.year + spacing: 0 + locale: FluApp.locale + delegate: FluControl { + required property bool today + required property int year + required property int month + required property int day + required property int visibleMonth + id: control_delegate + visibleMonth: grid.month + implicitHeight: 40 + implicitWidth: 40 + Rectangle{ + width: 34 + height: 34 + radius: width/2 + color: { + if(today){ + if(control_delegate.pressed){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.2) : Qt.lighter(FluTheme.primaryColor,1.2) + } + if(control_delegate.hovered){ + return FluTheme.dark ? Qt.darker(FluTheme.primaryColor,1.1) : Qt.lighter(FluTheme.primaryColor,1.1) + } + return FluTheme.primaryColor + }else{ + if(control_delegate.pressed){ + return FluTheme.itemPressColor + } + if(control_delegate.hovered){ + return FluTheme.itemHoverColor + } + return FluColors.Transparent + } + } + anchors.centerIn: parent } + Rectangle{ + width: 40 + height: 40 + border.width: 1 + anchors.centerIn: parent + radius: width/2 + border.color: FluTheme.primaryColor + color: FluColors.Transparent + visible: { + if(control.current){ + var y = control.current.getFullYear() + var m = control.current.getMonth() + var d = control.current.getDate() + if(y === year && m === month && d === day){ + return true + } + return false + } + return false + } + } + FluText{ + text: day + opacity: { + if(month === grid.month){ + return 1 + } + if(control_delegate.hovered){ + return 1 + } + return 0.3 + } + anchors.centerIn: parent + color: { + if(today){ + return FluColors.White + } + if(control_delegate.pressed){ + return FluTheme.dark ? FluColors.Grey100 : FluColors.Grey100 + } + if(control_delegate.hovered){ + return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120 + } + return FluTheme.dark ? FluColors.White : FluColors.Grey220 + } + } + onClicked: { + control.current = new Date(year,month,day) + control.accepted() + popup.close() + } + } + background: Item { + x: grid.leftPadding + y: grid.topPadding + width: grid.availableWidth + height: grid.availableHeight } } } @@ -611,21 +604,23 @@ FluButton { } } } - background: Item{ + background:Rectangle{ + radius: 5 + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) FluShadow{ - radius: 4 + radius: 5 } } function showPopup() { var pos = control.mapToItem(null, 0, 0) if(d.window.height>pos.y+control.height+container.height){ - popup.y = control.height + popup.y = control.height - 1 } else if(pos.y>container.height){ popup.y = -container.height } else { popup.y = d.window.height-(pos.y+container.height) } - popup.x = -(popup.width-control.width)/2 popup.open() } } diff --git a/src/Qt6/imports/FluentUI/Controls/FluColorPicker.qml b/src/Qt6/imports/FluentUI/Controls/FluColorPicker.qml index 72728a56..c22eb090 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluColorPicker.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluColorPicker.qml @@ -13,16 +13,15 @@ Button{ property color current : Qt.rgba(1,1,1,1) signal accepted() property int colorHandleRadius: 8 - property string cancelText: "取消" - property string okText: "确定" - property string titleText: "颜色选择器" - property string editText: "编辑颜色" - property string redText: "红色" - property string greenText: "绿色" - property string blueText: "蓝色" - property string opacityText: "透明度" - background: - Rectangle{ + property string cancelText: qsTr("Cancel") + property string okText: qsTr("OK") + property string titleText: qsTr("Color Picker") + property string editText: qsTr("Edit Color") + property string redText: qsTr("Red") + property string greenText: qsTr("Green") + property string blueText: qsTr("Blue") + property string opacityText: qsTr("Opacity") + background: Rectangle{ id:layout_color radius: 5 color:"#00000000" diff --git a/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml b/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml index bcd984bc..7afd1ca3 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml @@ -41,7 +41,7 @@ FluButton { id:divider_1 width: 1 x: parent.width/3 - height: parent.height-1 + height: parent.height - 1 color: control.dividerColor visible: showYear } @@ -49,7 +49,7 @@ FluButton { id:divider_2 width: 1 x: showYear ? parent.width*2/3 : parent.width/2 - height: parent.height-1 + height: parent.height - 1 color: control.dividerColor } FluText{ @@ -95,8 +95,6 @@ FluButton { Menu{ id:popup modal: true - width: container.width - height: container.height Overlay.modal: Item {} enter: Transition { reversible: true @@ -115,227 +113,220 @@ FluButton { duration: FluTheme.animationEnabled ? 83 : 0 } } - background:Item{ + background:Rectangle{ + radius: 5 + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) FluShadow{ - radius: 4 + radius: 5 } } contentItem: Item{ - clip: true - Rectangle{ - id:container - radius: 4 - width: 300 - height: 340 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - MouseArea{ - anchors.fill: parent - } - FluShadow{ - radius: 4 - } - RowLayout{ - id:layout_content - spacing: 0 - width: parent.width - height: 300 - Component{ - id:list_delegate - Item{ - height:38 - width:getListView().width - function getListView(){ - if(type === 0) - return list_view_1 - if(type === 1) - return list_view_2 - if(type === 2) - return list_view_3 + id:container + implicitHeight: 340 + implicitWidth: 300 + MouseArea{ + anchors.fill: parent + } + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 280 + Component{ + id:list_delegate + Item{ + height: 38 + width: getListView().width + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 + } + Rectangle{ + anchors.fill: parent + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { + if(getListView().currentIndex === position){ + return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor,1.1): FluTheme.primaryColor + } + if(item_mouse.containsMouse){ + return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return Qt.rgba(0,0,0,0) } - Rectangle{ + radius: 3 + MouseArea{ + id:item_mouse anchors.fill: parent - anchors.topMargin: 2 - anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 - color: { + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_year.text = model + list_view_2.model = generateMonthArray(1,12) + text_month.text = list_view_2.model[list_view_2.currentIndex] + + list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) + text_day.text = list_view_3.model[list_view_3.currentIndex] + } + if(type === 1){ + text_month.text = model + list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) + text_day.text = list_view_3.model[list_view_3.currentIndex] + + } + if(type === 2){ + text_day.text = model + } + } + } + FluText{ + text:model + color: { if(getListView().currentIndex === position){ - return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor,1.1): FluTheme.primaryColor - } - if(item_mouse.containsMouse){ - return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) - } - return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) - } - radius: 3 - MouseArea{ - id:item_mouse - anchors.fill: parent - hoverEnabled: true - onClicked: { - getListView().currentIndex = position - if(type === 0){ - text_year.text = model - list_view_2.model = generateMonthArray(1,12) - text_month.text = list_view_2.model[list_view_2.currentIndex] - - list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) - text_day.text = list_view_3.model[list_view_3.currentIndex] - } - if(type === 1){ - text_month.text = model - list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) - text_day.text = list_view_3.model[list_view_3.currentIndex] - - } - if(type === 2){ - text_day.text = model - } - } - } - FluText{ - text:model - color: { - if(getListView().currentIndex === position){ - if(FluTheme.dark){ - return Qt.rgba(0,0,0,1) - }else{ - return Qt.rgba(1,1,1,1) - } + if(FluTheme.dark){ + return Qt.rgba(0,0,0,1) }else{ - return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" + return Qt.rgba(1,1,1,1) } + }else{ + return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" } - anchors.centerIn: parent } + anchors.centerIn: parent } } } - ListView{ - id:list_view_1 - width: 100 - height: parent.height - boundsBehavior:Flickable.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - model: generateYearArray(1924,2048) - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - visible: showYear - delegate: FluLoader{ - property var model: modelData - property int type:0 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - } - ListView{ - id:list_view_2 - width: showYear ? 100 : 150 - height: parent.height - clip: true - ScrollBar.vertical: FluScrollBar {} - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:1 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - } - ListView{ - id:list_view_3 - width: showYear ? 100 : 150 - height: parent.height - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - Layout.alignment: Qt.AlignVCenter - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:2 - property int position:index - sourceComponent: list_delegate - } + } + ListView{ + id:list_view_1 + Layout.preferredWidth: 100 + Layout.preferredHeight: parent.height - 2 + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + model: generateYearArray(1924,2048) + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + visible: showYear + delegate: FluLoader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate } } Rectangle{ - width: parent.width - height: 1 - anchors.top: layout_content.bottom + Layout.preferredWidth: 1 + Layout.preferredHeight: parent.height + color: control.dividerColor + visible: showYear + } + ListView{ + id:list_view_2 + Layout.preferredWidth: showYear ? 99 : 150 + Layout.preferredHeight: parent.height - 2 + Layout.alignment: Qt.AlignVCenter + clip: true + ScrollBar.vertical: FluScrollBar {} + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + Layout.preferredWidth: 1 + Layout.preferredHeight: parent.height color: control.dividerColor } - Rectangle{ - id:layout_actions - height: 40 - radius: 5 - color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + ListView{ + id:list_view_3 + Layout.preferredWidth: showYear ? 99 : 150 + Layout.preferredHeight: parent.height - 2 + Layout.alignment: Qt.AlignVCenter + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } + } + Rectangle{ + id:layout_actions + height: 60 + color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) + radius: 5 + anchors{ + bottom:parent.bottom + left: parent.left + right: parent.right + } + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + FluButton{ anchors{ - bottom:parent.bottom left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: control.cancelText + onClicked: { + popup.close() + } + } + FluFilledButton{ + anchors{ right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter } - Item { - id:divider - width: 1 - height: parent.height - anchors.centerIn: parent - } - FluButton{ - anchors{ - left: parent.left - leftMargin: 20 - rightMargin: 10 - right: divider.left - verticalCenter: parent.verticalCenter - } - text: control.cancelText - onClicked: { - popup.close() - } - } - FluFilledButton{ - anchors{ - right: parent.right - left: divider.right - rightMargin: 20 - leftMargin: 10 - verticalCenter: parent.verticalCenter - } - text: control.okText - onClicked: { - d.changeFlag = false - popup.close() - const year = text_year.text - const month = text_month.text - const day = text_day.text - const date = new Date() - date.setFullYear(parseInt(year)); - date.setMonth(parseInt(month) - 1); - date.setDate(parseInt(day)); - date.setHours(0); - date.setMinutes(0); - date.setSeconds(0); - current = date - control.accepted() - } + text: control.okText + onClicked: { + d.changeFlag = false + popup.close() + const year = text_year.text + const month = text_month.text + const day = text_day.text + const date = new Date() + date.setFullYear(parseInt(year)); + date.setMonth(parseInt(month) - 1); + date.setDate(parseInt(day)); + date.setHours(0); + date.setMinutes(0); + date.setSeconds(0); + current = date + control.accepted() } } } @@ -360,7 +351,7 @@ FluButton { text_day.text = day var pos = control.mapToItem(null, 0, 0) if(d.window.height>pos.y+control.height+container.height){ - popup.y = control.height + popup.y = control.height-1 } else if(pos.y>container.height){ popup.y = -container.height } else { diff --git a/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml b/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml index e32212b4..7b70229b 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluTimePicker.qml @@ -58,14 +58,14 @@ FluButton { id: divider_1 width: 1 x: isH ? parent.width/3 : parent.width/2 - height: parent.height-1 + height: parent.height - 1 color: dividerColor } Rectangle{ id: divider_2 width: 1 x: parent.width*2/3 - height: parent.height-1 + height: parent.height - 1 color: dividerColor visible: isH } @@ -111,8 +111,6 @@ FluButton { } Menu{ id:popup - width: container.width - height: container.height modal: true Overlay.modal: Item {} enter: Transition { @@ -132,224 +130,219 @@ FluButton { duration: FluTheme.animationEnabled ? 83 : 0 } } - background:Item{ + background:Rectangle{ + radius: 5 + color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) FluShadow{ - radius: 4 + radius: 5 } } contentItem: Item{ - clip: true - Rectangle{ - id:container - height: 340 - width: 300 - radius: 4 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - MouseArea{ - anchors.fill: parent - } - RowLayout{ - id:layout_content - spacing: 0 - width: parent.width - height: 300 - Component{ - id:list_delegate - Item{ - height:38 - width:getListView().width - function getListView(){ - if(type === 0) - return list_view_1 - if(type === 1) - return list_view_2 - if(type === 2) - return list_view_3 + id:container + implicitHeight: 340 + implicitWidth: 300 + MouseArea{ + anchors.fill: parent + } + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 280 + Component{ + id:list_delegate + Item{ + height:38 + width:getListView().width + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 + } + Rectangle{ + anchors.fill: parent + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { + if(getListView().currentIndex === position){ + return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor,1.1) : FluTheme.primaryColor + } + if(item_mouse.containsMouse){ + return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return Qt.rgba(0,0,0,0) } - Rectangle{ + radius: 3 + MouseArea{ + id:item_mouse anchors.fill: parent - anchors.topMargin: 2 - anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 - color: { + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_hour.text = model + } + if(type === 1){ + text_minute.text = model + } + if(type === 2){ + text_ampm.text = model + } + } + } + FluText{ + text:model + color: { if(getListView().currentIndex === position){ - return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor,1.1) : FluTheme.primaryColor - } - if(item_mouse.containsMouse){ - return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) - } - return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) - } - radius: 3 - MouseArea{ - id:item_mouse - anchors.fill: parent - hoverEnabled: true - onClicked: { - getListView().currentIndex = position - if(type === 0){ - text_hour.text = model - } - if(type === 1){ - text_minute.text = model - } - if(type === 2){ - text_ampm.text = model - } - } - } - FluText{ - text:model - color: { - if(getListView().currentIndex === position){ - if(FluTheme.dark){ - return Qt.rgba(0,0,0,1) - }else{ - return Qt.rgba(1,1,1,1) - } + if(FluTheme.dark){ + return Qt.rgba(0,0,0,1) }else{ - return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" + return Qt.rgba(1,1,1,1) } + }else{ + return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" } - anchors.centerIn: parent } + anchors.centerIn: parent } } } - ListView{ - id:list_view_1 - width: isH ? 100 : 150 - height: parent.height - boundsBehavior:Flickable.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - model: isH ? generateArray(1,12) : generateArray(0,23) - clip: true - delegate: FluLoader{ - property var model: modelData - property int type:0 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - } - ListView{ - id:list_view_2 - width: isH ? 100 : 150 - height: parent.height - model: generateArray(0,59) - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:1 - property int position:index - sourceComponent: list_delegate - } - } - Rectangle{ - width: 1 - height: parent.height - color: control.dividerColor - visible: isH - } - ListView{ - id:list_view_3 - width: 100 - height: 76 - model: [control.amText,control.pmText] - clip: true - visible: isH - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - Layout.alignment: Qt.AlignVCenter - boundsBehavior:Flickable.StopAtBounds - delegate: FluLoader{ - property var model: modelData - property int type:2 - property int position:index - sourceComponent: list_delegate - } + } + ListView{ + id:list_view_1 + Layout.preferredWidth: isH ? 100 : 150 + Layout.preferredHeight: parent.height-2 + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + model: isH ? generateArray(1,12) : generateArray(0,23) + clip: true + delegate: FluLoader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate } } Rectangle{ - width: parent.width - height: 1 - anchors.top: layout_content.bottom + Layout.preferredWidth: 1 + Layout.preferredHeight: parent.height color: control.dividerColor } + ListView{ + id:list_view_2 + Layout.preferredWidth: isH ? 99 : 150 + Layout.preferredHeight: parent.height-2 + Layout.alignment: Qt.AlignVCenter + model: generateArray(0,59) + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } Rectangle{ - id:layout_actions - height: 40 - radius: 5 - color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + width: 1 + height: parent.height + color: control.dividerColor + visible: isH + } + ListView{ + id:list_view_3 + Layout.preferredWidth: 100 + Layout.preferredHeight: 76 + model: [control.amText,control.pmText] + clip: true + visible: isH + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + delegate: FluLoader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } + } + Rectangle{ + id:layout_actions + height: 60 + color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) + radius: 5 + anchors{ + bottom:parent.bottom + left: parent.left + right: parent.right + } + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + FluButton{ anchors{ - bottom:parent.bottom left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: control.cancelText + onClicked: { + popup.close() + } + } + FluFilledButton{ + anchors{ right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter } - Item { - id:divider - width: 1 - height: parent.height - anchors.centerIn: parent - } - FluButton{ - anchors{ - left: parent.left - leftMargin: 20 - rightMargin: 10 - right: divider.left - verticalCenter: parent.verticalCenter - } - text: control.cancelText - onClicked: { - popup.close() - } - } - FluFilledButton{ - anchors{ - right: parent.right - left: divider.right - rightMargin: 20 - leftMargin: 10 - verticalCenter: parent.verticalCenter - } - text: control.okText - onClicked: { - d.changeFlag = false - popup.close() - const hours = text_hour.text - const minutes = text_minute.text - const period = text_ampm.text - const date = new Date() - var hours24 = parseInt(hours); - if(control.hourFormat === FluTimePickerType.H){ - if (hours === "12") { - hours24 = (period === control.amText) ? 0 : 12; - } else { - hours24 = (period === control.pmText) ? hours24 : hours24 + 12; - } + text: control.okText + onClicked: { + d.changeFlag = false + popup.close() + const hours = text_hour.text + const minutes = text_minute.text + const period = text_ampm.text + const date = new Date() + var hours24 = parseInt(hours); + if(control.hourFormat === FluTimePickerType.H){ + if (hours === "12") { + hours24 = (period === control.amText) ? 0 : 12; + } else { + hours24 = (period === control.pmText) ? hours24 : hours24 + 12; } - date.setHours(hours24); - date.setMinutes(parseInt(minutes)); - date.setSeconds(0); - current = date - control.accepted() } + date.setHours(hours24); + date.setMinutes(parseInt(minutes)); + date.setSeconds(0); + current = date + control.accepted() } } } @@ -387,7 +380,7 @@ FluButton { } var pos = control.mapToItem(null, 0, 0) if(d.window.height>pos.y+control.height+container.height){ - popup.y = control.height + popup.y = control.height-1 } else if(pos.y>container.height){ popup.y = -container.height } else { diff --git a/src/fluentui_en_US.ts b/src/fluentui_en_US.ts index 1164cf23..79c2709b 100644 --- a/src/fluentui_en_US.ts +++ b/src/fluentui_en_US.ts @@ -70,6 +70,57 @@ + + FluColorPicker + + + + Cancel + + + + + + OK + + + + + + Color Picker + + + + + + Edit Color + + + + + + Red + + + + + + Green + + + + + + Blue + + + + + + Opacity + + + FluContentDialog @@ -94,31 +145,31 @@ FluDatePicker - + Year - + Month - + Day - + Cancel - + OK @@ -212,31 +263,37 @@ FluTimePicker + AM + PM + Hour + Minute + Cancel + OK @@ -265,8 +322,8 @@ FluWindow - - + + Loading... diff --git a/src/fluentui_zh_CN.ts b/src/fluentui_zh_CN.ts index d46cba0d..d76b222b 100644 --- a/src/fluentui_zh_CN.ts +++ b/src/fluentui_zh_CN.ts @@ -70,6 +70,57 @@ 选择日期 + + FluColorPicker + + + + Cancel + 取消 + + + + + OK + 确定 + + + + + Color Picker + 颜色选择器 + + + + + Edit Color + 编辑颜色 + + + + + Red + 红色 + + + + + Green + 绿色 + + + + + Blue + 蓝色 + + + + + Opacity + 透明度 + + FluContentDialog @@ -94,31 +145,31 @@ FluDatePicker - + Year 年 - + Month 月 - + Day 日 - + Cancel 取消 - + OK 确定 @@ -212,31 +263,37 @@ FluTimePicker + AM 上午 + PM 下午 + Hour 时 + Minute 分 + Cancel 取消 + OK 确定 @@ -265,8 +322,8 @@ FluWindow - - + + Loading... 加载中...