mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-30 07:03:46 +08:00
update
This commit is contained in:
zhuzihcu
parent
11206c1d18
commit
154670f744
@ -1,73 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.platform
|
||||
import FluentUI
|
||||
import "qrc:///example/qml/global/"
|
||||
|
||||
FluWindow {
|
||||
|
||||
id:window
|
||||
title: "FluentUI"
|
||||
width: 1000
|
||||
height: 640
|
||||
closeDestory:false
|
||||
minimumWidth: 520
|
||||
minimumHeight: 460
|
||||
launchMode: FluWindow.SingleTask
|
||||
visible: true
|
||||
|
||||
Component.onCompleted: {
|
||||
// FluApp.init(window)
|
||||
}
|
||||
|
||||
FluNavigationView2{
|
||||
id:nav_view
|
||||
anchors.fill: parent
|
||||
items: ItemsOriginal
|
||||
footerItems:ItemsFooter
|
||||
z:11
|
||||
displayMode:MainEvent.displayMode
|
||||
logo: "qrc:/example/res/image/favicon.ico"
|
||||
title:"FluentUI"
|
||||
autoSuggestBox:FluAutoSuggestBox{
|
||||
width: 280
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.Search
|
||||
items: ItemsOriginal.getSearchData()
|
||||
placeholderText: lang.search
|
||||
onItemClicked:
|
||||
(data)=>{
|
||||
ItemsOriginal.startPageByItem(data)
|
||||
}
|
||||
}
|
||||
actionItem:Item{
|
||||
height: 40
|
||||
width: 148
|
||||
RowLayout{
|
||||
anchors.centerIn: parent
|
||||
spacing: 5
|
||||
FluText{
|
||||
text:lang.dark_mode
|
||||
}
|
||||
FluToggleSwitch{
|
||||
checked: FluTheme.dark
|
||||
onClicked: {
|
||||
if(FluTheme.dark){
|
||||
FluTheme.darkMode = FluDarkMode.Light
|
||||
}else{
|
||||
FluTheme.darkMode = FluDarkMode.Dark
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
ItemsOriginal.navigationView = nav_view
|
||||
ItemsFooter.navigationView = nav_view
|
||||
// nav_view.setCurrentIndex(0)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -6,19 +6,20 @@ import FluentUI
|
||||
|
||||
FluExpander{
|
||||
|
||||
id:control
|
||||
property string code: ""
|
||||
|
||||
headerText: "Source"
|
||||
contentHeight:content.height
|
||||
focus: false
|
||||
|
||||
FluMultilineTextBox{
|
||||
id:content
|
||||
width:parent.width
|
||||
readOnly:true
|
||||
text:highlightQmlCode(code)
|
||||
focus:false
|
||||
textFormat: FluMultilineTextBox.RichText
|
||||
KeyNavigation.priority: KeyNavigation.BeforeItem
|
||||
enabled: false
|
||||
background:Rectangle{
|
||||
radius: 4
|
||||
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
||||
@ -40,6 +41,11 @@ FluExpander{
|
||||
rightMargin: 5
|
||||
topMargin: 5
|
||||
}
|
||||
onActiveFocusChanged: {
|
||||
if(activeFocus){
|
||||
control.expand = true
|
||||
}
|
||||
}
|
||||
onClicked:{
|
||||
FluTools.clipText(content.text)
|
||||
showSuccess("复制成功")
|
||||
|
||||
@ -39,7 +39,6 @@ int main(int argc, char *argv[])
|
||||
FramelessHelper::Quick::registerTypes(&engine);
|
||||
appInfo->init(&engine);
|
||||
const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
|
||||
// const QUrl url(QStringLiteral("qrc:/example/qml/TestWindow.qml"));
|
||||
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
|
||||
&app, [url](QObject *obj, const QUrl &objUrl) {
|
||||
if (!obj && url == objUrl)
|
||||
|
||||
@ -5,6 +5,7 @@ import FluentUI
|
||||
|
||||
Button {
|
||||
property bool disabled: false
|
||||
property string contentDescription: ""
|
||||
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||
@ -27,11 +28,13 @@ Button {
|
||||
return Qt.rgba(0,0,0,1)
|
||||
}
|
||||
}
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
id: control
|
||||
enabled: !disabled
|
||||
focusPolicy:Qt.TabFocus
|
||||
horizontalPadding:12
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
font:FluTextStyle.Body
|
||||
background: Rectangle{
|
||||
implicitWidth: 28
|
||||
@ -40,14 +43,8 @@ Button {
|
||||
border.width: 1
|
||||
radius: 4
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
radius:8
|
||||
}
|
||||
color:{
|
||||
if(disabled){
|
||||
return disableColor
|
||||
}
|
||||
return hovered ? hoverColor :normalColor
|
||||
visible: control.activeFocus
|
||||
radius:4
|
||||
}
|
||||
}
|
||||
contentItem: FluText {
|
||||
|
||||
@ -23,13 +23,11 @@ Button {
|
||||
}
|
||||
id:control
|
||||
enabled: !disabled
|
||||
focusPolicy:Qt.TabFocus
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
padding:0
|
||||
onClicked: clickListener()
|
||||
background: Item{
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
}
|
||||
}
|
||||
contentItem: RowLayout{
|
||||
|
||||
@ -74,7 +74,7 @@ ComboBox {
|
||||
visible: !control.flat || control.down
|
||||
radius: 4
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
radius:8
|
||||
}
|
||||
color:{
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import QtQuick
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
@ -25,7 +25,7 @@ FluPopup {
|
||||
return 400
|
||||
return Math.min(Window.window.width,400)
|
||||
}
|
||||
|
||||
focus: true
|
||||
Rectangle {
|
||||
id:layout_content
|
||||
anchors.fill: parent
|
||||
|
||||
22
src/imports/FluentUI/Controls/FluControl.qml
Normal file
22
src/imports/FluentUI/Controls/FluControl.qml
Normal file
@ -0,0 +1,22 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls.impl
|
||||
import FluentUI
|
||||
import QtQuick.Templates as T
|
||||
|
||||
T.Button {
|
||||
id: control
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitContentWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitContentHeight + topPadding + bottomPadding)
|
||||
padding: 0
|
||||
horizontalPadding: 0
|
||||
spacing: 0
|
||||
contentItem: Item{}
|
||||
background: Item{
|
||||
FluFocusRectangle{
|
||||
visible: control.activeFocus
|
||||
radius:8
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,6 +6,7 @@ import FluentUI
|
||||
|
||||
Button {
|
||||
property bool disabled: false
|
||||
property string contentDescription: ""
|
||||
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||
@ -30,12 +31,14 @@ Button {
|
||||
}
|
||||
property var window : Window.window
|
||||
property alias items: menu.content
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
id: control
|
||||
rightPadding:35
|
||||
enabled: !disabled
|
||||
focusPolicy:Qt.TabFocus
|
||||
horizontalPadding:12
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
background: Rectangle{
|
||||
implicitWidth: 28
|
||||
implicitHeight: 28
|
||||
@ -43,7 +46,7 @@ Button {
|
||||
border.width: 1
|
||||
radius: 4
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
radius:8
|
||||
}
|
||||
color:{
|
||||
|
||||
@ -5,6 +5,7 @@ import FluentUI
|
||||
|
||||
Button {
|
||||
property bool disabled: false
|
||||
property string contentDescription: ""
|
||||
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
||||
property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||
@ -19,10 +20,13 @@ Button {
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
id: control
|
||||
enabled: !disabled
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
focusPolicy:Qt.TabFocus
|
||||
font:FluTextStyle.Body
|
||||
horizontalPadding:12
|
||||
background: Rectangle{
|
||||
@ -31,7 +35,7 @@ Button {
|
||||
radius: 4
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
radius:8
|
||||
radius:4
|
||||
}
|
||||
color:{
|
||||
if(disabled){
|
||||
|
||||
@ -4,16 +4,15 @@ import FluentUI
|
||||
|
||||
Item {
|
||||
property int radius: 4
|
||||
id:root
|
||||
id:control
|
||||
anchors.fill: parent
|
||||
anchors.margins: -3
|
||||
Rectangle{
|
||||
width: root.width
|
||||
height: root.height
|
||||
width: control.width
|
||||
height: control.height
|
||||
anchors.centerIn: parent
|
||||
color: "#00000000"
|
||||
border.width: 3
|
||||
radius: root.radius
|
||||
border.width: 2
|
||||
radius: control.radius
|
||||
border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
|
||||
z: 65535
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@ Button {
|
||||
property int iconSource
|
||||
property bool disabled: false
|
||||
property int radius:4
|
||||
property string contentDescription: ""
|
||||
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
|
||||
property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
|
||||
property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
||||
@ -34,6 +35,10 @@ Button {
|
||||
return Qt.rgba(0,0,0,1)
|
||||
}
|
||||
}
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
id:control
|
||||
width: 30
|
||||
height: 30
|
||||
@ -41,13 +46,11 @@ Button {
|
||||
implicitHeight: height
|
||||
padding: 0
|
||||
enabled: !disabled
|
||||
focusPolicy:Qt.TabFocus
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
background: Rectangle{
|
||||
radius: control.radius
|
||||
color:control.color
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
}
|
||||
}
|
||||
contentItem: Item{
|
||||
|
||||
@ -155,8 +155,8 @@ Item {
|
||||
Item{
|
||||
height: 38
|
||||
width: layout_list.width
|
||||
Rectangle{
|
||||
radius: 4
|
||||
FluControl{
|
||||
id:item_control
|
||||
anchors{
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
@ -167,141 +167,141 @@ Item {
|
||||
leftMargin: 6
|
||||
rightMargin: 6
|
||||
}
|
||||
onClicked: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
|
||||
return
|
||||
}
|
||||
model.isExpand = !model.isExpand
|
||||
}
|
||||
Rectangle{
|
||||
width: 3
|
||||
height: 18
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
visible: {
|
||||
for(var i=0;i<model.children.length;i++){
|
||||
var item = model.children[i]
|
||||
if(item.idx === nav_list.currentIndex && !model.isExpand){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
FluIcon{
|
||||
rotation: model.isExpand?0:180
|
||||
iconSource:FluentIcons.ChevronUp
|
||||
iconSize: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
rightMargin: 12
|
||||
}
|
||||
opacity: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
visible:opacity
|
||||
Behavior on opacity {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
Behavior on rotation {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
hoverEnabled: true
|
||||
radius: 4
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
|
||||
return
|
||||
}
|
||||
model.isExpand = !model.isExpand
|
||||
}
|
||||
}
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if((nav_list.currentIndex === idx)&&type===0){
|
||||
return Qt.rgba(1,1,1,0.06)
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(nav_list.currentIndex === idx&&type===0){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
Component{
|
||||
id:com_icon
|
||||
FluIcon{
|
||||
iconSource: {
|
||||
if(model.icon){
|
||||
return model.icon
|
||||
Rectangle{
|
||||
width: 3
|
||||
height: 18
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
visible: {
|
||||
for(var i=0;i<model.children.length;i++){
|
||||
var item = model.children[i]
|
||||
if(item.idx === nav_list.currentIndex && !model.isExpand){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
iconSize: 15
|
||||
}
|
||||
}
|
||||
Item{
|
||||
id:item_icon
|
||||
width: 30
|
||||
height: 30
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
leftMargin: 3
|
||||
}
|
||||
Loader{
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: {
|
||||
if(model.cusIcon){
|
||||
return model.cusIcon
|
||||
}
|
||||
return com_icon
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
opacity: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
visible:opacity
|
||||
Behavior on opacity {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:item_icon.right
|
||||
}
|
||||
color:{
|
||||
if(item_mouse.pressed){
|
||||
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||
FluIcon{
|
||||
rotation: model.isExpand?0:180
|
||||
iconSource:FluentIcons.ChevronUp
|
||||
iconSize: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
rightMargin: 12
|
||||
}
|
||||
opacity: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
visible:opacity
|
||||
Behavior on opacity {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
Behavior on rotation {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
}
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if((nav_list.currentIndex === idx)&&type===0){
|
||||
return Qt.rgba(1,1,1,0.06)
|
||||
}
|
||||
if(item_control.hovered){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(nav_list.currentIndex === idx&&type===0){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
}
|
||||
if(item_control.hovered){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
Component{
|
||||
id:com_icon
|
||||
FluIcon{
|
||||
iconSource: {
|
||||
if(model.icon){
|
||||
return model.icon
|
||||
}
|
||||
return 0
|
||||
}
|
||||
iconSize: 15
|
||||
}
|
||||
}
|
||||
Item{
|
||||
id:item_icon
|
||||
width: 30
|
||||
height: 30
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
leftMargin: 3
|
||||
}
|
||||
Loader{
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: {
|
||||
if(model.cusIcon){
|
||||
return model.cusIcon
|
||||
}
|
||||
return com_icon
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
opacity: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
visible:opacity
|
||||
Behavior on opacity {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:item_icon.right
|
||||
}
|
||||
color:{
|
||||
if(item_control.pressed){
|
||||
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||
}
|
||||
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||
}
|
||||
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Component{
|
||||
id:com_panel_item
|
||||
@ -314,15 +314,16 @@ Item {
|
||||
}
|
||||
}
|
||||
clip: true
|
||||
height: {
|
||||
height: visible ? 38 : 0
|
||||
visible: {
|
||||
if(model.parent){
|
||||
return model.parent.isExpand ? 38 : 0
|
||||
return model.parent.isExpand ? true : false
|
||||
}
|
||||
return 38
|
||||
return true
|
||||
}
|
||||
width: layout_list.width
|
||||
Rectangle{
|
||||
radius: 4
|
||||
FluControl{
|
||||
id:item_control
|
||||
anchors{
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
@ -333,120 +334,119 @@ Item {
|
||||
leftMargin: 6
|
||||
rightMargin: 6
|
||||
}
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if(type === 0){
|
||||
if(model.tapFunc){
|
||||
model.tapFunc()
|
||||
}else{
|
||||
nav_list.currentIndex = idx
|
||||
layout_footer.currentIndex = -1
|
||||
if(d.isMinimal || d.isCompact){
|
||||
d.enableNavigationPanel = false
|
||||
}
|
||||
}
|
||||
onClicked: {
|
||||
if(type === 0){
|
||||
if(model.tapFunc){
|
||||
model.tapFunc()
|
||||
}else{
|
||||
if(model.tapFunc){
|
||||
model.tapFunc()
|
||||
}else{
|
||||
nav_list.currentIndex = nav_list.count-layout_footer.count+idx
|
||||
layout_footer.currentIndex = idx
|
||||
if(d.isMinimal || d.isCompact){
|
||||
d.enableNavigationPanel = false
|
||||
}
|
||||
nav_list.currentIndex = idx
|
||||
layout_footer.currentIndex = -1
|
||||
if(d.isMinimal || d.isCompact){
|
||||
d.enableNavigationPanel = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if(type===0){
|
||||
if(nav_list.currentIndex === idx){
|
||||
return Qt.rgba(1,1,1,0.06)
|
||||
}
|
||||
}else{
|
||||
if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
|
||||
return Qt.rgba(1,1,1,0.06)
|
||||
}
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(type===0){
|
||||
if(nav_list.currentIndex === idx){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
}
|
||||
if(model.tapFunc){
|
||||
model.tapFunc()
|
||||
}else{
|
||||
if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
nav_list.currentIndex = nav_list.count-layout_footer.count+idx
|
||||
layout_footer.currentIndex = idx
|
||||
if(d.isMinimal || d.isCompact){
|
||||
d.enableNavigationPanel = false
|
||||
}
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
Component{
|
||||
id:com_icon
|
||||
FluIcon{
|
||||
iconSource: {
|
||||
if(model.icon){
|
||||
return model.icon
|
||||
}
|
||||
return 0
|
||||
}
|
||||
iconSize: 15
|
||||
}
|
||||
}
|
||||
Item{
|
||||
id:item_icon
|
||||
width: 30
|
||||
height: 30
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
leftMargin: 3
|
||||
}
|
||||
Loader{
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: {
|
||||
if(model.cusIcon){
|
||||
return model.cusIcon
|
||||
}
|
||||
return com_icon
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
opacity: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
visible:opacity
|
||||
Behavior on opacity {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
Rectangle{
|
||||
radius: 4
|
||||
anchors.fill: parent
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if(type===0){
|
||||
if(nav_list.currentIndex === idx){
|
||||
return Qt.rgba(1,1,1,0.06)
|
||||
}
|
||||
}else{
|
||||
if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
|
||||
return Qt.rgba(1,1,1,0.06)
|
||||
}
|
||||
}
|
||||
if(item_control.hovered){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(type===0){
|
||||
if(nav_list.currentIndex === idx){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
}
|
||||
}else{
|
||||
if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
}
|
||||
}
|
||||
if(item_control.hovered){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
color:{
|
||||
if(item_mouse.pressed){
|
||||
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||
Component{
|
||||
id:com_icon
|
||||
FluIcon{
|
||||
iconSource: {
|
||||
if(model.icon){
|
||||
return model.icon
|
||||
}
|
||||
return 0
|
||||
}
|
||||
iconSize: 15
|
||||
}
|
||||
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:item_icon.right
|
||||
Item{
|
||||
id:item_icon
|
||||
width: 30
|
||||
height: 30
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
leftMargin: 3
|
||||
}
|
||||
Loader{
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: {
|
||||
if(model.cusIcon){
|
||||
return model.cusIcon
|
||||
}
|
||||
return com_icon
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
opacity: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
visible:opacity
|
||||
Behavior on opacity {
|
||||
NumberAnimation{
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
color:{
|
||||
if(item_control.pressed){
|
||||
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||
}
|
||||
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:item_icon.right
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -624,11 +624,11 @@ Item {
|
||||
}
|
||||
return "transparent"
|
||||
}
|
||||
|
||||
x: {
|
||||
x: visible ? 0 : -width
|
||||
visible: {
|
||||
if(d.displayMode !== FluNavigationView.Minimal)
|
||||
return 0
|
||||
return d.isMinimalAndPanel ? 0 : -width
|
||||
return true
|
||||
return d.isMinimalAndPanel ? true : false
|
||||
}
|
||||
FluAcrylic {
|
||||
sourceItem:nav_swipe
|
||||
@ -820,14 +820,9 @@ Item {
|
||||
duration: 83
|
||||
}
|
||||
}
|
||||
background: FluRectangle{
|
||||
width: 160
|
||||
radius: [4,4,4,4]
|
||||
FluShadow{
|
||||
radius: 4
|
||||
}
|
||||
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
|
||||
height: 38*Math.min(Math.max(list_view.count,1),8)
|
||||
padding: 0
|
||||
focus: true
|
||||
contentItem: Item{
|
||||
ListView{
|
||||
id:list_view
|
||||
anchors.fill: parent
|
||||
@ -836,6 +831,7 @@ Item {
|
||||
model: control_popup.childModel
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
delegate:Button{
|
||||
id:item_button
|
||||
width: 160
|
||||
padding:10
|
||||
background: Rectangle{
|
||||
@ -845,6 +841,10 @@ Item {
|
||||
}
|
||||
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
|
||||
}
|
||||
FluFocusRectangle{
|
||||
visible: item_button.activeFocus
|
||||
radius:4
|
||||
}
|
||||
}
|
||||
contentItem: FluText{
|
||||
text:modelData.title
|
||||
@ -867,6 +867,16 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
background: FluRectangle{
|
||||
implicitWidth: 160
|
||||
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
|
||||
radius: [4,4,4,4]
|
||||
FluShadow{
|
||||
radius: 4
|
||||
}
|
||||
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
|
||||
|
||||
}
|
||||
function showPopup(pos,model){
|
||||
control_popup.x = pos.x
|
||||
control_popup.y = pos.y
|
||||
@ -906,19 +916,19 @@ Item {
|
||||
{
|
||||
switch(page.pageMode)
|
||||
{
|
||||
case FluNavigationView.SingleTask:
|
||||
while(nav_swipe.currentItem !== page)
|
||||
{
|
||||
nav_swipe.pop()
|
||||
d.stackItems.pop()
|
||||
}
|
||||
case FluNavigationView.SingleTask:
|
||||
while(nav_swipe.currentItem !== page)
|
||||
{
|
||||
nav_swipe.pop()
|
||||
d.stackItems.pop()
|
||||
}
|
||||
return
|
||||
case FluNavigationView.SingleTop:
|
||||
if (nav_swipe.currentItem.url === url)
|
||||
return
|
||||
case FluNavigationView.SingleTop:
|
||||
if (nav_swipe.currentItem.url === url)
|
||||
return
|
||||
break
|
||||
case FluNavigationView.Standard:
|
||||
default:
|
||||
break
|
||||
case FluNavigationView.Standard:
|
||||
default:
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Controls.Basic
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
Item {
|
||||
|
||||
property url logo
|
||||
property string title: ""
|
||||
property FluObject items
|
||||
property FluObject footerItems
|
||||
property int displayMode: FluNavigationView.Auto
|
||||
property Component autoSuggestBox
|
||||
property Component actionItem
|
||||
id:control
|
||||
Item {
|
||||
id:nav_app_bar
|
||||
width: parent.width
|
||||
height: 40
|
||||
RowLayout{
|
||||
height:parent.height
|
||||
spacing: 0
|
||||
FluIconButton{
|
||||
iconSource: FluentIcons.ChromeBack
|
||||
Layout.leftMargin: 5
|
||||
Layout.preferredWidth: 30
|
||||
Layout.preferredHeight: 30
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
iconSize: 15
|
||||
}
|
||||
FluIconButton{
|
||||
id:btn_nav
|
||||
iconSource: FluentIcons.GlobalNavButton
|
||||
iconSize: 15
|
||||
Layout.preferredWidth: 30
|
||||
Layout.preferredHeight: 30
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
Image{
|
||||
Layout.preferredHeight: 20
|
||||
Layout.preferredWidth: 20
|
||||
source: control.logo
|
||||
Layout.leftMargin: 12
|
||||
sourceSize: Qt.size(40,40)
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluText{
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text:control.title
|
||||
Layout.leftMargin: 12
|
||||
font: FluTextStyle.Body
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,7 @@ import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
Button {
|
||||
property string contentDescription: ""
|
||||
property bool disabled: false
|
||||
property color borderNormalColor: checked ? FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark : FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
|
||||
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(198/255,198/255,198/255,1)
|
||||
@ -15,17 +16,19 @@ Button {
|
||||
property var clickListener : function(){
|
||||
checked = !checked
|
||||
}
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
id:control
|
||||
enabled: !disabled
|
||||
focusPolicy:Qt.TabFocus
|
||||
padding:0
|
||||
background: Item{
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
}
|
||||
}
|
||||
font:FluTextStyle.Body
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
onClicked: clickListener()
|
||||
contentItem: RowLayout{
|
||||
Rectangle{
|
||||
|
||||
@ -5,6 +5,7 @@ import FluentUI
|
||||
|
||||
Button {
|
||||
property bool disabled: false
|
||||
property string contentDescription: ""
|
||||
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.15) : Qt.lighter(normalColor,1.15)
|
||||
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
|
||||
@ -20,19 +21,21 @@ Button {
|
||||
return hovered ? hoverColor :normalColor
|
||||
}
|
||||
id: control
|
||||
topPadding:0
|
||||
bottomPadding:0
|
||||
leftPadding:0
|
||||
rightPadding:0
|
||||
horizontalPadding:12
|
||||
enabled: !disabled
|
||||
focusPolicy:Qt.TabFocus
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
background: Item{
|
||||
implicitWidth: 28
|
||||
implicitHeight: 28
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
radius:8
|
||||
}
|
||||
}
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
contentItem: FluText {
|
||||
id:btn_text
|
||||
text: control.text
|
||||
|
||||
@ -6,6 +6,7 @@ import FluentUI
|
||||
Button {
|
||||
|
||||
property bool disabled: false
|
||||
property string contentDescription: ""
|
||||
property color normalColor: {
|
||||
if(checked){
|
||||
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||
@ -31,10 +32,12 @@ Button {
|
||||
checked = !checked
|
||||
}
|
||||
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.text
|
||||
Accessible.description: contentDescription
|
||||
Accessible.onPressAction: control.clicked()
|
||||
id: control
|
||||
enabled: !disabled
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
focusPolicy:Qt.TabFocus
|
||||
horizontalPadding:12
|
||||
onClicked: clickListener()
|
||||
background: Rectangle{
|
||||
@ -44,7 +47,7 @@ Button {
|
||||
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
|
||||
border.width: checked ? 0 : 1
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
radius:8
|
||||
}
|
||||
color:{
|
||||
|
||||
@ -22,8 +22,6 @@ Button {
|
||||
height: 20
|
||||
enabled: !disabled
|
||||
implicitHeight: height
|
||||
focusPolicy:Qt.TabFocus
|
||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||
onClicked: clickListener()
|
||||
contentItem: Item{}
|
||||
background : RowLayout{
|
||||
@ -34,7 +32,7 @@ Button {
|
||||
height: control.height
|
||||
radius: height / 2
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
visible: control.activeFocus
|
||||
radius: 20
|
||||
}
|
||||
color: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user