diff options
author | J-P Nurmi <jpnurmi@theqtcompany.com> | 2016-01-22 12:10:12 +0100 |
---|---|---|
committer | J-P Nurmi <jpnurmi@theqtcompany.com> | 2016-01-22 14:09:23 +0000 |
commit | 7427e2808324388678eefda45b3e83c675979290 (patch) | |
tree | 2fe0308a0c84d8fd55ff1a3664565b2f5536dd6b /src/imports/controls/material | |
parent | 482ecb0fdc011687eec3df5803653be88f14f539 (diff) |
Refactor Popup
Added relevant properties to make it almost like a Control: x, y,
width, height, padding, background... This change makes popup use
an internal item where the style/user-supplied contentItem and
background are re-parented. This way we can provide a default style
(background) for Popup.
Change-Id: I3e7933562464c5c852e4ba4bc37d9ac25691c714
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>
Diffstat (limited to 'src/imports/controls/material')
-rw-r--r-- | src/imports/controls/material/ComboBox.qml | 40 | ||||
-rw-r--r-- | src/imports/controls/material/Menu.qml | 42 | ||||
-rw-r--r-- | src/imports/controls/material/Popup.qml | 21 |
3 files changed, 63 insertions, 40 deletions
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml index 93494a60..c4ceecdd 100644 --- a/src/imports/controls/material/ComboBox.qml +++ b/src/imports/controls/material/ComboBox.qml @@ -114,6 +114,15 @@ T.ComboBox { //! [popup] popup: T.Popup { + 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) + readonly property bool showAbove: above.y >= 0 && below.y + height > control.Window.height + + x: below.x + y: showAbove ? above.y : below.y + width: control.width + height: Math.min(200, listview.contentHeight) + enter: Transition { // grow_fade_in NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 } @@ -126,18 +135,17 @@ T.ComboBox { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 } } - 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) - readonly property bool showAbove: above.y >= 0 && below.y + height > control.Window.height + contentItem: ListView { + id: listview + clip: true + model: control.delegateModel + currentIndex: control.highlightedIndex + transformOrigin: popup.showAbove ? Item.Bottom : Item.Top - x: below.x - y: showAbove ? above.y : below.y - width: control.width - height: listview.height - transformOrigin: showAbove ? Item.Bottom : Item.Top +// ScrollIndicator.vertical: ScrollIndicator { } + } + background: Item { Rectangle { id: panel width: parent.width @@ -155,18 +163,6 @@ T.ComboBox { samples: 15 spread: 0.5 } - - ListView { - id: listview - width: control.width - height: Math.min(200, contentHeight) // TODO: 396 - - clip: true - model: control.delegateModel - currentIndex: control.highlightedIndex - -// ScrollIndicator.vertical: ScrollIndicator { } - } } } //! [popup] diff --git a/src/imports/controls/material/Menu.qml b/src/imports/controls/material/Menu.qml index 4523fc26..86ab5c81 100644 --- a/src/imports/controls/material/Menu.qml +++ b/src/imports/controls/material/Menu.qml @@ -43,6 +43,11 @@ import QtGraphicalEffects 1.0 T.Menu { id: control + width: Math.max(background ? background.implicitWidth : 0, + contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0) + height: Math.min(background ? background.implicitHeight : 0, + contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0) + enter: Transition { // grow_fade_in NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 } @@ -56,11 +61,26 @@ T.Menu { } //! [contentItem] - contentItem: Item { - implicitWidth: 200 - implicitHeight: Math.min(listview.contentHeight, 200) + contentItem: ListView { + implicitHeight: contentHeight transformOrigin: Item.Top + model: control.contentModel + // TODO: improve this? + interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false + clip: true + keyNavigationWraps: false + currentIndex: -1 + + ScrollIndicator.vertical: ScrollIndicator {} + } + //! [contentItem] + + //! [background] + background: Item { + implicitWidth: 200 + implicitHeight: 200 + Rectangle { id: panel width: parent.width @@ -77,20 +97,6 @@ T.Menu { samples: 15 spread: 0.5 } - - ListView { - id: listview - width: parent.width - height: parent.height - model: control.contentModel - // TODO: improve this? - interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false - clip: true - keyNavigationWraps: false - currentIndex: -1 - - ScrollIndicator.vertical: ScrollIndicator {} - } } - //! [contentItem] + //! [background] } diff --git a/src/imports/controls/material/Popup.qml b/src/imports/controls/material/Popup.qml index 40531c61..8eb56a01 100644 --- a/src/imports/controls/material/Popup.qml +++ b/src/imports/controls/material/Popup.qml @@ -35,11 +35,20 @@ ****************************************************************************/ import QtQuick 2.6 +import QtGraphicalEffects 1.0 import Qt.labs.templates 1.0 as T +import Qt.labs.controls.material 1.0 T.Popup { id: control + width: Math.max(background ? background.implicitWidth : 0, + contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0) + height: Math.max(background ? background.implicitHeight : 0, + contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0) + + padding: 6 + enter: Transition { // grow_fade_in NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 } @@ -51,4 +60,16 @@ T.Popup { NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 } NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 } } + + background: Rectangle { + radius: 3 + color: control.Material.dialogColor + + layer.effect: DropShadow { + verticalOffset: 1 + color: control.Material.dropShadowColor + samples: 15 + spread: 0.5 + } + } } |