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.
This commit is contained in:
Anthony J. Thibault 2017-02-13 15:09:46 -08:00
parent adc50dd30f
commit 1c783031b1
9 changed files with 44 additions and 32 deletions

View file

@ -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)
}
}
]
}

View file

@ -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
*/

View file

@ -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
});

View file

@ -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
});

View file

@ -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
});

View file

@ -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
});

View file

@ -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
});
}

View file

@ -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
});

View file

@ -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
});