From 9597ef65410aedf998d157681d327f590029d47f Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Tue, 15 Jan 2013 17:10:57 +0100 Subject: Improve the look and feel of our demo launcher The existing demo launcher looks rather ugly. This does some visual tweaks to make it look better, including adding support for proper text wrapping. It was approved by our design lead Diana. Change-Id: I660764575a411f598c53c9c42e290a807e20c0cf Reviewed-by: Gabriel de Dietrich --- examples/quick/shared/Button.qml | 37 +++++++++++++-- examples/quick/shared/LauncherList.qml | 58 ++++++++++++++++++++--- examples/quick/shared/SimpleLauncherDelegate.qml | 42 ++++++++++++++-- examples/quick/shared/images/back.png | Bin 404 -> 1590 bytes examples/quick/shared/images/next.png | Bin 0 -> 1371 bytes 5 files changed, 123 insertions(+), 14 deletions(-) create mode 100644 examples/quick/shared/images/next.png (limited to 'examples/quick') 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 index 506ac42fcf..53402096b2 100644 Binary files a/examples/quick/shared/images/back.png and b/examples/quick/shared/images/back.png differ diff --git a/examples/quick/shared/images/next.png b/examples/quick/shared/images/next.png new file mode 100644 index 0000000000..cdef8db6e8 Binary files /dev/null and b/examples/quick/shared/images/next.png differ -- cgit v1.2.3