Removed ColorOverlay from TabletButton, added more icon & text states

Now uses separate images for each state. Now tabletButtonProxy has 4 state properties, one for icon and images.

  * icon
  * hoverIcon
  * activeIcon
  * activeHoverIcon

  * text
  * hoverText
  * activeText
  * activeHoverText

Updated scripts to set new button states, if necessary.

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

@@ -4,10 +4,14 @@ import QtGraphicalEffects 1.0
 Item {
     id: tabletButton
     property var uuid;
-    property string text: "EDIT"
+    property string icon: "icons/tablet-icons/edit-i.svg"
-    property string icon: "icons/edit-icon.svg"
+    property string hoverIcon: tabletButton.icon
-    property string activeText: tabletButton.text
     property string activeIcon: tabletButton.icon
+    property string activeHoverIcon: tabletButton.activeIcon
+    property string text: "EDIT"
+    property string hoverText: tabletButton.text
+    property string activeText: tabletButton.text
+    property string activeHoverText: tabletButton.activeText
     property bool isActive: false
     property bool inDebugMode: false
     property bool isEntered: false
@@ -25,9 +29,9 @@ Item {
 
     onIsActiveChanged: {
         if (tabletButton.isEntered) {
-            tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate";
+            tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover state";
         } else {
-            tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate";
+            tabletButton.state = (tabletButton.isActive) ? "active state" : "base state";
         }
     }
 
@@ -89,7 +93,6 @@ Item {
         id: icon
         width: 50
         height: 50
-        visible: false
         anchors.bottom: text.top
         anchors.bottomMargin: 5
         anchors.horizontalCenter: parent.horizontalCenter
@@ -97,13 +100,6 @@ Item {
         source: tabletButton.urlHelper(tabletButton.icon)
     }
 
-    ColorOverlay {
-        id: iconColorOverlay
-        anchors.fill: icon
-        source: icon
-        color: "#ffffff"
-    }
-
     Text {
         id: text
         color: "#ffffff"
@@ -166,6 +162,17 @@ Item {
                 target: glow
                 visible: true
             }
+
+            PropertyChanges {
+                target: text
+                color: "#ffffff"
+                text: tabletButton.hoverText
+            }
+
+            PropertyChanges {
+                target: icon
+                source: tabletButton.urlHelper(tabletButton.hoverIcon)
+            }
         },
         State {
             name: "active state"
@@ -188,11 +195,6 @@ Item {
                 text: tabletButton.activeText
             }
 
-            PropertyChanges {
-                target: iconColorOverlay
-                color: "#333333"
-            }
-
             PropertyChanges {
                 target: icon
                 source: tabletButton.urlHelper(tabletButton.activeIcon)
@@ -221,13 +223,13 @@ Item {
             PropertyChanges {
                 target: text
                 color: "#333333"
+                text: tabletButton.activeHoverText
             }
 
             PropertyChanges {
-                target: iconColorOverlay
+                target: icon
-                color: "#333333"
+                source: tabletButton.urlHelper(tabletButton.activeHoverIcon)
             }
-
         }
     ]
 }

libraries/script-engine/src/TabletScriptingInterface.h

@@ -227,10 +227,14 @@ protected:
 
 /**jsdoc
  * @typedef TabletButtonProxy.ButtonProperties
- * @property {string} text - button caption
  * @property {string} icon - url to button icon. (50 x 50)
- * @property {string} activeText - button caption when button is active
+ * @property {string} hoverIcon - url to button icon, displayed during mouse hover. (50 x 50)
+ * @property {string} activeHoverIcon - url to button icon used when button is active, and during mouse hover. (50 x 50)
  * @property {string} activeIcon - url to button icon used when button is active. (50 x 50)
+ * @property {string} text - button caption
+ * @property {string} hoverText - button caption when button is not-active but during mouse hover.
+ * @property {string} activeText - button caption when button is active
+ * @property {string} activeHoverText - button caption when button is active and during mouse hover.
  * @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
  */

scripts/system/bubble.js

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

scripts/system/edit.js

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

scripts/system/goto.js

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

scripts/system/help.js

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

scripts/system/hmd.js

@@ -53,14 +53,13 @@ function onHmdChanged(isHmd) {
     //TODO change button icon when the hmd changes
     if (isHmd) {
         button.editProperties({
-            icon: "icons/tablet-icons/switch-a.svg",
+            icon: "icons/tablet-icons/switch-desk-i.svg",
             text: "DESKTOP"
         });
     } else {
         button.editProperties({
-            icon: "icons/tablet-icons/switch-i.svg",
+            icon: "icons/tablet-icons/switch-vr-i.svg",
-            text: "VR",
+            text: "VR"
-            sortOrder: 2
         });
     }
     desktopOnlyViews.forEach(function (view) {
@@ -82,8 +81,8 @@ if (headset) {
         });
     } else {
         button = tablet.addButton({
-            icon: "icons/tablet-icons/switch-a.svg",
+            icon: HMD.active ? "icons/tablet-icons/switch-desk-i.svg" : "icons/tablet-icons/switch-vr-i.svg",
-            text: "SWITCH",
+            text: HMD.active ? "DESKTOP" : "VR",
             sortOrder: 2
         });
     }

scripts/system/mute.js

@@ -37,9 +37,11 @@ if (Settings.getValue("HUDUIEnabled")) {
 } else {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     button = tablet.addButton({
-        icon: "icons/tablet-icons/mic-a.svg",
+        icon: "icons/tablet-icons/mic-unmute-i.svg",
-        text: buttonName,
+        hoverIcon: "icons/tablet-icons/mic-mute-i.svg",
-        activeIcon: "icons/tablet-icons/mic-i.svg",
+        activeIcon: "icons/tablet-icons/mic-mute-a.svg",
+        activeHoverIcon: "icons/tablet-icons/mic-unmute-a.svg",
+        text: "MUTE",
         activeText: "UNMUTE",
         sortOrder: 1
     });

scripts/system/tablet-goto.js

@@ -42,6 +42,7 @@
         tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
         button = tablet.addButton({
             icon: "icons/tablet-icons/goto-i.svg",
+            activeIcon: "icons/tablet-icons/goto-a.svg",
             text: buttonName,
             sortOrder: 8
         });