diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index 7ebe63473e..8203b9f972 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -172,7 +172,9 @@ Item { var component = Qt.createComponent("TabletButton.qml"); var buttons = []; for (var i = 0; i < 5; i++) { - buttons.push(component.createObject(flowMain)); + var button = component.createObject(flowMain); + button.inDebugMode = true; + buttons.push(button); } // set button text diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index fbab9429ad..5dfef31112 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -7,7 +7,8 @@ Item { property string text: "EDIT" property string icon: "icons/edit-icon.svg" property bool isActive: false - property bool inDebugMode: true + property bool inDebugMode: false + property bool isEntered: false width: 129 height: 129 @@ -17,6 +18,14 @@ Item { tabletButton[key] = value; } + onIsActiveChanged: { + if (tabletButton.isEntered) { + tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate"; + } else { + tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate"; + } + } + Rectangle { id: buttonBg color: "#000000" @@ -51,19 +60,18 @@ Item { } DropShadow { - id: glow - visible: false - anchors.fill: parent - horizontalOffset: 0 - verticalOffset: 0 - color: "#ffffff" - radius: 20 - z: -1 - samples: 41 - source: buttonOutline + id: glow + visible: false + anchors.fill: parent + horizontalOffset: 0 + verticalOffset: 0 + color: "#ffffff" + radius: 20 + z: -1 + samples: 41 + source: buttonOutline } - Image { id: icon width: 50 @@ -102,10 +110,8 @@ Item { console.log("Tablet Button Clicked!"); if (tabletButton.inDebugMode) { if (tabletButton.isActive) { - tabletButton.state = "base state"; tabletButton.isActive = false; } else { - tabletButton.state = "active state"; tabletButton.isActive = true; } } @@ -113,6 +119,7 @@ Item { } onEntered: { console.log("Tablet Button Hovered!"); + tabletButton.isEntered = true; if (tabletButton.isActive) { tabletButton.state = "hover active state"; } else { @@ -121,6 +128,7 @@ Item { } onExited: { console.log("Tablet Button Unhovered!"); + tabletButton.isEntered = false; if (tabletButton.isActive) { tabletButton.state = "active state"; } else { diff --git a/scripts/developer/tests/tabletTest.js b/scripts/developer/tests/tabletTest.js index 8840c249bb..9920ff30b8 100644 --- a/scripts/developer/tests/tabletTest.js +++ b/scripts/developer/tests/tabletTest.js @@ -12,25 +12,22 @@ var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"); var button = tablet.addButton({ - icon: "https://s3.amazonaws.com/hifi-public/tony/icons/hat-up.svg", - color: "#ff6f6f", text: "BAM!!!" }); -// change the color and name every second... -var colors = ["#ff6f6f", "#6fff6f", "#6f6fff"]; -var names = ["BAM!", "BAM!!", "BAM!!!"]; -var colorIndex = 0; +// change the name and isActive state every second... +var names = ["BAM!", "BAM!!", "BAM!!!", "BAM!!!!"]; +var nameIndex = 0; Script.setInterval(function () { - colorIndex = (colorIndex + 1) % colors.length; + nameIndex = (nameIndex + 1) % names.length; button.editProperties({ - color: colors[colorIndex], - text: names[colorIndex] + isActive: (nameIndex & 0x1) == 0, + text: names[nameIndex] }); }, 1000); button.clicked.connect(function () { - print("AJT: BAMM!!! CLICK from JS!"); + print("AJT: BAM!!! CLICK from JS!"); }); Script.scriptEnding.connect(function () { diff --git a/scripts/system/help.js b/scripts/system/help.js index a577688032..d1be9f6e79 100644 --- a/scripts/system/help.js +++ b/scripts/system/help.js @@ -15,8 +15,6 @@ var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"); var button = tablet.addButton({ - //icon: "help.svg", - color: "#ff6f6f", text: "HELP" }); @@ -28,7 +26,7 @@ button.clicked.connect(onClicked); Script.scriptEnding.connect(function () { - tablet.removeButton(buttonName); + tablet.removeButton(button); button.clicked.disconnect(onClicked); });