From 82a7aa167a67c5d3f8d25cd8ef13b36612cae6a7 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Wed, 22 Mar 2023 11:54:19 +0800 Subject: [PATCH] update --- example/{T_Calender.qml => T_Calendar.qml} | 6 +- example/T_CalendarPicker.qml | 33 ++++++ example/page/AboutPage.qml | 27 ++--- example/page/MainPage.qml | 11 +- example/qml.qrc | 3 +- src/Fluent.cpp | 4 +- src/controls/FluCalendarDatePicker.qml | 5 - src/controls/FluCalendarPicker.qml | 92 ++++++++++++++++ ...luCalenderView.qml => FluCalendarView.qml} | 100 ++++++++++++------ src/controls/FluDatePicker.qml | 5 +- src/controls/FluTimePicker.qml | 4 + src/res.qrc | 4 +- 12 files changed, 228 insertions(+), 66 deletions(-) rename example/{T_Calender.qml => T_Calendar.qml} (81%) create mode 100644 example/T_CalendarPicker.qml delete mode 100644 src/controls/FluCalendarDatePicker.qml create mode 100644 src/controls/FluCalendarPicker.qml rename src/controls/{FluCalenderView.qml => FluCalendarView.qml} (80%) diff --git a/example/T_Calender.qml b/example/T_Calendar.qml similarity index 81% rename from example/T_Calender.qml rename to example/T_Calendar.qml index 3f6a8a4..273687f 100644 --- a/example/T_Calender.qml +++ b/example/T_Calendar.qml @@ -7,17 +7,17 @@ import FluentUI 1.0 FluScrollablePage{ - title:"Calender" + title:"Calendar" FluArea{ width: parent.width Layout.topMargin: 20 - height: 400 + height: 350 paddings: 10 - FluCalenderView{ + FluCalendarView{ } diff --git a/example/T_CalendarPicker.qml b/example/T_CalendarPicker.qml new file mode 100644 index 0000000..26c6044 --- /dev/null +++ b/example/T_CalendarPicker.qml @@ -0,0 +1,33 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import FluentUI 1.0 + +FluScrollablePage{ + + title:"CalendarPicker" + + + FluArea{ + width: parent.width + Layout.topMargin: 20 + height: 80 + paddings: 10 + + ColumnLayout{ + + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + + FluCalendarPicker{ + } + + } + } + + + +} diff --git a/example/page/AboutPage.qml b/example/page/AboutPage.qml index f2542ca..cde7310 100644 --- a/example/page/AboutPage.qml +++ b/example/page/AboutPage.qml @@ -1,4 +1,5 @@ import QtQuick 2.15 +import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import FluentUI 1.0 @@ -69,7 +70,6 @@ FluWindow { } } } - RowLayout{ spacing: 14 Layout.topMargin: 20 @@ -78,22 +78,17 @@ FluWindow { id:text_info text:"如果该项目对你有作用，就请点击上方链接给一个免费的star吧！" ColorAnimation { - id: animation - target: text_info - property: "color" - from: "red" - to: "blue" - duration: 1000 - running: true - loops: Animation.Infinite - easing.type: Easing.InOutQuad - } + id: animation + target: text_info + property: "color" + from: "red" + to: "blue" + duration: 1000 + running: true + loops: Animation.Infinite + easing.type: Easing.InOutQuad + } } } - - } - - - } diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml index 6f4f7b6..fcd7bc2 100644 --- a/example/page/MainPage.qml +++ b/example/page/MainPage.qml @@ -72,6 +72,13 @@ FluWindow { } } + FluPaneItem{ + title:"CalendarPicker" + onTap:{ + nav_view.push("qrc:/T_CalendarPicker.qml") + } + } + FluPaneItemHeader{ title:"Surface" } @@ -91,9 +98,9 @@ FluWindow { } FluPaneItem{ - title:"Calender" + title:"Calendar" onTap:{ - nav_view.push("qrc:/T_Calender.qml") + nav_view.push("qrc:/T_Calendar.qml") } } diff --git a/example/qml.qrc b/example/qml.qrc index 48b527b..bdb9787 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -42,6 +42,7 @@ page/ChatPage.qml T_Tooltip.qml T_Badge.qml - T_Calender.qml + T_Calendar.qml + T_CalendarPicker.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 3c21506..bd347ac 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -43,8 +43,8 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemSeparator.qml"),uri,major,minor,"FluPaneItemSeparator"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluNavigationView.qml"),uri,major,minor,"FluNavigationView"); - qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarDatePicker.qml"),uri,major,minor,"FluCalendarDatePicker"); - qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalenderView.qml"),uri,major,minor,"FluCalenderView"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarPicker.qml"),uri,major,minor,"FluCalendarPicker"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarView.qml"),uri,major,minor,"FluCalendarView"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDatePicker.qml"),uri,major,minor,"FluDatePicker"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker"); diff --git a/src/controls/FluCalendarDatePicker.qml b/src/controls/FluCalendarDatePicker.qml deleted file mode 100644 index 68c2108..0000000 --- a/src/controls/FluCalendarDatePicker.qml +++ /dev/null @@ -1,5 +0,0 @@ -import QtQuick 2.15 - -Item { - -} diff --git a/src/controls/FluCalendarPicker.qml b/src/controls/FluCalendarPicker.qml new file mode 100644 index 0000000..dd1d03a --- /dev/null +++ b/src/controls/FluCalendarPicker.qml @@ -0,0 +1,92 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import FluentUI 1.0 + +Rectangle { + + id:root + + property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1) + property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) + property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) + property var window : Window.window + + color: { + if(mouse_area.containsMouse){ + return hoverColor + } + return normalColor + } + height: 30 + width: 120 + radius: 4 + border.width: 1 + border.color: dividerColor + + MouseArea{ + id:mouse_area + hoverEnabled: true + anchors.fill: parent + onClicked: { + popup.showPopup() + } + } + + FluText{ + id:text_date + anchors{ + left: parent.left + right: parent.right + rightMargin: 30 + top: parent.top + bottom: parent.bottom + } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + text:"请选择日期" + } + + FluIcon{ + iconSource: FluentIcons.Calendar + iconSize: 14 + color: text_date.color + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 12 + } + } + + + Popup{ + id:popup + height: container.height + width: container.width + background: FluCalendarView{ + id:container + onDateClicked: + (date)=>{ + popup.close() + var year = date.getFullYear() + var month = date.getMonth() + var day = date.getDate() + text_date.text = year+"-"+(month+1)+"-"+day + } + } + contentItem: Item{} + function showPopup() { + var pos = root.mapToItem(null, 0, 0) + if(window.height>pos.y+root.height+popup.height){ + popup.y = root.height + } else if(pos.y>popup.height){ + popup.y = -popup.height + } else { + popup.y = window.height-(pos.y+popup.height) + } + popup.x = -(popup.width-root.width)/2 + popup.open() + } + } +} diff --git a/src/controls/FluCalenderView.qml b/src/controls/FluCalendarView.qml similarity index 80% rename from src/controls/FluCalenderView.qml rename to src/controls/FluCalendarView.qml index dedd97c..cb7fc32 100644 --- a/src/controls/FluCalenderView.qml +++ b/src/controls/FluCalendarView.qml @@ -5,12 +5,19 @@ import FluentUI 1.0 Item { id:control - property int displayMode: FluCalenderView.Month + property int displayMode: FluCalendarView.Month property var date: new Date() property var currentDate : new Date() + property var toDay: new Date() + + signal dateClicked(var date) + + width: 280 + height: 325 + enum DisplayMode { Month, Year, @@ -22,19 +29,19 @@ Item { } function createItemWeek(name){ - return {type:0,name:name} + return {type:0,date:new Date(),name:name,isDecade:false} } function createItemDay(date){ - return {type:1,date:date} + return {type:1,date:date,name:"",isDecade:false} } function createItemMonth(date){ - return {type:2,date:date} + return {type:2,date:date,name:"",isDecade:false} } - function createItemYear(date){ - return {type:3,date:date} + function createItemYear(date,isDecade){ + return {type:3,date:date,name:"",isDecade:isDecade} } @@ -43,9 +50,12 @@ Item { var year = date.getFullYear() const decadeStart = Math.floor(year / 10) * 10; for(var i = decadeStart ; i< decadeStart+10 ; i++){ - list_model.append(createItemYear(new Date(i,0,1))); + list_model.append(createItemYear(new Date(i,0,1),true)); } - + for(var j = decadeStart+10 ; j< decadeStart+16 ; j++){ + list_model.append(createItemYear(new Date(j,0,1),false)); + } + title.text = decadeStart+"-"+(decadeStart+10) } function updateYear(date){ @@ -93,7 +103,7 @@ Item { nextMonth = 0 } const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate() - for (let j = 1; j <= nextDayOfMonth; j++) { + for (let j = 1; j <= footerSize; j++) { list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j))) } title.text = year+"年"+(month+1)+"月" @@ -116,12 +126,12 @@ Item { id:com_year Button{ id:item_control - property bool isYear: control.date.getFullYear() === date.getFullYear() + property bool isYear: control.toDay.getFullYear() === date.getFullYear() height: 70 width: 70 onClicked:{ control.date = date - displayMode = FluCalenderView.Year + displayMode = FluCalendarView.Year updateYear(date) } background: Item{ @@ -160,9 +170,9 @@ Item { if(isYear){ return "#FFFFFF" } -// if(isYear){ -// return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" -// } + if(isDecade){ + return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + } return Qt.rgba(150/255,150/255,150/255,1) } } @@ -176,12 +186,12 @@ Item { Button{ id:item_control property bool isYear: control.date.getFullYear() === date.getFullYear() - property bool isMonth: control.currentDate.getFullYear() === date.getFullYear() && control.currentDate.getMonth() === date.getMonth() + property bool isMonth: control.toDay.getFullYear() === date.getFullYear() && control.toDay.getMonth() === date.getMonth() height: 70 width: 70 onClicked:{ control.date = date - displayMode = FluCalenderView.Month + displayMode = FluCalendarView.Month updateMouth(date) } background: Item{ @@ -238,10 +248,12 @@ Item { id:item_control property bool isMonth: control.date.getMonth() === date.getMonth() property bool isDay: control.currentDate.getFullYear() === date.getFullYear() && control.currentDate.getMonth() === date.getMonth() && control.currentDate.getDate() === date.getDate() + property bool isToDay: control.toDay.getFullYear() === date.getFullYear() && control.toDay.getMonth() === date.getMonth() && control.toDay.getDate() === date.getDate() height: 40 width: 40 onClicked: { currentDate = date + control.dateClicked(date) } background: Item{ Rectangle{ @@ -263,20 +275,34 @@ Item { } } } + + Rectangle{ + id:backgound_today + anchors.centerIn: parent + width: 36 + height: 36 + radius: 18 + color:"#00000000" + visible: isDay + border.color: FluTheme.primaryColor.dark + border.width: 1 + } + Rectangle{ id:backgound_selected anchors.centerIn: parent width: 30 height: 30 radius: 15 - visible: isDay + visible: isToDay color: FluTheme.primaryColor.dark } + FluText{ text:date.getDate() anchors.centerIn: parent color: { - if(isDay){ + if(isToDay){ return "#FFFFFF" } if(isMonth){ @@ -291,8 +317,7 @@ Item { } FluArea{ - width: 280 - height: 325 + anchors.fill: parent radius: 5 FluShadow{ @@ -306,7 +331,7 @@ Item { color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) anchors{ top: parent.top - topMargin: 45 + topMargin: 44 } } @@ -328,13 +353,13 @@ Item { left: parent.left leftMargin: 14 } - disabled: displayMode === FluCalenderView.Decade + disabled: displayMode === FluCalendarView.Decade onClicked:{ - if(displayMode === FluCalenderView.Month){ - displayMode = FluCalenderView.Year + if(displayMode === FluCalendarView.Month){ + displayMode = FluCalendarView.Year updateYear(date) - }else if(displayMode === FluCalenderView.Year){ - displayMode = FluCalenderView.Decade + }else if(displayMode === FluCalendarView.Year){ + displayMode = FluCalendarView.Decade updateDecade(date) } } @@ -352,7 +377,7 @@ Item { onClicked: { var year = date.getFullYear() var month = date.getMonth() - if(displayMode === FluCalenderView.Month){ + if(displayMode === FluCalendarView.Month){ var lastMonthYear = year; var lastMonthMonth = month - 1 if (month === 0) { @@ -361,10 +386,12 @@ Item { } date = new Date(lastMonthYear,lastMonthMonth,1) updateMouth(date) - } - if(displayMode === FluCalenderView.Year){ + }else if(displayMode === FluCalendarView.Year){ date = new Date(year-1,month,1) updateYear(date) + }else if(displayMode === FluCalendarView.Decade){ + date = new Date(Math.floor(year / 10) * 10-10,month,1) + updateDecade(date) } } } @@ -381,7 +408,7 @@ Item { onClicked: { var year = date.getFullYear() var month = date.getMonth() - if(displayMode === FluCalenderView.Month){ + if(displayMode === FluCalendarView.Month){ var nextMonthYear = year var nextMonth = month + 1 if (month === 11) { @@ -390,10 +417,12 @@ Item { } date = new Date(nextMonthYear,nextMonth,1) updateMouth(date) - } - if(displayMode === FluCalenderView.Year){ + }else if(displayMode === FluCalendarView.Year){ date = new Date(year+1,month,1) updateYear(date) + }else if(displayMode === FluCalendarView.Decade){ + date = new Date(Math.floor(year / 10) * 10+10,month,1) + updateDecade(date) } } } @@ -415,14 +444,17 @@ Item { GridView{ model: list_model anchors.fill: parent - cellHeight: displayMode === FluCalenderView.Month ? 40 : 70 - cellWidth: displayMode === FluCalenderView.Month ? 40 : 70 + cellHeight: displayMode === FluCalendarView.Month ? 40 : 70 + cellWidth: displayMode === FluCalendarView.Month ? 40 : 70 clip: true boundsBehavior:Flickable.StopAtBounds delegate: Loader{ property var modelData : model property var name : model.name property var date : model.date + property var isDecade: { + return model.isDecade + } sourceComponent: { if(model.type === 0){ return com_week diff --git a/src/controls/FluDatePicker.qml b/src/controls/FluDatePicker.qml index ba9a9c8..cbae372 100644 --- a/src/controls/FluDatePicker.qml +++ b/src/controls/FluDatePicker.qml @@ -97,8 +97,11 @@ Rectangle { } Popup{ - id:popup + width: container.width + height: container.height + contentItem: Item{} background: Rectangle{ + id:container width: 300 radius: 4 color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) diff --git a/src/controls/FluTimePicker.qml b/src/controls/FluTimePicker.qml index e4c2def..e9f0e77 100644 --- a/src/controls/FluTimePicker.qml +++ b/src/controls/FluTimePicker.qml @@ -105,7 +105,11 @@ Rectangle { Popup{ id:popup + width: container.width + height: container.height + contentItem: Item{} background: Rectangle{ + id:container width: 300 radius: 4 color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) diff --git a/src/res.qrc b/src/res.qrc index 287a769..2757052 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -44,8 +44,8 @@ controls/FluArea.qml res/font/Segoe_Fluent_Icons.ttf controls/FluDatePicker.qml - controls/FluCalenderView.qml - controls/FluCalendarDatePicker.qml + controls/FluCalendarView.qml + controls/FluCalendarPicker.qml controls/FluFocusRectangle.qml controls/FluCarousel.qml controls/FluBadge.qml