Merge pull request #8108 from jherico/vive-toolbars

Additional toolbar work

interface/resources/qml/desktop/Desktop.qml

@@ -65,7 +65,7 @@ FocusScope {
 
             var oldChildren = expectedChildren;
             var newChildren = d.getRepositionChildren();
-            if (oldRecommendedRect != Qt.rect(0,0,0,0) 
+            if (oldRecommendedRect != Qt.rect(0,0,0,0) && oldRecommendedRect != Qt.rect(0,0,1,1)
                   && (oldRecommendedRect != newRecommendedRect
                       || oldChildren != newChildren)
                 ) {

interface/resources/qml/hifi/Desktop.qml

@@ -3,12 +3,12 @@ import QtQuick.Controls 1.4
 import QtWebEngine 1.1;
 import Qt.labs.settings 1.0
 
-import "../desktop"
+import "../desktop" as OriginalDesktop
 import ".."
 import "."
 import "./toolbars"
 
-Desktop {
+OriginalDesktop.Desktop {
     id: desktop
 
     MouseArea {
@@ -54,12 +54,13 @@ Desktop {
         WebEngine.settings.localContentCanAccessRemoteUrls = true;
 
         var sysToolbar = desktop.getToolbar("com.highfidelity.interface.toolbar.system");
-        //toolbars[sysToolbar.objectName] = sysToolbar
         var toggleHudButton = sysToolbar.addButton({
+            objectName: "hudToggle",
             imageURL: "../../../icons/hud-01.svg",
             visible: true,
-
+            pinned: true,
         });
+
         toggleHudButton.yOffset = Qt.binding(function(){
             return desktop.pinned ? 50 : 0
         });

interface/resources/qml/hifi/toolbars/Toolbar.qml

@@ -7,14 +7,16 @@ import "."
 
 Window {
     id: window
-    frame: ToolFrame { }
+    frame: ToolFrame {
+        horizontalSpacers: horizontal
+        verticalSpacers: !horizontal
+    }
     hideBackground: true
     resizable: false
     destroyOnCloseButton: false
     destroyOnHidden: false
     closable: false
     shown: true
-    pinned: true
     width: content.width
     height: content.height
     visible: true
@@ -32,54 +34,77 @@ Window {
     }
 
     onHorizontalChanged: {
-        var oldParent = horizontal ? column : row;
         var newParent = horizontal ? row : column;
-        var move = [];
+        for (var i in buttons) {
-
+            var child = buttons[i];
-        var i;
+            child.parent = newParent;
-        for (i in oldParent.children) {
-            var child = oldParent.children[i];
-            if (child.spacer) {
-                continue;
-            }
-            move.push(oldParent.children[i]);
-        }
-        for (i in move) {
-            move[i].parent = newParent;
             if (horizontal) {
-                move[i].y = 0
+                child.y = 0
             } else {
-                move[i].x = 0
+                child.x = 0
             }
         }
-        fixSpacers();
     }
 
     Item {
         id: content
         implicitHeight: horizontal ? row.height : column.height
         implicitWidth: horizontal ? row.width : column.width
+
         Row {
             id: row
             spacing: 6
-            visible: window.horizontal
-            Rectangle{ readonly property bool spacer: true; id: rowSpacer1; width: 1; height: row.height }
-            Rectangle{ readonly property bool spacer: true; id: rowSpacer2; width: 1; height: row.height }
-            Rectangle{ readonly property bool spacer: true; id: rowSpacer3; width: 1; height: row.height }
-            Rectangle{ readonly property bool spacer: true; id: rowSpacer4; width: 1; height: row.height }
         }
 
         Column {
             id: column
             spacing: 6
-            visible: !window.horizontal
-            Rectangle{ readonly property bool spacer: true; id: colSpacer1; width: column.width; height: 1 }
-            Rectangle{ readonly property bool spacer: true; id: colSpacer2; width: column.width; height: 1 }
-            Rectangle{ readonly property bool spacer: true; id: colSpacer3; width: column.width; height: 1 }
-            Rectangle{ readonly property bool spacer: true; id: colSpacer4; width: column.width; height: 1 }
         }
 
         Component { id: toolbarButtonBuilder; ToolbarButton { } }
+
+        Connections {
+            target: desktop
+            onPinnedChanged: {
+                if (!window.pinned) {
+                    return;
+                }
+                var newPinned = desktop.pinned;
+                for (var i in buttons) {
+                    var child = buttons[i];
+                    if (desktop.pinned) {
+                        if (!child.pinned) {
+                            child.visible = false;
+                        }
+                    } else {
+                        child.visible = true;
+                    }
+                }
+            }
+        }
+    }
+
+
+    function findButtonIndex(name) {
+        if (!name) {
+            return -1;
+        }
+
+        for (var i in buttons) {
+            var child = buttons[i];
+            if (child.objectName === name) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    function findButton(name) {
+        var index = findButtonIndex(name);
+        if (index < 0) {
+            return;
+        }
+        return buttons[index];
     }
 
     function addButton(properties) {
@@ -88,30 +113,39 @@ Window {
         // If a name is specified, then check if there's an existing button with that name
         // and return it if so.  This will allow multiple clients to listen to a single button,
         // and allow scripts to be idempotent so they don't duplicate buttons if they're reloaded
-        if (properties.objectName) {
+        var result = findButton(properties.objectName);
-            for (var i in buttons) {
+        if (result) {
-                var child = buttons[i];
+            return result;
-                if (child.objectName === properties.objectName) {
-                    return child;
         }
-            }
-        }
-
         properties.toolbar = this;
-        var result = toolbarButtonBuilder.createObject(container, properties);
+        properties.opacity = 0;
+        result = toolbarButtonBuilder.createObject(container, properties);
         buttons.push(result);
-        fixSpacers();
+        result.opacity = 1;
+        updatePinned();
         return result;
     }
 
-    function fixSpacers() {
+    function removeButton(name) {
-        colSpacer3.parent = null
+        var index = findButtonIndex(name);
-        colSpacer4.parent = null
+        if (index < -1) {
-        rowSpacer3.parent = null
+            console.warn("Tried to remove non-existent button " + name);
-        rowSpacer4.parent = null
+            return;
-        colSpacer3.parent = column
+        }
-        colSpacer4.parent = column
+        buttons[index].destroy();
-        rowSpacer3.parent = row
+        buttons.splice(index, 1);
-        rowSpacer4.parent = row
+        updatePinned();
+    }
+
+    function updatePinned() {
+        var newPinned = false;
+        for (var i in buttons) {
+            var child = buttons[i];
+            if (child.pinned) {
+                newPinned = true;
+                break;
+            }
+        }
+        pinned = newPinned;
     }
 }

interface/resources/qml/hifi/toolbars/ToolbarButton.qml

@@ -7,11 +7,40 @@ Item {
     property alias alpha: button.opacity
     property var subImage;
     property int yOffset: 0
+    property int buttonState: 0
     property var toolbar;
     property real size: 50 // toolbar ? toolbar.buttonSize : 50
     width: size; height: size
+    property bool pinned: false
     clip: true
 
+    Behavior on opacity {
+        NumberAnimation {
+            duration: 150
+            easing.type: Easing.InOutCubic
+        }
+    }
+
+    property alias fadeTargetProperty: button.opacity
+
+    onFadeTargetPropertyChanged: {
+        visible = (fadeTargetProperty !== 0.0);
+    }
+
+    onVisibleChanged: {
+        if ((!visible && fadeTargetProperty != 0.0) || (visible && fadeTargetProperty == 0.0)) {
+            var target = visible;
+            visible = !visible;
+            fadeTargetProperty = target ? 1.0 : 0.0;
+            return;
+        }
+    }
+
+
+    onButtonStateChanged: {
+        yOffset = size * buttonState
+    }
+
     Component.onCompleted: {
         if (subImage) {
             if (subImage.y) {
@@ -30,10 +59,7 @@ Item {
 
     MouseArea {
         anchors.fill: parent
-        onClicked: {
+        onClicked: button.clicked();
-            console.log("Clicked on button " + image.source  + " named " + button.objectName)
-            button.clicked();
-        }
     }
 }
 

interface/resources/qml/windows/Frame.qml

@@ -59,7 +59,7 @@ Item {
         height: 1.66 * window.height
         x: (window.width - width) / 2
         y: window.height / 2 - 0.375 * height
-        visible: gradientsSupported && window && window.focus && pane.visible
+        visible: gradientsSupported && window && window.focus && window.content.visible
         gradient: Gradient {
             // GradientStop position 0.5 is at full circumference of circle that fits inside the square.
             GradientStop { position: 0.0; color: "#ff000000" }    // black, 100% opacity

interface/resources/qml/windows/ToolFrame.qml

@@ -16,20 +16,67 @@ import "../styles-uit"
 
 Frame {
     HifiConstants { id: hifi }
+    property bool horizontalSpacers: false
+    property bool verticalSpacers: false
 
     Rectangle {
         // Dialog frame
         id: frameContent
         readonly property int frameMargin: 6
-        readonly property int frameMarginLeft: frameMargin
+        readonly property int frameMarginLeft: frameMargin + (horizontalSpacers ? 12 : 0)
-        readonly property int frameMarginRight: frameMargin
+        readonly property int frameMarginRight: frameMargin + (horizontalSpacers ? 12 : 0)
-        readonly property int frameMarginTop: frameMargin
+        readonly property int frameMarginTop: frameMargin + (verticalSpacers ? 12 : 0)
-        readonly property int frameMarginBottom: frameMargin
+        readonly property int frameMarginBottom: frameMargin + (verticalSpacers ? 12 : 0)
+
+        Rectangle {
+            visible: horizontalSpacers
+            anchors.left: parent.left
+            anchors.leftMargin: 6
+            anchors.verticalCenter: parent.verticalCenter
+            width: 8
+            height: window.height
+            color: "gray";
+            radius: 4
+        }
+
+        Rectangle {
+            visible: horizontalSpacers
+            anchors.right: parent.right
+            anchors.rightMargin: 6
+            anchors.verticalCenter: parent.verticalCenter
+            width: 8
+            height: window.height
+            color: "gray";
+            radius: 4
+        }
+
+        Rectangle {
+            visible: verticalSpacers
+            anchors.top: parent.top
+            anchors.topMargin: 6
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: 8
+            width: window.width
+            color: "gray";
+            radius: 4
+        }
+
+        Rectangle {
+            visible: verticalSpacers
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 6
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: 8
+            width: window.width
+            color: "gray";
+            radius: 4
+        }
+
         anchors {
-            topMargin: -frameMargin
+            leftMargin: -frameMarginLeft
-            leftMargin: -frameMargin
+            rightMargin: -frameMarginRight
-            rightMargin: -frameMargin
+            topMargin: -frameMarginTop
-            bottomMargin: -frameMargin
+            bottomMargin: -frameMarginBottom
         }
         anchors.fill: parent
         color: hifi.colors.baseGrayHighlight40

interface/src/scripting/ToolbarScriptingInterface.cpp

@@ -15,15 +15,6 @@ class QmlWrapper : public QObject {
 public:
     QmlWrapper(QObject* qmlObject, QObject* parent = nullptr)
         : QObject(parent), _qmlObject(qmlObject) { 
-        
-        const QMetaObject *metaobject = qmlObject->metaObject();
-        int count = metaobject->propertyCount();
-        qDebug() << "Scanning properties for " << qmlObject;
-        for (int i = 0; i < count; ++i) {
-            QMetaProperty metaproperty = metaobject->property(i);
-            const char *name = metaproperty.name();
-            qDebug() << "Property " << name;
-        }
     }
 
     Q_INVOKABLE void writeProperty(QString propertyName, QVariant propertyValue) {

scripts/developer/tests/toolbarTest.js

@@ -13,7 +13,7 @@ var toolBar = (function() {
         newZoneButton,
         newParticleButton
 
-	var toolIconUrl = Script.resolvePath("assets/images/tools/");
+    var toolIconUrl = Script.resolvePath("../../system/assets/images/tools/");
 
     function initialize() {
         print("Toolbars: " + Toolbars);

tests/ui/qml/main.qml

@@ -57,7 +57,7 @@ ApplicationWindow {
                 "particle-01.svg",
             ]
             property int iconIndex: 0
-            readonly property string toolIconUrl: "file:///C:/Users/bdavi/git/hifi/scripts/system/assets/images/tools/"
+            readonly property string toolIconUrl: "../../../../../scripts/system/assets/images/tools/"
             text: "Create Button"
             onClicked: {
                 var name = icons[iconIndex];