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 3f6a8a4f..273687f1 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 00000000..26c6044d
--- /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 f2542ca6..cde73107 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 6f4f7b6a..fcd7bc28 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 48b527b1..bdb97871 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 3c21506f..bd347ac2 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 68c21087..00000000
--- 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 00000000..dd1d03a1
--- /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 dedd97ce..cb7fc325 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 ba9a9c80..cbae3726 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 e4c2def9..e9f0e774 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 287a7693..27570524 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