amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-27 05:38:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu 2023-03-22 11:54:19 +08:00
parent 83f97159e9
commit 82a7aa167a
12 changed files with 228 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
example/T_Calender.qml → example/T_Calendar.qml
View File

@ -7,17 +7,17 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"Calender" title:"Calendar"
FluArea{ FluArea{
width: parent.width width: parent.width
Layout.topMargin: 20 Layout.topMargin: 20
height: 400 height: 350
paddings: 10 paddings: 10
FluCalenderView{ FluCalendarView{
} }

33
example/T_CalendarPicker.qml Normal file
View File

@ -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{
}
}
}
}

27
example/page/AboutPage.qml
View File

@ -1,4 +1,5 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import FluentUI 1.0 import FluentUI 1.0
@ -69,7 +70,6 @@ FluWindow {
} }
} }
} }
RowLayout{ RowLayout{
spacing: 14 spacing: 14
Layout.topMargin: 20 Layout.topMargin: 20
@ -78,22 +78,17 @@ FluWindow {
id:text_info id:text_info
text:"如果该项目对你有作用，就请点击上方链接给一个免费的star吧！" text:"如果该项目对你有作用，就请点击上方链接给一个免费的star吧！"
ColorAnimation { ColorAnimation {
id: animation id: animation
target: text_info target: text_info
property: "color" property: "color"
from: "red" from: "red"
to: "blue" to: "blue"
duration: 1000 duration: 1000
running: true running: true
loops: Animation.Infinite loops: Animation.Infinite
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
} }
} }
} }
} }
} }

11
example/page/MainPage.qml
View File

@ -72,6 +72,13 @@ FluWindow {
} }
} }
FluPaneItem{
title:"CalendarPicker"
onTap:{
nav_view.push("qrc:/T_CalendarPicker.qml")
}
}
FluPaneItemHeader{ FluPaneItemHeader{
title:"Surface" title:"Surface"
} }
@ -91,9 +98,9 @@ FluWindow {
} }
FluPaneItem{ FluPaneItem{
title:"Calender" title:"Calendar"
onTap:{ onTap:{
nav_view.push("qrc:/T_Calender.qml") nav_view.push("qrc:/T_Calendar.qml")
} }
} }

3
example/qml.qrc
View File

@ -42,6 +42,7 @@
<file>page/ChatPage.qml</file> <file>page/ChatPage.qml</file>
<file>T_Tooltip.qml</file> <file>T_Tooltip.qml</file>
<file>T_Badge.qml</file> <file>T_Badge.qml</file>
<file>T_Calender.qml</file> <file>T_Calendar.qml</file>
<file>T_CalendarPicker.qml</file>
</qresource> </qresource>
</RCC> </RCC>

4
src/Fluent.cpp
View File

@ -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/FluPaneItemSeparator.qml"),uri,major,minor,"FluPaneItemSeparator");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluNavigationView.qml"),uri,major,minor,"FluNavigationView"); 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/FluCalendarPicker.qml"),uri,major,minor,"FluCalendarPicker");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalenderView.qml"),uri,major,minor,"FluCalenderView"); 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/FluDatePicker.qml"),uri,major,minor,"FluDatePicker");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker");

5
src/controls/FluCalendarDatePicker.qml
View File

@ -1,5 +0,0 @@
import QtQuick 2.15
Item {
}

92
src/controls/FluCalendarPicker.qml Normal file
View File

@ -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()
}
}
}

100
src/controls/FluCalenderView.qml → src/controls/FluCalendarView.qml
View File

@ -5,12 +5,19 @@ import FluentUI 1.0
Item { Item {
id:control id:control
property int displayMode: FluCalenderView.Month property int displayMode: FluCalendarView.Month
property var date: new Date() property var date: new Date()
property var currentDate : new Date() property var currentDate : new Date()
property var toDay: new Date()
signal dateClicked(var date)
width: 280
height: 325
enum DisplayMode { enum DisplayMode {
Month, Month,
Year, Year,
@ -22,19 +29,19 @@ Item {
} }
function createItemWeek(name){ function createItemWeek(name){
return {type:0,name:name} return {type:0,date:new Date(),name:name,isDecade:false}
} }
function createItemDay(date){ function createItemDay(date){
return {type:1,date:date} return {type:1,date:date,name:"",isDecade:false}
} }
function createItemMonth(date){ function createItemMonth(date){
return {type:2,date:date} return {type:2,date:date,name:"",isDecade:false}
} }
function createItemYear(date){ function createItemYear(date,isDecade){
return {type:3,date:date} return {type:3,date:date,name:"",isDecade:isDecade}
} }
@ -43,9 +50,12 @@ Item {
var year = date.getFullYear() var year = date.getFullYear()
const decadeStart = Math.floor(year / 10) * 10; const decadeStart = Math.floor(year / 10) * 10;
for(var i = decadeStart ; i< decadeStart+10 ; i++){ 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){ function updateYear(date){
@ -93,7 +103,7 @@ Item {
nextMonth = 0 nextMonth = 0
} }
const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate() 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))) list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j)))
} }
title.text = year+"年"+(month+1)+"月" title.text = year+"年"+(month+1)+"月"
@ -116,12 +126,12 @@ Item {
id:com_year id:com_year
Button{ Button{
id:item_control id:item_control
property bool isYear: control.date.getFullYear() === date.getFullYear() property bool isYear: control.toDay.getFullYear() === date.getFullYear()
height: 70 height: 70
width: 70 width: 70
onClicked:{ onClicked:{
control.date = date control.date = date
displayMode = FluCalenderView.Year displayMode = FluCalendarView.Year
updateYear(date) updateYear(date)
} }
background: Item{ background: Item{
@ -160,9 +170,9 @@ Item {
if(isYear){ if(isYear){
return "#FFFFFF" return "#FFFFFF"
} }
// if(isYear){ if(isDecade){
// return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
// } }
return Qt.rgba(150/255,150/255,150/255,1) return Qt.rgba(150/255,150/255,150/255,1)
} }
} }
@ -176,12 +186,12 @@ Item {
Button{ Button{
id:item_control id:item_control
property bool isYear: control.date.getFullYear() === date.getFullYear() 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 height: 70
width: 70 width: 70
onClicked:{ onClicked:{
control.date = date control.date = date
displayMode = FluCalenderView.Month displayMode = FluCalendarView.Month
updateMouth(date) updateMouth(date)
} }
background: Item{ background: Item{
@ -238,10 +248,12 @@ Item {
id:item_control id:item_control
property bool isMonth: control.date.getMonth() === date.getMonth() 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 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 height: 40
width: 40 width: 40
onClicked: { onClicked: {
currentDate = date currentDate = date
control.dateClicked(date)
} }
background: Item{ background: Item{
Rectangle{ 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{ Rectangle{
id:backgound_selected id:backgound_selected
anchors.centerIn: parent anchors.centerIn: parent
width: 30 width: 30
height: 30 height: 30
radius: 15 radius: 15
visible: isDay visible: isToDay
color: FluTheme.primaryColor.dark color: FluTheme.primaryColor.dark
} }
FluText{ FluText{
text:date.getDate() text:date.getDate()
anchors.centerIn: parent anchors.centerIn: parent
color: { color: {
if(isDay){ if(isToDay){
return "#FFFFFF" return "#FFFFFF"
} }
if(isMonth){ if(isMonth){
@ -291,8 +317,7 @@ Item {
} }
FluArea{ FluArea{
width: 280 anchors.fill: parent
height: 325
radius: 5 radius: 5
FluShadow{ 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) color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
anchors{ anchors{
top: parent.top top: parent.top
topMargin: 45 topMargin: 44
} }
} }
@ -328,13 +353,13 @@ Item {
left: parent.left left: parent.left
leftMargin: 14 leftMargin: 14
} }
disabled: displayMode === FluCalenderView.Decade disabled: displayMode === FluCalendarView.Decade
onClicked:{ onClicked:{
if(displayMode === FluCalenderView.Month){ if(displayMode === FluCalendarView.Month){
displayMode = FluCalenderView.Year displayMode = FluCalendarView.Year
updateYear(date) updateYear(date)
}else if(displayMode === FluCalenderView.Year){ }else if(displayMode === FluCalendarView.Year){
displayMode = FluCalenderView.Decade displayMode = FluCalendarView.Decade
updateDecade(date) updateDecade(date)
} }
} }
@ -352,7 +377,7 @@ Item {
onClicked: { onClicked: {
var year = date.getFullYear() var year = date.getFullYear()
var month = date.getMonth() var month = date.getMonth()
if(displayMode === FluCalenderView.Month){ if(displayMode === FluCalendarView.Month){
var lastMonthYear = year; var lastMonthYear = year;
var lastMonthMonth = month - 1 var lastMonthMonth = month - 1
if (month === 0) { if (month === 0) {
@ -361,10 +386,12 @@ Item {
} }
date = new Date(lastMonthYear,lastMonthMonth,1) date = new Date(lastMonthYear,lastMonthMonth,1)
updateMouth(date) updateMouth(date)
} }else if(displayMode === FluCalendarView.Year){
if(displayMode === FluCalenderView.Year){
date = new Date(year-1,month,1) date = new Date(year-1,month,1)
updateYear(date) 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: { onClicked: {
var year = date.getFullYear() var year = date.getFullYear()
var month = date.getMonth() var month = date.getMonth()
if(displayMode === FluCalenderView.Month){ if(displayMode === FluCalendarView.Month){
var nextMonthYear = year var nextMonthYear = year
var nextMonth = month + 1 var nextMonth = month + 1
if (month === 11) { if (month === 11) {
@ -390,10 +417,12 @@ Item {
} }
date = new Date(nextMonthYear,nextMonth,1) date = new Date(nextMonthYear,nextMonth,1)
updateMouth(date) updateMouth(date)
} }else if(displayMode === FluCalendarView.Year){
if(displayMode === FluCalenderView.Year){
date = new Date(year+1,month,1) date = new Date(year+1,month,1)
updateYear(date) 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{ GridView{
model: list_model model: list_model
anchors.fill: parent anchors.fill: parent
cellHeight: displayMode === FluCalenderView.Month ? 40 : 70 cellHeight: displayMode === FluCalendarView.Month ? 40 : 70
cellWidth: displayMode === FluCalenderView.Month ? 40 : 70 cellWidth: displayMode === FluCalendarView.Month ? 40 : 70
clip: true clip: true
boundsBehavior:Flickable.StopAtBounds boundsBehavior:Flickable.StopAtBounds
delegate: Loader{ delegate: Loader{
property var modelData : model property var modelData : model
property var name : model.name property var name : model.name
property var date : model.date property var date : model.date
property var isDecade: {
return model.isDecade
}
sourceComponent: { sourceComponent: {
if(model.type === 0){ if(model.type === 0){
return com_week return com_week

5
src/controls/FluDatePicker.qml
View File

@ -97,8 +97,11 @@ Rectangle {
} }
Popup{ Popup{
id:popup width: container.width
height: container.height
contentItem: Item{}
background: Rectangle{ background: Rectangle{
id:container
width: 300 width: 300
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)

4
src/controls/FluTimePicker.qml
View File

@ -105,7 +105,11 @@ Rectangle {
Popup{ Popup{
id:popup id:popup
width: container.width
height: container.height
contentItem: Item{}
background: Rectangle{ background: Rectangle{
id:container
width: 300 width: 300
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)

4
src/res.qrc
View File

@ -44,8 +44,8 @@
<file>controls/FluArea.qml</file> <file>controls/FluArea.qml</file>
<file>res/font/Segoe_Fluent_Icons.ttf</file> <file>res/font/Segoe_Fluent_Icons.ttf</file>
<file>controls/FluDatePicker.qml</file> <file>controls/FluDatePicker.qml</file>
<file>controls/FluCalenderView.qml</file> <file>controls/FluCalendarView.qml</file>
<file>controls/FluCalendarDatePicker.qml</file> <file>controls/FluCalendarPicker.qml</file>
<file>controls/FluFocusRectangle.qml</file> <file>controls/FluFocusRectangle.qml</file>
<file>controls/FluCarousel.qml</file> <file>controls/FluCarousel.qml</file>
<file>controls/FluBadge.qml</file> <file>controls/FluBadge.qml</file>