Merge pull request #11471 from Atlante45/feat/auto-bake

Asset Browser tweaks

interface/resources/qml/hifi/AssetServer.qml

@@ -14,10 +14,10 @@ import QtQuick.Controls.Styles 1.4
 import QtQuick.Dialogs 1.2 as OriginalDialogs
 import Qt.labs.settings 1.0
 
-import "styles-uit"
+import "../styles-uit"
-import "controls-uit" as HifiControls
+import "../controls-uit" as HifiControls
-import "windows"
+import "../windows"
-import "dialogs"
+import "../dialogs"
 
 ScrollingWindow {
     id: root
@@ -58,6 +58,23 @@ ScrollingWindow {
         assetMappingsModel.autoRefreshEnabled = false;
     }
     
+    function letterbox(headerGlyph, headerText, message) {
+        letterboxMessage.headerGlyph = headerGlyph;
+        letterboxMessage.headerText = headerText;
+        letterboxMessage.text = message;
+        letterboxMessage.visible = true;
+        letterboxMessage.popupRadius = 0;
+    }
+
+    function errorMessageBox(message) {
+        return desktop.messageBox({
+            icon: hifi.icons.warning,
+            defaultButton: OriginalDialogs.StandardButton.Ok,
+            title: "Error",
+            text: message
+        });
+    }
+
     function doDeleteFile(path) {
         console.log("Deleting " + path);
 
@@ -154,10 +171,7 @@ ScrollingWindow {
     }
 
     function handleGetMappingsError(errorString) {
-        errorMessageBox(
+        errorMessageBox("There was a problem retreiving the list of assets from your Asset Server.\n" + errorString);
-            "There was a problem retreiving the list of assets from your Asset Server.\n"
-            + errorString
-        );
     }
 
     function addToWorld() {
@@ -449,19 +463,16 @@ ScrollingWindow {
         }
     }
     
-    function errorMessageBox(message) {
-        return desktop.messageBox({
-            icon: hifi.icons.warning,
-            defaultButton: OriginalDialogs.StandardButton.Ok,
-            title: "Error",
-            text: message
-        });
-    }
-
     Item {
         width: pane.contentWidth
         height: pane.height
         
+        // The letterbox used for popup messages
+        LetterboxMessage {
+            id: letterboxMessage;
+            z: 999; // Force the popup on top of everything else
+        }
+
         HifiControls.ContentSection {
             id: assetDirectory
             name: "Asset Directory"
@@ -476,7 +487,7 @@ ScrollingWindow {
 
                 HifiControls.Button {
                     text: "Add To World"
-                    color: hifi.buttons.black
+                    color: hifi.buttons.blue
                     colorScheme: root.colorScheme
                     width: 120
 
@@ -513,6 +524,7 @@ ScrollingWindow {
             id: treeView
             anchors.top: assetDirectory.bottom
             anchors.bottom: infoRow.top
+            anchors.bottomMargin: 2 * hifi.dimensions.contentSpacing.y
             anchors.margins: hifi.dimensions.contentMargin.x + 2  // Extra for border
             anchors.left: parent.left
             anchors.right: parent.right
@@ -555,7 +567,7 @@ ScrollingWindow {
                         case "Not Baked":
                             return hifi.glyphs.circleSlash;
                         case "Baked":
-                            return hifi.glyphs.check_2_01;
+                            return hifi.glyphs.checkmark;
                         case "Error":
                             return hifi.glyphs.alert;
                         default:
@@ -584,8 +596,24 @@ ScrollingWindow {
                                 ? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
                                 : (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
                        
-                        elide: Text.ElideRight
                         horizontalAlignment: styleData.column === 1 ? TextInput.AlignHCenter : TextInput.AlignLeft
+                        
+                        elide: Text.ElideMiddle
+
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            
+                            acceptedButtons: Qt.NoButton
+                            hoverEnabled: true
+
+                            onEntered: {
+                                if (parent.truncated) {
+                                    treeLabelToolTip.show(parent);
+                                }
+                            }
+                            onExited: treeLabelToolTip.hide();
+                        }
                     }
                 }
                 Component {
@@ -668,6 +696,42 @@ ScrollingWindow {
                 }
             }
 
+            Rectangle {
+                id: treeLabelToolTip
+                visible: false
+                z: 100 // Render on top
+
+                width: toolTipText.width + 2 * hifi.dimensions.textPadding
+                height: hifi.dimensions.tableRowHeight
+                color: colorScheme == hifi.colorSchemes.light ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
+                border.color: colorScheme == hifi.colorSchemes.light ? hifi.colors.black : hifi.colors.lightGrayText
+
+                FiraSansSemiBold {
+                    id: toolTipText
+                    anchors.centerIn: parent
+
+                    size: hifi.fontSizes.tableText
+                    color: colorScheme == hifi.colorSchemes.light ? hifi.colors.black : hifi.colors.lightGrayText
+                }
+                
+                Timer {
+                    id: showTimer
+                    interval: 1000
+                    onTriggered: { treeLabelToolTip.visible = true; }
+                }
+                function show(item) {
+                    var coord = item.mapToItem(parent, item.x, item.y);
+
+                    toolTipText.text = item.text;
+                    treeLabelToolTip.x = coord.x - hifi.dimensions.textPadding;
+                    treeLabelToolTip.y = coord.y;
+                    showTimer.start();
+                }
+                function hide() {
+                    showTimer.stop();
+                    treeLabelToolTip.visible = false;
+                }
+            }
             
             MouseArea {
                 propagateComposedEvents: true
@@ -717,26 +781,35 @@ ScrollingWindow {
             anchors.left: treeView.left
             anchors.right: treeView.right
             anchors.bottom: uploadSection.top
-            anchors.bottomMargin: hifi.dimensions.contentSpacing.y
-            spacing: hifi.dimensions.contentSpacing.x
             
             RalewayRegular {
+                anchors.verticalCenter: parent.verticalCenter
+
+                function makeText() {
+                    var numPendingBakes = assetMappingsModel.numPendingBakes;
+                    if (selectedItems > 1 || numPendingBakes === 0) {
+                        return selectedItems + " items selected";
+                    } else {
+                        return numPendingBakes + " bakes pending"
+                    }
+                }
+
                 size: hifi.fontSizes.sectionName
                 font.capitalization: Font.AllUppercase
-                text: selectedItems + " items selected"
+                text: makeText()
                 color: hifi.colors.lightGrayText
             }
 
-            HifiControls.CheckBox {
+            HifiControls.HorizontalSpacer { }
-                function isChecked() {
-                    var status = assetProxyModel.data(treeView.selection.currentIndex, 0x105);
-                    var bakingDisabled = (status === "Not Baked" || status === "--");
-                    return selectedItems === 1 && !bakingDisabled; 
-                }
 
-                text: "Use baked (optimized) versions"
+            HifiControls.CheckBox {
+                id: bakingCheckbox
+                anchors.leftMargin: 2 * hifi.dimensions.contentSpacing.x
+                anchors.verticalCenter: parent.verticalCenter
+
+                text: " Use baked version"
                 colorScheme: root.colorScheme
-                enabled: selectedItems === 1 && assetProxyModel.data(treeView.selection.currentIndex, 0x105) !== "--"
+                enabled: isEnabled()
                 checked: isChecked()
                 onClicked: {
                     var mappings = [];
@@ -752,6 +825,65 @@ ScrollingWindow {
 
                     checked = Qt.binding(isChecked);
                 }
+                
+                function isEnabled() {
+                    if (!treeView.selection.hasSelection) {
+                        return false;
+                    }
+
+                    var status = assetProxyModel.data(treeView.selection.currentIndex, 0x105);
+                    if (status === "--") {
+                        return false;
+                    }
+                    var bakingEnabled = status !== "Not Baked";
+
+                    for (var i in treeView.selection.selectedIndexes) {
+                        var thisStatus = assetProxyModel.data(treeView.selection.selectedIndexes[i], 0x105);
+                        if (thisStatus === "--") {
+                            return false;
+                        }
+                        var thisBakingEnalbed = (thisStatus !== "Not Baked");
+
+                        if (bakingEnabled !== thisBakingEnalbed) {
+                            return false;
+                        }
+                    }
+
+                    return true; 
+                }
+                function isChecked() {
+                    if (!treeView.selection.hasSelection) {
+                        return false;
+                    }
+
+                    var status = assetProxyModel.data(treeView.selection.currentIndex, 0x105);
+                    return isEnabled() && status !== "Not Baked"; 
+                }  
+            }
+            
+            Item {
+                anchors.verticalCenter: parent.verticalCenter
+                width: infoGlyph.size;
+                height: infoGlyph.size;
+
+                HiFiGlyphs {
+                    id: infoGlyph;
+                    anchors.fill: parent;
+                    horizontalAlignment: Text.AlignHCenter;
+                    verticalAlignment: Text.AlignVCenter;
+                    text: hifi.glyphs.question;
+                    size: 35;
+                    color:  hifi.colors.lightGrayText;
+                }
+                MouseArea {
+                    anchors.fill: parent;
+                    hoverEnabled: true;
+                    onEntered: infoGlyph.color = hifi.colors.blueHighlight;
+                    onExited: infoGlyph.color =  hifi.colors.lightGrayText;
+                    onClicked: letterbox(hifi.glyphs.question,
+                                            "What is baking?",
+                                            "Baking compresses and optimizes files for faster network transfer and display. We recommend you bake your content to reduce initial load times for your visitors.");
+                    }
             } 
         }
 
@@ -790,7 +922,7 @@ ScrollingWindow {
                         id: image
                         width: 24
                         height: 24
-                        source: "../images/Loading-Outer-Ring.png"
+                        source: "../../images/Loading-Outer-Ring.png"
                         RotationAnimation on rotation {
                             loops: Animation.Infinite
                             from: 0
@@ -801,7 +933,7 @@ ScrollingWindow {
                     Image {
                         width: 24
                         height: 24
-                        source: "../images/Loading-Inner-H.png"
+                        source: "../../images/Loading-Inner-H.png"
                     }
                     HifiControls.Label {
                         id: uploadProgressLabel
@@ -811,10 +943,9 @@ ScrollingWindow {
                         text: "In progress..."
                         colorScheme: root.colorScheme
                     }
-
                 }
             }
-
         }
     }
 }
+

interface/resources/qml/hifi/dialogs/TabletAssetServer.qml

@@ -17,6 +17,7 @@ import Qt.labs.settings 1.0
 import "../../styles-uit"
 import "../../controls-uit" as HifiControls
 import "../../windows"
+import ".."
 
 Rectangle {
     id: root
@@ -58,6 +59,23 @@ Rectangle {
         assetMappingsModel.autoRefreshEnabled = false;
     }
     
+    function letterbox(headerGlyph, headerText, message) {
+        letterboxMessage.headerGlyph = headerGlyph;
+        letterboxMessage.headerText = headerText;
+        letterboxMessage.text = message;
+        letterboxMessage.visible = true;
+        letterboxMessage.popupRadius = 0;
+    }
+    
+    function errorMessageBox(message) {
+        return tabletRoot.messageBox({
+            icon: hifi.icons.warning,
+            defaultButton: OriginalDialogs.StandardButton.Ok,
+            title: "Error",
+            text: message
+        });
+    }
+
     function doDeleteFile(path) {
         console.log("Deleting " + path);
 
@@ -154,10 +172,7 @@ Rectangle {
     }
 
     function handleGetMappingsError(errorString) {
-        errorMessageBox(
+        errorMessageBox("There was a problem retreiving the list of assets from your Asset Server.\n" + errorString);
-            "There was a problem retreiving the list of assets from your Asset Server.\n"
-            + errorString
-        );
     }
 
     function addToWorld() {
@@ -449,13 +464,10 @@ Rectangle {
         }
     }
     
-    function errorMessageBox(message) {
+    // The letterbox used for popup messages
-        return tabletRoot.messageBox({
+    LetterboxMessage {
-            icon: hifi.icons.warning,
+        id: letterboxMessage;
-            defaultButton: OriginalDialogs.StandardButton.Ok,
+        z: 999; // Force the popup on top of everything else
-            title: "Error",
-            text: message
-        });
     }
 
     Column {
@@ -477,7 +489,7 @@ Rectangle {
 
                 HifiControls.Button {
                     text: "Add To World"
-                    color: hifi.buttons.black
+                    color: hifi.buttons.blue
                     colorScheme: root.colorScheme
                     width: 120
 
@@ -554,7 +566,7 @@ Rectangle {
                         case "Not Baked":
                             return hifi.glyphs.circleSlash;
                         case "Baked":
-                            return hifi.glyphs.check_2_01;
+                            return hifi.glyphs.checkmark;
                         case "Error":
                             return hifi.glyphs.alert;
                         default:
@@ -583,8 +595,24 @@ Rectangle {
                                 ? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
                                 : (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
                        
-                        elide: Text.ElideRight
                         horizontalAlignment: styleData.column === 1 ? TextInput.AlignHCenter : TextInput.AlignLeft
+                        
+                        elide: Text.ElideMiddle
+
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            
+                            acceptedButtons: Qt.NoButton
+                            hoverEnabled: true
+
+                            onEntered: {
+                                if (parent.truncated) {
+                                    treeLabelToolTip.show(parent);
+                                }
+                            }
+                            onExited: treeLabelToolTip.hide();
+                        }
                     }
                 }
                 Component {
@@ -667,6 +695,42 @@ Rectangle {
                 }
             }
 
+            Rectangle {
+                id: treeLabelToolTip
+                visible: false
+                z: 100 // Render on top
+
+                width: toolTipText.width + 2 * hifi.dimensions.textPadding
+                height: hifi.dimensions.tableRowHeight
+                color: colorScheme == hifi.colorSchemes.light ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
+                border.color: colorScheme == hifi.colorSchemes.light ? hifi.colors.black : hifi.colors.lightGrayText
+
+                FiraSansSemiBold {
+                    id: toolTipText
+                    anchors.centerIn: parent
+
+                    size: hifi.fontSizes.tableText
+                    color: colorScheme == hifi.colorSchemes.light ? hifi.colors.black : hifi.colors.lightGrayText
+                }
+                
+                Timer {
+                    id: showTimer
+                    interval: 1000
+                    onTriggered: { treeLabelToolTip.visible = true; }
+                }
+                function show(item) {
+                    var coord = item.mapToItem(parent, item.x, item.y);
+
+                    toolTipText.text = item.text;
+                    treeLabelToolTip.x = coord.x - hifi.dimensions.textPadding;
+                    treeLabelToolTip.y = coord.y;
+                    showTimer.start();
+                }
+                function hide() {
+                    showTimer.stop();
+                    treeLabelToolTip.visible = false;
+                }
+            }
             
             MouseArea {
                 propagateComposedEvents: true
@@ -716,25 +780,35 @@ Rectangle {
             anchors.left: treeView.left
             anchors.right: treeView.right
             anchors.bottomMargin: hifi.dimensions.contentSpacing.y
-            spacing: hifi.dimensions.contentSpacing.x
             
             RalewayRegular {
+                anchors.verticalCenter: parent.verticalCenter
+
+                function makeText() {
+                    var numPendingBakes = assetMappingsModel.numPendingBakes;
+                    if (selectedItems > 1 || numPendingBakes === 0) {
+                        return selectedItems + " items selected";
+                    } else {
+                        return numPendingBakes + " bakes pending"
+                    }
+                }
+
                 size: hifi.fontSizes.sectionName
                 font.capitalization: Font.AllUppercase
-                text: selectedItems + " items selected"
+                text: makeText()
                 color: hifi.colors.lightGrayText
             }
 
-            HifiControls.CheckBox {
+            HifiControls.HorizontalSpacer { }
-                function isChecked() {
-                    var status = assetProxyModel.data(treeView.selection.currentIndex, 0x105);
-                    var bakingDisabled = (status === "Not Baked" || status === "--");
-                    return selectedItems === 1 && !bakingDisabled; 
-                }
 
-                text: "Use baked (optimized) versions"
+            HifiControls.CheckBox {
+                id: bakingCheckbox
+                anchors.leftMargin: 2 * hifi.dimensions.contentSpacing.x
+                anchors.verticalCenter: parent.verticalCenter
+
+                text: " Use baked version"
                 colorScheme: root.colorScheme
-                enabled: selectedItems === 1 && assetProxyModel.data(treeView.selection.currentIndex, 0x105) !== "--"
+                enabled: isEnabled()
                 checked: isChecked()
                 onClicked: {
                     var mappings = [];
@@ -750,6 +824,65 @@ Rectangle {
 
                     checked = Qt.binding(isChecked);
                 }
+                
+                function isEnabled() {
+                    if (!treeView.selection.hasSelection) {
+                        return false;
+                    }
+
+                    var status = assetProxyModel.data(treeView.selection.currentIndex, 0x105);
+                    if (status === "--") {
+                        return false;
+                    }
+                    var bakingEnabled = status !== "Not Baked";
+
+                    for (var i in treeView.selection.selectedIndexes) {
+                        var thisStatus = assetProxyModel.data(treeView.selection.selectedIndexes[i], 0x105);
+                        if (thisStatus === "--") {
+                            return false;
+                        }
+                        var thisBakingEnalbed = (thisStatus !== "Not Baked");
+
+                        if (bakingEnabled !== thisBakingEnalbed) {
+                            return false;
+                        }
+                    }
+
+                    return true; 
+                }
+                function isChecked() {
+                    if (!treeView.selection.hasSelection) {
+                        return false;
+                    }
+
+                    var status = assetProxyModel.data(treeView.selection.currentIndex, 0x105);
+                    return isEnabled() && status !== "Not Baked"; 
+                }  
+            }
+            
+            Item {
+                anchors.verticalCenter: parent.verticalCenter
+                width: infoGlyph.size;
+                height: infoGlyph.size;
+
+                HiFiGlyphs {
+                    id: infoGlyph;
+                    anchors.fill: parent;
+                    horizontalAlignment: Text.AlignHCenter;
+                    verticalAlignment: Text.AlignVCenter;
+                    text: hifi.glyphs.question;
+                    size: 35;
+                    color:  hifi.colors.lightGrayText;
+                }
+                MouseArea {
+                    anchors.fill: parent;
+                    hoverEnabled: true;
+                    onEntered: infoGlyph.color = hifi.colors.blueHighlight;
+                    onExited: infoGlyph.color =  hifi.colors.lightGrayText;
+                    onClicked: letterbox(hifi.glyphs.question,
+                                            "What is baking?",
+                                            "Baking compresses and optimizes files for faster network transfer and display. We recommend you bake your content to reduce initial load times for your visitors.");
+                    }
             } 
         }
 

interface/src/Application.cpp

@@ -6384,7 +6384,7 @@ void Application::showAssetServerWidget(QString filePath) {
     if (!DependencyManager::get<NodeList>()->getThisNodeCanWriteAssets()) {
         return;
     }
-    static const QUrl url { "AssetServer.qml" };
+    static const QUrl url { "hifi/AssetServer.qml" };
 
     auto startUpload = [=](QQmlContext* context, QObject* newObject){
         if (!filePath.isEmpty()) {

interface/src/scripting/AssetMappingsScriptingInterface.cpp

@@ -239,6 +239,7 @@ void AssetMappingModel::refresh() {
 
     connect(request, &GetAllMappingsRequest::finished, this, [this](GetAllMappingsRequest* request) mutable {
         if (request->getError() == MappingRequest::NoError) {
+            int numPendingBakes = 0;
             auto mappings = request->getMappings();
             auto existingPaths = _pathToItemMap.keys();
             for (auto& mapping : mappings) {
@@ -287,6 +288,9 @@ void AssetMappingModel::refresh() {
                     auto statusString = isFolder ? "--" : bakingStatusToString(mapping.second.status);
                     lastItem->setData(statusString, Qt::UserRole + 5);
                     lastItem->setData(mapping.second.bakingErrors, Qt::UserRole + 6);
+                    if (mapping.second.status == Pending) {
+                        ++numPendingBakes;
+                    }
                 }
 
                 Q_ASSERT(fullPath == path);
@@ -334,6 +338,11 @@ void AssetMappingModel::refresh() {
                     item = nextItem;
                 }
             }
+
+            if (numPendingBakes != _numPendingBakes) {
+                _numPendingBakes = numPendingBakes;
+                emit numPendingBakesChanged(_numPendingBakes);
+            }
         } else {
             emit errorGettingMappings(request->getErrorString());
         }

interface/src/scripting/AssetMappingsScriptingInterface.h

@@ -26,6 +26,7 @@
 class AssetMappingModel : public QStandardItemModel {
     Q_OBJECT
     Q_PROPERTY(bool autoRefreshEnabled READ isAutoRefreshEnabled WRITE setAutoRefreshEnabled)
+    Q_PROPERTY(int numPendingBakes READ getNumPendingBakes NOTIFY numPendingBakesChanged)
 
 public:
     AssetMappingModel();
@@ -38,10 +39,13 @@ public:
     bool isKnownMapping(QString path) const { return _pathToItemMap.contains(path); }
     bool isKnownFolder(QString path) const;
 
+    int getNumPendingBakes() const { return _numPendingBakes;  }
+
 public slots:
     void clear();
 
 signals:
+    void numPendingBakesChanged(int newCount);
     void errorGettingMappings(QString errorString);
     void updated();
 
@@ -50,6 +54,7 @@ private:
 
     QHash<QString, QStandardItem*> _pathToItemMap;
     QTimer _autoRefreshTimer;
+    int _numPendingBakes{ 0 };
 };
 
 Q_DECLARE_METATYPE(AssetMappingModel*)