update
parent
f36914fdee
commit
8cc828a56b
|
@ -47,7 +47,7 @@ FluContentPage {
|
||||||
height: 80
|
height: 80
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
id:item_icon
|
id:item_icon
|
||||||
icon:modelData.icon
|
iconSource:modelData.icon
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
onClicked: {
|
onClicked: {
|
||||||
var text ="FluentIcons."+modelData.name;
|
var text ="FluentIcons."+modelData.name;
|
||||||
|
|
|
@ -11,7 +11,7 @@ FluScrollablePage{
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
text:"支持Tab键切换焦点,Enter键执行点击事件"
|
text:"支持Tab键切换焦点,空格键执行点击事件"
|
||||||
}
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
|
@ -21,6 +21,7 @@ FluScrollablePage{
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
disabled:button_switch.checked
|
disabled:button_switch.checked
|
||||||
|
text:"Standard Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showInfo("点击StandardButton")
|
showInfo("点击StandardButton")
|
||||||
}
|
}
|
||||||
|
@ -53,6 +54,7 @@ FluScrollablePage{
|
||||||
|
|
||||||
FluFilledButton{
|
FluFilledButton{
|
||||||
disabled:filled_button_switch.checked
|
disabled:filled_button_switch.checked
|
||||||
|
text:"Filled Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showWarning("点击FilledButton")
|
showWarning("点击FilledButton")
|
||||||
}
|
}
|
||||||
|
@ -85,7 +87,7 @@ FluScrollablePage{
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
icon:FluentIcons.ChromeCloseContrast
|
iconSource:FluentIcons.ChromeCloseContrast
|
||||||
disabled:icon_button_switch.checked
|
disabled:icon_button_switch.checked
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
anchors{
|
anchors{
|
||||||
|
@ -129,7 +131,7 @@ FluScrollablePage{
|
||||||
property int selecIndex : 0
|
property int selecIndex : 0
|
||||||
model: 3
|
model: 3
|
||||||
delegate: FluRadioButton{
|
delegate: FluRadioButton{
|
||||||
checked : repeater.selecIndex===index
|
selected : repeater.selecIndex===index
|
||||||
disabled:radio_button_switch.checked
|
disabled:radio_button_switch.checked
|
||||||
text:"Radio Button_"+index
|
text:"Radio Button_"+index
|
||||||
onClicked:{
|
onClicked:{
|
||||||
|
@ -164,6 +166,7 @@ FluScrollablePage{
|
||||||
|
|
||||||
FluCheckBox{
|
FluCheckBox{
|
||||||
disabled:icon_button_check.checked
|
disabled:icon_button_check.checked
|
||||||
|
text:"Check Box"
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
|
|
|
@ -26,7 +26,7 @@ FluScrollablePage{
|
||||||
property int selecIndex : 0
|
property int selecIndex : 0
|
||||||
model: 3
|
model: 3
|
||||||
delegate: FluRadioButton{
|
delegate: FluRadioButton{
|
||||||
checked : repeater.selecIndex===index
|
selected : repeater.selecIndex===index
|
||||||
text:"Radio Button_"+index
|
text:"Radio Button_"+index
|
||||||
onClicked:{
|
onClicked:{
|
||||||
repeater.selecIndex = index
|
repeater.selecIndex = index
|
||||||
|
|
|
@ -20,7 +20,7 @@ FluScrollablePage{
|
||||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||||
FluIcon {
|
FluIcon {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
icon: FluentIcons.AcceptMedium
|
iconSource: FluentIcons.AcceptMedium
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
visible: modelData === FluTheme.primaryColor
|
visible: modelData === FluTheme.primaryColor
|
||||||
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||||
|
@ -42,8 +42,8 @@ FluScrollablePage{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
checked: FluTheme.isDark
|
checked: FluTheme.isDark
|
||||||
onClickFunc:function(){
|
onCheckedChanged:{
|
||||||
FluTheme.isDark = !FluTheme.isDark
|
FluTheme.isDark = checked
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
|
@ -52,8 +52,8 @@ FluScrollablePage{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
checked: FluTheme.isFrameless
|
checked: FluTheme.isFrameless
|
||||||
onClickFunc:function(){
|
onCheckedChanged:{
|
||||||
FluTheme.isFrameless = !FluTheme.isFrameless
|
FluTheme.isFrameless = isFrameless
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
|
@ -62,8 +62,8 @@ FluScrollablePage{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
checked: FluTheme.isNativeText
|
checked: FluTheme.isNativeText
|
||||||
onClickFunc:function(){
|
onCheckedChanged:{
|
||||||
FluTheme.isNativeText = !FluTheme.isNativeText
|
FluTheme.isNativeText = isNativeText
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -94,14 +94,14 @@ Rectangle{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
checked: FluTheme.isDark
|
checked: FluTheme.isDark
|
||||||
onClickFunc:function(){
|
onCheckedChanged:{
|
||||||
FluTheme.isDark = !FluTheme.isDark
|
FluTheme.isDark = checked
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
icon : FluentIcons.ChromeMinimizeContrast
|
iconSource : FluentIcons.ChromeMinimizeContrast
|
||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
text:"最小化"
|
text:"最小化"
|
||||||
|
@ -117,7 +117,7 @@ Rectangle{
|
||||||
return false
|
return false
|
||||||
return Window.Maximized === window.visibility
|
return Window.Maximized === window.visibility
|
||||||
}
|
}
|
||||||
icon : isRestore ? FluentIcons.ChromeRestoreContrast : FluentIcons.ChromeMaximizeContrast
|
iconSource : isRestore ? FluentIcons.ChromeRestoreContrast : FluentIcons.ChromeMaximizeContrast
|
||||||
color:hovered ? "#20000000" : "#00000000"
|
color:hovered ? "#20000000" : "#00000000"
|
||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
visible: resizable
|
visible: resizable
|
||||||
|
@ -129,7 +129,7 @@ Rectangle{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
icon : FluentIcons.ChromeCloseContrast
|
iconSource : FluentIcons.ChromeCloseContrast
|
||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
text:"关闭"
|
text:"关闭"
|
||||||
iconSize: 13
|
iconSize: 13
|
||||||
|
|
|
@ -7,7 +7,7 @@ TextField{
|
||||||
property var values:[]
|
property var values:[]
|
||||||
property int fontStyle: FluText.Body
|
property int fontStyle: FluText.Body
|
||||||
property int pixelSize : FluTheme.textSize
|
property int pixelSize : FluTheme.textSize
|
||||||
property int icon: -1
|
property int iconSource: -1
|
||||||
signal itemClicked(string data)
|
signal itemClicked(string data)
|
||||||
|
|
||||||
id:input
|
id:input
|
||||||
|
@ -91,7 +91,7 @@ TextField{
|
||||||
inputItem: input
|
inputItem: input
|
||||||
|
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
icon:FluentIcons.ChromeClose
|
iconSource:FluentIcons.ChromeClose
|
||||||
iconSize: 10
|
iconSize: 10
|
||||||
width: 20
|
width: 20
|
||||||
height: 20
|
height: 20
|
||||||
|
@ -109,10 +109,10 @@ TextField{
|
||||||
|
|
||||||
FluIcon{
|
FluIcon{
|
||||||
id:icon_right
|
id:icon_right
|
||||||
icon: input.icon
|
iconSource: input.iconSource
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
visible: input.icon != -1
|
visible: input.iconSource != -1
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
|
|
@ -2,39 +2,19 @@
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Control {
|
Button {
|
||||||
id: control
|
id: control
|
||||||
|
|
||||||
property string text: "Standard Button"
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
|
||||||
|
|
||||||
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/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 hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||||
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||||
|
|
||||||
signal clicked
|
|
||||||
|
|
||||||
topPadding:5
|
topPadding:5
|
||||||
bottomPadding:5
|
bottomPadding:5
|
||||||
leftPadding:15
|
leftPadding:15
|
||||||
rightPadding:15
|
rightPadding:15
|
||||||
|
enabled: !disabled
|
||||||
focusPolicy:Qt.TabFocus
|
|
||||||
Keys.onEnterPressed:(visualFocus&&handleClick())
|
|
||||||
Keys.onReturnPressed:(visualFocus&&handleClick())
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: handleClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(){
|
|
||||||
if(disabled){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
control.clicked()
|
|
||||||
}
|
|
||||||
|
|
||||||
background: Rectangle{
|
background: Rectangle{
|
||||||
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
|
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
|
||||||
|
@ -71,5 +51,4 @@ Control {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,49 +3,45 @@ import QtQuick.Controls 2.15
|
||||||
import QtQuick.Layouts 1.15
|
import QtQuick.Layouts 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Control {
|
Button {
|
||||||
|
|
||||||
id:control
|
id:control
|
||||||
property bool checked: false
|
property bool selected: false
|
||||||
property string text: "Check Box"
|
|
||||||
property var checkClicked
|
property var clickFunc
|
||||||
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
|
||||||
|
padding:0
|
||||||
|
|
||||||
property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
|
property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
|
||||||
property color borderCheckedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color borderSelectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
|
property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
|
||||||
property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
|
|
||||||
property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
||||||
property color checkedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color selectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
|
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
|
||||||
property color checkedHoverColor: FluTheme.isDark ? Qt.darker(checkedColor,1.1) : Qt.lighter(checkedColor,1.1)
|
property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
|
||||||
|
|
||||||
property color checkedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color selectedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
||||||
|
|
||||||
|
enabled: !disabled
|
||||||
|
|
||||||
focusPolicy:Qt.TabFocus
|
|
||||||
Keys.onEnterPressed:(visualFocus&&handleClick())
|
|
||||||
Keys.onReturnPressed:(visualFocus&&handleClick())
|
|
||||||
|
|
||||||
MouseArea {
|
onClicked: {
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: handleClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(){
|
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if(checkClicked){
|
if(clickFunc){
|
||||||
checkClicked()
|
clickFunc()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
checked = !checked
|
selected = !selected
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
background: Item{
|
background: Item{
|
||||||
FluFocusRectangle{
|
FluFocusRectangle{
|
||||||
visible: control.visualFocus
|
visible: control.visualFocus
|
||||||
|
@ -62,8 +58,8 @@ Control {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return borderDisableColor
|
return borderDisableColor
|
||||||
}
|
}
|
||||||
if(checked){
|
if(selected){
|
||||||
return borderCheckedColor
|
return borderSelectedColor
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return borderHoverColor
|
return borderHoverColor
|
||||||
|
@ -72,14 +68,14 @@ Control {
|
||||||
}
|
}
|
||||||
border.width: 1
|
border.width: 1
|
||||||
color: {
|
color: {
|
||||||
if(checked){
|
if(selected){
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return checkedDisableColor
|
return selectedDisableColor
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return checkedHoverColor
|
return selectedHoverColor
|
||||||
}
|
}
|
||||||
return checkedColor
|
return selectedColor
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return hoverColor
|
return hoverColor
|
||||||
|
@ -89,9 +85,9 @@ Control {
|
||||||
|
|
||||||
FluIcon {
|
FluIcon {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
icon: FluentIcons.AcceptMedium
|
iconSource: FluentIcons.AcceptMedium
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
visible: checked
|
visible: selected
|
||||||
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,7 @@ Item {
|
||||||
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||||
}
|
}
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
icon: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
|
iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
|
||||||
onClicked: {
|
onClicked: {
|
||||||
expand = !expand
|
expand = !expand
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,34 +2,19 @@
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Control {
|
Button {
|
||||||
id: control
|
id: control
|
||||||
|
|
||||||
property string text: "Filled Button"
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
||||||
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
signal clicked
|
|
||||||
|
|
||||||
|
enabled: !disabled
|
||||||
topPadding:5
|
topPadding:5
|
||||||
bottomPadding:5
|
bottomPadding:5
|
||||||
leftPadding:15
|
leftPadding:15
|
||||||
rightPadding:15
|
rightPadding:15
|
||||||
focusPolicy:Qt.TabFocus
|
|
||||||
Keys.onEnterPressed:(visualFocus&&handleClick())
|
|
||||||
Keys.onReturnPressed:(visualFocus&&handleClick())
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: handleClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(){
|
|
||||||
if(disabled)
|
|
||||||
return
|
|
||||||
control.clicked()
|
|
||||||
}
|
|
||||||
|
|
||||||
background: Rectangle{
|
background: Rectangle{
|
||||||
radius: 4
|
radius: 4
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
|
|
||||||
property int icon
|
property int iconSource
|
||||||
property int iconSize: 20
|
property int iconSize: 20
|
||||||
property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
|
property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
|
||||||
|
|
||||||
|
@ -12,5 +12,5 @@ Text {
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
color: iconColor
|
color: iconColor
|
||||||
text: (String.fromCharCode(icon).toString(16));
|
text: (String.fromCharCode(iconSource).toString(16));
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,18 +2,26 @@
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Control {
|
Button {
|
||||||
|
|
||||||
id:control
|
id:control
|
||||||
|
|
||||||
|
|
||||||
width: 30
|
width: 30
|
||||||
height: 30
|
height: 30
|
||||||
|
implicitWidth: width
|
||||||
|
implicitHeight: height
|
||||||
|
|
||||||
|
padding: 0
|
||||||
|
|
||||||
property int iconSize: 20
|
property int iconSize: 20
|
||||||
property int icon
|
property int iconSource
|
||||||
property alias text: tool_tip.text
|
|
||||||
signal clicked
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
|
||||||
|
enabled: !disabled
|
||||||
|
|
||||||
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
|
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
|
||||||
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
||||||
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
|
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
|
||||||
|
@ -39,22 +47,6 @@ Control {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
focusPolicy:Qt.TabFocus
|
|
||||||
Keys.onEnterPressed:(visualFocus&&handleClick())
|
|
||||||
Keys.onReturnPressed:(visualFocus&&handleClick())
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: handleClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(){
|
|
||||||
if(disabled){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
control.clicked()
|
|
||||||
}
|
|
||||||
|
|
||||||
background: Rectangle{
|
background: Rectangle{
|
||||||
radius: 4
|
radius: 4
|
||||||
color:control.color
|
color:control.color
|
||||||
|
@ -68,11 +60,13 @@ Control {
|
||||||
id:text_icon
|
id:text_icon
|
||||||
font.family: "Segoe Fluent Icons"
|
font.family: "Segoe Fluent Icons"
|
||||||
font.pixelSize: iconSize
|
font.pixelSize: iconSize
|
||||||
|
width: iconSize
|
||||||
|
height: iconSize
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
color:control.textColor
|
color:control.textColor
|
||||||
text: (String.fromCharCode(icon).toString(16));
|
text: (String.fromCharCode(iconSource).toString(16));
|
||||||
}
|
}
|
||||||
|
|
||||||
FluTooltip{
|
FluTooltip{
|
||||||
|
@ -83,6 +77,7 @@ Control {
|
||||||
}
|
}
|
||||||
return hovered
|
return hovered
|
||||||
}
|
}
|
||||||
|
text:control.text
|
||||||
delay: 1000
|
delay: 1000
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -190,7 +190,7 @@ FluObject {
|
||||||
spacing: 10
|
spacing: 10
|
||||||
|
|
||||||
FluIcon{
|
FluIcon{
|
||||||
icon:{
|
iconSource:{
|
||||||
switch(_super.type){
|
switch(_super.type){
|
||||||
case mcontrol.const_success: return FluentIcons.CompletedSolid;
|
case mcontrol.const_success: return FluentIcons.CompletedSolid;
|
||||||
case mcontrol.const_warning: return FluentIcons.InfoSolid;
|
case mcontrol.const_warning: return FluentIcons.InfoSolid;
|
||||||
|
|
|
@ -145,7 +145,7 @@ Item {
|
||||||
height:parent.height
|
height:parent.height
|
||||||
spacing: 0
|
spacing: 0
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
icon: FluentIcons.ChromeBack
|
iconSource: FluentIcons.ChromeBack
|
||||||
Layout.leftMargin: 5
|
Layout.leftMargin: 5
|
||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
disabled: nav_swipe.depth === 1
|
disabled: nav_swipe.depth === 1
|
||||||
|
@ -160,7 +160,7 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
icon: FluentIcons.GlobalNavButton
|
iconSource: FluentIcons.GlobalNavButton
|
||||||
Layout.leftMargin: 5
|
Layout.leftMargin: 5
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
visible: displayMode === FluNavigationView.Minimal
|
visible: displayMode === FluNavigationView.Minimal
|
||||||
|
@ -185,8 +185,8 @@ Item {
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
checked: FluTheme.isDark
|
checked: FluTheme.isDark
|
||||||
onClickFunc:function(){
|
onCheckedChanged:{
|
||||||
FluTheme.isDark = !FluTheme.isDark
|
FluTheme.isDark = checked
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -269,7 +269,7 @@ Item {
|
||||||
FluAutoSuggestBox{
|
FluAutoSuggestBox{
|
||||||
width: 280
|
width: 280
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
icon: FluentIcons.Zoom
|
iconSource: FluentIcons.Zoom
|
||||||
values: {
|
values: {
|
||||||
var arr = []
|
var arr = []
|
||||||
if(items==null)
|
if(items==null)
|
||||||
|
|
|
@ -4,38 +4,19 @@ import QtQuick.Layouts 1.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
|
|
||||||
Control {
|
Button {
|
||||||
|
|
||||||
id:control
|
property bool selected: false
|
||||||
property bool checked: false
|
|
||||||
property string text: "RodioButton"
|
|
||||||
signal clicked
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
|
||||||
focusPolicy:Qt.TabFocus
|
id:control
|
||||||
Keys.onEnterPressed:(visualFocus&&handleClick())
|
enabled: !disabled
|
||||||
Keys.onReturnPressed:(visualFocus&&handleClick())
|
padding:0
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: handleClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(){
|
|
||||||
if(disabled){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
control.clicked()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
background: Item{
|
background: Item{
|
||||||
FluFocusRectangle{
|
FluFocusRectangle{
|
||||||
visible: control.visualFocus
|
visible: control.visualFocus
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
contentItem: RowLayout{
|
contentItem: RowLayout{
|
||||||
Rectangle{
|
Rectangle{
|
||||||
id:rect_check
|
id:rect_check
|
||||||
|
@ -46,22 +27,22 @@ Control {
|
||||||
layer.enabled: true
|
layer.enabled: true
|
||||||
layer.smooth: true
|
layer.smooth: true
|
||||||
border.width: {
|
border.width: {
|
||||||
if(checked&&disabled){
|
if(selected&&disabled){
|
||||||
return 3
|
return 3
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
if(checked){
|
if(selected){
|
||||||
return 5
|
return 5
|
||||||
}
|
}
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
if(checked){
|
if(selected){
|
||||||
return 3
|
return 3
|
||||||
}
|
}
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
return checked ? 5 : 1
|
return selected ? 5 : 1
|
||||||
}
|
}
|
||||||
Behavior on border.width {
|
Behavior on border.width {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
|
@ -76,7 +57,7 @@ Control {
|
||||||
return Qt.rgba(198/255,198/255,198/255,1)
|
return Qt.rgba(198/255,198/255,198/255,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(checked){
|
if(selected){
|
||||||
if(FluTheme.isDark){
|
if(FluTheme.isDark){
|
||||||
return FluTheme.primaryColor.lighter
|
return FluTheme.primaryColor.lighter
|
||||||
}else{
|
}else{
|
||||||
|
@ -93,7 +74,7 @@ Control {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
color:{
|
color:{
|
||||||
if(disabled&&checked){
|
if(disabled&&selected){
|
||||||
return Qt.rgba(159/255,159/255,159/255,1)
|
return Qt.rgba(159/255,159/255,159/255,1)
|
||||||
}
|
}
|
||||||
if(FluTheme.isDark){
|
if(FluTheme.isDark){
|
||||||
|
@ -103,7 +84,7 @@ Control {
|
||||||
return Qt.rgba(50/255,50/255,50/255,1)
|
return Qt.rgba(50/255,50/255,50/255,1)
|
||||||
}else{
|
}else{
|
||||||
if(hovered){
|
if(hovered){
|
||||||
if(checked){
|
if(selected){
|
||||||
return Qt.rgba(1,1,1,1)
|
return Qt.rgba(1,1,1,1)
|
||||||
}
|
}
|
||||||
return Qt.rgba(222/255,222/255,222/255,1)
|
return Qt.rgba(222/255,222/255,222/255,1)
|
||||||
|
|
|
@ -2,76 +2,53 @@
|
||||||
import QtQuick.Controls 2.0
|
import QtQuick.Controls 2.0
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Switch {
|
Button {
|
||||||
id: root
|
id: root
|
||||||
property var onClickFunc
|
|
||||||
width: 40
|
width: 40
|
||||||
implicitWidth: 40
|
implicitWidth: 40
|
||||||
height: 20
|
height: 20
|
||||||
implicitHeight: 20
|
implicitHeight: 20
|
||||||
checkable: false
|
checkable: true
|
||||||
|
background : Rectangle {
|
||||||
background:FluFocusRectangle{
|
|
||||||
visible: root.visualFocus
|
|
||||||
radius: 20
|
|
||||||
}
|
|
||||||
|
|
||||||
Keys.onEnterPressed:(visualFocus&&handleClick())
|
|
||||||
Keys.onReturnPressed:(visualFocus&&handleClick())
|
|
||||||
|
|
||||||
indicator: Rectangle {
|
|
||||||
width: root.width
|
width: root.width
|
||||||
height: root.height
|
height: root.height
|
||||||
radius: height / 2
|
radius: height / 2
|
||||||
|
FluFocusRectangle{
|
||||||
|
visible: root.visualFocus
|
||||||
|
radius: 20
|
||||||
|
}
|
||||||
color: {
|
color: {
|
||||||
if(FluTheme.isDark){
|
if(FluTheme.isDark){
|
||||||
if(root.checked){
|
if(checked){
|
||||||
return FluTheme.primaryColor.dark
|
return FluTheme.primaryColor.dark
|
||||||
}
|
}
|
||||||
if(switch_mouse.containsMouse){
|
if(hovered){
|
||||||
return "#3E3E3C"
|
return "#3E3E3C"
|
||||||
}
|
}
|
||||||
return "#323232"
|
return "#323232"
|
||||||
}else{
|
}else{
|
||||||
if(root.checked){
|
if(checked){
|
||||||
return FluTheme.primaryColor.dark
|
return FluTheme.primaryColor.dark
|
||||||
}
|
}
|
||||||
if(switch_mouse.containsMouse){
|
if(hovered){
|
||||||
return "#F4F4F4"
|
return "#F4F4F4"
|
||||||
}
|
}
|
||||||
return "#FFFFFF"
|
return "#FFFFFF"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
border.width: 1
|
border.width: 1
|
||||||
border.color: root.checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
|
border.color: checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
x: root.checked ? root.implicitWidth - width - 4 : 4
|
x: checked ? root.implicitWidth - width - 4 : 4
|
||||||
width: root.height - 8
|
width: root.height - 8
|
||||||
height: root.height - 8
|
height: root.height - 8
|
||||||
radius: width / 2
|
radius: width / 2
|
||||||
scale: switch_mouse.containsMouse ? 1.2 : 1.0
|
scale: hovered ? 1.2 : 1.0
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
color: root.checked ? "#FFFFFF" : "#666666"
|
color: checked ? "#FFFFFF" : "#666666"
|
||||||
// border.color: "#D5D5D5"
|
|
||||||
Behavior on x {
|
Behavior on x {
|
||||||
NumberAnimation { duration: 200 }
|
NumberAnimation { duration: 200 }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
MouseArea{
|
|
||||||
id:switch_mouse
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
onClicked: handleClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(){
|
|
||||||
if(root.onClickFunc){
|
|
||||||
root.onClickFunc()
|
|
||||||
}else{
|
|
||||||
root.checked = !root.checked
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -163,7 +163,7 @@ Item {
|
||||||
FluCheckBox{
|
FluCheckBox{
|
||||||
id:item_layout_checkbox
|
id:item_layout_checkbox
|
||||||
text:""
|
text:""
|
||||||
checked: itemModel.multipSelected
|
selected: itemModel.multipSelected
|
||||||
visible: selectionMode === FluTreeView.Multiple
|
visible: selectionMode === FluTreeView.Multiple
|
||||||
Layout.leftMargin: 5
|
Layout.leftMargin: 5
|
||||||
|
|
||||||
|
@ -199,7 +199,7 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
checkClicked:function(){
|
clickFunc:function(){
|
||||||
if(hasChild){
|
if(hasChild){
|
||||||
const stack = [itemModel];
|
const stack = [itemModel];
|
||||||
while (stack.length > 0) {
|
while (stack.length > 0) {
|
||||||
|
@ -222,7 +222,7 @@ Item {
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
id:item_layout_expanded
|
id:item_layout_expanded
|
||||||
color:"#00000000"
|
color:"#00000000"
|
||||||
icon:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight
|
iconSource:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight
|
||||||
opacity: item_layout.hasChild
|
opacity: item_layout.hasChild
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
onClicked: {
|
onClicked: {
|
||||||
|
|
Loading…
Reference in New Issue