From 966e45513a6f7e568b9f4ac93a01723742b50a84 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Tue, 15 Dec 2015 11:44:40 +0100 Subject: Material: fix drop shadows Change-Id: Ic4b1152a0a8a28a64721f064ccd09b669a12e795 Reviewed-by: Mitch Curtis --- src/imports/controls/material/Button.qml | 35 +++++++++++---------- src/imports/controls/material/ComboBox.qml | 50 +++++++++++++++++------------- src/imports/controls/material/Switch.qml | 18 +++++++---- 3 files changed, 59 insertions(+), 44 deletions(-) diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml index 582bc472..5204fd3b 100644 --- a/src/imports/controls/material/Button.qml +++ b/src/imports/controls/material/Button.qml @@ -69,33 +69,36 @@ T.Button { //! [label] //! [background] - background: Rectangle { + background: Item { implicitWidth: 36 implicitHeight: 36 - radius: 2 - color: !control.enabled ? (control.highlighted ? control.Material.raisedHighlightedButtonDisabledColor : control.Material.raisedButtonDisabledColor) : - (control.pressed ? (control.highlighted ? control.Material.raisedHighlightedButtonPressColor : control.Material.raisedButtonPressColor) : - (control.activeFocus ? (control.highlighted ? control.Material.raisedHighlightedButtonHoverColor : control.Material.raisedButtonHoverColor) : - (control.highlighted ? control.Material.raisedHighlightedButtonColor : control.Material.raisedButtonColor))) + Rectangle { + id: rect + width: parent.width + height: parent.height + radius: 2 + color: !control.enabled ? (control.highlighted ? control.Material.raisedHighlightedButtonDisabledColor : control.Material.raisedButtonDisabledColor) : + (control.pressed ? (control.highlighted ? control.Material.raisedHighlightedButtonPressColor : control.Material.raisedButtonPressColor) : + (control.activeFocus ? (control.highlighted ? control.Material.raisedHighlightedButtonHoverColor : control.Material.raisedButtonHoverColor) : + (control.highlighted ? control.Material.raisedHighlightedButtonColor : control.Material.raisedButtonColor))) - Behavior on color { - ColorAnimation { - duration: 400 + Behavior on color { + ColorAnimation { + duration: 400 + } } } - layer.enabled: control.enabled - layer.effect: DropShadow { + DropShadow { + source: rect + visible: control.enabled + width: parent.width + height: parent.height verticalOffset: 1 color: control.Material.dropShadowColor samples: control.pressed ? 15 : 9 spread: 0.5 - - // TODO: Doesn't work because of QTBUG-49072 - Behavior on radius { - NumberAnimation { duration: 1000 } - } } } //! [background] diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml index 13bbdf38..02d817a8 100644 --- a/src/imports/controls/material/ComboBox.qml +++ b/src/imports/controls/material/ComboBox.qml @@ -74,30 +74,33 @@ T.ComboBox { //! [contentItem] //! [background] - background: Rectangle { + background: Item { implicitWidth: 120 implicitHeight: 32 - radius: 2 - color: control.Material.comboBoxColor + Rectangle { + id: rect + width: parent.width + height: parent.height + radius: 2 + color: control.Material.comboBoxColor - Behavior on color { - ColorAnimation { - duration: 400 + Behavior on color { + ColorAnimation { + duration: 400 + } } } - layer.enabled: control.enabled - layer.effect: DropShadow { + DropShadow { + source: rect + visible: control.enabled + width: parent.width + height: parent.height verticalOffset: 1 color: control.Material.dropShadowColor samples: control.pressed ? 15 : 9 spread: 0.5 - - // TODO: Doesn't work because of QTBUG-49072 - Behavior on radius { - NumberAnimation { duration: 1000 } - } } Image { @@ -111,7 +114,7 @@ T.ComboBox { //! [popup] popup: T.Popup { - contentItem: Rectangle { + contentItem: Item { // TODO: Popup::anchors readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0) readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0) @@ -121,19 +124,22 @@ T.ComboBox { width: control.width height: listview.height - color: control.Material.comboBoxColor + Rectangle { + id: panel + width: parent.width + height: parent.height + color: control.Material.comboBoxColor + } - layer.enabled: control.enabled - layer.effect: DropShadow { + DropShadow { + source: panel + visible: control.enabled + width: parent.width + height: parent.height verticalOffset: 1 color: control.Material.dropShadowColor samples: 15 spread: 0.5 - - // TODO: Doesn't work because of QTBUG-49072 - Behavior on radius { - NumberAnimation { duration: 1000 } - } } ListView { diff --git a/src/imports/controls/material/Switch.qml b/src/imports/controls/material/Switch.qml index 6e612d40..d2658de6 100644 --- a/src/imports/controls/material/Switch.qml +++ b/src/imports/controls/material/Switch.qml @@ -89,12 +89,6 @@ T.Switch { radius: width / 2 color: control.enabled ? (control.checked ? control.Material.switchCheckedHandleColor : control.Material.switchUncheckedHandleColor) : control.Material.switchDisabledHandleColor - layer.enabled: true - layer.effect: DropShadow { - verticalOffset: 1 - color: control.Material.dropShadowColor - spread: 0.3 - } Behavior on x { enabled: !control.pressed @@ -103,6 +97,18 @@ T.Switch { } } } + + DropShadow { + x: handle.x + y: handle.y + width: handle.width + height: handle.height + source: handle + verticalOffset: 1 + color: control.Material.dropShadowColor + spread: 0.3 + } + } //! [indicator] -- cgit v1.2.3