Experiments on toolbars

.gitignore

@@ -22,3 +22,4 @@ ui_*.h
 /paysages3d-linux/
 /paysages3d-linux.tar.bz2
 /config.vim
+/callgrind.out.*

src/interface/modeler/quickapp/images/images.qrc

@@ -1,10 +0,0 @@
-<RCC>
-    <qresource prefix="/toolbar/primary">
-        <file>tab_water.png</file>
-        <file>tab_atmosphere.png</file>
-        <file>tab_clouds.png</file>
-        <file>tab_render.png</file>
-        <file>tab_terrain.png</file>
-        <file>tab_textures.png</file>
-    </qresource>
-</RCC>

src/interface/modeler/quickapp/qml/Toolbar.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.0
+
+Rectangle {
+
+    default property alias children : inner_space.children
+    width: 70
+    height: parent.height
+    color: "#50000000"
+
+    Column {
+        id: inner_space
+        spacing: (parent.height - children.length * tool_terrain.height) / (children.length + 1)
+        anchors.centerIn: parent
+    }
+
+    Behavior on opacity {
+        PropertyAnimation {
+            duration: 200
+        }
+    }
+}

src/interface/modeler/quickapp/qml/ToolbarButton.qml

@@ -4,6 +4,8 @@ Item {
     property string picture
     property bool selected: false
     property bool hovered: false
+    property string helptext
+    property string hovertext
 
     width: image.width + 10
     height: image.height + 10
@@ -26,14 +28,42 @@ Item {
         id: image
         source: parent.picture
         anchors.centerIn: parent
+        width: 32
+        height: 32
     }
 
     MouseArea {
         anchors.fill: parent
         hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
 
-        onEntered: parent.hovered = true
-        onExited: parent.hovered = false
-        onClicked: parent.selected = true
+        onEntered: {
+            parent.hovered = true;
+            tooltip_widget.hovertext = hovertext;
+        }
+        onExited: {
+            parent.hovered = false;
+            tooltip_widget.hovertext = "";
+        }
+        onClicked: {
+            parent.selected = !parent.selected;
+            if (parent.selected)
+            {
+                var toolbar = parent.parent;
+                for (var i = 0; i < toolbar.children.length; ++i)
+                {
+                    var child = toolbar.children[i]
+                    if (child !== parent)
+                    {
+                        child.selected = false;
+                    }
+                }
+                tooltip_widget.helptext = helptext;
+            }
+            else
+            {
+                tooltip_widget.helptext = "";
+            }
+        }
     }
 }

src/interface/modeler/quickapp/qml/Tooltip.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.0
+
+Rectangle {
+    property string helptext
+    property string hovertext
+    width: content.width
+    height: content.height
+
+    color: "#99000000"
+
+    Text {
+        id: content
+        color: "white"
+        text: parent.helptext || parent.hovertext
+    }
+}

src/interface/modeler/quickapp/qml/app.qrc

@@ -8,5 +8,10 @@
         <file>images/tab_terrain.png</file>
         <file>images/tab_textures.png</file>
         <file>images/tab_water.png</file>
+        <file>images/tab_display.png</file>
+        <file>Toolbar.qml</file>
+        <file>images/display_topdown.png</file>
+        <file>images/help.png</file>
+        <file>Tooltip.qml</file>
     </qresource>
 </RCC>

src/interface/modeler/quickapp/qml/main.qml

@@ -2,76 +2,79 @@ import QtQuick 2.2
 import Paysages 1.0
 
 OpenGLView {
+    id: main_ui
+    state: "Init"
 
-    width: 640
-    height: 480
+    width: 800
+    height: 600
 
-    Item {
+    Tooltip {
+        id: tooltip_widget
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+    }
+
+    Toolbar {
         id: primary_toolbar
-        x: 0
-        y: 0
-        width: 70
-        height: parent.height
+        color: "#90000000"
 
-        Rectangle {
-            width: parent.height
-            height: parent.width
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            transformOrigin: Item.Center
-            rotation: -90
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "#605055FF" }
-                GradientStop { position: 1.0; color: "#005055FF" }
-            }
+        anchors.left: parent.left
+
+        ToolbarButton {
+            id: tool_display
+            picture: "images/tab_display.png"
+            hovertext: qsTr("Display options")
         }
-
-        Column {
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            spacing: (parent.height - 6 * tool_terrain.height) / 7
-
-            ToolbarButton {
-                id: tool_terrain
-                picture: "images/tab_terrain.png"
-            }
-            ToolbarButton {
-                id: tool_textures
-                picture: "images/tab_textures.png"
-            }
-            ToolbarButton {
-                id: tool_water
-                picture: "images/tab_water.png"
-            }
-            ToolbarButton {
-                id: tool_atmosphere
-                picture: "images/tab_atmosphere.png"
-            }
-            ToolbarButton {
-                id: tool_clouds
-                picture: "images/tab_clouds.png"
-            }
-            ToolbarButton {
-                id: tool_render
-                picture: "images/tab_render.png"
-            }
+        ToolbarButton {
+            id: tool_terrain
+            picture: "images/tab_terrain.png"
+        }
+        ToolbarButton {
+            id: tool_textures
+            picture: "images/tab_textures.png"
+        }
+        ToolbarButton {
+            id: tool_water
+            picture: "images/tab_water.png"
+        }
+        ToolbarButton {
+            id: tool_atmosphere
+            picture: "images/tab_atmosphere.png"
+        }
+        ToolbarButton {
+            id: tool_clouds
+            picture: "images/tab_clouds.png"
+        }
+        ToolbarButton {
+            id: tool_render
+            picture: "images/tab_render.png"
         }
     }
 
-    Rectangle {
-        id: toolbar_render
-        anchors.top: primary_toolbar.top
+    Toolbar {
+        id: display_toolbar
+        opacity: 0
         anchors.left: primary_toolbar.right
-        width: primary_toolbar.width
-        height: primary_toolbar.height
-        color: "#8800FF00"
 
-        SequentialAnimation on width {
-            loops: Animation.Infinite
-            PropertyAnimation { to: 0; duration: 1000 }
-            PropertyAnimation { to: primary_toolbar.width; duration: 1000 }
+        ToolbarButton {
+            id: tool_display_topdown
+            picture: "images/display_topdown.png"
+            hovertext: qsTr("Top-down view")
+            helptext: qsTr("Drag the mouse on the map to change the viewpoint.")
         }
     }
 
+    states: [
+        State {
+            name: "Display Mode"
+            when: tool_display.selected
+
+            PropertyChanges {
+                target: display_toolbar
+                opacity: 1
+            }
+        }
+    ]
+
 }

src/interface/modeler/quickapp/quickapp.pro

@@ -53,4 +53,6 @@ DEPENDPATH += $$PWD/../../../render/opengl
 OTHER_FILES += \
     qml/main.qml \
     qml/ToolbarButton.qml \
-    qml/OpenGLView.qml
+    qml/OpenGLView.qml \
+    qml/Toolbar.qml \
+    qml/Tooltip.qml