From 46a8e804b368a6011c3a160ca8f82d0995138c56 Mon Sep 17 00:00:00 2001 From: RebeccaStankus Date: Thu, 15 Aug 2019 09:11:52 -0700 Subject: [PATCH] Working on tray functionality --- .../emojiApp/resources/config.json | 4 - .../emojiApp/ui/qml/SimplifiedEmoji.qml | 2 - .../ui/qml/SimplifiedEmoteIndicator.qml | 345 ++++++++++++++---- 3 files changed, 268 insertions(+), 83 deletions(-) delete mode 100644 scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/config.json diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/config.json b/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/config.json deleted file mode 100644 index bf647c4652..0000000000 --- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "baseImagesURL": "./resources/images/emojis/png1024/", - "baseImagesURL": "https://hifi-content.s3.amazonaws.com/milad/ROLC/mnt/d/ROLC_High-Fidelity/02_Organize/O_Projects/Repos/hifi-content/Prototyping/emojis/" -} diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml index d9bea305e8..10bbeb3c40 100644 --- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml +++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml @@ -222,8 +222,6 @@ Rectangle { root.isSelected = true; root.currentCode = mainModel.get(index).code.utf; } - onExited: { - } } } } diff --git a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml index 10dfa99f09..1f49014409 100644 --- a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml +++ b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml @@ -21,8 +21,15 @@ Rectangle { anchors.fill: parent property int originalWidth: 48 - property int hoveredWidth: 357 - property int requestedWidth + property int expandedWidth: 336 + property int requestedWidth: (drawerContainer.keepDrawerExpanded || + emoteIndicatorMouseArea.containsMouse || + happyButtonMouseArea.containsMouse || + sadButtonMouseArea.containsMouse || + raiseHandButtonMouseArea.containsMouse || + applaudButtonMouseArea.containsMouse || + pointButtonMouseArea.containsMouse || + emojiButtonMouseArea.containsMouse) ? expandedWidth : originalWidth; onRequestedWidthChanged: { root.requestNewWidth(root.requestedWidth); @@ -37,32 +44,8 @@ Rectangle { id: simplifiedUI } - /* - MILAD NOTE: - Right now there are some strange issues around overlapping - onEnters with mouse areas. I was having a hard time getting an individual - hover happening. Not sure if there is just one mouse menu that gives - info about what is underneath to be able to be toggle an individual icon on and off. - */ - MouseArea { - id: emoteMouseArea - anchors.fill: parent - hoverEnabled: enabled - propagateComposedEvents: true; - onEntered: { - Tablet.playSound(TabletEnums.ButtonHover); - root.requestedWidth = root.hoveredWidth; - } - onExited: { - Tablet.playSound(TabletEnums.ButtonClick); - root.requestedWidth = root.originalWidth; - } - z: 2 - } - Rectangle { id: mainEmojiContainer - z: 2 color: simplifiedUI.colors.darkBackground anchors.top: parent.top anchors.left: parent.left @@ -80,71 +63,279 @@ Rectangle { color: simplifiedUI.colors.white } - } + MouseArea { + id: emoteIndicatorMouseArea + anchors.fill: parent + hoverEnabled: enabled - /* - MILAD NOTE: - The main container of the actual buttons - */ + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + drawerContainer.keepDrawerExpanded = !drawerContainer.keepDrawerExpanded; + } + + onEntered: { + Tablet.playSound(TabletEnums.ButtonHover); + } + } + } Row { id: drawerContainer - z: 1 + property bool keepDrawerExpanded: false anchors.top: parent.top leftPadding: root.originalWidth height: parent.height - width: root.hoveredWidth + width: root.expandedWidth - /* - MILAD NOTE: - Below is one button. They are just text representations now, but - they probably be switched with Image {} to be supplied by Joshua. - */ + Rectangle { + id: happyButtonContainer + width: root.originalWidth + height: drawerContainer.height + color: simplifiedUI.colors.white - ListModel { - id: buttonsModel - ListElement { text: "Z"; method: "happyPressed" } - ListElement { text: "C"; method: "sadPressed" } - ListElement { text: "V"; method: "raiseHandPressed" } - ListElement { text: "B"; method: "applaudPressed" } - ListElement { text: "N"; method: "pointPressed" } - ListElement { text: "😊"; method: "toggleEmojiApp" } - } + HifiStylesUit.GraphikRegular { + text: "Z" + anchors.fill: parent + anchors.rightMargin: 1 + horizontalAlignment: Text.AlignHCenter + size: 26 + color: simplifiedUI.colors.text.black + } - Repeater { - id: emoteButtonsRepeater - model: buttonsModel + MouseArea { + id: happyButtonMouseArea + anchors.fill: parent - Rectangle { - z: 3 - width: root.originalWidth - height: drawerContainer.height - color: simplifiedUI.colors.white + onClicked: { hoverEnabled: enabled - HifiStylesUit.GraphikRegular { - text: model.text - z: 3 - anchors.fill: parent - anchors.rightMargin: 1 - horizontalAlignment: Text.AlignHCenter - size: 26 - color: simplifiedUI.colors.text.black + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "EmoteAppBar.qml", + "method": "happyPressed" + }); + parent.color = simplifiedUI.colors.darkBackground } - MouseArea { - id: buttonMouseArea - anchors.fill: parent - hoverEnabled: false - propagateComposedEvents: true; - z: 4 - onClicked: { - sendToScript({ - "source": "EmoteAppBar.qml", - "method": model.method - }); - } - onEntered: { - } + onEntered: { + console.log("ENTERED BUTTON"); + Tablet.playSound(TabletEnums.ButtonHover); + parent.color = simplifiedUI.colors.darkBackground + } + + onExited: { + parent.color = simplifiedUI.colors.white + } + } + } + + Rectangle { + id: sadButtonContainer + width: root.originalWidth + height: drawerContainer.height + color: simplifiedUI.colors.white + + HifiStylesUit.GraphikRegular { + text: "C" + anchors.fill: parent + anchors.rightMargin: 1 + horizontalAlignment: Text.AlignHCenter + size: 26 + color: simplifiedUI.colors.text.black + } + + MouseArea { + id: sadButtonMouseArea + anchors.fill: parent + hoverEnabled + Tablet.playSound(TabletEnu: enabled + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "EmoteAppBar.qml", + "method": "sadPressed" + }); + parent.color = simplifiedUI.colors.darkBackground + } + + onEntered: { + console.log("ENTERED BUTTON"); + Tablet.playSound(TabletEnums.ButtonHover); + parent.color = simplifiedUI.colors.darkBackground + } + + onExited: { + parent.color = simplifiedUI.colors.white + } + } + } + + Rectangle { + id: raiseHandButtonContainer + width: root.originalWidth + height: drawerContainer.height + color: simplifiedUI.colors.white + + HifiStylesUit.GraphikRegular { + text: "V" + anchors.fill: parent + anchors.rightMargin: 1 + horizontalAlignment: Text.AlignHCenter + size: 26 + color: simplifiedUI.colors.text.black + } + + MouseArea { + id: raiseHandButtonMouseArea + anchors.fill: parent + hoverEnabled: enabledTabletEnums.ButtonClick); + sendToScript({ + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "EmoteAppBar.qml", + "method": "raiseHandPressed" + }); + parent.color = simplifiedUI.colors.darkBackground + } + + onEntered: { + console.log("ENTERED BUTTON"); + Tablet.playSound(TabletEnums.ButtonHover); + parent.color = simplifiedUI.colors.darkBackground + } + + onExited: { + parent.color = simplifiedUI.colors.white + } + } + } + + Rectangle { + id: applaudButtonContainer + width: root.originalWidth + height: drawerContainer.height + color: simplifiedUI.colors.white + + HifiStylesUit.GraphikRegular { + text: "B" + anchors.fill: parent + anchors.rightMargin: 1 + horizontalAlignment: Text.AlignHCenter + size: 26 + color: simplifiedUI.colors.text.black + } + + MouseArea { + id: applaudButtonMouseArea + anchors.fill: parent + hoverEnabled: enab + "source": "EmoteAppBarled + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "EmoteAppBar.qml", + "method": "applaudPressed" + }); + parent.color = simplifiedUI.colors.darkBackground + } + + onEntered: { + console.log("ENTERED BUTTON"); + Tablet.playSound(TabletEnums.ButtonHover); + parent.color = simplifiedUI.colors.darkBackground + } + + onExited: { + parent.color = simplifiedUI.colors.white + } + } + } + + Rectangle { + id: pointButtonContainer + width: root.originalWidth + height: drawerContainer.height + color: simplifiedUI.colors.white + + HifiStylesUit.GraphikRegular { + text: "N" + anchors.fill: parent + anchors.rightMargin: 1 + horizontalAlignment: Text.AlignHCenter + size: 26 + color: simplifiedUI.colors.text.black + } + + MouseArea { + id: pointButtonMouseArea + anchors.fill: parent + hoverEnabled: enabledoteAppBar.qml", + "method": "pointPresse + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "EmoteAppBar.qml", + "method": "pointPressed" + }); + parent.color = simplifiedUI.colors.darkBackground + } + + onEntered: { + console.log("ENTERED BUTTON"); + Tablet.playSound(TabletEnums.ButtonHover); + parent.color = simplifiedUI.colors.darkBackground + } + + onExited: { + parent.color = simplifiedUI.colors.white + } + } + } + + Rectangle { + id: emojiButtonContainer + width: root.originalWidth + height: drawerContainer.height + color: simplifiedUI.colors.white + + HifiStylesUit.GraphikRegular { + text: "😊" + anchors.fill: parent + anchors.rightMargin: 1 + horizontalAlignment: Text.AlignHCenter + size: 26 + color: simplifiedUI.colors.text.black + } + + MouseArea { + id: emojiButtonMouseArea + anchors.fill: parent + hoverEnabled: enabledggleEmojiApp" + }); + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "EmoteAppBar.qml", + "method": "toggleEmojiApp" + }); + parent.color = simplifiedUI.colors.darkBackground + } + + onEntered: { + console.log("ENTERED BUTTON"); + Tablet.playSound(TabletEnums.ButtonHover); + parent.color = simplifiedUI.colors.darkBackground + } + + onExited: { + parent.color = simplifiedUI.colors.white } } }