Button label characters are now images

This commit is contained in:
RebeccaStankus 2019-08-15 16:25:25 -07:00
parent 2fc603b85e
commit f93d754f15
2 changed files with 160 additions and 2 deletions

View file

@ -1,4 +1,4 @@
//
//
// SimplifiedEmoteIndicator.qml
//
// Created by Milad Nazeri on 2019-08-05
@ -113,7 +113,7 @@ Rectangle {
}
MouseArea {
anchors.margins: 3
anchors.fill: parent
hoverEnabled: true
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);

View file

@ -0,0 +1,158 @@
//
// SimplifiedEmoteIndicator.qml
//
// Created by Milad Nazeri on 2019-08-05
// Based on work from Zach Fox on 2019-07-08
// Copyright 2019 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
import QtQuick 2.10
import QtQuick.Controls 2.3
import stylesUit 1.0 as HifiStylesUit
import TabletScriptingInterface 1.0
import hifi.simplifiedUI.simplifiedConstants 1.0 as SimplifiedConstants
Rectangle {
id: root
color: simplifiedUI.colors.white
anchors.fill: parent
property int originalWidth: 48
property int expandedWidth: mainEmojiContainer.width + drawerContainer.width
// For the below to work, the Repeater's Item's second child must be the individual button's `MouseArea`
property int requestedWidth: (drawerContainer.keepDrawerExpanded ||
emoteIndicatorMouseArea.containsMouse ||
emoteButtonsRepeater.itemAt(0).children[1].containsMouse ||
emoteButtonsRepeater.itemAt(1).children[1].containsMouse ||
emoteButtonsRepeater.itemAt(2).children[1].containsMouse ||
emoteButtonsRepeater.itemAt(3).children[1].containsMouse ||
emoteButtonsRepeater.itemAt(4).children[1].containsMouse ||
emoteButtonsRepeater.itemAt(5).children[1].containsMouse) ? expandedWidth : originalWidth;
onRequestedWidthChanged: {
root.requestNewWidth(root.requestedWidth);
}
Behavior on requestedWidth {
enabled: true
SmoothedAnimation { duration: 220 }
}
SimplifiedConstants.SimplifiedConstants {
id: simplifiedUI
}
Rectangle {
id: mainEmojiContainer
color: simplifiedUI.colors.darkBackground
anchors.top: parent.top
anchors.left: parent.left
height: parent.height
width: root.originalWidth
Image {
id: emoteIndicator
width: 30
height: 30
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "../../resources/images/emote_Icon.svg"
}
MouseArea {
id: emoteIndicatorMouseArea
anchors.fill: parent
hoverEnabled: enabled
onClicked: {
print("CLICKED BUTTON");
Tablet.playSound(TabletEnums.ButtonClick);
drawerContainer.keepDrawerExpanded = !drawerContainer.keepDrawerExpanded;
}
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
}
Row {
id: drawerContainer
property bool keepDrawerExpanded: false
anchors.top: parent.top
anchors.left: mainEmojiContainer.right
height: parent.height
width: childrenRect.width
Repeater {
id: emoteButtonsRepeater
model: ListModel {
id: buttonsModel
ListElement { imageURL: "../../resources/images/happy_Icon.svg"; method: "positive" }
ListElement { imageURL: "../../resources/images/sad_Icon.svg"; method: "negative" }
ListElement { imageURL: "../../resources/images/raiseHand_Icon.svg"; method: "raiseHand" }
ListElement { imageURL: "../../resources/images/clap_Icon.svg"; method: "applaud" }
ListElement { imageURL: "../../resources/images/point_Icon.svg"; method: "point" }
ListElement { imageURL: "../../resources/images/emote_Icon.svg"; method: "toggleEmojiApp" }
}
Rectangle {
width: mainEmojiContainer.width
height: drawerContainer.height
// For the below to work, the This Rectangle's second child must be the `MouseArea`
color: children[1].containsMouse ? "#CCCCCC" : simplifiedUI.colors.white
Image {
width: 30
height: 30
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: model.imageURL
}
MouseArea {
anchors.margins: 3
hoverEnabled: true
onClicked: {
print("CLICKED TRAY BUTTON");
Tablet.playSound(TabletEnums.ButtonClick);
sendToScript({
"source": "EmoteAppBar.qml",
"method": model.method
});
}
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
}
}
}
function fromScript(message) {
if (message.source !== "simplifiedEmote.js") {
return;
}
switch (message.method) {
case "updateEmoteIndicator":
if (message.data.icon) {
print("UPDATING EMOTE INDICATOR");
emoteIndicator.text = message.data.icon[0];
}
break;
default:
print("MESSAGE TO THE EMOTE INDICATOR QML RECEIVED: ", JSON.stringify(message));
console.log('SimplifiedEmoteIndicator.qml: Unrecognized message from JS');
break;
}
}
signal sendToScript(var message);
signal requestNewWidth(int newWidth);
}