ContextMenuStyle extracted from ContextMenu

Change-Id: I260eeddec9cffbff2e7f899428a6e27c655b26be
Reviewed-by: Tomasz Olszak <olszak.tomasz@gmail.com>

4 files changed, 289 insertions, 268 deletions

diff --git a/src/controls/ContextMenu.qml b/src/controls/ContextMenu.qml
index a1167ff..c4f21f1 100644
--- a/src/controls/ContextMenu.qml
+++ b/src/controls/ContextMenu.qml
@@ -26,11 +26,10 @@
  */
 
 
-import QtQuick 2.0
+import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Private 1.0
 import QtQuick.Controls.Styles.Tizen 1.0
-import QtQuick.Window 2.0
-
 
 Floater {
     id: menu
@@ -70,270 +69,13 @@ Floater {
 
     }
 
-    property Item control: menu
-
-    content: Item {
-        id: contentItem
-
-        property point __menuAnchorPoint: control.anchorItem ?
-                                          __globalAnchorPoint(control.width,control.height,control.x,control.y,control.anchorItem.x,control.anchorItem.y,control.anchorPoint) :
-                                          __globalAnchorPoint(control.width,control.height,control.x,control.y,control.anchorPoint)
-
-        /* internal position of ContextMenu relative to anchorPoint */
-        property int __position: updatePosition(__menuAnchorPoint)
-
-        function __globalAnchorPoint() {
-            var tmp = menu.parent.mapFromItem(anchorItem, anchorPoint.x, anchorPoint.y)
-            return Qt.point(tmp.x,tmp.y)
-        }
-        state: control.__state === "hidden" ? "contentHidden" : "contentShown"
-        states: [
-            State {
-                name:"contentHidden"
-                PropertyChanges {
-                    target: contentItem
-                    opacity:0
-                }
-            },
-            State {
-                name:"contentShown"
-                PropertyChanges {
-                    target: contentItem
-                    opacity:0
-                }
-            }
-        ]
-
-        transitions: [
-            Transition {
-                to: "contentHidden"
-                SequentialAnimation {
-                    NumberAnimation {
-                        target: contentItem
-                        property: "opacity"
-                        duration: 250
-                    }
-                    PropertyAction {
-                        target: menu
-                        property: "visible"
-                        value:false
-                    }
-                }
-            },
-            Transition {
-                to: "contentShown"
-                SequentialAnimation {
-                    PropertyAction {
-                        target: menu
-                        property: "visible"
-                        value:true
-                    }
-                    NumberAnimation {
-                        target: contentItem
-                        property: "opacity"
-                        to: 1
-                        duration: 250
-                    }
-                }
-            }
-        ]
-
-        function updatePosition() {
-            var pos = Qt.BottomEdge
-            if (arrow.height/2 + bg.height - Theme.contextMenu.arrow.anchors.bottomMargin < (menu.height - __menuAnchorPoint.y) ) {
-                pos = Qt.BottomEdge
-            } else if ( arrow.height/2 + bg.height - Theme.contextMenu.arrow.anchors.topMargin < __menuAnchorPoint.y ) {
-                pos = Qt.TopEdge
-            } else if (arrow.width/2 + bg.width - Theme.contextMenu.arrow.anchors.rightMargin < (menu.width - __menuAnchorPoint.x))  {
-                pos = Qt.RightEdge
-            } else if (arrow.width/2 + bg.width - Theme.contextMenu.arrow.anchors.leftMargin < __menuAnchorPoint.x)  {
-                pos = Qt.LeftEdge
-            }
-            return pos
-        }
-        anchors.fill: parent
-        Binding {
-            target: control
-            property: "anchors.fill"
-            value: control.parent
-        }
-
-        Behavior on opacity {
-            NumberAnimation{duration:250}
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: menu.hide()
-        }
-        implicitWidth: bg.width
-        implicitHeight: bg.height
-
-        TizenBorderImage {
-            id:arrow
+    property Component style: Qt.createComponent(Settings.style + "/ContextMenuStyle.qml", menu)
 
-            source: "../Styles/Tizen/"+Theme.contextMenu.arrow.source.top
-            effectSource: "../Styles/Tizen/"+Theme.contextMenu.arrow.effectSource.top
-            backgroundColor: Theme.contextMenu.color
-
-            states: [
-                State {
-                    name:"bottom"
-                    when: __position === Qt.BottomEdge
-                    PropertyChanges {
-                        target: arrow
-                        rotation: 0
-                        x: Math.max(Math.min(__menuAnchorPoint.x - width/2, menu.width - arrow.width),0)
-                        y: __menuAnchorPoint.y - arrow.height/2
-                    }
-                    AnchorChanges {
-                        target: bg
-                        anchors.top: arrow.bottom
-                    }
-                    PropertyChanges {
-                        target: bg
-                        anchors.topMargin: -Theme.contextMenu.arrow.anchors.bottomMargin
-                        x: Math.min(Math.max(arrow.x+arrow.width/2-bg.width/2,0),menu.width - bg.width)
-                    }
-                },
-                State {
-                    name:"top"
-                    when: __position === Qt.TopEdge
-                    PropertyChanges {
-                        target: arrow
-                        rotation: 180
-                        x: Math.max(Math.min(__menuAnchorPoint.x - width/2, menu.width - arrow.width),0)
-                        y: __menuAnchorPoint.y - arrow.height/2
-                    }
-                    AnchorChanges {
-                        target: bg
-                        anchors.bottom: arrow.top
-                    }
-                    PropertyChanges {
-                        target: bg
-                        anchors.bottomMargin: -Theme.contextMenu.arrow.anchors.topMargin
-                        x: Math.min(Math.max(arrow.x+arrow.width/2-bg.width/2,0),menu.width - bg.width)
-                    }
-                },
-                State {
-                    name: "right"
-                    when: __position === Qt.RightEdge
-                    PropertyChanges {
-                        target: arrow
-                        rotation: -90
-                        x: __menuAnchorPoint.x + -arrow.width/2
-                        y: __menuAnchorPoint.y - arrow.height/2
-                    }
-                    AnchorChanges {
-                        target: bg
-                        anchors.left: arrow.right
-                    }
-                    PropertyChanges {
-                        target: bg
-                        anchors.leftMargin: -Theme.contextMenu.arrow.anchors.rightMargin
-                        y: Math.min(Math.max(arrow.y+arrow.height/2-bg.height/2,0),menu.height-bg.height)
-                    }
-
-                },
-                State {
-                    name:"left"
-                    when: __position === Qt.LeftEdge
-                    PropertyChanges {
-                        target: arrow
-                        rotation: 90
-                        x: __menuAnchorPoint.x - arrow.width/2
-                        y: __menuAnchorPoint.y - arrow.height/2
-                    }
-                    AnchorChanges {
-                        target: bg
-                        anchors.right: arrow.left
-                    }
-                    PropertyChanges {
-                        target: bg
-                        anchors.rightMargin: -Theme.contextMenu.arrow.anchors.leftMargin
-                        y: Math.min(Math.max(arrow.y+arrow.height/2-bg.height/2,0),menu.height-bg.height)
-                    }
-                }
-            ]
-        }
-        TizenBorderImage {
-            id:bg
-            width: Math.min(layout.contentWidth + layout.anchors.leftMargin + layout.anchors.rightMargin,Theme.contextMenu.maximumWidth)
-            height: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin
-            source: "../Styles/Tizen/"+Theme.contextMenu.source
-            effectSource: "../Styles/Tizen/"+Theme.contextMenu.effectSource
-            backgroundColor: Theme.contextMenu.color
-
-            MouseArea {
-                anchors.fill: bg
-            }
-        }
-
-        Column {
-            id:layout
-            anchors.fill: bg
-
-            anchors.leftMargin: Theme.contextMenu.listLeftMargin + Theme.contextMenu.screen.leftMargin
-            anchors.rightMargin: Theme.contextMenu.listRightMargin + Theme.contextMenu.screen.rightMargin
-            anchors.topMargin: Theme.contextMenu.listTopMargin + Theme.contextMenu.screen.topMargin
-            anchors.bottomMargin: Theme.contextMenu.listBottomMargin + Theme.contextMenu.screen.bottomMargin
-
-            property real contentWidth: Theme.contextMenu.minimumWidth
-            Repeater {
-                model: menuItems
-
-                Item {
-                    id: delegateRoot
-                    implicitWidth: Math.max(itemBg.implicitWidth,label.contentWidth)
-                    implicitHeight: Theme.contextMenu.item.height// Math.max(itemBg.implicitHeight+separator.height,label.contentHeight+separator.height)
-                    width: layout.contentWidth
-                    MouseArea {
-                        id: mouseArea
-                        anchors.fill: parent
-                        TizenBorderImage {
-                            id:itemBg
-                            anchors.fill: parent
-                            source: "../Styles/Tizen/"+Theme.contextMenu.item.source.pressed
-                            backgroundColor: mouseArea.pressed && enabled ? Theme.contextMenu.item.color.pressed: Theme.contextMenu.item.color.normal
-                        }
-                        Image {
-                            id:icon
-                            anchors.left:parent.left
-                            anchors.verticalCenter: parent.verticalCenter
-                            source: modelData.iconSource
-                            width: Theme.contextMenu.item.iconWidth
-                            height: Theme.contextMenu.item.iconHeight
-                        }
-
-                        Text {
-                            id:label
-                            anchors.left: icon.right
-                            anchors.leftMargin: Theme.contextMenu.item.spacing
-                            anchors.top: parent.top
-                            anchors.bottom: parent.bottom
-                            anchors.right: parent.right
-                            anchors.bottomMargin: 3
-                            text: modelData.text
-                            color: Theme.contextMenu.item.text.color.normal
-                            font.pixelSize: Theme.contextMenu.item.text.font.pixelSize
-                            verticalAlignment: Text.AlignVCenter
-                        }
-                        Rectangle {
-                            id:separator
-                            anchors.bottom: parent.bottom
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-                            height: 2
-                            color: Theme.contextMenu.listItemDividerColor2
-                            visible: index < menuItems.length -1
-                        }
-                        onClicked: menu.visible = false
-                    }
-                }
-
-                onItemAdded: {
-                    layout.contentWidth = Math.max(item.implicitWidth, layout.contentWidth)
-                }
-            }
-        }
+    Loader {
+        id: styleLoader
+        property Item __control: menu
+        sourceComponent: style
     }
+
+    content: styleLoader.item && styleLoader.item.lookAndFeel
 }
diff --git a/src/styles/ContextMenuStyle.qml b/src/styles/ContextMenuStyle.qml
new file mode 100644
index 0000000..76560a3
--- /dev/null
+++ b/src/styles/ContextMenuStyle.qml
@@ -0,0 +1,277 @@
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Tizen 1.0
+import "DefaultSettings.js" as Theme
+
+Style {
+    id: style
+    property ContextMenu control: __control
+
+    property Component lookAndFeel: Item {
+        id: contentItem
+
+        property point __menuAnchorPoint: control.anchorItem ?
+                                              __globalAnchorPoint(control.width,control.height,control.x,control.y,control.anchorItem.x,control.anchorItem.y,control.anchorPoint) :
+                                              __globalAnchorPoint(control.width,control.height,control.x,control.y,control.anchorPoint)
+
+        /* internal position of ContextMenu relative to anchorPoint */
+        property int __position: updatePosition(__menuAnchorPoint)
+
+        function __globalAnchorPoint() {
+            var tmp = menu.parent.mapFromItem(anchorItem, anchorPoint.x, anchorPoint.y)
+            return Qt.point(tmp.x,tmp.y)
+        }
+
+        state: control.__state === "hidden" ? "contentHidden" : "contentShown"
+
+        states: [
+            State {
+                name:"contentHidden"
+                PropertyChanges {
+                    target: contentItem
+                    opacity:0
+                }
+            },
+            State {
+                name:"contentShown"
+                PropertyChanges {
+                    target: contentItem
+                    opacity:0
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "contentHidden"
+                SequentialAnimation {
+                    NumberAnimation {
+                        target: contentItem
+                        property: "opacity"
+                        duration: 250
+                    }
+                    PropertyAction {
+                        target: menu
+                        property: "visible"
+                        value:false
+                    }
+                }
+            },
+            Transition {
+                to: "contentShown"
+                SequentialAnimation {
+                    PropertyAction {
+                        target: menu
+                        property: "visible"
+                        value:true
+                    }
+                    NumberAnimation {
+                        target: contentItem
+                        property: "opacity"
+                        to: 1
+                        duration: 250
+                    }
+                }
+            }
+        ]
+
+        function updatePosition() {
+            var pos = Qt.BottomEdge
+            if (arrow.height/2 + bg.height - Theme.contextMenu.arrow.anchors.bottomMargin < (menu.height - __menuAnchorPoint.y) ) {
+                pos = Qt.BottomEdge
+            } else if ( arrow.height/2 + bg.height - Theme.contextMenu.arrow.anchors.topMargin < __menuAnchorPoint.y ) {
+                pos = Qt.TopEdge
+            } else if (arrow.width/2 + bg.width - Theme.contextMenu.arrow.anchors.rightMargin < (menu.width - __menuAnchorPoint.x))  {
+                pos = Qt.RightEdge
+            } else if (arrow.width/2 + bg.width - Theme.contextMenu.arrow.anchors.leftMargin < __menuAnchorPoint.x)  {
+                pos = Qt.LeftEdge
+            }
+            return pos
+        }
+        anchors.fill: parent
+        Binding {
+            target: control
+            property: "anchors.fill"
+            value: control.parent
+        }
+
+        Behavior on opacity {
+            NumberAnimation{duration:250}
+        }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: menu.hide()
+        }
+        implicitWidth: bg.width
+        implicitHeight: bg.height
+
+        TizenBorderImage {
+            id:arrow
+
+            source: Theme.contextMenu.arrow.source.top
+            effectSource: Theme.contextMenu.arrow.effectSource.top
+            backgroundColor: Theme.contextMenu.color
+
+            states: [
+                State {
+                    name:"bottom"
+                    when: __position === Qt.BottomEdge
+                    PropertyChanges {
+                        target: arrow
+                        rotation: 0
+                        x: Math.max(Math.min(__menuAnchorPoint.x - width/2, menu.width - arrow.width),0)
+                        y: __menuAnchorPoint.y - arrow.height/2
+                    }
+                    AnchorChanges {
+                        target: bg
+                        anchors.top: arrow.bottom
+                    }
+                    PropertyChanges {
+                        target: bg
+                        anchors.topMargin: -Theme.contextMenu.arrow.anchors.bottomMargin
+                        x: Math.min(Math.max(arrow.x+arrow.width/2-bg.width/2,0),menu.width - bg.width)
+                    }
+                },
+                State {
+                    name:"top"
+                    when: __position === Qt.TopEdge
+                    PropertyChanges {
+                        target: arrow
+                        rotation: 180
+                        x: Math.max(Math.min(__menuAnchorPoint.x - width/2, menu.width - arrow.width),0)
+                        y: __menuAnchorPoint.y - arrow.height/2
+                    }
+                    AnchorChanges {
+                        target: bg
+                        anchors.bottom: arrow.top
+                    }
+                    PropertyChanges {
+                        target: bg
+                        anchors.bottomMargin: -Theme.contextMenu.arrow.anchors.topMargin
+                        x: Math.min(Math.max(arrow.x+arrow.width/2-bg.width/2,0),menu.width - bg.width)
+                    }
+                },
+                State {
+                    name: "right"
+                    when: __position === Qt.RightEdge
+                    PropertyChanges {
+                        target: arrow
+                        rotation: -90
+                        x: __menuAnchorPoint.x + -arrow.width/2
+                        y: __menuAnchorPoint.y - arrow.height/2
+                    }
+                    AnchorChanges {
+                        target: bg
+                        anchors.left: arrow.right
+                    }
+                    PropertyChanges {
+                        target: bg
+                        anchors.leftMargin: -Theme.contextMenu.arrow.anchors.rightMargin
+                        y: Math.min(Math.max(arrow.y+arrow.height/2-bg.height/2,0),menu.height-bg.height)
+                    }
+
+                },
+                State {
+                    name:"left"
+                    when: __position === Qt.LeftEdge
+                    PropertyChanges {
+                        target: arrow
+                        rotation: 90
+                        x: __menuAnchorPoint.x - arrow.width/2
+                        y: __menuAnchorPoint.y - arrow.height/2
+                    }
+                    AnchorChanges {
+                        target: bg
+                        anchors.right: arrow.left
+                    }
+                    PropertyChanges {
+                        target: bg
+                        anchors.rightMargin: -Theme.contextMenu.arrow.anchors.leftMargin
+                        y: Math.min(Math.max(arrow.y+arrow.height/2-bg.height/2,0),menu.height-bg.height)
+                    }
+                }
+            ]
+        }
+        TizenBorderImage {
+            id:bg
+            width: Math.min(layout.contentWidth + layout.anchors.leftMargin + layout.anchors.rightMargin,Theme.contextMenu.maximumWidth)
+            height: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin
+            source: Theme.contextMenu.source
+            effectSource: Theme.contextMenu.effectSource
+            backgroundColor: Theme.contextMenu.color
+
+            MouseArea {
+                anchors.fill: bg
+            }
+        }
+
+        Column {
+            id:layout
+            anchors.fill: bg
+
+            anchors.leftMargin: Theme.contextMenu.listLeftMargin + Theme.contextMenu.screen.leftMargin
+            anchors.rightMargin: Theme.contextMenu.listRightMargin + Theme.contextMenu.screen.rightMargin
+            anchors.topMargin: Theme.contextMenu.listTopMargin + Theme.contextMenu.screen.topMargin
+            anchors.bottomMargin: Theme.contextMenu.listBottomMargin + Theme.contextMenu.screen.bottomMargin
+
+            property real contentWidth: Theme.contextMenu.minimumWidth
+            Repeater {
+                model: menuItems
+
+                Item {
+                    id: delegateRoot
+                    implicitWidth: Math.max(itemBg.implicitWidth,label.contentWidth)
+                    implicitHeight: Theme.contextMenu.item.height// Math.max(itemBg.implicitHeight+separator.height,label.contentHeight+separator.height)
+                    width: layout.contentWidth
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        TizenBorderImage {
+                            id:itemBg
+                            anchors.fill: parent
+                            source: Theme.contextMenu.item.source.pressed
+                            backgroundColor: mouseArea.pressed && enabled ? Theme.contextMenu.item.color.pressed: Theme.contextMenu.item.color.normal
+                        }
+                        Image {
+                            id:icon
+                            anchors.left:parent.left
+                            anchors.verticalCenter: parent.verticalCenter
+                            source: modelData.iconSource
+                            width: Theme.contextMenu.item.iconWidth
+                            height: Theme.contextMenu.item.iconHeight
+                        }
+
+                        Text {
+                            id:label
+                            anchors.left: icon.right
+                            anchors.leftMargin: Theme.contextMenu.item.spacing
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            anchors.right: parent.right
+                            anchors.bottomMargin: 3
+                            text: modelData.text
+                            color: Theme.contextMenu.item.text.color.normal
+                            font.pixelSize: Theme.contextMenu.item.text.font.pixelSize
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                        Rectangle {
+                            id:separator
+                            anchors.bottom: parent.bottom
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            height: 2
+                            color: Theme.contextMenu.listItemDividerColor2
+                            visible: index < menuItems.length -1
+                        }
+                        onClicked: menu.visible = false
+                    }
+                }
+
+                onItemAdded: {
+                    layout.contentWidth = Math.max(item.implicitWidth, layout.contentWidth)
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/qmldir b/src/styles/qmldir
index 2e9d162..2eea0a8 100644
--- a/src/styles/qmldir
+++ b/src/styles/qmldir
@@ -10,5 +10,6 @@ Floater 1.0 Floater.qml
 SwitchStyle 1.0 SwitchStyle.qml
 DetailButtonStyle 1.0 DetailButtonStyle.qml
 ScrollDecoratorStyle 1.0 ScrollDecoratorStyle.qml
+ContextMenuStyle 1.0 ContextMenuStyle.qml
 Theme 1.0 DefaultSettings.js
 
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 2f4a1c9..8630d8b 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -12,7 +12,8 @@ QML_FILES = \
     SwitchStyle.qml\
     DetailButtonStyle.qml\
     DefaultSettings.js\
-    ScrollDecoratorStyle.qml
+    ScrollDecoratorStyle.qml\
+    ContextMenuStyle.qml
 
 # Images
 QML_FILES += \