summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/controls/ContextMenu.qml276
-rw-r--r--src/styles/ContextMenuStyle.qml277
-rw-r--r--src/styles/qmldir1
-rw-r--r--src/styles/styles.pro3
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 += \
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 22:15:03 +0000