amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-03 08:35:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu
2023-03-28 17:53:46 +08:00
parent 96ad06c2e4
commit 6a2a93561a
40 changed files with 264 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/controls/FluAppBar.qml
View File

@ -6,7 +6,7 @@ import FluentUI 1.0
Rectangle{
property string title: "标题"
property string title: ""
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
property bool showDark: false
property bool showFps: false
@ -94,7 +94,19 @@ Rectangle{
text:"最小化"
radius: 0
textColor: root.textColor
color:hovered ? "#20000000" : "#00000000"
color:{
if(FluTheme.isDark){
if(hovered){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(hovered){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
onClicked: {
window.showMinimized()
}
@ -108,7 +120,19 @@ Rectangle{
return Window.Maximized === window.visibility
}
iconSource : isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
color:hovered ? "#20000000" : "#00000000"
color:{
if(FluTheme.isDark){
if(hovered){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(hovered){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
Layout.alignment: Qt.AlignVCenter
visible: resizable
radius: 0

2
src/controls/FluCalendarPicker.qml
View File

@ -63,6 +63,8 @@ Rectangle {
id:popup
height: container.height
width: container.width
modal: true
dim:false
background: FluCalendarView{
id:container
onDateClicked:

2
src/controls/FluColorPicker.qml
View File

@ -29,6 +29,8 @@ Button{
}
Popup{
id:popup
modal: true
dim:false
height: container.height
width: container.width
background: FluColorView{

20
src/controls/FluContentPage.qml
View File

@ -8,22 +8,38 @@ Item {
property alias title: text_title.text
default property alias content: container.data
property int leftPadding: 0
property int topPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
id:root
id:control
FluText{
id:text_title
fontStyle: FluText.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
Item{
clip: true
id:container
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
leftMargin: control.leftPadding
rightMargin: control.rightPadding
bottomMargin: control.bottomPadding
}
width: parent.width
}
}

2
src/controls/FluDatePicker.qml
View File

@ -102,6 +102,8 @@ Rectangle {
width: container.width
height: container.height
contentItem: Item{}
modal: true
dim:false
background: Rectangle{
id:container
width: 300

6
src/controls/FluDivider.qml
View File

@ -5,4 +5,10 @@ Rectangle {
color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
Behavior on color{
ColorAnimation {
duration: 300
}
}
}

3
src/controls/FluMenu.qml
View File

@ -9,6 +9,9 @@ Menu {
id: popup
width: 140
height: container.height
modal: true
dim:false
contentItem: Item{}
background: Item {
Rectangle{

68
src/controls/FluNavigationView.qml
View File

@ -6,18 +6,18 @@ import FluentUI 1.0
Item {
property alias logo : image_logo.source
property FluObject items
property FluObject footerItems
property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
property bool displaMinimalNav : false
property alias actions: layout_actions.data
property bool displaMinimalMenu : false
id:root
onDisplayModeChanged: {
if(displayMode === FluNavigationView.Minimal){
anim_navi.enabled = false
displaMinimalNav = false
displaMinimalMenu = false
timer_anim_enable.restart()
}
}
@ -85,6 +85,16 @@ Item {
leftMargin: 6
rightMargin: 6
}
Rectangle{
width: 3
height: 18
radius: 1.5
color: FluTheme.primaryColor.dark
visible: nav_list.currentIndex === position && type===0
anchors{
verticalCenter: parent.verticalCenter
}
}
MouseArea{
id:item_mouse
hoverEnabled: true
@ -99,6 +109,7 @@ Item {
}else{
model.tap()
}
displaMinimalMenu = false
}
}
color: {
@ -136,7 +147,7 @@ Item {
Item {
id:nav_app_bar
width: parent.width
height: 38
height: 50
z:999
RowLayout{
height:parent.height
@ -144,6 +155,8 @@ Item {
FluIconButton{
iconSource: FluentIcons.ChromeBack
Layout.leftMargin: 5
Layout.preferredWidth: 40
Layout.preferredHeight: 40
Layout.alignment: Qt.AlignVCenter
disabled: nav_swipe.depth === 1
iconSize: 13
@ -157,37 +170,45 @@ Item {
}
}
FluIconButton{
id:btn_nav
iconSource: FluentIcons.GlobalNavButton
Layout.leftMargin: 5
iconSize: 15
Layout.preferredWidth: 40
Layout.preferredHeight: 40
visible: displayMode === FluNavigationView.Minimal
Layout.alignment: Qt.AlignVCenter
onClicked: {
displaMinimalNav = !displaMinimalNav
displaMinimalMenu = !displaMinimalMenu
}
}
}
RowLayout{
id:layout_actions
anchors{
right: parent.right
rightMargin: 14
verticalCenter: parent.verticalCenter
Image{
id:image_logo
Layout.preferredHeight: 20
Layout.preferredWidth: 20
Layout.leftMargin: {
if(btn_nav.visible){
return 12
}
return 5
}
Layout.alignment: Qt.AlignVCenter
}
FluText{
Layout.alignment: Qt.AlignVCenter
text:"FluentUI"
Layout.leftMargin: 12
fontStyle: FluText.Body
}
spacing: 5
}
}
Item{
anchors{
left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
leftMargin: 10
top: nav_app_bar.bottom
right: parent.right
rightMargin: 10
bottom: parent.bottom
bottomMargin: 20
}
StackView{
@ -209,9 +230,9 @@ Item {
MouseArea{
anchors.fill: parent
enabled: (displayMode === FluNavigationView.Minimal && displaMinimalNav)
enabled: (displayMode === FluNavigationView.Minimal && displaMinimalMenu)
onClicked: {
displaMinimalNav = false
displaMinimalMenu = false
}
}
@ -225,7 +246,7 @@ Item {
x: {
if(displayMode !== FluNavigationView.Minimal)
return 0
return (displayMode === FluNavigationView.Minimal && displaMinimalNav) ? 0 : -width
return (displayMode === FluNavigationView.Minimal && displaMinimalMenu) ? 0 : -width
}
Behavior on x{
id:anim_navi
@ -233,6 +254,7 @@ Item {
duration: 150
}
}
color: {
if(displayMode === FluNavigationView.Minimal){
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
@ -248,13 +270,17 @@ Item {
}
}
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
border.width: displayMode === FluNavigationView.Minimal ? 1 : 0
Item{
id:layout_header
width: layout_list.width
y:nav_app_bar.height
height: 50
height: textbox_search.height
FluAutoSuggestBox{
id:textbox_search
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Zoom

34
src/controls/FluScrollBar.qml
View File

@ -1,7 +1,39 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.impl 2.15
import QtQuick.Templates 2.15 as T
import FluentUI 1.0
ScrollBar {
T.ScrollBar {
id: control
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
property color handleHoverColor: Qt.lighter(handleNormalColor)
property color handlePressColor: Qt.darker(handleNormalColor)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 4
visible: control.policy !== T.ScrollBar.AlwaysOff
minimumSize: 0.3
contentItem: Rectangle {
implicitWidth: hovered || pressed ? 6 : 2
implicitHeight: hovered || pressed ? 6 : 2
radius: width / 2
layer.samples: 4
layer.enabled: true
layer.smooth: true
color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
}
Behavior on implicitWidth {
NumberAnimation{
duration: 150
}
}
}

36
src/controls/FluScrollablePage.qml
View File

@ -9,28 +9,56 @@ Item {
property alias title: text_title.text
default property alias content: container.data
property int spacing : 5
property int leftPadding: 0
property int topPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
id:root
id:control
FluText{
id:text_title
fontStyle: FluText.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
Flickable{
id:flickview
clip: true
width: parent.width
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
bottomMargin: control.bottomPadding
}
contentWidth: parent.width
contentHeight: container.height
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar { }
ScrollBar.vertical: FluScrollBar {
}
anchors{
top: text_title.bottom
bottom: parent.bottom
}
ColumnLayout{
id:container
spacing: root.spacing
spacing: control.spacing
clip: true
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
width: parent.width
}
}

2
src/controls/FluTimePicker.qml
View File

@ -104,6 +104,8 @@ Rectangle {
width: container.width
height: container.height
contentItem: Item{}
modal: true
dim:false
background: Rectangle{
id:container
width: 300