diff options
-rw-r--r-- | examples/quick/shared/Button.qml | 37 | ||||
-rw-r--r-- | examples/quick/shared/LauncherList.qml | 58 | ||||
-rw-r--r-- | examples/quick/shared/SimpleLauncherDelegate.qml | 42 | ||||
-rw-r--r-- | examples/quick/shared/images/back.png | bin | 404 -> 1590 bytes | |||
-rw-r--r-- | examples/quick/shared/images/next.png | bin | 0 -> 1371 bytes |
5 files changed, 123 insertions, 14 deletions
diff --git a/examples/quick/shared/Button.qml b/examples/quick/shared/Button.qml index ca20d6d3b5..9bbc01ac01 100644 --- a/examples/quick/shared/Button.qml +++ b/examples/quick/shared/Button.qml @@ -46,19 +46,46 @@ Item { property string text: "Button" property string subText: "" signal clicked + property alias containsMouse: mouseArea.containsMouse + property alias pressed: mouseArea.pressed + implicitHeight: col.height + height: implicitHeight + width: buttonLabel.width + 20 - width: buttonLabel.width + 20; height: col.height + 12 - - MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() } + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: container.clicked() + hoverEnabled: true + } Column { spacing: 2 id: col + anchors.verticalCenter: parent.verticalCenter + width: parent.width Text { - id: buttonLabel; text: container.text; color: "black"; font.pixelSize: 24 + id: buttonLabel + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + text: container.text + color: "black" + font.pixelSize: 22 + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + styleColor: "white" + style: Text.Raised + } Text { - id: buttonLabel2; text: container.subText; color: "black"; font.pixelSize: 12 + id: buttonLabel2 + anchors.left: parent.left + anchors.leftMargin: 10 + text: container.subText + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + color: "#666" + font.pixelSize: 12 } } } diff --git a/examples/quick/shared/LauncherList.qml b/examples/quick/shared/LauncherList.qml index 8946e9ad93..20f9c2bee1 100644 --- a/examples/quick/shared/LauncherList.qml +++ b/examples/quick/shared/LauncherList.qml @@ -39,9 +39,11 @@ ****************************************************************************/ import QtQuick 2.0 -Item { +Rectangle { //model is a list of {"name":"somename", "url":"file:///some/url/mainfile.qml"} //function used to add to model A) to enforce scheme B) to allow Qt.resolveUrl in url assignments + + color: "#eee" function addExample(name, desc, url) { myModel.append({"name":name, "description":desc, "url":url}) @@ -63,7 +65,7 @@ Item { visible: false clip: true property url exampleUrl - onExampleUrlChanged: visible = (exampleUrl == '' ? false : true);//Setting exampleUrl automatically shows example + onExampleUrlChanged: visible = (exampleUrl == '' ? false : true); //Setting exampleUrl automatically shows example anchors.fill: parent anchors.bottomMargin: 40 Rectangle { @@ -88,19 +90,63 @@ Item { anchors.bottom: parent.bottom width: parent.width height: 40 + + Rectangle { + height: 1 + color: "#ccc" + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + } + + Rectangle { + height: 1 + color: "#fff" + anchors.top: parent.top + anchors.topMargin: 1 + anchors.left: parent.left + anchors.right: parent.right + } + + gradient: Gradient { + GradientStop { position: 0 ; color: "#eee" } + GradientStop { position: 1 ; color: "#ccc" } + } + MouseArea{ anchors.fill: parent enabled: ei.visible //Eats mouse events } + Image { + id: back source: "images/back.png" anchors.verticalCenter: parent.verticalCenter - x: 4 + anchors.verticalCenterOffset: 2 + anchors.left: parent.left + anchors.leftMargin: 16 + MouseArea { - anchors.fill: parent - anchors.margins: -10 - onClicked: ei.exampleUrl = ""; + id: mouse + hoverEnabled: true + anchors.centerIn: parent + width: 38 + height: 31 + anchors.verticalCenterOffset: -1 + onClicked: ei.exampleUrl = "" + Rectangle { + anchors.fill: parent + opacity: mouse.pressed ? 1 : 0 + Behavior on opacity { NumberAnimation{ duration: 100 }} + gradient: Gradient { + GradientStop { position: 0 ; color: "#22000000" } + GradientStop { position: 0.2 ; color: "#11000000" } + } + border.color: "darkgray" + antialiasing: true + radius: 4 + } } } } diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml index ca05284f5a..e89126690f 100644 --- a/examples/quick/shared/SimpleLauncherDelegate.qml +++ b/examples/quick/shared/SimpleLauncherDelegate.qml @@ -39,15 +39,51 @@ ****************************************************************************/ import QtQuick 2.0 -Item { +Rectangle { id: container property Item exampleItem width: ListView.view.width - height: 64 + height: button.implicitHeight + 22 + + gradient: Gradient { + GradientStop { + position: 0 + Behavior on color {ColorAnimation { duration: 100 }} + color: button.pressed ? "#e0e0e0" : "#fff" + } + GradientStop { + position: 1 + Behavior on color {ColorAnimation { duration: 100 }} + color: button.pressed ? "#e0e0e0" : button.containsMouse ? "#f5f5f5" : "#eee" + } + } + + Image { + id: image + opacity: 0.7 + Behavior on opacity {NumberAnimation {duration: 100}} + source: "images/next.png" + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 16 + } + Button { - anchors.fill: parent + id: button + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right:image.left text: name subText: description onClicked: exampleItem.exampleUrl = url; } + + Rectangle { + height: 1 + color: "#ccc" + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + } } diff --git a/examples/quick/shared/images/back.png b/examples/quick/shared/images/back.png Binary files differindex 506ac42fcf..53402096b2 100644 --- a/examples/quick/shared/images/back.png +++ b/examples/quick/shared/images/back.png diff --git a/examples/quick/shared/images/next.png b/examples/quick/shared/images/next.png Binary files differnew file mode 100644 index 0000000000..cdef8db6e8 --- /dev/null +++ b/examples/quick/shared/images/next.png |