tablet-ui: Added sortOrder property to buttons

By default user created buttons will appear after system buttons.
2025-04-08 16:12:12 +02:00 · 2017-02-02 17:07:16 -08:00 · 2017-02-02 17:07:16 -08:00 · 85e01e3922
commit 85e01e3922
parent f40285c688
16 changed files with 57 additions and 16 deletions
--- a/interface/resources/qml/hifi/tablet/Tablet.qml
+++ b/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;
--- a/interface/resources/qml/hifi/tablet/TabletButton.qml
+++ b/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
--- a/libraries/script-engine/src/TabletScriptingInterface.cpp
+++ b/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) {
--- a/libraries/script-engine/src/TabletScriptingInterface.h
+++ b/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
--- a/scripts/system/bubble.js
+++ b/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();
--- a/scripts/system/edit.js
+++ b/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
            });
        }

--- a/scripts/system/goto.js
+++ b/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
    });
 }

--- a/scripts/system/help.js
+++ b/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;
--- a/scripts/system/hmd.js
+++ b/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);
--- a/scripts/system/marketplaces/marketplaces.js
+++ b/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
    });
 }

--- a/scripts/system/menu.js
+++ b/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);
-    })
+    });
 }());
--- a/scripts/system/mute.js
+++ b/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();
--- a/scripts/system/pal.js
+++ b/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;
--- a/scripts/system/snapshot.js
+++ b/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
    });
 }

--- a/scripts/system/tablet-users.js
+++ b/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() {
--- a/scripts/system/users.js
+++ b/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
    });
 }