WIP on quick ui prototype

src/interface/quick/OpenGLView.cpp

@@ -16,6 +16,7 @@ OpenGLView::OpenGLView(QQuickItem *parent) :
     connect(this, SIGNAL(windowChanged(QQuickWindow*)), this, SLOT(handleWindowChanged(QQuickWindow*)));
 
     scenery.autoPreset();
+
     renderer.setScenery(&scenery);
 }
 

src/interface/quick/ToolbarButton.qml

@@ -0,0 +1,39 @@
+import QtQuick 2.0
+
+Item {
+    property string code
+    property bool selected: false
+    property bool hovered: false
+
+    width: image.width + 10
+    height: image.height + 10
+
+    Rectangle {
+        id: glow
+        anchors.fill: parent
+        color: "white"
+        radius: 8
+
+        opacity: parent.selected ? 1.0 : (parent.hovered ? 0.5 : 0.0)
+        Behavior on opacity {
+            PropertyAnimation {
+                duration: 200
+            }
+        }
+    }
+
+    Image {
+        id: image
+        source: "qrc:///toolbar/primary/tab_" + parent.code + ".png"
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onEntered: parent.hovered = true
+        onExited: parent.hovered = false
+        onClicked: parent.selected = true
+    }
+}

src/interface/quick/main.qml

@@ -32,35 +32,29 @@ OpenGLView {
             anchors.verticalCenter: parent.verticalCenter
             spacing: (parent.height - 6 * tool_terrain.height) / 7
 
-            Image {
+            ToolbarButton {
                 id: tool_terrain
-                opacity: 0.5
+                code: "terrain"
-                source: "qrc:///toolbar/primary/tab_terrain.png"
             }
-            Image {
+            ToolbarButton {
                 id: tool_textures
-                opacity: 0.5
+                code: "textures"
-                source: "qrc:///toolbar/primary/tab_textures.png"
             }
-            Image {
+            ToolbarButton {
                 id: tool_water
-                opacity: 0.5
+                code: "water"
-                source: "qrc:///toolbar/primary/tab_water.png"
             }
-            Image {
+            ToolbarButton {
                 id: tool_atmosphere
-                opacity: 0.5
+                code: "atmosphere"
-                source: "qrc:///toolbar/primary/tab_atmosphere.png"
             }
-            Image {
+            ToolbarButton {
                 id: tool_clouds
-                opacity: 0.5
+                code: "clouds"
-                source: "qrc:///toolbar/primary/tab_clouds.png"
             }
-            Image {
+            ToolbarButton {
                 id: tool_render
-                opacity: 0.5
+                code: "render"
-                source: "qrc:///toolbar/primary/tab_render.png"
             }
         }
     }
@@ -71,7 +65,7 @@ OpenGLView {
         anchors.left: primary_toolbar.right
         width: primary_toolbar.width
         height: primary_toolbar.height
-        color: "green"
+        color: "#8800FF00"
 
         SequentialAnimation on width {
             loops: Animation.Infinite

src/interface/quick/qml.qrc

@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
+        <file>ToolbarButton.qml</file>
     </qresource>
 </RCC>