diff options
author | J-P Nurmi <jpnurmi@theqtcompany.com> | 2015-11-25 21:37:07 +0100 |
---|---|---|
committer | J-P Nurmi <jpnurmi@theqtcompany.com> | 2015-11-26 17:26:54 +0000 |
commit | 3070c078923c90a3ebcbbe9cbaf2063231e4e4b9 (patch) | |
tree | 72194fe4ed921795d6c2b0d9a007b2f145931d1e /src/imports/controls/material | |
parent | f322d671c75886f1e456c7374b5391d8c94902cf (diff) |
Optimize Material ItemDelegate
Change-Id: I868475a828e35a08c3f9c65996e896863a372bae
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>
Diffstat (limited to 'src/imports/controls/material')
-rw-r--r-- | src/imports/controls/material/ItemDelegate.qml | 124 |
1 files changed, 37 insertions, 87 deletions
diff --git a/src/imports/controls/material/ItemDelegate.qml b/src/imports/controls/material/ItemDelegate.qml index 57ec374c..73a63397 100644 --- a/src/imports/controls/material/ItemDelegate.qml +++ b/src/imports/controls/material/ItemDelegate.qml @@ -59,14 +59,25 @@ T.ItemDelegate { y: control.topPadding + (control.availableHeight - height) / 2 implicitWidth: 20 implicitHeight: 20 - border.color: control.Material.secondaryTextColor + color: "transparent" + border.color: control.checked ? control.Material.accentColor : control.Material.secondaryTextColor + border.width: control.checked ? width / 2 : 2 radius: 2 visible: control.checkable - Component.onCompleted: { - color = control.checked || control.pressed ? control.Material.accentColor : "transparent"; - border.width = control.checked || control.pressed ? 0 : 2; + Behavior on border.width { + NumberAnimation { + duration: 100 + easing.type: Easing.OutCubic + } + } + + Behavior on border.color { + ColorAnimation { + duration: 100 + easing.type: Easing.OutCubic + } } Ripple { @@ -82,96 +93,35 @@ T.ItemDelegate { id: checkImage x: (parent.width - width) / 2 y: (parent.height - height) / 2 + width: 16 + height: 16 source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/check.png" fillMode: Image.PreserveAspectFit - Component.onCompleted: { - width = control.checked || control.pressed ? 16 : 0; - height = control.checked || control.pressed ? 16 : 0; - } - } - - Connections { - target: control - onCheckedChanged: { - pressScaleAnimation.start(); - if (control.checked) - checkedAnimation.start(); - else - uncheckedAnimation.start(); - } - } - - SequentialAnimation { - id: pressScaleAnimation - - NumberAnimation { - target: indicatorItem - property: "scale" - // Go down 2 pixels in size. - to: 1 - 2 / indicatorItem.width - duration: 120 - } - NumberAnimation { - target: indicatorItem - property: "scale" - to: 1 - duration: 120 - } + scale: control.checked ? 1 : 0 + Behavior on scale { NumberAnimation { duration: 100 } } } - SequentialAnimation { - id: checkedAnimation - - PropertyAction { - target: indicatorItem.border - property: "color" - value: control.Material.accentColor - } - NumberAnimation { - target: indicatorItem.border - property: "width" - from: 2 - to: indicatorItem.width / 2 - easing.type: Easing.OutCubic - duration: 100 - } - NumberAnimation { - target: checkImage - properties: "width, height" - from: 0 - to: 16 - duration: 100 - } + states: State { + name: "checked" + when: control.checked } - SequentialAnimation { - id: uncheckedAnimation - - PropertyAction { - target: indicatorItem.border - property: "color" - value: control.Material.secondaryTextColor - } - NumberAnimation { - target: checkImage - properties: "width, height" - from: 16 - to: 0 - duration: 100 - } - NumberAnimation { - target: indicatorItem.border - property: "width" - from: indicatorItem.width / 2 - to: 2 - easing.type: Easing.OutCubic - duration: 100 - } - PropertyAction { - target: indicatorItem - property: "color" - value: "transparent" + transitions: Transition { + SequentialAnimation { + NumberAnimation { + target: indicatorItem + property: "scale" + // Go down 2 pixels in size. + to: 1 - 2 / indicatorItem.width + duration: 120 + } + NumberAnimation { + target: indicatorItem + property: "scale" + to: 1 + duration: 120 + } } } } |