From f93d754f15f8936441986fa04be28244af522bde Mon Sep 17 00:00:00 2001 From: RebeccaStankus Date: Thu, 15 Aug 2019 16:25:25 -0700 Subject: [PATCH] Button label characters are now images --- .../ui/qml/SimplifiedEmoteIndicator.qml | 4 +- .../qml/fuckedUpSimplifiedEmoteIndicator.qml | 158 ++++++++++++++++++ 2 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 scripts/simplifiedUI/simplifiedEmote/ui/qml/fuckedUpSimplifiedEmoteIndicator.qml diff --git a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml index b07e0cfafa..21ed427238 100644 --- a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml +++ b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml @@ -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); diff --git a/scripts/simplifiedUI/simplifiedEmote/ui/qml/fuckedUpSimplifiedEmoteIndicator.qml b/scripts/simplifiedUI/simplifiedEmote/ui/qml/fuckedUpSimplifiedEmoteIndicator.qml new file mode 100644 index 0000000000..09772e3d66 --- /dev/null +++ b/scripts/simplifiedUI/simplifiedEmote/ui/qml/fuckedUpSimplifiedEmoteIndicator.qml @@ -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); +}