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 | |
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')
-rw-r--r-- | src/imports/controls/ComboBox.qml | 42 | ||||
-rw-r--r-- | src/imports/controls/Menu.qml | 25 | ||||
-rw-r--r-- | src/imports/controls/Popup.qml | 11 | ||||
-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 | ||||
-rw-r--r-- | src/imports/controls/universal/ComboBox.qml | 36 | ||||
-rw-r--r-- | src/imports/controls/universal/Menu.qml | 27 |
8 files changed, 142 insertions, 102 deletions
diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml index e06372e7..f18140f9 100644 --- a/src/imports/controls/ComboBox.qml +++ b/src/imports/controls/ComboBox.qml @@ -98,35 +98,33 @@ T.ComboBox { //! [popup] popup: T.Popup { - contentItem: Rectangle { - // TODO: Popup::anchors - readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0) - readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0) + readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0) + readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0) - x: below.x - y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y - width: control.width - height: listview.height - - ListView { - id: listview - width: control.width - height: Math.min(200, contentHeight) - - clip: true - model: control.delegateModel - currentIndex: control.highlightedIndex + x: below.x + y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y + width: control.width + height: Math.min(200, listview.contentHeight) -// ScrollIndicator.vertical: ScrollIndicator { } - } + contentItem: ListView { + id: listview + clip: true + model: control.delegateModel + currentIndex: control.highlightedIndex Rectangle { - width: parent.width - height: parent.height - color: "transparent" + z: 10 + parent: listview + width: listview.width + height: listview.height border.color: "#353637" + color: "transparent" } + +// ScrollIndicator.vertical: ScrollIndicator { } } + + background: Rectangle { } } //! [popup] } diff --git a/src/imports/controls/Menu.qml b/src/imports/controls/Menu.qml index f4a4243e..482b68a3 100644 --- a/src/imports/controls/Menu.qml +++ b/src/imports/controls/Menu.qml @@ -41,10 +41,14 @@ import Qt.labs.templates 1.0 as T 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) + //! [contentItem] contentItem: ListView { - implicitWidth: 200 - implicitHeight: Math.min(contentHeight, 200) + implicitHeight: contentHeight model: control.contentModel // TODO: improve this? interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false @@ -53,14 +57,15 @@ T.Menu { currentIndex: -1 ScrollIndicator.vertical: ScrollIndicator {} - - Rectangle { - width: parent.width - height: parent.height - color: "#ffffff" - border.color: "#353637" - z: -1 - } } //! [contentItem] + + //! [background] + background: Rectangle { + implicitWidth: 200 + implicitHeight: 200 + color: "#ffffff" + border.color: "#353637" + } + //! [background] } diff --git a/src/imports/controls/Popup.qml b/src/imports/controls/Popup.qml index b7c6fe08..3d3fb365 100644 --- a/src/imports/controls/Popup.qml +++ b/src/imports/controls/Popup.qml @@ -39,4 +39,15 @@ import Qt.labs.templates 1.0 as T 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 + + background: Rectangle { + border.color: "#353637" + } } 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 + } + } } diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml index b91e4581..32e28e53 100644 --- a/src/imports/controls/universal/ComboBox.qml +++ b/src/imports/controls/universal/ComboBox.qml @@ -109,29 +109,27 @@ T.ComboBox { //! [popup] popup: T.Popup { - contentItem: Rectangle { - // TODO: Popup::anchors - readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0) - readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0) + readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0) + readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0) - x: below.x - y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y - width: control.width - height: listview.height - - color: control.Universal.chromeMediumLowColor + x: below.x + y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y + width: control.width + height: Math.min(200, listview.contentHeight) // TODO: 396 - ListView { - id: listview - width: control.width - height: Math.min(200, contentHeight) // TODO: 396 + contentItem: ListView { + id: listview + clip: true + model: control.delegateModel + currentIndex: control.highlightedIndex - clip: true - model: control.delegateModel - currentIndex: control.highlightedIndex +// ScrollIndicator.vertical: ScrollIndicator { } + } -// ScrollIndicator.vertical: ScrollIndicator { } - } + background: Rectangle { + color: control.Universal.chromeMediumLowColor + border.color: control.Universal.chromeHighColor + border.width: 1 // FlyoutBorderThemeThickness } } //! [popup] diff --git a/src/imports/controls/universal/Menu.qml b/src/imports/controls/universal/Menu.qml index fec16c16..765ca030 100644 --- a/src/imports/controls/universal/Menu.qml +++ b/src/imports/controls/universal/Menu.qml @@ -42,10 +42,14 @@ import Qt.labs.controls.universal 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) + //! [contentItem] contentItem: ListView { - implicitWidth: 200 - implicitHeight: Math.min(contentHeight, 200) + implicitHeight: contentHeight model: control.contentModel // TODO: improve this? interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false @@ -54,15 +58,16 @@ T.Menu { currentIndex: -1 ScrollIndicator.vertical: ScrollIndicator {} - - Rectangle { - z: -1 - width: parent.width - height: parent.height - color: control.Universal.chromeMediumLowColor - border.color: control.Universal.chromeHighColor - border.width: 1 // FlyoutBorderThemeThickness - } } //! [contentItem] + + //! [background] + background: Rectangle { + implicitWidth: 200 + implicitHeight: 200 + color: control.Universal.chromeMediumLowColor + border.color: control.Universal.chromeHighColor + border.width: 1 // FlyoutBorderThemeThickness + } + //! [background] } |