ModelTweak: Made buttons look like they come out of blender

At request of Danny. :)

Change-Id: Id9816720307b3d5fa36c328227b74cc3cde5f0da
Reviewed-by: Sarah Jane Smith <sarah.j.smith@nokia.com>

2 files changed, 33 insertions, 4 deletions

diff --git a/util/qt3d/modeltweak/qml/BlenderToggle.qml b/util/qt3d/modeltweak/qml/BlenderToggle.qml
new file mode 100644
index 00000000..0af7d445
--- /dev/null
+++ b/util/qt3d/modeltweak/qml/BlenderToggle.qml
@@ -0,0 +1,29 @@
+import QtQuick 1.0
+
+Rectangle {
+    anchors.topMargin: 8
+    border.width: 1
+    radius: 8
+    height: 20
+    color: "#999999"
+
+    property alias buttonText: text.text
+    Text {
+        id: text
+        anchors.fill: parent
+        font.pixelSize: 12
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: parent.onClicked();
+        onPressed: parent.color = "#646464"
+        onReleased: parent.color = "#999999"
+        hoverEnabled: true
+        onEntered: parent.color = "#BEBEBE"
+        onExited: parent.color = "#999999"
+    }
+}
+
diff --git a/util/qt3d/modeltweak/qml/ConfigPane.qml b/util/qt3d/modeltweak/qml/ConfigPane.qml
index 70fa2355..70bf6f73 100644
--- a/util/qt3d/modeltweak/qml/ConfigPane.qml
+++ b/util/qt3d/modeltweak/qml/ConfigPane.qml
@@ -129,7 +129,7 @@ Row {
             height: childrenRect.height
             spacing: 8
 
-            GrayButton {
+            BlenderToggle {
                 width: parent.width / 2 - 4
                 buttonText: "Save!"
                 function onClicked() {
@@ -195,7 +195,7 @@ Row {
                 }
             }
 
-            GrayButton {
+            BlenderToggle {
                 width: parent.width / 2 - 4
                 buttonText: "Load!"
                 function onClicked() { console.log(quickLoad.openModelFile); }
@@ -208,13 +208,13 @@ Row {
             height: childrenRect.height
             spacing: 8
 
-            GrayButton {
+            BlenderToggle {
                 width: parent.width / 2 - 4
                 buttonText: "Help!"
                 function onClicked() { helpOverlay.visible = true }
             }
 
-            GrayButton {
+            BlenderToggle {
                 width: parent.width / 2 - 4
                 buttonText: "To let."
                 function onClicked() { console.log("Dunno what this does yet...") }