Implement 3D edit view top controls UI

Implement global/local, projection type, and default light controls UI.
Also small tweaks:
- Fixed ortho. camera near clipping
- Grid color darkened a bit
- Selection rect color changed to yellow

Task-number: QDS-1250
Change-Id: I03cf2023ee1b8a6a0768e4dbf7d6fee621a25ce2
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

17 files changed, 122 insertions, 35 deletions

diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/EditView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/EditView3D.qml
index 837a01f414..2200048fa5 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/EditView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/EditView3D.qml
@@ -38,8 +38,8 @@ Window {
     flags: Qt.WindowStaysOnTopHint | Qt.Window | Qt.WindowTitleHint | Qt.WindowCloseButtonHint
 
     property alias scene: editView.importScene
-    property alias showEditLight: editLightCheckbox.checked
-    property alias usePerspective: usePerspectiveCheckbox.checked
+    property alias showEditLight: btnEditViewLight.toggled
+    property alias usePerspective: btnPerspective.toggled
 
     property Node selectedNode: null
 
@@ -128,7 +128,7 @@ Window {
             targetNode: viewWindow.selectedNode
             position: viewWindow.selectedNode ? viewWindow.selectedNode.scenePosition
                                               : Qt.vector3d(0, 0, 0)
-            globalOrientation: globalControl.checked
+            globalOrientation: btnLocalGlobal.toggled
             visible: selectedNode && btnMove.selected
             view3D: overlayView
 
@@ -158,7 +158,7 @@ Window {
             targetNode: viewWindow.selectedNode
             position: viewWindow.selectedNode ? viewWindow.selectedNode.scenePosition
                                               : Qt.vector3d(0, 0, 0)
-            globalOrientation: globalControl.checked
+            globalOrientation: btnLocalGlobal.toggled
             visible: selectedNode && btnRotate.selected
             view3D: overlayView
 
@@ -241,7 +241,7 @@ Window {
                     y: 600
                     rotation.x: 45
                     clipFar: 100000
-                    clipNear: 1
+                    clipNear: -10000
                 }
             }
         }
@@ -399,39 +399,43 @@ Window {
         selectedNode : viewWindow.selectedNode ? selectionBox.model : null
     }
 
-    Item {
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        width: 200
-        height: 120
+    Rectangle { // top controls bar
+        color: "#aa000000"
+        width: 265
+        height: btnPerspective.height + 10
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.rightMargin: 100
 
-        Rectangle {
-            anchors.fill: parent
-            color: "white"
-            opacity: 0.3
+        ToggleButton {
+            id: btnPerspective
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            anchors.left: parent.left
+            anchors.leftMargin: 5
+            tooltip: qsTr("Toggle Perspective / Orthographic Projection")
+            states: [{iconId: "ortho", text: qsTr("Orthographic")}, {iconId: "persp",  text: qsTr("Perspective")}]
         }
 
-        Column {
+        ToggleButton {
+            id: btnLocalGlobal
+            anchors.top: parent.top
+            anchors.topMargin: 5
             anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            CheckBox {
-                id: editLightCheckbox
-                checked: false
-                text: qsTr("Use Edit View Light")
-            }
-
-            CheckBox {
-                id: usePerspectiveCheckbox
-                checked: true
-                text: qsTr("Use Perspective Projection")
-                onCheckedChanged: _generalHelper.requestOverlayUpdate()
-            }
+            anchors.leftMargin: 100
+            tooltip: qsTr("Toggle Global / Local Orientation")
+            states: [{iconId: "local",  text: qsTr("Local")}, {iconId: "global", text: qsTr("Global")}]
+        }
 
-            CheckBox {
-                id: globalControl
-                checked: true
-                text: qsTr("Use Global Orientation")
-            }
+        ToggleButton {
+            id: btnEditViewLight
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            anchors.left: parent.left
+            anchors.leftMargin: 165
+            toggleBackground: true
+            tooltip: qsTr("Toggle Edit Light")
+            states: [{iconId: "edit_light_off",  text: qsTr("Edit Light Off")}, {iconId: "edit_light_on", text: qsTr("Edit Light On")}]
         }
     }
 
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/HelperGrid.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/HelperGrid.qml
index 54af572a7b..2d70c0b95c 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/HelperGrid.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/HelperGrid.qml
@@ -45,7 +45,7 @@ Node {
         materials: [
             DefaultMaterial {
                 id: mainGridMaterial
-                emissiveColor: "#e6e6e6"
+                emissiveColor: "#cccccc"
                 lighting: DefaultMaterial.NoLighting
                 cullingMode: Material.DisableCulling
             }
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/SelectionBox.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/SelectionBox.qml
index 524f568889..995b4badd8 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/SelectionBox.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/SelectionBox.qml
@@ -57,7 +57,7 @@ Node {
 
         materials: [
             DefaultMaterial {
-                emissiveColor: "#e5009e"
+                emissiveColor: "#fff600"
                 lighting: DefaultMaterial.NoLighting
                 cullingMode: Material.DisableCulling
             }
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/ToggleButton.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/ToggleButton.qml
new file mode 100644
index 0000000000..a0ebeabbd4
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/ToggleButton.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import QtQuick 2.0
+import QtQuick.Controls 2.0
+
+Rectangle {
+    property bool toggled: false
+    property string tooltip
+    property bool toggleBackground: false // show a black background for the toggled state
+    property var states: [] // array of 2 state-objects, idx 0: untoggled, idx 1: toggled
+
+    id: root
+    color: toggleBackground && toggled ? "#aa000000" : mouseArea.containsMouse ? "#44000000" : "#00000000"
+    width: img.width + txt.width + 5
+    height: img.height
+
+    Image {
+        id: img
+        anchors.verticalCenter: parent.verticalCenter
+        source: "qrc:///qtquickplugin/mockfiles/images/" + root.states[toggled ? 1 : 0].iconId + ".png"
+    }
+
+    Text {
+        id: txt
+        color: "#b5b5b5"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: img.right
+        text: root.states[toggled ? 1 : 0].text
+    }
+
+    ToolTip {
+        text: tooltip
+        visible: mouseArea.containsMouse
+        delay: 1000
+    }
+
+    MouseArea {
+        id: mouseArea
+        cursorShape: "PointingHandCursor"
+        hoverEnabled: true
+        anchors.fill: parent
+        onClicked: root.toggled = !root.toggled
+    }
+}
+
+
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_off.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_off.png
new file mode 100644
index 0000000000..73e6e92374
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_off.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_off@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_off@2x.png
new file mode 100644
index 0000000000..5166264e16
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_off@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_on.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_on.png
new file mode 100644
index 0000000000..7660c28546
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_on.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_on@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_on@2x.png
new file mode 100644
index 0000000000..836bd2a0d5
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/edit_light_on@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/global.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/global.png
new file mode 100644
index 0000000000..1bd09c680a
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/global.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/global@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/global@2x.png
new file mode 100644
index 0000000000..a2a857fb10
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/global@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/local.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/local.png
new file mode 100644
index 0000000000..0a608f6816
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/local.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/local@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/local@2x.png
new file mode 100644
index 0000000000..a5c931e750
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/local@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/ortho.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/ortho.png
new file mode 100644
index 0000000000..35b36203fa
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/ortho.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/ortho@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/ortho@2x.png
new file mode 100644
index 0000000000..443c73e444
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/ortho@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/persp.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/persp.png
new file mode 100644
index 0000000000..9a48e76399
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/persp.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/persp@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/persp@2x.png
new file mode 100644
index 0000000000..88a4eab9c6
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/persp@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc b/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
index fcb510ccf0..c4a49064b6 100644
--- a/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
+++ b/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
@@ -24,6 +24,7 @@
         <file>mockfiles/ScaleRod.qml</file>
         <file>mockfiles/ScaleGizmo.qml</file>
         <file>mockfiles/ToolBarButton.qml</file>
+        <file>mockfiles/ToggleButton.qml</file>
         <file>mockfiles/RotateGizmo.qml</file>
         <file>mockfiles/RotateRing.qml</file>
         <file>mockfiles/SelectionBox.qml</file>
@@ -68,5 +69,17 @@
         <file>mockfiles/images/fit_active@2x.png</file>
         <file>mockfiles/images/fit_selected.png</file>
         <file>mockfiles/images/fit_selected@2x.png</file>
+        <file>mockfiles/images/local.png</file>
+        <file>mockfiles/images/local@2x.png</file>
+        <file>mockfiles/images/global.png</file>
+        <file>mockfiles/images/global@2x.png</file>
+        <file>mockfiles/images/ortho.png</file>
+        <file>mockfiles/images/ortho@2x.png</file>
+        <file>mockfiles/images/persp.png</file>
+        <file>mockfiles/images/persp@2x.png</file>
+        <file>mockfiles/images/edit_light_off.png</file>
+        <file>mockfiles/images/edit_light_off@2x.png</file>
+        <file>mockfiles/images/edit_light_on.png</file>
+        <file>mockfiles/images/edit_light_on@2x.png</file>
     </qresource>
 </RCC>