amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-23 11:17:15 +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{
title:"Calender"
title:"Calendar"
FluArea{
width: parent.width
Layout.topMargin: 20
height: 400
height: 350
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{
}
}
}
}

7
example/page/AboutPage.qml
View File

@ -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
@ -90,10 +90,5 @@ FluWindow {
}
}
}
}
}

11
example/page/MainPage.qml
View File

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

3
example/qml.qrc
View File

@ -42,6 +42,7 @@
<file>page/ChatPage.qml</file>
<file>T_Tooltip.qml</file>
<file>T_Badge.qml</file>
<file>T_Calender.qml</file>
<file>T_Calendar.qml</file>
<file>T_CalendarPicker.qml</file>
</qresource>
</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/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");

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

5
src/controls/FluDatePicker.qml
View File

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

4
src/controls/FluTimePicker.qml
View File

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

4
src/res.qrc
View File

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