From 1c783031b134284d66883f8f22e1ae63212c1b6c Mon Sep 17 00:00:00 2001 From: "Anthony J. Thibault" Date: Mon, 13 Feb 2017 15:09:46 -0800 Subject: [PATCH] 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. --- .../qml/hifi/tablet/TabletButton.qml | 44 ++++++++++--------- .../src/TabletScriptingInterface.h | 8 +++- scripts/system/bubble.js | 1 + scripts/system/edit.js | 1 + scripts/system/goto.js | 1 + scripts/system/help.js | 1 + scripts/system/hmd.js | 11 +++-- scripts/system/mute.js | 8 ++-- scripts/system/tablet-goto.js | 1 + 9 files changed, 44 insertions(+), 32 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 945d2769dd..5e7e0f5709 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/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/edit-icon.svg" - property string activeText: tabletButton.text + property string icon: "icons/tablet-icons/edit-i.svg" + property string hoverIcon: tabletButton.icon 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 - color: "#333333" + target: icon + source: tabletButton.urlHelper(tabletButton.activeHoverIcon) } - } ] } diff --git a/libraries/script-engine/src/TabletScriptingInterface.h b/libraries/script-engine/src/TabletScriptingInterface.h index 93f5bcf6ba..9986fc78b0 100644 --- a/libraries/script-engine/src/TabletScriptingInterface.h +++ b/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 */ diff --git a/scripts/system/bubble.js b/scripts/system/bubble.js index 87043ccc8a..ff262e3d6e 100644 --- a/scripts/system/bubble.js +++ b/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 }); diff --git a/scripts/system/edit.js b/scripts/system/edit.js index f8cce6a544..c92e1305f1 100644 --- a/scripts/system/edit.js +++ b/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 }); diff --git a/scripts/system/goto.js b/scripts/system/goto.js index 092abd0369..0e09ea3d79 100644 --- a/scripts/system/goto.js +++ b/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 }); diff --git a/scripts/system/help.js b/scripts/system/help.js index 19c4b04363..4e7788a758 100644 --- a/scripts/system/help.js +++ b/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 }); diff --git a/scripts/system/hmd.js b/scripts/system/hmd.js index c755454fbb..3493215ba3 100644 --- a/scripts/system/hmd.js +++ b/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", - text: "VR", - sortOrder: 2 + icon: "icons/tablet-icons/switch-vr-i.svg", + text: "VR" }); } desktopOnlyViews.forEach(function (view) { @@ -82,8 +81,8 @@ if (headset) { }); } else { button = tablet.addButton({ - icon: "icons/tablet-icons/switch-a.svg", - text: "SWITCH", + icon: HMD.active ? "icons/tablet-icons/switch-desk-i.svg" : "icons/tablet-icons/switch-vr-i.svg", + text: HMD.active ? "DESKTOP" : "VR", sortOrder: 2 }); } diff --git a/scripts/system/mute.js b/scripts/system/mute.js index f28a2eb9a5..822a8f127a 100644 --- a/scripts/system/mute.js +++ b/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", - text: buttonName, - activeIcon: "icons/tablet-icons/mic-i.svg", + icon: "icons/tablet-icons/mic-unmute-i.svg", + hoverIcon: "icons/tablet-icons/mic-mute-i.svg", + activeIcon: "icons/tablet-icons/mic-mute-a.svg", + activeHoverIcon: "icons/tablet-icons/mic-unmute-a.svg", + text: "MUTE", activeText: "UNMUTE", sortOrder: 1 }); diff --git a/scripts/system/tablet-goto.js b/scripts/system/tablet-goto.js index 1a3fbab3ea..5283df6127 100644 --- a/scripts/system/tablet-goto.js +++ b/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 });