Skip to content

Q
qtquickcontrols-nemo
Commit b04b5d67 authored by Sergey Chupligin's avatar Sergey Chupligin Committed by Sergey Chupligin
Browse files
Options

[CheckBox] Add checkBox indeterminate property and clean code

parent bfa881bc
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 69 deletions
examples/touch/content/CheckboxPage.qml
View file @ b04b5d67
...@@ -37,13 +37,32 @@ import QtQuick.Controls.Styles.Nemo 1.0 ...@@ -37,13 +37,32 @@ import QtQuick.Controls.Styles.Nemo 1.0
Page { Page {
id: root id: root
headerTools: HeaderToolsLayout { showBackButton: true; title: "Switch" } headerTools: HeaderToolsLayout { showBackButton: true; title: qsTr("Switch") }
Column { Column {
spacing: 40 spacing: 40
anchors.centerIn: parent anchors.centerIn: parent
CheckBox { CheckBox {
text: "Test 1: " id: defaultCheckbox
text: qsTr("Default checkbox")
}
CheckBox {
id: indeterminateCheckbox
text: qsTr("Indeterminate checkbox")
onCheckedChanged: {
indeterminateCheckbox.indeterminate = true
indeterminateTimer.start()
}
}
}
Timer{
id: indeterminateTimer
interval: 4000
onTriggered: {
indeterminateCheckbox.indeterminate = false
} }
} }
} }
src/controls/qml/Checkbox.qml
View file @ b04b5d67
...@@ -4,5 +4,8 @@ import QtQuick.Controls.Styles.Nemo 1.0 ...@@ -4,5 +4,8 @@ import QtQuick.Controls.Styles.Nemo 1.0
CheckBox { CheckBox {
property int fontSize: Theme.fontSizeSmall property int fontSize: Theme.fontSizeSmall
property bool indeterminate: false
style: CheckBoxStyle{} style: CheckBoxStyle{}
} }
src/styles/qml/CheckBoxStyle.qml
View file @ b04b5d67
...@@ -30,94 +30,134 @@ ...@@ -30,94 +30,134 @@
****************************************************************************************/ ****************************************************************************************/
import QtQuick 2.6 import QtQuick 2.6
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.0 import QtQuick.Controls.Styles 1.0
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
CheckBoxStyle { CheckBoxStyle {
indicator: Rectangle { indicator: Rectangle {
id: background id: background
color: "transparent" color: "transparent"
implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: Theme.itemHeightExtraSmall
Rectangle {
id: bgArea
implicitWidth: Theme.itemWidthExtraSmall implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: Theme.itemHeightExtraSmall implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
color: control.checked ? Theme.accentColor : Theme.fillDarkColor
Rectangle { anchors.centerIn: parent
id: back2 }
implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
color: Theme.fillDarkColor
anchors.centerIn: parent
Rectangle {
id: back1
implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
color: Theme.accentColor
anchors.centerIn: parent
}
}
Image { Rectangle {
id: ball id: ball
width: Theme.itemHeightSmall width: Theme.itemHeightExtraSmall
height: Theme.itemHeightExtraSmall height: Theme.itemHeightExtraSmall
fillMode: Image.PreserveAspectFit radius: width/2
sourceSize.width: width anchors.verticalCenter: parent.verticalCenter
sourceSize.height: height
source: "images/switch-ball.png" clip: true
anchors.verticalCenter: parent.verticalCenter
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(0, Theme.itemHeightExtraSmall)
source: ball
gradient: Gradient {
GradientStop { position: 0.0; color: "#ffffff" }
GradientStop { position: 1.0; color: "#dcdcdc" }
}
} }
Connections { x: control.checked ? background.width - ball.width : 0
target: control }
onCheckedChanged: {
Connections {
target: control
onCheckedChanged: {
if(!indeterminate) {
if (control.checked) { if (control.checked) {
anim1.restart() checkAnimation.restart()
} else { } else {
anim2.restart() unCheckAnimation.restart()
} }
} }
} }
Component.onCompleted: { onIndeterminateChanged: {
back1.opacity = control.checked ? 1 : 0 indeterminateAnimation.stop()
ball.x = control.checked ? background.width - ball.width : 0 if(indeterminate) {
indeterminateAnimation.start()
} else {
indeterminateAnimation.stop()
bgArea.color = control.checked ? Theme.accentColor : Theme.fillDarkColor
}
} }
}
SequentialAnimation { Component.onCompleted: {
id: anim1 if(control.indeterminate){
running: false indeterminateAnimation.start()
NumberAnimation {
target: ball
property: "x"
to: background.width - ball.width
duration: 120
}
NumberAnimation {
target: back1
property: "opacity"
to: 1
duration: 120
}
} }
}
SequentialAnimation { ParallelAnimation {
id: anim2 id: checkAnimation
running: false running: false
NumberAnimation { NumberAnimation {
target: ball target: ball
property: "x" property: "x"
to: 0 to: background.width - ball.width
duration: 120 duration: 400
}
NumberAnimation {
target: back1
property: "opacity"
to: 0
duration: 120
}
} }
PropertyAnimation {
target: bgArea
property: "color"
to: Theme.accentColor
duration: 400
}
}
ParallelAnimation {
id: unCheckAnimation
running: false
NumberAnimation {
target: ball
property: "x"
to: 0
duration: 400
}
PropertyAnimation {
target: bgArea
property: "color"
to: Theme.fillDarkColor
duration: 400
}
}
SequentialAnimation{
id: indeterminateAnimation
running: false
loops: Animation.Infinite
PropertyAnimation {
target: bgArea
property: "color"
to: control.checked ? Theme.fillDarkColor : Theme.accentColor
duration: 500
}
PropertyAnimation {
target: bgArea
property: "color"
to: control.checked ? Theme.accentColor : Theme.fillDarkColor
duration: 500
}
}
} }
label: Label { label: Label {
text: control.text text: control.text
font.pixelSize:control.fontSize font.pixelSize:control.fontSize
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment