tablet-ui: Added sortOrder property to buttons

By default user created buttons will appear after system buttons.

interface/resources/qml/hifi/tablet/Tablet.qml

@@ -30,6 +30,24 @@ Item {
         return -1;
     }
 
+    function sortButtons() {
+        var children = [];
+        for (var i = 0; i < flowMain.children.length; i++) {
+            children[i] = flowMain.children[i];
+        }
+
+        children.sort(function (a, b) {
+            if (a.sortOrder === b.sortOrder) {
+                // subsort by stableOrder, because JS sort is not stable in qml.
+                return a.stableOrder - b.stableOrder;
+            } else {
+                return a.sortOrder - b.sortOrder;
+            }
+        });
+
+        flowMain.children = children;
+    }
+
     // called by C++ code when a button should be added to the tablet
     function addButtonProxy(properties) {
         var component = Qt.createComponent("TabletButton.qml");
@@ -42,6 +60,9 @@ Item {
 
         // pass a reference to the tabletRoot object to the button.
         button.tabletRoot = parent.parent;
+
+        sortButtons();
+
         return button;
     }
 
@@ -221,6 +242,7 @@ Item {
             flowMain.children[index].state = state;
         }
     }
+
     function nextItem() {
         setCurrentItemState("base state");
         var nextColumnIndex = (columnIndex + 3 + 1) % 3;

interface/resources/qml/hifi/tablet/TabletButton.qml

@@ -11,6 +11,8 @@ Item {
     property bool isActive: false
     property bool inDebugMode: false
     property bool isEntered: false
+    property double sortOrder: 100
+    property int stableOrder: 0
     property var tabletRoot;
     width: 129
     height: 129

libraries/script-engine/src/TabletScriptingInterface.cpp

@@ -388,10 +388,13 @@ QQuickItem* TabletProxy::getQmlMenu() const {
 //
 
 const QString UUID_KEY = "uuid";
+const QString STABLE_ORDER_KEY = "stableOrder";
+static int s_stableOrder = 1;
 
-TabletButtonProxy::TabletButtonProxy(const QVariantMap& properties) : _uuid(QUuid::createUuid()), _properties(properties) {
+TabletButtonProxy::TabletButtonProxy(const QVariantMap& properties) : _uuid(QUuid::createUuid()), _stableOrder(++s_stableOrder), _properties(properties) {
     // this is used to uniquely identify this button.
     _properties[UUID_KEY] = _uuid;
+    _properties[STABLE_ORDER_KEY] = _stableOrder;
 }
 
 void TabletButtonProxy::setQmlButton(QQuickItem* qmlButton) {

libraries/script-engine/src/TabletScriptingInterface.h

@@ -194,6 +194,7 @@ signals:
 
 protected:
     QUuid _uuid;
+    int _stableOrder;
     mutable std::mutex _mutex;
     QQuickItem* _qmlButton { nullptr };
     QVariantMap _properties;
@@ -206,6 +207,7 @@ protected:
  * @property {string} activeText - button caption when button is active
  * @property {string} activeIcon - url to button icon used when button is active. (50 x 50)
  * @property {string} isActive - true when button is active.
+ * @property {number} sortOrder - determines sort order on tablet.  lower numbers will appear before larger numbers.  default is 100
  */
 
 #endif // hifi_TabletScriptingInterface_h

scripts/system/bubble.js

@@ -177,7 +177,8 @@
         var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
         button = tablet.addButton({
             icon: "icons/tablet-icons/bubble-i.svg",
-            text: buttonName
+            text: buttonName,
+            sortOrder: 4
         });
     }
     onBubbleToggled();

scripts/system/edit.js

@@ -253,7 +253,8 @@ var toolBar = (function () {
             tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
             activeButton = tablet.addButton({
                 icon: "icons/tablet-icons/edit-i.svg",
-                text: "EDIT"
+                text: "EDIT",
+                sortOrder: 10
             });
         }
 

scripts/system/goto.js

@@ -39,7 +39,8 @@ if (Settings.getValue("HUDUIEnabled")) {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     button = tablet.addButton({
         icon: "icons/tablet-icons/goto-i.svg",
-        text: buttonName
+        text: buttonName,
+        sortOrder: 8
     });
 }
 

scripts/system/help.js

@@ -30,7 +30,8 @@
         tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
         button = tablet.addButton({
             icon: "icons/tablet-icons/help-i.svg",
-            text: buttonName
+            text: buttonName,
+            sortOrder: 6
         });
     }
     var enabled = false;

scripts/system/hmd.js

@@ -59,7 +59,8 @@ function onHmdChanged(isHmd) {
     } else {
         button.editProperties({
             icon: "icons/tablet-icons/switch-i.svg",
-            text: "VR"
+            text: "VR",
+            sortOrder: 2
         });
     }
     desktopOnlyViews.forEach(function (view) {
@@ -82,7 +83,8 @@ if (headset) {
     } else {
         button = tablet.addButton({
             icon: "icons/tablet-icons/switch-a.svg",
-            text: "SWITCH"
+            text: "SWITCH",
+            sortOrder: 2
         });
     }
     onHmdChanged(HMD.active);

scripts/system/marketplaces/marketplaces.js

@@ -132,7 +132,8 @@ if (Settings.getValue("HUDUIEnabled")) {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     marketplaceButton = tablet.addButton({
         icon: "icons/tablet-icons/market-i.svg",
-        text: "MARKET"
+        text: "MARKET",
+        sortOrder: 9
     });
 }
 

scripts/system/menu.js

@@ -14,10 +14,10 @@ var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-butt
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/menu-i.svg",
-        text: "MENU"
+        text: "MENU",
+        sortOrder: 3
     });
 
-  
     function onClicked() {
         var entity = HMD.tabletID;
         Entities.editEntity(entity, {textures: JSON.stringify({"tex.close": HOME_BUTTON_TEXTURE})});
@@ -29,5 +29,5 @@ var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-butt
     Script.scriptEnding.connect(function () {
         button.clicked.disconnect(onClicked);
         tablet.removeButton(button);
-    })
+    });
 }());

scripts/system/mute.js

@@ -40,7 +40,8 @@ if (Settings.getValue("HUDUIEnabled")) {
         icon: "icons/tablet-icons/mic-a.svg",
         text: buttonName,
         activeIcon: "icons/tablet-icons/mic-i.svg",
-        activeText: "UNMUTE"
+        activeText: "UNMUTE",
+        sortOrder: 1
     });
 }
 onMuteToggled();

scripts/system/pal.js

@@ -493,7 +493,8 @@ if (Settings.getValue("HUDUIEnabled")) {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     button = tablet.addButton({
         text: buttonName,
-        icon: "icons/tablet-icons/people-i.svg"
+        icon: "icons/tablet-icons/people-i.svg",
+        sortOrder: 7
     });
 }
 var isWired = false;

scripts/system/snapshot.js

@@ -36,7 +36,8 @@ if (Settings.getValue("HUDUIEnabled")) {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     button = tablet.addButton({
         icon: "icons/tablet-icons/snap-i.svg",
-        text: buttonName
+        text: buttonName,
+        sortOrder: 5
     });
 }
 

scripts/system/tablet-users.js

@@ -35,7 +35,8 @@
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/people-i.svg",
-        text: "Users"
+        text: "USERS",
+        sortOrder: 11
     });
 
     function onClicked() {

scripts/system/users.js

@@ -33,7 +33,8 @@ if (Settings.getValue("HUDUIEnabled")) {
     button = tablet.addButton({
         icon: "icons/tablet-icons/users-i.svg",
         text: "USERS",
-        isActive: Menu.isOptionChecked(MENU_ITEM)
+        isActive: Menu.isOptionChecked(MENU_ITEM),
+        sortOrder: 11
     });
 }